/* c-v.ai site styles. Layout adapted from the Hikma homepage (hik.ma, 31 October 2026):
   hero with three phones, alternating dark use cases, tools gallery, membership,
   three-card list, FAQ and closing CTA. Also styles /privacy and /support. */

/* ---- Brand tokens ----
   Palette taken from the risograph illustrations and app icon: ink, one warm muted tone,
   white, cream and sand, cobalt as the brand colour and sunflower for Plus and highlights. */
:root{
  --ink:#1b1d22;
  --muted:#66625c;
  --white:#ffffff;
  --cream:#f6efe4;
  --sand:#ece2d2;
  --cobalt:#2a5bd7;
  --sun:#f6c744;
  --on-ink:#ffffff;
  --on-ink-muted:rgb(255 255 255 / .7);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Display type matches the social card: Avenir Next (Apple devices), system sans elsewhere. */
  --display:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display-weight:600;--display-tracking:-.02em;
  --on-cobalt-soft:#d6e1fa;
  --text-small:.875rem;--text-body:1rem;--text-title:1.5rem;
  --text-heading:clamp(2.375rem,5.5vw,4.25rem);--text-hero:clamp(3rem,8vw,6.5rem);
  /* One spacing rhythm: section padding, heading-to-content gap, and block gap. */
  --space-section:clamp(80px,9vw,128px);
  --space-title:clamp(32px,4vw,56px);
  --space-block:24px;
  --radius:16px;--radius-lg:24px;
  --nav-logo-height:32px;
  --chip:var(--cream);       /* icon chip background, set per surface */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-gutter:stable}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6;font-size:var(--text-body)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:6px;border-radius:4px}
button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}
p,dd,li{text-wrap:pretty}
.nowrap{white-space:nowrap}
.keep-together{display:inline-block;max-width:100%;text-wrap:balance}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.skip-link{position:absolute;top:8px;left:16px;z-index:10;padding:12px 18px;background:var(--ink);color:var(--on-ink);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
h2{font-family:var(--display);font-size:var(--text-heading);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1.02}
/* Spaced-caps label above headings, as on the social card. */
.eyebrow{font-family:var(--display);font-weight:600;font-size:.8125rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);margin-bottom:16px}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Nucleo Glass icons (scripts/build-icons.py): one size inline (20px), one in icon tiles (24px). */
.icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.icon-chip .icon{width:24px;height:24px}
.icon-chip{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--chip);color:var(--cobalt)}

/* Navigation: equal outer columns keep the links centred. */
.nav{padding:20px 0;background:var(--white)}
.nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;max-width:1360px;position:relative}
.brand{display:flex;gap:10px;align-items:center;justify-self:start;flex-shrink:0}
.brand img{display:block;width:var(--nav-logo-height);height:var(--nav-logo-height);border-radius:8px}
.brand-name{font-family:var(--display);font-weight:var(--display-weight);font-size:1.25rem;letter-spacing:-.02em;line-height:1}
.brand:hover{text-decoration:none}
.nav-links{display:flex;align-items:center;gap:28px;justify-self:center}
.nav-actions{display:flex;gap:16px;align-items:center;justify-self:end}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--nav-logo-height);padding:0 16px 0 14px;border-radius:9999px;background:var(--cobalt);color:var(--on-ink);line-height:1;white-space:nowrap;position:relative}

.nav-cta::before{content:"";position:absolute;inset-inline:0;top:50%;height:44px;transform:translateY(-50%);border-radius:inherit}
.nav-cta:hover{opacity:.88;text-decoration:none}
.cta-label-short{display:none}
.menu-toggle,.menu-close{display:none;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.menu-close{display:flex}
.menu-toggle svg,.menu-close svg{display:block}

.hero{position:relative;padding:clamp(40px,5vw,72px) 0 0;text-align:center;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--white) 0%,var(--cream) 70%)}
.hero>.container{max-width:1280px}
.hero h1{font-family:var(--display);font-size:var(--text-hero);font-weight:var(--display-weight);line-height:1;letter-spacing:var(--display-tracking);max-width:1000px;margin:0 auto var(--space-block)}
.hero .subtitle{max-width:640px;margin:0 auto 32px}
.store-ctas{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.store-soon{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px 0 20px;border-radius:9999px;background:var(--cobalt);color:var(--on-ink);font-weight:550;letter-spacing:-.005em}
.hero-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:20px;list-style:none;font-size:var(--text-small);color:var(--muted)}
.hero-points li{display:inline-flex;align-items:center;gap:6px}

/* The tailor stands just left of the phones, his dress form tucked behind the left phone. */

.text-link{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-weight:600;color:var(--cobalt)}
.text-link .icon{transition:transform .15s ease}
.text-link:hover{text-decoration:none}
.text-link:hover .icon{transform:translateX(3px)}

/* Alternating image + copy rows on the ink band. */
.usecases{--chip:rgb(255 255 255 / .1);padding:var(--space-section) 0;background:var(--ink);color:var(--on-ink);position:relative;z-index:2}
.usecases>.container{display:grid;gap:clamp(80px,10vw,128px)}
.usecases .icon-chip{color:var(--sun)}
.usecases .text-link{color:var(--on-ink)}
.usecase{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;width:100%;max-width:1040px;margin:0 auto}
.usecase-reverse .uc-image{grid-column:1;grid-row:1}
.usecase-reverse .uc-copy{grid-column:2}
.uc-image{display:flex;justify-content:center}
.uc-shot{display:block;width:100%;max-width:276px;height:auto}  /* screenshots come framed in Apple's iPhone (screens/framed), so no drawn bezel */
.uc-copy{min-width:0;width:100%;max-width:488px;margin:0 auto}
.uc-copy .icon-chip{margin-bottom:var(--space-block)}
.uc-copy h2{margin-bottom:var(--space-block);font-size:clamp(2.25rem,4.4vw,3.5rem)}
.membership-intro h2,.tools-heading h2{font-size:clamp(2.25rem,4.4vw,3.5rem)}
.uc-copy p{line-height:1.7;margin-bottom:16px}
.uc-copy .feature-context{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-small);color:var(--on-ink-muted)}
.uc-copy .feature-context .icon{margin-top:1px}
.home-device-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;max-width:488px;width:100%;justify-self:center}
.home-device-pair figure,.home-tools-gallery figure{min-width:0;margin:0;display:grid;grid-template-rows:auto 1fr;justify-items:center;align-content:start}
.home-device-pair .uc-shot{max-width:none}
figcaption{margin-top:12px;font-size:var(--text-small);color:var(--muted);text-align:center;line-height:1.4}
.usecases figcaption{color:var(--on-ink-muted)}
.home-tools-gallery figcaption,.home-device-pair figcaption{display:inline-flex;align-items:center;justify-content:center;gap:8px}

