/* Shared look for the inner pages (download, pricing, blog…). Same tokens, fonts and rules as index.html:
   lots of air, big cards, one short sentence per block. The footer styles live in footer.js (shared with every page). */
:root{
  --cream:#FFFFFF; --paper:#FAFAFB; --sand:#F2F2F5; --line:#E6E6EC;
  --ink:#0F1115; --muted:#5B606B; --faint:#9298A3;
  --coral:#E8573F; --coral-dark:#C2422C; --coral-tint:#FBE3DC; --coral-soft:#F7A08D;
  --olive:#5468D4; --olive-deep:#0B1020; --sage:#AAB5F2; --sage-tint:#EEF0FB; --olive-text:#3E4DB0;
  --butter:#F3B33D;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --text:"Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head:"Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --shadow-sm:0 1px 2px rgba(15,17,21,.05), 0 6px 16px -8px rgba(15,17,21,.14);
  --shadow:0 1px 2px rgba(15,17,21,.04), 0 18px 40px -16px rgba(15,17,21,.22);
  --shadow-lg:0 2px 4px rgba(15,17,21,.05), 0 36px 72px -28px rgba(15,17,21,.3);
  --r:16px; --r-lg:24px; --r-xl:32px;
  --container:1320px; --gutter:32px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--head);font-weight:500;letter-spacing:-.025em;line-height:1.15;margin:0}
