/* 2026-10-05 cache refresh */
/* Inner pages in the fashion-house register (2026-09-25, Kamil's round on Advertisers, About and Contact).
   Loads after confident.css on every page except home. Tiffany #81D8D0 is too light to read as text on the grey
   ground (1.3:1), so text set "in our colour" uses --tiffany-text: the deepest Tiffany that still passes for large
   type (3.6:1 on #E2E0E1). On dark planes the true Tiffany is used. */

:root { --tiffany-text: #81d8d0; --frame: color-mix(in srgb, var(--ink) 24%, var(--paper-soft)) }
:root[data-theme=dark] { --tiffany-text: #81d8d0 }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --tiffany-text: #81d8d0 } }

/* Product stills: same series as the homepage, faded into the page grey */
.page-still { margin: 0 }
.page-still img { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%) }

/* A framed plane: light grey, double hairline, never the loudest thing on the page (as the homepage routes) */
.framed-route { display: flex; flex-direction: column; min-height: 300px; padding: 44px 44px 36px; color: var(--ink); background: var(--paper-soft);
  border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line) }
.framed-route .route-title { font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--font-serif); letter-spacing: -.01em }
.framed-route p { margin-top: 18px; max-width: 440px; font-size: 17px; color: var(--muted) }
.framed-route strong { margin-top: auto; padding: 32px 0 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid currentColor; font-weight: 500; font-size: 15px }
.framed-route .arrow { color: #81d8d0; transition: transform .18s cubic-bezier(.23, 1, .32, 1) }
/* Same as the homepage routes (Kamil 2026-10-05): the plane lifts a touch, its outer rule darkens, the title turns Tiffany. */
.framed-route { transition: transform .4s cubic-bezier(.23, 1, .32, 1), border-color .2s ease }
.framed-route .route-title { transition: color .25s ease }
.framed-route:focus-visible { transform: scale(1.02); border-color: var(--ink) }
.framed-route:focus-visible .route-title { color: #81d8d0 }
@media (hover: hover) and (pointer: fine) { .framed-route:hover { transform: scale(1.02); border-color: var(--ink) } .framed-route:hover .route-title { color: #81d8d0 } .framed-route:hover .arrow { transform: translate(3px, -3px) } }
.framed-route:active { transform: scale(1.01) }

/* Advertisers: the headline shares its row with a still, so the right side is no longer empty */
.buyer-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-block: 48px 72px }
.buyer-hero h1 { font-size: clamp(60px, 7vw, 108px) }
.buyer-lead { font: 400 clamp(24px, 2.2vw, 30px)/1.3 var(--font-serif); color: var(--ink); margin: 32px 0 20px }
.buyer-copy > p:not(.buyer-lead) { max-width: 520px; color: var(--muted); margin-bottom: 28px }

/* Advertisers: "What do you want to grow?" and "Your offer. Our execution." are one framed ledger in two parts,
   same grid and type, parted by a hairline with a Tiffany mark (Kamil 2026-09-25: no grey slab, two joined tables). */
.adv-ledger { padding-bottom: 96px }
.ledger-frame { background: var(--paper-soft); border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line) }
.ledger { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; padding: 64px 64px 56px }
.ledger-title h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.06 }
.ledger-title p { margin-top: 22px; max-width: 330px; font: italic 400 clamp(24px, 1.9vw, 26px)/1.35 var(--font-serif); color: var(--ink) }
.ledger-title p span { padding: 0 2px; background: linear-gradient(transparent 58%, rgba(129, 216, 208, .75) 58%, rgba(129, 216, 208, .75) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone }
.ledger-rows article { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; padding: 24px 0; border-top: 1px solid var(--line) }
.ledger-rows article:first-child { padding-top: 6px; border-top: 0 }
.ledger-rows h3 { font: 400 clamp(22px, 1.9vw, 27px)/1.2 var(--font-serif) }
.ledger-rows p { font-size: 16px; color: var(--muted) }
.ledger-rows span { display: block; margin-top: 12px; font: 500 11px/1.4 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted) }
.ledger-divider { position: relative; height: 1px; margin: 0 64px; background: var(--frame) }
.ledger-divider span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 18px; background: var(--paper-soft); font: 300 26px/1 var(--font-serif); color: var(--tiffany-text) }

/* About: centred opening, a still beside the statement, three pillars, the five brands in pictures,
   two framed routes, a small colophon. Smaller type than the offer pages, more air. */