/* Shared icon + title + text list (tools and Plus benefits). */
.feature-list{display:grid;gap:var(--space-block);align-content:start}
.feature-list>div{min-width:0}
.feature-list dt{display:flex;align-items:center;gap:14px;font-weight:600;line-height:1.35;margin-bottom:4px}
.feature-list dd{padding-left:58px;max-width:calc(48ch + 58px)}

/* Why not a chatbot: intro beside a two-by-two list. */
.why{--chip:var(--white);padding:var(--space-section) 0;background:var(--cream)}
.why-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:var(--space-title) 72px;align-items:start}
.why-intro h2{font-size:clamp(2.25rem,4.4vw,3.5rem);margin-bottom:var(--space-block)}
.why-intro p{max-width:44ch;font-size:1.0625rem}
.why-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.why-list dd{padding-left:0;margin-top:8px}
.why-list dt{flex-direction:column;align-items:flex-start;gap:14px}

/* Tools: heading, illustration and list over a three-screen gallery. */
.daily-tools{padding:var(--space-section) 0;background:var(--white)}
.tools-layout{display:grid;gap:var(--space-section);max-width:1180px}
.tools-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-title) 64px;width:100%;max-width:1040px;margin-inline:auto;align-items:start}
.tools-heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tools-art{display:block;width:100%;max-width:400px;height:auto;margin-top:20px;border-radius:var(--radius-lg)}
.tools-copy .feature-list{padding-top:12px}
.home-tools-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}
.home-tools-gallery figure{flex:0 1 252px;max-width:252px}

/* Plus: intro and plans beside the illustration and benefits. */
.membership{--chip:var(--white);padding:var(--space-section) 0;background:var(--cream)}
.membership-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-title) 72px;align-items:start}
.membership-layout>*{min-width:0}
.plus-badge{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;padding:6px 12px;border-radius:9999px;background:var(--sun);color:var(--ink);font-size:var(--text-small);font-weight:700;line-height:1}

.membership-intro h2{margin-bottom:var(--space-block)}
.membership-intro>p:not(.plus-badge){max-width:52ch}
.plan-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:32px}
.plan{--chip:var(--cream);display:flex;align-items:center;gap:14px;padding:16px 20px 16px 16px;border-radius:var(--radius);background:var(--white)}
.plan>div{flex:1;min-width:0}
.plan h3{font-size:var(--text-body);font-weight:600;line-height:1.35}
.plan p{font-size:var(--text-small);color:var(--muted);margin-top:2px}
.plan-price{font-size:1.25rem;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.membership-intro .membership-terms{font-size:var(--text-small);color:var(--muted);line-height:1.7;margin-top:16px}
.membership-side{display:grid;gap:var(--space-title);align-content:start}
.plus-art{display:block;width:100%;max-width:400px;height:auto;margin:0 auto;border-radius:var(--radius-lg)}

/* Three cards: the illustration bleeds into the card's cream. */
.explore{padding:var(--space-section) 0;background:var(--white)}
.section-heading{margin-bottom:var(--space-title)}
.reading-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reading-list>div{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-radius:var(--radius-lg);background:var(--cream)}
.card-art{display:block;width:100%;height:auto;aspect-ratio:1}
.reading-list h3,.reading-list p,.reading-action{margin-inline:28px}
.reading-list h3{font-family:var(--display);font-size:var(--text-title);font-weight:var(--display-weight);line-height:1.15;letter-spacing:-.025em;margin-top:32px;margin-bottom:12px}
.reading-list p{margin-bottom:24px}
.reading-action{margin-top:auto;margin-bottom:32px;font-size:var(--text-small);color:var(--muted)}

/* FAQ: native details on white cards, no rules between them. */
.faq{padding:var(--space-section) 0;background:var(--cream)}
.faq>.container{max-width:830px}
.faq h2{margin-bottom:var(--space-title)}
.faq-item{border-radius:var(--radius);background:var(--white)}
.faq-item+.faq-item{margin-top:10px}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{width:20px;height:20px;flex-shrink:0;margin-inline-start:auto;fill:none;stroke:var(--cobalt);stroke-width:1.75;stroke-linecap:round}
.faq-item[open] .faq-icon-vertical{display:none}
.faq-answer{padding:0 56px 22px 24px;line-height:1.75}
.faq-answer a,.legal a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}