/* section titles as on cluely.com: Geist 500, ink fading to grey; key words in coral (.k) */
h1,h2{background:linear-gradient(90deg,#19191D,#626275);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .k,h2 .k,h3 .k{color:var(--coral);-webkit-text-fill-color:var(--coral)}
p{margin:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-dark)}
.h-accent{color:var(--coral);-webkit-text-fill-color:var(--coral);font-style:normal;font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:16px;line-height:1;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--coral-dark);color:#fff;box-shadow:0 10px 24px -10px rgba(201,69,47,.6),inset 0 -1px 0 rgba(0,0,0,.08)}
.btn-primary:hover{background:#B53B27;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(201,69,47,.7)}
.btn-secondary{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{transform:translateY(-2px);border-color:#D8CDB8}
.btn-sm{padding:10px 16px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--coral-dark)}
.link::after{content:"→";transition:translate .25s var(--ease-out)}
.link:hover::after{translate:4px 0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(230,230,236,.8)}
.nav .container{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;font-size:23px;letter-spacing:-.02em}
.brand img{width:30px;height:30px}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:12px;font-size:15px;font-weight:500;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;border-radius:0;background:none;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.lang button{padding:4px 8px;border-radius:999px;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;transition:color .2s,background .2s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lang button:focus-visible{outline:2px solid var(--coral);outline-offset:1px}
.burger{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center}
.burger svg{width:22px;height:22px}
.nav-mobile{display:none}
@media (max-width:900px){
  .nav-links,.nav .btn,.nav .lang{display:none}
  .burger{display:inline-flex}
  .nav-mobile.open{display:block;position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--line);padding:16px 24px 24px;box-shadow:var(--shadow)}
  .nav-mobile a{display:block;padding:12px 0;font-weight:500;border-bottom:1px solid var(--sand)}
  .nav-mobile .lang{display:inline-flex;margin:16px 0}
  .nav-mobile .btn{display:flex;width:100%;margin-top:8px;border-bottom:0}
}

/* ---------- page head: big title, one line under it ---------- */
.page-head{padding:120px 0 88px;text-align:center}
.page-head .eyebrow{justify-content:center}
.page-head h1{font-size:clamp(46px,7vw,92px);line-height:.98;margin:20px auto 22px;max-width:14ch}
.page-head .lede{color:var(--muted);font-size:clamp(18px,1.7vw,22px);line-height:1.5;max-width:34em;margin:0 auto}
.page-head .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.page-head .pip-big{width:120px;margin:0 auto 8px}
.page-head .small{margin-top:16px;font-size:14px;color:var(--muted)}

/* ---------- sections and big cards ---------- */
.block{padding:0 0 144px}
.block-head{max-width:820px;margin:0 auto 64px;text-align:center}
.block-head h2{font-size:clamp(36px,4.6vw,58px);margin:14px 0 0}
.block-head p{color:var(--muted);font-size:19px;margin-top:16px}
.grid{display:grid;gap:32px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.bcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:48px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-out),box-shadow .3s}
a.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard h3{font-size:clamp(30px,3vw,40px);margin:28px 0 12px}
.bcard p{color:var(--muted);font-size:18px;line-height:1.55;max-width:26em}
.bcard .link{margin-top:auto;padding-top:32px}
.bcard.dark{background:var(--olive-deep);border-color:var(--olive-deep);color:#F4F1E8}
.bcard.dark h3{color:#fff}
.bcard.dark p{color:rgba(244,241,232,.76)}
.bcard.dark .icon{color:var(--sage)}
.bcard.wide{grid-column:1/-1}
.icon{display:block;color:var(--ink);flex:none}
.icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--sage-tint);color:var(--olive-text);font-size:13px;font-weight:600}
.tag.coral{background:var(--coral-tint);color:var(--coral-dark)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--olive);box-shadow:0 0 0 4px rgba(126,143,92,.18)}
.ph{background:#FFF3A8;color:#5C4A00;padding:0 .3em;border-radius:4px}

/* a dark band, like the "documents on your Mac" one on the home page */
.band{border-radius:40px;background:var(--olive-deep);color:#F4F1E8;padding:88px 72px;text-align:center}
.band h2{font-size:clamp(34px,4.4vw,56px);color:#fff}
.band p{color:rgba(244,241,232,.76);font-size:19px;margin:16px auto 0;max-width:32em}
.band .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

/* ---------- reveals ---------- */
.reveal{opacity:0;translate:0 22px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out)}
.reveal.in{opacity:1;translate:0 0}
.reveal[data-d="1"]{transition-delay:.12s}.reveal[data-d="2"]{transition-delay:.24s}.reveal[data-d="3"]{transition-delay:.36s}

@media (max-width:1024px){
  .g3{grid-template-columns:1fr 1fr}
  .band{padding:64px 40px}
}
@media (max-width:760px){
  .g2,.g3{grid-template-columns:1fr}
  .page-head{padding:72px 0 56px}
  .block{padding-bottom:96px}
  .bcard{padding:32px 24px}
}
@media (max-width:560px){
  :root{--gutter:20px}
  body{font-size:16px}
  .band{padding:52px 22px;border-radius:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto}
  .reveal{opacity:1;translate:0 0}
}

/* ---------- glass cards and night gradient, as on the home page (cluely.com-style glassmorphism) ---------- */
:root{
  --night:radial-gradient(90% 80% at 85% 0%,rgba(232,87,63,.3),transparent 60%),linear-gradient(155deg,#26305C,#0B1020 70%);
  --glass-edge:inset 1.9px 1.8px 8px rgba(255,255,255,.13),inset 1px .9px 4px rgba(255,255,255,.13);
  --light-glass:radial-gradient(167% 140% at 79.5% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),radial-gradient(120% 125% at 7% 100%,#E3E8F5 0%,#F3F5FA 100%);
  --light-edge:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 2px 4px rgba(15,17,21,.04);
  --glass-shadow:0 1px 2px rgba(15,17,21,.04),0 18px 40px -22px rgba(15,17,21,.18);
}
html .bcard,html .slim,html .btoc,html .alist,html .pn a,html .body .example,html .toc-m,html .note.info,html .kit,html .pl-card:not(.pl-solo){background:var(--light-glass);border-color:transparent;box-shadow:var(--light-edge),var(--glass-shadow)}
html .bcard.dark,html .status-hero{background:var(--night);color:#F4F5FA;box-shadow:var(--glass-edge),var(--glass-shadow)}
html .note{background:rgba(238,240,251,.7);color:var(--ink);box-shadow:var(--light-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html .results{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* icons without a tinted tile */
html .kit-list .ki{background:none;width:24px;height:24px}
html .tag{background:rgba(238,240,251,.8)}
/* small text links get a taller hit area (WCAG 2.5.8) */
html .crumbs a,html .post-meta a,html .p-crumbs a{display:inline-block;padding-block:3px}
/* app screenshots in help articles and blog posts: no white frame; the transparent chat/bar/menu PNGs keep their shape */
html .body img{display:block;height:auto;margin:32px auto;border:0;border-radius:12px;box-shadow:0 0 0 .5px rgba(15,17,21,.08),0 24px 48px -24px rgba(15,17,21,.35)}
html .body img[src$=".png"]{border-radius:0;box-shadow:none;filter:drop-shadow(0 16px 26px rgba(15,17,21,.28))}
/* referral (invitations): hidden until the TellPip server says the programme is on (footer.js adds html.tp-referral) */
html:not(.tp-referral) [data-referral]{display:none!important}
html.tp-referral [data-referral-off]{display:none!important}
/* local prices (footer.js): USA/Canada see prices before tax (html.tp-usd); everyone else the VAT-included wording */
html:not(.tp-usd) [data-usd]{display:none!important}
html.tp-usd [data-not-usd]{display:none!important}
.tp-tax{font-size:.78em;font-weight:500;opacity:.8;white-space:nowrap}