.about-intro { text-align: center; max-width: 1000px; padding-block: 56px 36px }
.about-intro h1 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.08; letter-spacing: -.02em }
.about-intro h1 em { font-style: italic }
.about-lead { font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--font-serif); color: var(--muted); max-width: 560px; margin: 26px auto 0 }
.about-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding-block: 16px 88px }
.about-note { font: 400 clamp(24px, 2.3vw, 32px)/1.35 var(--font-serif); color: var(--ink); max-width: 520px }
.about-crafts { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--line); max-width: 520px }
.about-crafts li { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em }
.about-crafts span { width: 40px; font: italic 400 24px/1 var(--font-serif); letter-spacing: 0; text-transform: none; color: #81d8d0 }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 96px }
.about-pillars article { padding: 26px 32px 0 0; border-top: 1px solid var(--ink) }
.about-pillars article + article { padding-left: 32px; border-left: 1px solid var(--line) }
.about-pillars span { font: 500 12px/1 var(--font-display); letter-spacing: .16em; color: var(--muted) }
.about-pillars h2 { font: italic 400 clamp(28px, 2.6vw, 38px)/1.1 var(--font-serif); margin: 18px 0 14px }
.about-pillars p { max-width: 330px; font-size: 16px; color: var(--muted) }
/* How we work (on About): the heading, then six steps in two rows of three */
.about-how { padding-bottom: 40px }
.hw-steps { row-gap: 56px }
.hw-steps article:nth-child(3n+1) { padding-left: 0; border-left: 0 }
/* Kamil 2026-10-05: the step numerals in Tiffany, the step names underlined in Tiffany. */
.hw-steps span { color: #81d8d0 }
.hw-steps h2 { text-decoration: underline; text-decoration-color: #81d8d0; text-decoration-thickness: 2px; text-underline-offset: 7px }
.about-brands { padding-bottom: 96px }
.about-brands-head { display: flex; justify-content: space-between; align-items: end; gap: 40px }
.about-brands h2, .about-routes h2, .about-how h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.06 }
.about-brands h2 em, .about-routes h2 em, .about-how h2 em { font-style: italic }
.about-brands-head p { max-width: 340px; color: var(--muted) }
.about-brands ul { list-style: none; padding: 0; margin: 36px 0 30px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px }
.about-brands li a { display: block; color: var(--ink) }
.about-brand-visual { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface) }
.about-brand-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.23, 1, .32, 1) }
.about-brands h3 { font: 400 20px/1.2 var(--font-serif); margin: 14px 0 6px; overflow-wrap: anywhere }
.about-brands li span { font: 500 11px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted) }
@media (hover: hover) and (pointer: fine) { .about-brands li a:hover img { transform: scale(1.03) } }
.about-routes { padding-bottom: 96px }
.about-routes > div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px }
.about-routes .kicker { font-size: 12px }
.company-record { display: block; text-align: center; border-top: 1px solid var(--line); padding-block: 52px 72px }
.company-record h2 { font: 500 13px/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em }
.company-record dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1040px; margin: 30px auto 0 }
.company-record dt { font: 500 11px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 10px }
.company-record dd { font-size: 15px }