/* Closing CTA: a cobalt panel with grain beside the illustration, like the social card. */
.final-cta{padding:var(--space-section) 0;background:var(--white)}
.final-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:hidden;border-radius:28px;background:var(--cobalt) url("/home/grain.png");color:var(--on-ink)}
.final-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(36px,5vw,72px)}
.final-copy .eyebrow{color:var(--on-cobalt-soft)}
.final-copy h2{font-size:clamp(2.25rem,4.2vw,3.5rem);line-height:1.05}
.final-copy .download-intro{color:var(--on-cobalt-soft);max-width:40ch;margin:var(--space-block) 0 32px}
.store-soon-light{background:var(--white);color:var(--cobalt)}
.store-soon{white-space:nowrap}
.store-soon .cta-label-short{display:none}
@media(max-width:420px){.store-soon .cta-label-full{display:none}.store-soon .cta-label-short{display:inline}}
/* Official App Store badge (used once the listing is live, see scripts/go-live.py). */
.store-link{display:inline-flex;align-items:center;min-height:44px;border-radius:12px;transition:transform .18s ease}
.store-link:hover{transform:translateY(-2px)}
.store-link img{display:block;height:52px;width:auto}
.closing-art{display:block;width:100%;height:100%;min-height:100%;object-fit:cover}
.footer{padding:40px 0 48px;text-align:center;color:var(--muted);font-size:var(--text-small);background:var(--cream)}
.footer-links{display:flex;justify-content:center;gap:4px 24px;margin-bottom:8px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink)}
/* Site footer (10 Nov 2026, written by scripts/build-guides.py on every page): brand block with the badge, four link
   columns, and a bottom bar with the company line. Spacing and tone separate the parts; no separator lines. */
.footer{text-align:left;padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px;align-items:start}
.footer-brand{display:grid;gap:16px;justify-items:start;max-width:340px}
.footer-brand p{color:var(--muted);font-size:.9375rem;line-height:1.5;text-wrap:pretty}
.footer-brand p span{display:block}
.footer .brand-name{color:var(--ink)}
.footer-brand .store-link img{height:48px}
.footer-heading{font-family:var(--font);font-size:var(--text-small);font-weight:600;letter-spacing:0;line-height:1.4;color:var(--ink);margin:0 0 6px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid}
.footer-col a{display:inline-block;padding:7px 0;line-height:1.45;color:var(--muted);text-decoration:none;font-size:.9375rem;text-wrap:balance}
.footer-col a:hover,.footer-col a[aria-current="page"]{color:var(--ink)}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-col a:focus-visible,.footer-brand a:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:20px;color:var(--muted);font-size:.8125rem}
.footer-bottom p{margin:0}
@media(max-width:980px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-brand{grid-column:1/-1;max-width:420px}}
@media(max-width:640px){.footer{padding:48px 0 28px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.footer-col a{padding:11px 0}.footer-bottom{flex-direction:column;margin-top:36px}}
/* Dark footer band like an established tool (Paul, 10 Nov 2026): deep ink background, white headings, muted links. */
.footer{background:#14171d;color:rgb(255 255 255 / .62);border-top:0}
.footer .brand-name{color:var(--white)}
.footer-brand p{color:rgb(255 255 255 / .62)}
.footer-heading{color:var(--white);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.footer-col a{color:rgb(255 255 255 / .7)}
.footer-col a:hover,.footer-col a[aria-current="page"]{color:var(--white)}
.footer-col a:focus-visible,.footer-brand a:focus-visible,.footer-bottom a:focus-visible{outline-color:var(--on-cobalt-soft)}
.footer-contact{font-size:.875rem}
.footer-contact a,.footer p a{color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(255 255 255 / .35)}
.footer-bottom{border-top:1px solid rgb(255 255 255 / .12);color:rgb(255 255 255 / .5)}
.footer-bottom .footer-top{margin-left:auto}
.footer-bottom .footer-top a{text-decoration:none;color:rgb(255 255 255 / .7)}
.footer-bottom .footer-top a:hover{color:var(--white)}
@media(max-width:640px){.footer-bottom .footer-top{margin-left:0}}

/* Legal and support pages. */
.legal{padding:clamp(40px,5vw,72px) 0 var(--space-section);background:var(--white)}
.legal>.container{max-width:760px}
.legal h1{font-family:var(--display);font-size:clamp(2.5rem,6vw,4rem);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1;margin-bottom:16px}
.legal .lede{font-size:1.0625rem;color:var(--muted);margin-bottom:var(--space-title)}
.legal h2{font-size:var(--text-title);letter-spacing:-.02em;line-height:1.2;margin:48px 0 12px}
.legal p,.legal li{line-height:1.75}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0 1.25em}
.legal li+li{margin-top:6px}
.legal .summary{display:grid;gap:12px;padding:24px 28px;border-radius:var(--radius-lg);background:var(--cream);list-style:none;margin:0}
.legal .summary li{display:flex;gap:12px;align-items:flex-start}
.legal .summary .icon{color:var(--cobalt);margin-top:3px}
.legal .contact-card{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:28px;border-radius:var(--radius-lg);background:var(--cream);margin-bottom:var(--space-title)}
.legal .contact-card .store-soon{color:var(--on-ink);text-decoration:none}
.legal .updated{margin-top:48px;font-size:var(--text-small);color:var(--muted)}

/* Mobile navigation is a modal surface, with native focus and Escape handling. */
.mobile-navigation{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:16px 24px;border:0;background:var(--white);color:var(--ink);overflow-y:auto}
.mobile-navigation::backdrop{background:var(--white)}
.mobile-navigation-top{display:flex;align-items:center;gap:8px}
.mobile-navigation-top>.brand{margin-inline-end:auto}
.mobile-navigation-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:48px 0 32px}
.mobile-navigation-links a{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:-.025em;font-size:1.75rem;line-height:1.15;min-height:48px;display:flex;align-items:center;padding:8px 0}
.menu-open,.menu-open body{overflow:hidden}

@media(max-width:960px){
  .nav{padding:16px 0}
  .nav-inner{display:flex;flex-wrap:wrap;gap:8px}.nav-inner>.brand{margin-inline-end:auto}
  .nav-links{order:4;width:100%;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding-top:16px}
  .has-js .nav-inner{flex-wrap:nowrap}.has-js #primary-nav{display:none}.has-js .menu-toggle{display:flex}
  .nav-cta{gap:6px;padding:0 14px 0 10px}.nav-cta .icon{width:18px;height:18px}
  /* The glyph's lines end 3px inside its 24px box: pull the 44px button out so they line up with the gutter. */
  .menu-toggle,.menu-close{margin-inline-end:-13px;margin-inline-start:4px}
  .usecase{gap:40px}.tools-copy{column-gap:40px}.membership-layout{column-gap:40px}
  .home-tools-gallery{gap:16px}.home-tools-gallery figure{flex-basis:calc(33.333% - 11px)}
  .reading-list{gap:16px}
  .reading-list h3,.reading-list p,.reading-action{margin-inline:24px}
  .reading-list h3{margin-top:28px}.reading-action{margin-bottom:28px}
}
@media(max-width:960px) and (scripting:enabled){#primary-nav{display:none}}
@media(max-width:780px){
  .why-layout{grid-template-columns:minmax(0,1fr);max-width:560px}
  .final-panel{grid-template-columns:minmax(0,1fr)}.closing-art{order:-1;height:auto;aspect-ratio:3/2}
  .usecase{grid-template-columns:minmax(0,1fr);gap:40px}
  .usecase-reverse .uc-image,.usecase-reverse .uc-copy{grid-column:auto;grid-row:auto}
  .uc-image{order:2}.home-device-pair{max-width:520px}
  .tools-copy{grid-template-columns:minmax(0,1fr);max-width:560px}
  .tools-art{max-width:none}
  .membership-layout{grid-template-columns:minmax(0,1fr);max-width:560px}
  .plus-art{max-width:none}
  .reading-list{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}
}
@media(max-width:560px){
  .container{padding-inline:20px}
  .hero .subtitle{margin-bottom:28px}
  .store-soon{min-height:48px;padding:0 20px 0 18px}
  .hero-points{flex-direction:column;align-items:center;gap:6px}
  .home-device-pair{grid-template-columns:1fr;gap:32px}
  .home-device-pair figure{width:min(252px,100%);margin-inline:auto}
  .home-tools-gallery{flex-direction:column;align-items:center;gap:32px}
  .home-tools-gallery figure{flex:0 1 auto;width:min(252px,100%)}
  .feature-list dd{padding-left:0}
  .why-list{grid-template-columns:minmax(0,1fr)}
  .plan{padding:14px 16px 14px 14px}
  .faq-item summary{gap:16px;padding:18px 20px}.faq-answer{padding:0 20px 20px}
  .footer-links{gap:2px 18px}
  .legal .summary,.legal .contact-card{padding:20px}
  .final-copy{padding:32px 24px 36px}.final-copy .store-soon{padding:0 16px 0 14px;font-size:.9375rem;gap:8px}
  .mobile-navigation{padding-inline:20px}
}
@media(max-width:380px){:root{--nav-logo-height:28px}.brand-name{font-size:1.125rem}.nav-actions .cta-label-full{display:none}.nav-actions .cta-label-short{display:inline}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---- 8 Nov 2026: real device frames, App Store badges, QR codes and WhatsApp links ---- */
/* Screenshots are pre-framed in Apple's iPhone 18 Pro Max (public/home/screens/framed), so no drawn bezel. */
.usecases .uc-shot{box-shadow:none;filter:drop-shadow(0 22px 40px rgb(0 0 0 / .35))}
.home-tools-gallery .uc-shot{filter:drop-shadow(0 18px 32px rgb(27 29 34 / .16))}
.uc-shot{max-width:300px}

/* App Store badge sits on its own; QR and WhatsApp below it. */
.store-link img{height:54px}
.get-app{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.qr-card{display:none;margin:0;align-items:center;gap:16px;text-align:left}
.qr-card img{display:block;width:112px;height:112px;padding:8px;border-radius:14px;background:var(--white);box-shadow:0 2px 14px rgb(27 29 34 / .08)}
.qr-card figcaption{margin:0;max-width:17ch;font-size:var(--text-small);line-height:1.45;color:var(--muted);text-align:left}
.wa-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--text-small);color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.wa-link img{display:block;width:18px;height:18px;flex:none}
.wa-light{color:var(--on-cobalt-soft)}
.wa-light img{filter:invert(1)}
.final-get{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.final-get .store-ctas{justify-content:flex-start}
.final-copy .qr-card figcaption{color:var(--on-cobalt-soft)}
.final-copy .qr-card img{box-shadow:none}
.final-copy .wa-link{margin-top:8px}

/* Hero trust row: two matching laurel badges (Glass-style laurels), a bold line over a short one. */
.hero-proof{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);margin-bottom:clamp(24px,3vw,36px)}
.pricing-proof{margin:28px 0 0}
.proof{display:flex;align-items:center;gap:4px}
.proof .laurel{flex:none;width:24px;height:48px}
.proof .laurel-end{transform:scaleX(-1)}
.proof-text{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.proof-main{margin:0;height:1.35em;font-size:.9375rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.proof-main.stars{display:flex;align-items:center;gap:2px}.proof-main.stars .icon{width:16px;height:16px}
.proof-sub{margin:0;max-width:13.5em;text-wrap:balance;font-size:.8125rem;font-weight:500;line-height:1.35;color:var(--muted)}
.proof-quote .proof-sub{max-width:none;white-space:nowrap}
@media(max-width:900px){.hero-proof{justify-content:center;margin-bottom:24px}}
@media(max-width:420px){.hero-proof{gap:8px}.proof{gap:2px}.proof .laurel{width:20px;height:44px}.proof-main{font-size:.8125rem}.proof-main.stars .icon{width:14px;height:14px}.proof-sub{font-size:.75rem;max-width:9.5em}.proof-quote .proof-sub{max-width:14em;white-space:normal}}

/* Phones: a pinned Get the app button once the hero is scrolled past; hidden again at the closing CTA and footer. */
.sticky-get{display:none}
@media(max-width:960px){
  .sticky-get{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;background:var(--cobalt);color:var(--on-ink);font-weight:600;font-size:1.0625rem;box-shadow:0 8px 28px rgb(29 67 179 / .32);visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
  .sticky-get .icon{width:18px;height:18px}
  .sticky-get:hover{text-decoration:none}
  .sticky-get.on{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
  .menu-open .sticky-get{visibility:hidden;opacity:0}
}
@media(prefers-reduced-motion:reduce){.sticky-get{transition:none}.sticky-get.on{transition:none}}

/* Floating desktop QR, dismissible; hidden while another QR is on screen. */
.qr-tile{position:fixed;right:20px;bottom:20px;z-index:20;display:none;flex-direction:column;align-items:center;gap:8px;width:180px;padding:28px 16px 14px;border-radius:16px;background:var(--white);box-shadow:0 6px 28px rgb(27 29 34 / .14);text-align:center}
.qr-tile img{display:block;width:132px;height:132px}
.qr-tile p{margin:0;font-size:var(--text-small);line-height:1.4;color:var(--ink)}
.qr-close{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.qr-close:hover{background:var(--cream)}

/* QR codes only where there's a separate phone to scan with: desktop-sized screens with a mouse. */
@media(min-width:1025px) and (hover:hover) and (pointer:fine){
  .qr-card{display:flex}
  .qr-tile:not([hidden]){display:flex}
}

/* /app holding page (shown until the App Store listing is public). */
.app-link{min-height:100svh;display:grid;place-items:center;padding:32px 24px;background:var(--cream)}
.app-link-card{max-width:420px;text-align:center}
.app-link-card img{display:block;margin:0 auto 24px;border-radius:20px}
.app-link-card h1{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:clamp(2rem,6vw,2.75rem);line-height:1.05;margin-bottom:12px}
.app-link-card p{color:var(--muted);margin-bottom:20px}

/* ---- Hero: copy and CTA on the left; the app walkthrough on the right (home.js steps through the scenes). ---- */
.hero{text-align:left;padding-top:clamp(28px,3.5vw,48px);padding-bottom:clamp(56px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;column-gap:clamp(32px,5vw,72px)}
.hero h1{font-size:clamp(3rem,6.1vw,5.75rem);line-height:.96;letter-spacing:-.03em;max-width:none;margin:0}
.hero .subtitle{max-width:30em;margin:0}
.hero-get{margin-top:36px}
.hero .store-ctas{justify-content:flex-start;align-items:center;gap:28px}
.hero .store-link img{height:64px}
.hero .qr-card{padding-left:8px}
.hero .qr-card img{width:96px;height:96px;padding:6px}
.hero .get-app{align-items:flex-start;margin-top:12px}
.hero .hero-points{justify-content:flex-start;margin-top:10px}

/* Walkthrough: the tailor behind one iPhone in Apple's frame, step tabs and a caption under it. */
.walk{display:grid;justify-items:center;width:100%;max-width:520px;justify-self:end}
.walk-stage{position:relative;text-align:left;width:100%;height:600px}
.walk-art{position:absolute;left:-60px;bottom:56px;width:330px;height:auto;z-index:0;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 97%);mask-image:linear-gradient(to bottom,#000 70%,transparent 97%)}
.walk-phone{position:absolute;right:0;top:0;width:290px;aspect-ratio:1470/3000;z-index:1;filter:drop-shadow(0 26px 40px rgb(27 29 34 / .18))}
.walk-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.walk-screens{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;z-index:1}
.walk-screen{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .55s ease}
.walk-screen.on{opacity:1}
.walk-screen:first-child{opacity:1}
.has-walk .walk-screen:not(.on){opacity:0}

/* Step tabs: one short word each over a progress line (done steps stay filled), plus pause. */
.walk-controls{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;margin-top:24px}
.walk-steps{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;list-style:none;margin:0}
.walk-step{display:grid;gap:9px;width:100%;padding:6px 0 4px;border:0;background:none;cursor:pointer;text-align:center;font:600 .875rem/1.2 var(--font);color:var(--muted)}
.ws-label{transition:color .25s}
.walk-step:hover .ws-label,.is-active .ws-label{color:var(--ink)}
.ws-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ws-bar{position:relative;height:3px;border-radius:3px;background:rgb(27 29 34 / .1);overflow:hidden}
.ws-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--cobalt);transform-origin:left;transform:scaleX(var(--p,0))}
.is-done .ws-bar::after{transform:none}
.walk-pause{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid rgb(27 29 34 / .14);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:border-color .2s}
.walk-pause:hover{border-color:rgb(27 29 34 / .32)}
.walk-pause svg{width:14px;height:14px}
.walk-pause .i-pause{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.walk-pause .i-play{fill:currentColor;display:none}
.walk-pause[aria-pressed="true"] .i-pause{display:none}
.walk-pause[aria-pressed="true"] .i-play{display:inline}
.walk-caption{width:100%;max-width:440px;min-height:3.25em;margin:14px 0 0;text-align:center;font-size:var(--text-small);line-height:1.5;color:var(--muted)}
.walk-caption strong{display:block;font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--ink)}
.walk-caption.swap{animation:walk-caption .4s ease both}
@keyframes walk-caption{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Tap on "Import my CV". */
.walk-tap{position:absolute;left:50%;top:59.4%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgb(42 91 215 / .28);opacity:0;transform:scale(.4);z-index:2}
.walk-tap.on{animation:walk-tap 1.1s .7s ease-out both}
@keyframes walk-tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}

/* Floating cards: overhang the phone, fade and rise in with their scene. */
.walk-chip,.walk-ba,.walk-toggle{position:absolute;z-index:3;margin:0;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.walk-chip.on,.walk-ba.on,.walk-toggle.on{opacity:1;transform:none}
.walk-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;background:var(--white);box-shadow:0 10px 30px rgb(27 29 34 / .14);font-size:.9375rem;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink)}

/* Callouts hang off the phone's left edge (over the illustration), touching only the bezel, so they never cover the screen. */
.walk-chip{right:calc(100% - 14px)}
.chip-import,.chip-review,.chip-paste{top:17%}
.chip-original{top:74%}
.walk-ba{left:-196px;top:13%;width:280px;padding:16px 18px;border-radius:18px;background:var(--white);box-shadow:0 14px 40px rgb(27 29 34 / .16);display:grid;gap:10px}
.walk-ba p{margin:0;font-size:.875rem;line-height:1.4;transition:opacity .45s ease,color .45s ease}
.walk-ba span{display:inline-block;width:100%;margin-bottom:2px;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}  /* inline-block: the label is not struck through with the old line */
.ba-after span{color:var(--cobalt)}
/* The after line takes no space until it shows, so the card never has an empty half. */
.walk-ba .ba-after{opacity:0;max-height:0;margin-top:-10px;overflow:hidden;transition:opacity .45s ease .1s,max-height .5s ease,margin-top .5s ease}
[data-beat="1"] .walk-ba .ba-after{opacity:1;max-height:8em;margin-top:0}
[data-beat="1"] .ba-before{color:var(--muted);text-decoration:line-through;text-decoration-color:rgb(27 29 34 / .35)}
.walk-toggle{left:50%;bottom:22%;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--ink);color:var(--on-ink-muted);font-size:.875rem;font-weight:600;translate:-50% 0;box-shadow:0 10px 30px rgb(27 29 34 / .2)}
.walk-toggle span:not(.wt-thumb){position:relative;z-index:1;padding:8px 18px;text-align:center;transition:color .35s}
.wt-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--cobalt);transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.walk-toggle span:nth-child(2){color:var(--white)}
[data-beat="1"] .wt-thumb{transform:translateX(100%)}
[data-beat="1"] .walk-toggle span:nth-child(2){color:var(--on-ink-muted)}
[data-beat="1"] .walk-toggle span:nth-child(3){color:var(--white)}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
  .walk-stage{height:540px}
  .walk-art{width:290px;left:-54px}
  .walk-phone{width:262px;right:0}
}
/* One column: headline and badge first, then the phone with its tabs, then the other ways to get it. */
@media(max-width:900px){
  .hero{text-align:center}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "get" "walk" "more" "points"}
  .hero-copy,.hero-get{display:contents}
  .hero-head{grid-area:head}
  .hero h1{font-size:clamp(2.75rem,10.5vw,4.5rem)}
  .hero .subtitle{margin-inline:auto}
  .hero .store-ctas{grid-area:get;justify-content:center;margin-top:28px}
  .hero .store-link img{height:58px}
  .walk{grid-area:walk;justify-self:center;max-width:400px;margin-top:36px}
  .hero .get-app{grid-area:more;align-items:center;margin-top:24px}
  .hero .hero-points{grid-area:points;justify-content:center;margin-top:10px}
  .walk-stage{height:484px}
  .walk-art{width:204px;bottom:40px;left:10px} /* the mannequin's far side tucks behind the phone */
  .walk-phone{width:236px;right:0}
  .walk-controls{max-width:360px;gap:10px;margin-top:20px}
  .walk-step{font-size:.75rem;letter-spacing:-.01em}
  .walk-caption{max-width:360px}
  /* No room beside the phone: callouts float centred just above its top edge. */
  .walk-chip{right:auto;left:50%;top:-22px;translate:-50% 0}
  .walk-ba{left:-110px;width:240px}
  .walk-chip{font-size:.875rem;padding:8px 14px 8px 10px}
}
@media(max-width:420px){
  .walk-stage{height:422px}
  .walk-art{width:180px;bottom:34px;left:22px}
  .walk-phone{width:206px;right:0}
  .walk-steps{gap:4px}
  .walk-ba{left:-96px;width:220px;padding:14px 16px}
  .walk-ba p{font-size:.8125rem}
}
/* Guides (/tailor-cv-to-job-description, /ats-friendly-cv, /c-v-ai-vs-chatgpt): the .legal layout plus a few extras. */
.guide .crumbs{font-size:var(--text-small);color:var(--muted);margin-bottom:12px}
/* Guide headlines scale with the phone width so kept-together phrases ("to a job description") never overflow at 320-375px. */
.guide h1{font-size:clamp(2rem,9.5vw,4rem)}
.guide .crumbs a{color:var(--muted)}
.guide .byline{font-size:var(--text-small);color:var(--muted);margin:-16px 0 var(--space-title)}
.guide h3{font-size:1.0625rem;line-height:1.4;margin:28px 0 8px}
.guide ol{margin:12px 0 0 1.25em}
.guide ol li+li{margin-top:10px}
.guide .summary{margin:16px 0}
.guide .table-wrap{overflow-x:auto;margin-top:16px}
.guide table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.55;min-width:560px}
.guide th,.guide td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line, rgba(0,0,0,.1))}
.guide thead th{font-weight:600}
.guide tbody th{font-weight:600;width:22%}
.guide .guide-cta{margin:56px 0 0}
.guide code{font-size:.9em}
/* App cards (10 Nov 2026): one inside the article where it fits, one at the end. A page-specific line, the badge and,
   on wide screens, the QR code for people reading on a computer. Cream panel, no borders. */