/* Contact: the invitation and the address in italic Tiffany; the registered office steps down in size */
/* Contact: the headline and the form start on the same line, so the form sits at the top of the page. */
.contact-top { padding-top: 64px; align-items: start; grid-template-areas: "hero form" "aside form"; grid-template-rows: auto 1fr; row-gap: 0 }
.contact-top > .contact-hero { grid-area: hero } .contact-top > .contact-aside { grid-area: aside } .contact-top > form, .contact-top > .enquiry-result { grid-area: form }
.contact-top .page-hero { padding: 0 0 48px }
.contact-top form { margin-top: 64px }
.contact-hero .intro { max-width: 760px }
/* Contact invitation: black italic over a Tiffany highlighter band (Kamil 2026-10-05; plain Tiffany text was too pale on the grey). */
.contact-hero .intro em { font: italic 400 clamp(24px, 2.2vw, 30px)/1.35 var(--font-serif); color: var(--ink); padding: 0 2px; background: linear-gradient(transparent 58%, rgba(129, 216, 208, .75) 58%, rgba(129, 216, 208, .75) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone }
.contact-aside .email-link { font: italic 400 clamp(24px, 2.2vw, 30px)/1.3 var(--font-serif); color: var(--ink); transition: color .2s; border-bottom: 0; text-decoration: none; overflow-wrap: anywhere }
/* Email: plain ink italic, the whole address Tiffany on hover, as the footer email (Kamil 2026-10-05). */
.contact-aside .email-link:hover, .contact-aside .email-link:focus-visible { color: #81d8d0 }
.contact-aside p { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 380px }
@media (max-width: 700px) { .contact-top { padding-top: 36px; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "hero" "form" "aside" } .contact-top > .contact-aside { margin-top: 24px } .contact-top .page-hero { padding-bottom: 32px } .contact-top form { margin-top: 0 } }
.contact-aside address { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 40px }

/* Partners: the black stage and the black terms band become light framed planes, like the rest of the site
   (Kamil 2026-09-25: "zmiękczaj"). Example creative keeps white paper; its buttons turn Tiffany. */
.publisher-stage, .partner-agreement { background: var(--paper-soft); color: var(--ink); border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line) }
.publisher-stage { padding: 52px 52px 36px }
.stage-edition { background: #fff; color: #171717 }
.stage-note > span { color: var(--ink); font-family: var(--font-serif) }
.stage-note a { color: #81d8d0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transform-origin: left center; transition: transform .25s cubic-bezier(.23, 1, .32, 1) }
/* Hover/focus: the link grows a touch and its arrow moves, like the framed routes (Kamil 2026-10-05). */
.stage-note a:hover, .stage-note a:focus-visible { transform: scale(1.08) }
.stage-note a:hover .arrow, .stage-note a:focus-visible .arrow { transform: translate(3px, -3px) }
/* Sample CTAs in the mock ads: the same small lift on hover. */
a.sample-action { display: inline-flex; transition: transform .25s cubic-bezier(.23, 1, .32, 1), color .2s }
a.sample-action:hover, a.sample-action:focus-visible { transform: scale(1.04) }
.edition-placement a.sample-action:hover, .sample-display a.sample-action:hover, .edition-placement a.sample-action:focus-visible, .sample-display a.sample-action:focus-visible { color: #111; text-decoration: none }
.sample-email-letter a.sample-action:hover { color: #81d8d0 }
@media (prefers-reduced-motion: reduce) { .stage-note a, a.sample-action, a.native-link { transition: none } .stage-note a:hover, a.sample-action:hover, a.native-link:hover { transform: none } }
.sample-action { background: var(--tiffany); color: #111; font: 500 11px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em }
.sample-email-letter .sample-action { background: none }
.partner-agreement { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto 96px; padding: 64px }
.partner-agreement h2 span { color: var(--ink); font-style: italic }
.partner-agreement p { color: var(--muted) }
.partner-agreement ul { color: var(--ink); list-style: none; padding: 0 }
.partner-agreement li { padding: 14px 0; border-bottom: 1px solid var(--line) }
.partner-agreement li::before { content: '+'; margin-right: 14px; font-family: var(--font-serif); color: #81d8d0 }
/* The partner film's play/pause sits inside the picture, in the same tracked caps as the homepage film. */
.partner-film .film-control { transform: none; left: 12px; bottom: 12px; min-height: 32px; padding: 8px 12px; border: 0; background: color-mix(in srgb, var(--paper-soft) 92%, transparent); color: var(--ink); font: 500 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .18em; cursor: pointer }
@media (hover: hover) and (pointer: fine) { .partner-film .film-control:hover { background: var(--paper-soft); text-decoration: underline; text-decoration-color: var(--tiffany); text-underline-offset: 4px } }

@media (max-width: 1000px) {
  .ledger { grid-template-columns: 1fr; gap: 32px; padding: 52px 44px 44px } .ledger-divider { margin-inline: 44px }
  .buyer-hero, .about-studio { gap: 40px }
  .about-brands ul { grid-template-columns: repeat(3, 1fr) }
  .company-record dl { grid-template-columns: 1fr 1fr }
}
@media (max-width: 700px) {
  .publisher-stage { padding: 30px 22px 24px } .partner-agreement { padding: 40px 26px; margin-bottom: 64px }
  .adv-ledger { padding-bottom: 64px } .ledger { padding: 40px 26px 32px } .ledger-divider { margin-inline: 26px }
  .ledger-rows article { grid-template-columns: 1fr; gap: 10px }
  .buyer-hero { grid-template-columns: 1fr; padding-block: 36px 48px }
  .buyer-hero .page-still img { max-width: 340px }
  .about-intro { padding-block: 36px 20px }
  .about-studio { grid-template-columns: 1fr; padding-bottom: 56px }
  .about-studio .page-still img { max-width: 320px }
  .about-pillars { grid-template-columns: 1fr; margin-bottom: 64px }
  .about-pillars article, .about-pillars article + article { padding: 22px 0 24px; border-left: 0 }
  .about-brands, .about-routes { padding-bottom: 64px }
  .about-brands-head { display: block } .about-brands-head p { margin-top: 14px }
  .about-brands ul { grid-template-columns: 1fr 1fr; gap: 24px 16px }
  .about-brands h3 { font-size: 15px; overflow-wrap: normal }
  .about-routes > div { grid-template-columns: 1fr }
  .framed-route { padding: 34px 28px 28px; min-height: 0 }
  .company-record dl { grid-template-columns: 1fr; gap: 22px }
}
@media (prefers-reduced-motion: reduce) { .about-brand-visual img, .framed-route .arrow, .framed-route { transition: none } .framed-route:hover, .framed-route:focus-visible, .framed-route:active { transform: none } }
/* Partners samples: the calls to action are real links to TopQuotesHero (Kamil 2026-10-05: they looked clickable but were not). */
a.native-link, a.sample-action { cursor: pointer; text-decoration: none }
a.native-link { display: inline-flex; align-items: center; gap: 8px; transform-origin: left center; transition: transform .25s cubic-bezier(.23, 1, .32, 1) }
a.native-link:hover, a.native-link:focus-visible { transform: scale(1.06) }
a.native-link:hover, a.native-link:focus-visible, .sample-email-letter a.sample-action:hover { text-decoration: underline; text-decoration-color: #81d8d0; text-decoration-thickness: 2px; text-underline-offset: 5px }

/* Partners: the affiliate path in four steps (Kamil 2026-10-05): you run the ad, the click lands on our brand, they convert,
   you get paid. One framed plane like the homepage path; numerals light up in Tiffany in turn; each step has a real fragment. */
.publisher-stage.pf { display: block; padding: 56px 52px 48px }
.pf-title { font: 400 clamp(32px, 3.2vw, 48px)/1.08 var(--font-serif); letter-spacing: -.015em; margin-bottom: 44px }
.pf-title em { font-style: italic }
.pf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px }
.pf-steps li { display: flex; flex-direction: column }
.pf-n { font: italic 400 clamp(30px, 2.6vw, 40px)/1 var(--font-serif); color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) }
.pf-steps h3 { font: 400 clamp(20px, 1.6vw, 24px)/1.15 var(--font-serif); margin: 14px 0 10px }
.pf-steps p { font-size: 15px; line-height: 1.55; color: var(--muted); margin-bottom: 20px }
.pf-vis { margin-top: auto; background: #fff; box-shadow: 0 0 0 1px #e3e1dd; padding: 14px; height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 10px }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px } .pf-chips b { font: 500 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; box-shadow: inset 0 0 0 1px #d6d4d0; color: #444 }
.pf-ad { display: flex; gap: 10px; align-items: center; border-top: 2px solid #81d8d0; padding-top: 10px } .pf-ad img { width: 64px; height: 48px; object-fit: cover } .pf-ad small, .pf-pay small { display: block; font: 500 9px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #6f6d6a; margin-bottom: 5px } .pf-ad strong { font: 400 15px/1.2 var(--font-serif) }
.pf-page img { height: 15px; display: block } .pf-page strong { display: block; font: 400 16px/1.2 var(--font-serif); margin: 10px 0 10px } .pf-field { display: block; font-size: 12px; color: #888; box-shadow: inset 0 0 0 1px #d6d4d0; padding: 8px 10px; margin-bottom: 8px } .pf-btn { display: block; text-align: center; background: #81d8d0; color: #111; font: 500 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 10px }
.pf-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eeece9 } .pf-row:last-child { border-bottom: 0 } .pf-row svg { width: 20px; height: 20px; color: #81d8d0; flex: none } .pf-row strong { display: block; font: 400 15px/1.2 var(--font-serif) } .pf-row small { font-size: 11px; color: #6f6d6a }
.pf-pay { text-align: left } .pf-pay strong { display: block; font: 400 22px/1.15 var(--font-serif); padding: 6px 0 8px; border-bottom: 2px solid #81d8d0; margin-bottom: 8px } .pf-pay span { font-size: 12px; color: #6f6d6a }
.pf-steps li:nth-of-type(1) .pf-n { animation: pf-1 10s ease-in-out infinite } .pf-steps li:nth-of-type(2) .pf-n { animation: pf-2 10s ease-in-out infinite }
.pf-steps li:nth-of-type(3) .pf-n { animation: pf-3 10s ease-in-out infinite } .pf-steps li:nth-of-type(4) .pf-n { animation: pf-4 10s ease-in-out infinite }
@keyframes pf-1 { 0%, 2% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 6%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes pf-2 { 0%, 20% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 24%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes pf-3 { 0%, 38% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 42%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@keyframes pf-4 { 0%, 56% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } 60%, 90% { color: #81d8d0 } 96%, 100% { color: color-mix(in srgb, var(--ink) 22%, var(--paper-soft)) } }
@media (prefers-reduced-motion: reduce) { .pf-n { animation: none !important; color: #81d8d0 } }
@media (max-width: 1100px) { .pf-steps { grid-template-columns: 1fr 1fr; gap: 36px 28px } }
@media (max-width: 700px) { .pf-vis { height: auto; min-height: 130px } .publisher-stage.pf { padding: 36px 22px 30px } .pf-title { margin-bottom: 30px } .pf-steps { grid-template-columns: 1fr } }

/* Partners path in motion (Kamil 2026-10-05: it must stand out, modern and dynamic). One 10 s clock: a Tiffany line runs
   across the four steps, the active card lifts with a Tiffany top rule, and each card plays its own moment - the channels
   light up, the ZIP types itself and the button answers, the conversions tick in, the commission is marked paid. */
.pf-steps { position: relative }
.pf-line { position: absolute; left: 0; right: 0; top: -18px; height: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent) }
.pf-line::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: #81d8d0; animation: pf-run 10s cubic-bezier(.45, 0, .3, 1) infinite }
@keyframes pf-run { 0% { width: 0 } 58% { width: 100% } 90% { width: 100%; opacity: 1 } 97%, 100% { width: 100%; opacity: 0 } }
.pf-vis { position: relative; transition: none; border-top: 2px solid transparent }
.pf-steps li:nth-of-type(1) .pf-vis { animation: pf-a1 10s ease infinite } .pf-steps li:nth-of-type(2) .pf-vis { animation: pf-a2 10s ease infinite }
.pf-steps li:nth-of-type(3) .pf-vis { animation: pf-a3 10s ease infinite } .pf-steps li:nth-of-type(4) .pf-vis { animation: pf-a4 10s ease infinite }
@keyframes pf-a1 { 0%, 1% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } 5%, 20% { transform: translateY(-8px); border-top-color: #81d8d0; box-shadow: 0 0 0 1px #e3e1dd, 0 18px 30px -18px rgba(0,0,0,.35) } 25%, 100% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } }
@keyframes pf-a2 { 0%, 19% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } 23%, 38% { transform: translateY(-8px); border-top-color: #81d8d0; box-shadow: 0 0 0 1px #e3e1dd, 0 18px 30px -18px rgba(0,0,0,.35) } 43%, 100% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } }
@keyframes pf-a3 { 0%, 37% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } 41%, 56% { transform: translateY(-8px); border-top-color: #81d8d0; box-shadow: 0 0 0 1px #e3e1dd, 0 18px 30px -18px rgba(0,0,0,.35) } 61%, 100% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } }
@keyframes pf-a4 { 0%, 55% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } 59%, 88% { transform: translateY(-8px); border-top-color: #81d8d0; box-shadow: 0 0 0 1px #e3e1dd, 0 18px 30px -18px rgba(0,0,0,.35) } 94%, 100% { transform: none; border-top-color: transparent; box-shadow: 0 0 0 1px #e3e1dd } }
/* I: channels light up one by one, the ad rises in */
.pf-chips b { animation: pf-chip 10s linear infinite } .pf-chips b:nth-child(2) { animation-delay: .35s } .pf-chips b:nth-child(3) { animation-delay: .7s } .pf-chips b:nth-child(4) { animation-delay: 1.05s } .pf-chips b:nth-child(5) { animation-delay: 1.4s }
@keyframes pf-chip { 0%, 3% { background: transparent; color: #444 } 5%, 22% { background: #81d8d0; color: #111; box-shadow: inset 0 0 0 1px #81d8d0 } 26%, 100% { background: transparent; color: #444 } }
.pf-ad { animation: pf-ad 10s ease infinite } @keyframes pf-ad { 0%, 6% { opacity: .35; transform: translateY(6px) } 12%, 100% { opacity: 1; transform: none } }
/* II: the ZIP types itself, the button answers */
.pf-field { position: relative } .pf-type { font-style: normal; color: #171717; display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; border-right: 1.5px solid #171717; animation: pf-typing 10s steps(5) infinite, pf-caret 10s linear infinite }
@keyframes pf-typing { 0%, 23% { width: 0 } 31%, 92% { width: 5.2ch } 97%, 100% { width: 0 } }
@keyframes pf-caret { 0%, 22%, 33%, 100% { border-right-color: transparent } 23%, 32% { border-right-color: #171717 } }
.pf-btn { animation: pf-press 10s ease infinite } @keyframes pf-press { 0%, 32% { transform: none; filter: none } 34% { transform: scale(.96); filter: brightness(.9) } 37%, 100% { transform: none; filter: none } }
/* III: conversions tick in */
.pf-row { animation: pf-in 10s ease infinite } .pf-row + .pf-row { animation-name: pf-in2 }
@keyframes pf-in { 0%, 41% { opacity: .45; transform: translateX(-6px) } 45%, 100% { opacity: 1; transform: none } }
@keyframes pf-in2 { 0%, 47% { opacity: .45; transform: translateX(-6px) } 51%, 100% { opacity: 1; transform: none } }
/* IV: paid */
.pf-paid { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #111; background: #81d8d0; padding: 6px 9px; align-self: flex-start; animation: pf-stamp 10s cubic-bezier(.3, 1.5, .5, 1) infinite }
.pf-paid svg { width: 12px; height: 12px } .pf-pay { display: flex; flex-direction: column }
@keyframes pf-stamp { 0%, 62% { opacity: 0; transform: scale(1.6) rotate(-6deg) } 66%, 90% { opacity: 1; transform: none } 96%, 100% { opacity: 0; transform: none } }
@media (prefers-reduced-motion: reduce) { .pf-line::after, .pf-vis, .pf-chips b, .pf-ad, .pf-type, .pf-btn, .pf-row, .pf-paid { animation: none !important } .pf-line::after { width: 100% } .pf-type { width: 5.2ch; border-right: 0 } .pf-paid { opacity: 1 } }
@media (max-width: 1100px) { .pf-line { display: none } }

/* Partners path on a Mac (Kamil 2026-10-05: an Apple-style computer, not a phone). One 12 s clock: a Safari window walks the
   path - our ad on the partner's own media, our page with the ZIP typing itself, the quote confirmed, the commission
   arriving as a macOS notification - while the matching step on the left lights up. */
.publisher-stage.pi { display: grid; grid-template-columns: minmax(300px, .78fr) 1.22fr; gap: 56px; align-items: center; padding: 56px 56px }
.pi-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid }
.pi-steps li { display: grid; grid-template-columns: 50px 1fr; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); opacity: .42; animation: pi-step 12s ease infinite }
.pi-steps li:nth-child(2) { animation-delay: 3s } .pi-steps li:nth-child(3) { animation-delay: 6s } .pi-steps li:nth-child(4) { animation-delay: 9s }
@keyframes pi-step { 0%, 1% { opacity: .42 } 3%, 24% { opacity: 1 } 26%, 100% { opacity: .42 } }
.pi-steps .pf-n { font-size: 28px; animation: pi-num 12s ease infinite } .pi-steps li:nth-child(2) .pf-n { animation-delay: 3s } .pi-steps li:nth-child(3) .pf-n { animation-delay: 6s } .pi-steps li:nth-child(4) .pf-n { animation-delay: 9s }
@keyframes pi-num { 0%, 1% { color: color-mix(in srgb, var(--ink) 30%, var(--paper-soft)) } 3%, 24% { color: #81d8d0 } 26%, 100% { color: color-mix(in srgb, var(--ink) 30%, var(--paper-soft)) } }
.pi-steps h3 { font: 400 21px/1.15 var(--font-serif); margin: 2px 0 6px } .pi-steps p { font-size: 14px; line-height: 1.5; color: var(--muted) }
/* the window */
.pi-win { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 34px 70px -34px rgba(0,0,0,.5); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #111; -webkit-font-smoothing: antialiased }
.pi-bar { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; height: 44px; padding: 0 14px; background: #f3f3f5; border-bottom: 1px solid #e2e2e6 }
.pi-lights { display: flex; gap: 7px } .pi-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57 } .pi-lights i + i { background: #febc2e } .pi-lights i + i + i { background: #28c840 }
.pi-url { position: relative; justify-self: center; width: min(320px, 100%); height: 28px; border-radius: 8px; background: #e6e6ea; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #333 }
.pi-url svg { width: 9px; height: 11px; color: #8a8a8e } .pi-u1, .pi-u2 { transition: none } .pi-u1 { animation: pi-u1 12s steps(1) infinite } .pi-uw { display: grid } .pi-u1, .pi-u2 { grid-area: 1 / 1; text-align: center } .pi-u2 { opacity: 0; animation: pi-u2 12s steps(1) infinite }
@keyframes pi-u1 { 0% { opacity: 1 } 25% { opacity: 0 } 99% { opacity: 1 } } @keyframes pi-u2 { 0% { opacity: 0 } 25% { opacity: 1 } 99% { opacity: 0 } }
.pi-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fbfbfd }
.pi-s { position: absolute; inset: 0 }
/* 1 - partner media with our ad */
.pi-feed { background: #fff; animation: pi-feed 12s cubic-bezier(.32, .72, 0, 1) infinite }
@keyframes pi-feed { 0%, 23% { transform: none; opacity: 1 } 27%, 96% { transform: translateX(-20%); opacity: 0 } 100% { transform: none; opacity: 1 } }
.pi-col { width: 74%; margin: 0 auto; padding: 22px 0 } .pi-bar1 { display: block; height: 8px; border-radius: 4px; background: #ececef; margin: 0 0 10px } .pi-bar1.s { width: 55% } .pi-bar1.m { width: 80% }
.pi-post { margin: 16px 0 18px; border-radius: 12px; box-shadow: 0 0 0 1px #e5e5ea, 0 10px 24px -16px rgba(0,0,0,.3); padding: 12px; background: #fff; animation: pi-glow 12s ease infinite }
@keyframes pi-glow { 0%, 3% { box-shadow: 0 0 0 1px #e5e5ea } 8%, 22% { box-shadow: 0 0 0 2px #81d8d0, 0 14px 30px -16px rgba(0,0,0,.35) } 26%, 100% { box-shadow: 0 0 0 1px #e5e5ea } }
.pi-post-head { display: flex; gap: 9px; align-items: center; margin-bottom: 10px } .pi-post-head i { width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fff; font: italic 400 13px/28px var(--font-serif); text-align: center; flex: none }
.pi-post-head b { display: block; font-size: 12.5px; font-weight: 600 } .pi-post-head span { font-size: 11px; color: #8a8a8e }
.pi-post-body { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center } .pi-post-body img { width: 100%; height: 108px; object-fit: cover; border-radius: 8px; display: block }
.pi-post-body p { font-size: 13px; line-height: 1.35; margin: 0 0 10px }
.pi-post-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: #f2f2f7; border-radius: 9px } .pi-post-cta span { font-size: 10.5px; color: #8a8a8e } .pi-post-cta b { font-size: 11.5px; font-weight: 600; background: #e5e5ea; padding: 5px 9px; border-radius: 7px; animation: pi-tap 12s ease infinite }
@keyframes pi-tap { 0%, 19% { transform: none; background: #e5e5ea } 21% { transform: scale(.94); background: #81d8d0 } 24%, 100% { transform: none; background: #e5e5ea } }
/* 2 - our page */
.pi-safari { animation: pi-safari 12s cubic-bezier(.32, .72, 0, 1) infinite }
@keyframes pi-safari { 0%, 23% { transform: translateX(100%) } 28%, 95% { transform: none; opacity: 1 } 99% { transform: none; opacity: 0 } 100% { transform: translateX(100%); opacity: 0 } }
.pi-page { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; padding: 0 30px }
.pi-page img:not(.pi-hero) { height: 16px; display: block } .pi-page strong { display: block; font: 400 25px/1.15 var(--font-serif); margin: 14px 0 18px; color: #111 }
.pi-hero { width: 100%; height: 72%; object-fit: cover; border-radius: 12px; display: block }
.pi-label { display: block; font-size: 11.5px; color: #6e6e73; margin-bottom: 5px } .pi-field { display: block; height: 38px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d2d2d7; padding: 0 12px; font-size: 14px; line-height: 38px; margin-bottom: 10px }
.pi-type { font-style: normal; display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; width: 0; border-right: 2px solid #81d8d0; animation: pi-typing 12s steps(5) infinite }
@keyframes pi-typing { 0%, 31% { width: 0 } 40%, 96% { width: 5.1ch; border-right-color: transparent } 100% { width: 0 } }
.pi-btn { display: block; height: 40px; line-height: 40px; text-align: center; border-radius: 9px; background: #81d8d0; color: #111; font-size: 14px; font-weight: 600; animation: pi-press 12s ease infinite }
@keyframes pi-press { 0%, 43% { transform: none; filter: none } 45% { transform: scale(.96); filter: brightness(.9) } 48%, 100% { transform: none; filter: none } }
/* 3 - confirmation */
.pi-dim { position: absolute; inset: 0; background: rgba(20, 20, 20, .28); opacity: 0; animation: pi-dim 12s ease infinite } @keyframes pi-dim { 0%, 49% { opacity: 0 } 53%, 95% { opacity: 1 } 100% { opacity: 0 } }
.pi-sheet { position: absolute; left: 50%; top: 50%; width: 250px; margin: -78px 0 0 -125px; padding: 22px 20px 20px; background: #fff; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); text-align: center; opacity: 0; transform: scale(.9); animation: pi-sheet 12s cubic-bezier(.32, .72, 0, 1) infinite }
@keyframes pi-sheet { 0%, 49% { opacity: 0; transform: scale(.9) } 54%, 95% { opacity: 1; transform: none } 100% { opacity: 0; transform: scale(.9) } }
.pi-ok { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #81d8d0; color: #111 } .pi-ok svg { width: 22px; height: 22px }
.pi-sheet b { display: block; font-size: 16px; font-weight: 600; margin: 10px 0 4px } .pi-sheet > span:last-child { font-size: 12.5px; color: #6e6e73 }
/* 4 - macOS notification */
.pi-note { position: absolute; top: 12px; right: 12px; width: 270px; z-index: 6; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; background: rgba(246, 246, 248, .86); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 30px -14px rgba(0,0,0,.45); transform: translateX(120%); animation: pi-note 12s cubic-bezier(.32, .72, 0, 1) infinite }
@keyframes pi-note { 0%, 74% { transform: translateX(120%) } 79%, 94% { transform: none } 98%, 100% { transform: translateX(120%) } }
.pi-note > .pi-app { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); object-fit: contain; display: block }
.pi-note div { flex: 1; font-size: 12.5px; line-height: 1.3 } .pi-note div > span:first-child { display: flex; justify-content: space-between; color: #6e6e73; font-size: 11.5px } .pi-note div > span:first-child b { font-weight: 600; color: #6e6e73 } .pi-note em { font-style: normal }
.pi-note div > b { display: block; font-weight: 600; margin-top: 2px } .pi-note div > span:last-child { color: #3a3a3c }
@media (prefers-reduced-motion: reduce) { .pi-steps li, .pi-steps .pf-n, .pi-feed, .pi-post, .pi-post-cta b, .pi-safari, .pi-u1, .pi-u2, .pi-type, .pi-btn, .pi-dim, .pi-sheet, .pi-note { animation: none !important } .pi-steps li { opacity: 1 } .pi-steps .pf-n { color: #81d8d0 } .pi-feed, .pi-u1 { display: none } .pi-u2 { opacity: 1 } .pi-type { width: 5.1ch; border: 0 } .pi-sheet, .pi-dim, .pi-note { opacity: 1; transform: none } }
@media (max-width: 1100px) { .publisher-stage.pi { grid-template-columns: 1fr; gap: 36px; padding: 40px 26px } }
@media (max-width: 600px) { .pi-page { grid-template-columns: 1fr; padding: 0 18px } .pi-hero { display: none } .pi-col { width: 88% } .pi-note { width: 220px } .pi-bar { grid-template-columns: 50px 1fr 0 } .pi-post-body { grid-template-columns: 40% minmax(0, 1fr); gap: 10px } .pi-post-body img { height: 92px } .pi-post-cta { flex-wrap: wrap; gap: 4px } .pi-post-body p { font-size: 12px } }
/* phones: the ad's link row ('topquoteshero.com' + 'Learn more') could not wrap, so its column grew and the copy ran past the card (2026-10-06) */

/* /kamil/ - the page behind the QR on Kamil's card: one framed card, links as quiet rows, Tiffany on touch. */
.kc { display: grid; place-items: center; padding-block: 40px 96px }
.kc-card { width: min(520px, 100%); background: var(--paper-soft); border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line); padding: 48px 44px 40px }
.kc-head { text-align: center; padding-bottom: 30px }
/* AGS Rome (Kamil 2026-10-06, variant 3): the photo sits in a Tiffany laurel etching, the victor's crown of Rome. */
.kc-photo { position: relative; width: 152px; margin: 72px auto 78px } .kc-photo img { display: block; height: auto }
.kc-face { position: relative; z-index: 1; width: 100%; border-radius: 50%; padding: 6px; border: 1px solid var(--frame); background: var(--paper-soft) }
.kc-wreath { position: absolute; z-index: 0; left: 50%; top: 50%; width: 320px; max-width: none; transform: translate(-50%, -50%); mix-blend-mode: multiply; pointer-events: none }
.kc-event { margin-top: 14px; font: italic 400 16px/1.45 var(--font-serif); color: var(--muted) } .kc-mark .wordmark { width: 120px; display: block; margin: 0 auto 30px; color: var(--ink) }
.kc h1 { font: 400 clamp(36px, 6vw, 46px)/1.05 var(--font-serif); letter-spacing: -.01em } .kc-role { margin-top: 10px } .kc-role em { font: italic 400 21px/1.3 var(--font-serif); padding: 0 3px; background: linear-gradient(transparent 58%, rgba(129, 216, 208, .75) 58%, rgba(129, 216, 208, .75) 92%, transparent 92%) }
.kc-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.kc-links a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .2s }
.kc-ic svg { width: 24px; height: 24px; display: block } .kc-tx b { display: block; font: 400 19px/1.2 var(--font-serif) } .kc-tx small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px }
.kc-links a .arrow { color: #81d8d0; transition: transform .18s cubic-bezier(.23, 1, .32, 1) }
.kc-links a:hover, .kc-links a:focus-visible { color: #81d8d0 } .kc-links a:hover .arrow, .kc-links a:focus-visible .arrow { transform: translate(3px, -3px) }
.kc-save { display: flex; justify-content: space-between; margin-top: 28px; width: 100% }
@media (max-width: 700px) { .kc { padding-block: 20px 56px } .kc-card { padding: 36px 22px 28px } }


/* /kamil/ for AGS Rome: who-we-work-with links under the logo, then four plain accordions under the contact card. */
body[data-page=kamil] .site-header { justify-content: center }
.kc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: -6px auto 8px; padding: 0 24px; font: 500 12px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase }
.kc-tabs a { color: var(--ink); padding: 8px 0; text-decoration: none; border-bottom: 1px solid transparent } .kc-tabs a:hover, .kc-tabs a:focus-visible { border-bottom-color: #81d8d0 }
.kc { padding-top: 24px }
.kc-what { max-width: 640px; padding-bottom: 96px; margin-top: -48px }
.kc-acc { border-bottom: 1px solid var(--line); scroll-margin-top: 24px } .kc-acc:first-child { border-top: 1px solid var(--line) }
.kc-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 22px; gap: 4px 12px; align-items: center; padding: 20px 2px }
.kc-acc summary::-webkit-details-marker { display: none }
.kc-for { grid-column: 1; font: 500 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.kc-acc summary b { grid-column: 1; font: 400 23px/1.2 var(--font-serif); font-weight: 400 }
.kc-acc summary i { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; position: relative }
.kc-acc summary i::before, .kc-acc summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .25s cubic-bezier(.23, 1, .32, 1) }
.kc-acc summary i::after { transform: rotate(90deg) } .kc-acc[open] summary i::after { transform: rotate(0) }
.kc-acc[open] summary i::before, .kc-acc[open] summary i::after { background: #81d8d0 }
.kc-acc-body { padding: 0 2px 24px } .kc-acc-body p { font-size: 16px; line-height: 1.6; color: var(--ink); margin-bottom: 14px }
.kc-acc-body .text-link { color: var(--ink); border-bottom: 1px solid #81d8d0; padding-bottom: 3px; text-decoration: none }
@media (max-width: 700px) { .kc-what { margin-top: -24px; padding-bottom: 56px } .kc-tabs { gap: 6px 18px; font-size: 11px } }

/* /kamil/ conference form: the step after Buy traffic / leads / calls (Kamil 2026-10-06). It takes the accordions' place
   as a new card; Back returns to them. Opens via JS (.is-open) or #kc-form:target without JS. */
.kc-form { display: none; max-width: 640px; margin-top: -48px; padding-bottom: 96px; scroll-margin-top: 24px }
.kc-form:target, .kc-form.is-open { display: block; animation: kc-step .26s cubic-bezier(.23, 1, .32, 1) both }
.kc-form:target + .kc-what, .kc-form.is-open + .kc-what { display: none }
.kc-form.is-closed { display: none } .kc-form.is-closed + .kc-what { display: block } .kc-form h2:focus { outline: none }
@keyframes kc-step { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .kc-form:target, .kc-form.is-open { animation: none } }
.kc-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--ink); text-decoration: none; font: 500 12px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent }
.kc-back::before { content: '\2190'; font-size: 15px; letter-spacing: 0; color: #81d8d0 }
.kc-back:hover, .kc-back:focus-visible { border-bottom-color: #81d8d0 }
.kc-form-card { background: var(--paper-soft); border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line); padding: 44px 44px 36px }
.kc-form h2 { font: 400 clamp(30px, 5vw, 38px)/1.1 var(--font-serif); letter-spacing: -.01em } .kc-form h2 em { font-style: italic }
.kc-form-intro { margin: 12px 0 30px; font-size: 16px; line-height: 1.6 }
.kc-form .field label small { font-weight: 400; color: var(--muted); margin-left: 4px }
.kc-form .kc-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start }
.kc-form .kc-consent input { width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: #81d8d0 }
.kc-form .kc-consent label { font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0; cursor: pointer }
.kc-form .kc-consent input[aria-invalid=true] { outline: 2px solid #b3261e; outline-offset: 2px }
.kc-form .button { margin-top: 26px; width: 100%; justify-content: space-between } .kc-form .form-note { margin: 16px 0 0 }
.kc-form .form-error { margin: 22px 0 0 }
.kc-thanks { display: none; outline: none } .kc-thanks.is-shown, .kc-thanks:target { display: block } .kc-thanks:target + form { display: none }
.kc-thanks h3 { font: 400 26px/1.2 var(--font-serif) } .kc-thanks p { margin-top: 8px; font-size: 16px; line-height: 1.6 }
.kc-thanks h3::after { content: ''; display: block; width: 44px; height: 2px; background: #81d8d0; margin-top: 12px }
@media (max-width: 700px) { .kc-form { margin-top: -24px; padding-bottom: 56px } .kc-form-card { padding: 34px 22px 26px } }

/* News (2026-10-09): index = centred title, then one hairline ledger of posts (date | title + summary | small still).
   Post = title and date centred, the still beside the text as on About, key facts in a framed plane, one button. */
.news-intro { text-align: center; max-width: 1000px; padding-block: 56px 40px }
.news-intro h1 { font-size: clamp(48px, 6vw, 88px); font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.04 }
.news-list { max-width: 1080px; padding-bottom: 104px }
.news-list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink) }
.news-list li { border-bottom: 1px solid var(--line) }
.news-list a { display: grid; grid-template-columns: 180px minmax(0, 1fr) 160px; gap: 40px; align-items: center; padding: 32px 0; color: var(--ink); text-decoration: none }
.news-list time { align-self: start; padding-top: 10px; font: 500 12px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted) }
.news-list h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--font-serif); letter-spacing: -.01em; transition: color .2s ease }
.news-list p { margin-top: 12px; font-size: 17px; color: var(--muted) }
.news-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font: 500 12px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em }
.news-more .arrow { color: #81d8d0; transition: transform .18s cubic-bezier(.23, 1, .32, 1) }
.news-thumb { width: 160px; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%) }
.news-list a:focus-visible h2 { color: var(--tiffany-text) }
@media (hover: hover) and (pointer: fine) { .news-list a:hover h2 { color: var(--tiffany-text) } .news-list a:hover .news-more .arrow { transform: translate(3px, -3px) } }

.news-post { padding-block: 56px 104px }
.news-head { text-align: center; max-width: 980px; margin: 0 auto }
.news-head h1 { font: 400 clamp(40px, 5vw, 72px)/1.08 var(--font-serif); letter-spacing: -.02em }
.news-date { margin-top: 24px; font: 500 12px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted) }
.news-main { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; margin-top: 56px }
.news-main.no-image { grid-template-columns: minmax(0, 680px); justify-content: center }
.news-still img { max-width: 480px }
.news-body { max-width: 600px }
.news-body > p { font-size: 18px; line-height: 1.65; color: var(--ink) }
.news-body > p + p { margin-top: 18px }
.news-body > p:first-child { font: 400 clamp(22px, 2vw, 26px)/1.45 var(--font-serif) }
.news-body h2 { margin: 40px 0 14px; font: 400 clamp(26px, 2.4vw, 32px)/1.15 var(--font-serif) }
.news-body ul { margin: 18px 0 0; padding-left: 20px }
.news-body a:not(.button) { color: var(--ink); text-decoration: underline; text-decoration-color: #81d8d0; text-decoration-thickness: 2px; text-underline-offset: 4px }
.news-facts { margin: 36px 0 0; padding: 28px 32px; background: var(--paper-soft); border: 1px solid var(--frame); box-shadow: inset 0 0 0 7px var(--paper-soft), inset 0 0 0 8px var(--line) }
.news-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-top: 1px solid var(--line) }
.news-facts div:first-child { border-top: 0; padding-top: 4px }
.news-facts div:last-child { padding-bottom: 4px }
.news-facts dt { padding-top: 3px; font: 500 11px/1.4 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted) }
.news-facts dd { margin: 0; font-size: 16px }
.news-cta { margin-top: 32px }
.news-back { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center }
@media (max-width: 1000px) { .news-main { grid-template-columns: 1fr; gap: 32px; justify-items: center } .news-still img { max-width: 360px } }
@media (max-width: 700px) {
  .news-intro { padding-block: 36px 28px }
  .news-list { padding-bottom: 72px }
  .news-list a { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px 18px; padding: 26px 0 }
  .news-list time { grid-column: 1 / -1; padding-top: 0 }
  .news-list a > div { grid-column: 1 }
  .news-thumb { width: 88px; grid-column: 2; grid-row: 2; align-self: start }
  .news-post { padding-block: 36px 72px }
  .news-main { margin-top: 32px }
  .news-still img { max-width: 260px }
  .news-facts { padding: 22px 20px }
  .news-facts div { grid-template-columns: 1fr; gap: 4px }
  .news-cta .button { width: 100%; justify-content: center }
}
@media (prefers-reduced-motion: reduce) { .news-list h2, .news-more .arrow { transition: none } .news-list a:hover .news-more .arrow { transform: none } }

/* About: questions answered in one plain place (2026-10-09, AI search round). Same hairline rhythm as the pillars. */
.about-faq { padding-bottom: 88px }
.about-faq h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.06; margin-bottom: 32px }
.about-faq h2 em { font-style: italic }
.about-faq dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin: 0; border-top: 1px solid var(--ink) }
.about-faq dl > div { padding: 24px 0 26px; border-bottom: 1px solid var(--line) }
.about-faq dt { font: 400 clamp(21px, 1.8vw, 25px)/1.25 var(--font-serif); color: var(--ink) }
.about-faq dd { margin: 10px 0 0; max-width: 520px; font-size: 16px; color: var(--muted) }
.about-faq dd a { color: var(--ink); text-decoration: underline; text-decoration-color: #81d8d0; text-decoration-thickness: 2px; text-underline-offset: 4px }
@media (max-width: 800px) { .about-faq dl { grid-template-columns: 1fr } .about-faq { padding-bottom: 64px } }