.app-card{display:flex;gap:28px;align-items:center;justify-content:space-between;margin:40px 0;padding:24px 28px;border-radius:var(--radius-lg);background:var(--cream)}
.app-card-end{margin-top:56px}
.app-card-copy{display:grid;gap:14px;justify-items:start;min-width:0}
.app-card-copy p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.app-card .store-link img{height:48px}
.app-card-qr{margin:0;display:grid;gap:6px;justify-items:center;flex:0 0 auto;max-width:132px;text-align:center}
.app-card-qr img{display:block;width:96px;height:96px;border-radius:10px;background:var(--white);padding:6px}
.app-card-qr figcaption{font-size:.75rem;line-height:1.35;color:var(--muted)}
@media(max-width:720px),(hover:none) and (pointer:coarse){.app-card-qr{display:none}}
@media(max-width:640px){.app-card{padding:20px;margin:32px 0}}
/* Pricing page plan cards: three in a row, stacked on phones. */
.plan-cards{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan-cards li{display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--radius-lg);background:var(--cream)}
.plan-cards .plan-featured{background:var(--cobalt);color:var(--on-ink)}
.plan-cards p{margin:0}
.plan-name{font-family:var(--display);font-weight:var(--display-weight);font-size:1.25rem;line-height:1.2}
.plan-price{font-weight:600;font-variant-numeric:tabular-nums}
.plan-cards li>p:last-child{font-size:.9375rem;line-height:1.5;opacity:.9}
@media(max-width:760px){.plan-cards{grid-template-columns:minmax(0,1fr)}}
/* App screenshots inside generated pages: Apple's frame, centred, a quiet caption. */
.page-shot{margin:28px auto;display:grid;gap:10px;justify-items:center;max-width:260px;text-align:center}
.page-shot img{display:block;width:100%;height:auto}
.page-shot figcaption{font-size:var(--text-small);color:var(--muted);line-height:1.4;text-wrap:balance}
@media(max-width:640px){.page-shot{max-width:62vw}}
/* Example CVs rendered as HTML (role pages): an A4-ish sheet in the Classic layout. */
.cv-preview{margin:28px 0;display:grid;gap:10px}
.cv-sheet{background:var(--white);color:var(--ink);border-radius:14px;box-shadow:0 1px 2px rgb(27 29 34 / .06),0 12px 32px rgb(27 29 34 / .10);padding:clamp(22px,4vw,40px);font-size:.875rem;line-height:1.5;max-width:720px}
.cv-name{font-family:var(--display);font-weight:var(--display-weight);font-size:1.5rem;letter-spacing:-.01em;line-height:1.15;margin:0}
.cv-headline{color:var(--muted);margin:4px 0 14px}
.cv-section{margin-top:14px}
.cv-section-title{font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin:0 0 6px}
.cv-section p{margin:0 0 4px}
.cv-item{margin-bottom:10px}
.cv-item-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px}
.cv-item-head>span:first-child{flex:1 1 16em;min-width:0}
.cv-dates{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-item ul{margin:4px 0 0 1.1em;padding:0}
.cv-item li{margin:2px 0}
.cv-preview figcaption{font-size:var(--text-small);color:var(--muted)}
.cv-preview figcaption a{font-weight:600}
/* Generated by scripts/build-guides.py: sources, related guides and the /guides hub (9 Nov 2026). No separator lines. */
.guide .sources{font-size:var(--text-small);color:var(--muted);display:grid;gap:6px}
.guide .sources a{color:var(--muted);text-underline-offset:3px;overflow-wrap:anywhere}
.guide .related{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.guide .related a{font-weight:600}
.guide-hub .guide-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px}
.guide-hub .guide-list a{display:grid;gap:6px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--cream);color:var(--ink);text-decoration:none}
.guide-hub .guide-list a:hover{background:var(--sand)}
.guide-hub .guide-list a:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.guide-hub .guide-title{font-family:var(--display);font-weight:var(--display-weight);font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.guide-hub .guide-summary{color:var(--muted);font-size:.9375rem;line-height:1.5}
/* Product line inside the hero H1 (8 Nov 2026): reads like the subtitle, counts as part of the heading. */
/* The product line and the .subtitle under the H1 read as one paragraph: same type at every width (one rule, 9 Nov 2026). */
.hero h1 .h1-sub,.hero .subtitle{font-family:var(--font);font-size:1.125rem;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--muted);text-wrap:pretty}
.hero h1 .h1-sub{display:block;margin-top:28px}
@media(max-width:780px){.hero h1 .h1-sub{margin-top:16px}}
.hero h1:has(.h1-sub){margin-bottom:0}

/* "ATS-readable PDFs": a short explainer, on hover (or keyboard focus) with a mouse, on tap on touch screens. */
.ats-point{position:relative}
.tip-trigger{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted rgb(27 29 34 / .35);text-underline-offset:4px}
.tip-trigger:hover,.tip-trigger[aria-expanded="true"]{color:var(--ink);text-decoration-color:var(--cobalt)}

.tip{position:absolute;z-index:20;left:0;bottom:calc(100% + 12px);width:340px;padding:18px 20px 16px;border-radius:16px;background:var(--white);box-shadow:0 2px 6px rgb(27 29 34 / .06),0 18px 48px rgb(27 29 34 / .16);text-align:left;font-size:var(--text-small);line-height:1.5;color:var(--muted);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.tip p{margin:0}
.tip p+p{margin-top:8px}
.tip .tip-title{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
.tip .text-link{margin-top:12px;font-size:var(--text-small)}
.ats-point.is-open .tip{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
@media(hover:hover) and (pointer:fine){
  .ats-point:hover .tip,.ats-point:has(.tip-trigger:focus-visible) .tip,.ats-point:has(.tip :focus-visible) .tip{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease .08s,transform .2s ease .08s,visibility 0s .08s}
}
@media(max-width:900px){.tip{left:50%;width:min(340px,calc(100vw - 40px));margin-left:calc(min(340px,calc(100vw - 40px)) / -2)}}

/* Makeover story between the first two use cases: three riso panels, arrows between (down on phones). */
.makeover{width:100%;max-width:1040px;margin:0 auto}
.makeover-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;list-style:none;margin:0;padding:0}
.makeover-steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:16px;text-align:center}
.makeover-steps img{display:block;width:100%;max-width:310px;height:auto;aspect-ratio:1;border-radius:24px}
.makeover-steps p{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--on-ink)}
.makeover-arrow{position:absolute;right:-40px;top:calc(50% - 30px);width:24px;height:24px}
@media(max-width:700px){
  .makeover-steps{grid-template-columns:minmax(0,1fr);gap:64px;max-width:280px;margin-inline:auto}
  .makeover-arrow{right:auto;left:calc(50% - 12px);top:auto;bottom:-44px;transform:rotate(90deg)}
}

/* Pricing: free first, Plus highlighted, prices with their period; badge, "Try it free" and the hero's trust row. */
.plan-featured{box-shadow:inset 0 0 0 2px var(--cobalt)}
.plan .plan-price{display:grid;justify-items:end;gap:2px;margin:0;font-size:1.25rem;font-weight:650;line-height:1.2;color:var(--ink)}
.plan .plan-price span{font-size:.75rem;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap}
.pricing-get{display:flex;align-items:center;gap:20px;margin-top:28px}
.pricing-get .store-link img{height:64px}
.pricing-free{margin:0;max-width:17em;font-size:var(--text-small);line-height:1.45;color:var(--muted)}
.pricing-free strong{display:block;font-size:1.0625rem;color:var(--ink)}
@media(max-width:420px){.pricing-get{flex-direction:column;align-items:flex-start;gap:12px}.pricing-get .store-link img{height:58px}}

/* Ask an AI about c-v.ai: a small bottom-left pill on desktop (the QR tile is bottom-right); on phones a compact row
   above the pinned Get the app button. Shown past the hero, hidden at the closing CTA and footer; dismissible.
   Logos sit in ink and take their brand colour on hover, with a small name tooltip. */
.ask-ai{position:fixed;left:20px;bottom:20px;z-index:20;display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border:1px solid rgb(27 29 34 / .06);border-radius:999px;background:rgb(255 255 255 / .92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 18px rgb(27 29 34 / .08);visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.ask-ai.on{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .3s ease}
.ask-ai[hidden]{display:none}
.ask-short{display:none}
.ask-ai-title{margin:0;font-size:.8125rem;font-weight:500;line-height:1.3;color:var(--muted);white-space:nowrap}
.ask-ai-list{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.ask-ai-list a{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:rgb(27 29 34 / .78);transition:color .15s ease,background-color .15s ease}
.ask-ai-list a:hover,.ask-ai-list a:focus-visible{color:var(--brand);background:var(--cream)}
.ask-ai-list svg{width:17px;height:17px}
.ask-ai-list a::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);padding:4px 9px;border-radius:7px;border:1px solid rgb(27 29 34 / .08);background:var(--white);color:var(--ink);box-shadow:0 4px 14px rgb(27 29 34 / .14);font-size:.75rem;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease}
.ask-ai-list a:hover::after,.ask-ai-list a:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.ask-ai-close{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.ask-ai-close svg{width:12px;height:12px}
.ask-ai-close:hover{background:var(--cream)}
@media(max-width:960px){
  /* Phones: a compact card pinned above the Get the app button: the full title on one line, the logos below. */
  .ask-ai{left:50%;right:auto;bottom:calc(74px + env(safe-area-inset-bottom));transform:translate(-50%,10px);display:grid;justify-items:center;gap:2px;width:max-content;max-width:calc(100vw - 32px);padding:9px 14px 5px;border-radius:20px}
  .ask-ai.on{transform:translate(-50%,0)}
  .ask-ai[hidden]{display:none}
  .ask-ai-title{padding:0 22px;font-size:.75rem;text-align:center;white-space:normal}
  .ask-ai-close{position:absolute;top:5px;right:5px}
  .menu-open .ask-ai{visibility:hidden;opacity:0}
}
@media(prefers-reduced-motion:reduce){.ask-ai,.ask-ai.on,.ask-ai-list a::after{transition:none}}
.footer p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(255 255 255 / .35)}
/* Claude shows a caution banner for pre-filled links, so its button copies the question instead; this note says so. */
.ask-ai-toast{position:absolute;left:50%;bottom:calc(100% + 10px);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 10px;width:max-content;max-width:min(340px,calc(100vw - 32px));margin:0;padding:8px 14px;border-radius:10px;background:var(--ink);color:var(--white);font-size:.8125rem;font-weight:500;line-height:1.4;text-align:center;pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.ask-ai-toast.on{visibility:visible;pointer-events:auto;opacity:1;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease}
.ask-ai-toast a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:374px){.plan{flex-wrap:wrap;row-gap:8px}.plan-price{flex-basis:100%;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:6px;padding-left:58px}}
/* QR popover on App Store badges (added by page.js), desktop with a mouse only. */
.qr-pop{display:none}
@media(min-width:1025px) and (hover:hover) and (pointer:fine){
  .store-link.has-qr{position:relative}
  .qr-pop{position:absolute;left:50%;top:calc(100% + 14px);z-index:30;display:grid;justify-items:center;gap:2px;width:188px;padding:14px 14px 12px;border-radius:16px;background:var(--white);color:var(--ink);text-align:center;box-shadow:0 1px 2px rgb(27 29 34 / .08),0 24px 48px -16px rgb(27 29 34 / .35);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}
  .qr-pop::before{content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;border-radius:3px;background:var(--white);transform:translate(-50%) rotate(45deg)}
  .store-link.qr-up .qr-pop{top:auto;bottom:calc(100% + 14px);transform:translate(-50%,6px)}
  .store-link.qr-up .qr-pop::before{top:auto;bottom:-6px}
  .store-link .qr-pop img{position:relative;display:block;width:140px;height:140px;margin-bottom:8px}
  .qr-pop-title{font-size:.875rem;font-weight:600;line-height:1.3}
  .qr-pop-text{font-size:.75rem;line-height:1.35;color:var(--muted);text-wrap:balance}
  .store-link.has-qr:hover .qr-pop,.store-link.has-qr:focus-visible .qr-pop{opacity:1;visibility:visible;transform:translate(-50%);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .store-link.has-qr:hover{transform:none}
}
/* The corner tile needs room as well as a mouse: wide and tall enough not to cover content. */
@media(max-width:1099px),(max-height:649px){.qr-tile:not([hidden]){display:none}}