/* ------------------------------------------------------------------
   Prozollo — marketing site.

   The product's own themes are the star, so the site holds back: warm
   paper, near-black ink, one accent used as a mark rather than a wash.
   Editorial rather than SaaS — asymmetric hero, oversized display serif,
   no gradient blobs, no three-icon feature grid.
   ------------------------------------------------------------------ */

:root{
  --ink:#14161a;
  --ink-2:#2f3339;
  --body:#4a4f57;
  --muted:#7d838d;
  --paper:#f8f6f2;
  --paper-2:#f1eee8;
  --line:#e2ded6;
  --line-2:#d3cec4;
  --white:#fff;
  --accent:#c20f1f;   /* sampled from the logo artwork */
  --accent-dk:#9c0c19;

  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1200px;
  --r:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--ui);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:13px 20px;border-radius:0 0 var(--r) 0;text-decoration:none}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.ctr{text-align:center}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:400;letter-spacing:-.012em}
h1,.giant{font-family:var(--display);line-height:.98;letter-spacing:-.025em}
h1{font-size:clamp(52px,8.4vw,116px)}
.giant{font-size:clamp(44px,7vw,96px)}
.giant.sm{font-size:clamp(38px,5.6vw,76px)}
h1 em,.giant em{font-style:italic;color:var(--accent)}
.sec-h{font-family:var(--display);font-size:clamp(32px,4.4vw,58px);line-height:1.06;
  letter-spacing:-.02em;margin-bottom:18px}
.sec-l{font-size:19px;max-width:56ch;color:var(--body);margin:0 0 44px}
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.19em;
  color:var(--accent);margin:0 0 18px}
.eyebrow.light{color:#e8a49a}
.micro{font-size:14px;color:var(--muted);margin:14px 0 0}
p{margin:0 0 16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-size:16px;font-weight:600;text-decoration:none;
  padding:13px 22px;border-radius:var(--r);border:1.5px solid var(--line-2);
  color:var(--ink);background:var(--white);transition:transform .12s,background .12s,border-color .12s}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-p{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-p:hover{background:#000;border-color:#000}
.btn-w{background:#fff;border-color:#fff;color:var(--ink)}
.btn-w:hover{background:#f0ede8;border-color:#f0ede8}
.btn-o{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn-o:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{font-size:17px;padding:16px 28px}
.btn-full{width:100%;margin-bottom:10px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ctr-cta{justify-content:center}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(248,246,242,.96);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .2s,background .2s}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:70px}
.mark{display:flex;align-items:center;text-decoration:none}
.mark img{height:26px;width:auto}

/* Footer carries the full lockup, which already states what the product is. */
.foot-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-brand img{height:30px;width:auto}
.foot-brand i{font-style:normal}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;color:var(--body);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:10px 17px;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:82px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:end}
.hero-l h1{margin-top:6px}
.hero-r{padding-bottom:12px}
.lede{font-size:21px;line-height:1.5;color:var(--ink-2);max-width:46ch}
.lede-2{font-size:17px;color:var(--body);max-width:46ch}

/* ---------- product carousels ----------
   Coverflow rather than a full ring. Two reasons: z-index can be set per
   card so a neighbour can never punch through the front one, and each deck
   sizes itself from its own aspect ratio — mixing an 11:8.5 card with an
   8.5:11 card in one fixed-height stage is what broke the old version on
   narrow screens. Cards stay bunched close, which reads better than a
   spread-out ring. */
/* Two bands, deliberately different grounds so the page has a beat between
   them rather than one long strip of screenshots. */
.shot-band{padding:92px 0 78px}
.shot-band.land{background:var(--paper)}
.shot-band.port{background:var(--ink)}
.shot-band.port .sec-h{color:#fff}
.shot-band.port .sec-l.light{color:#b9bec6}
.shot-band .sec-l{margin-bottom:10px}
.shot-note{text-align:center;font-size:13px;color:var(--muted);margin:30px 0 0;
  letter-spacing:.03em}
.shot-note.light{color:#7f868f}

/* focus ring belongs on the carousel itself now that it takes keyboard focus */
.carousel:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:12px}
.shot-band.port .carousel:focus-visible{outline-color:#f0857a}

/* controls invert on the dark band */
.shot-band.port .car-btn{background:transparent;border-color:#3a4048;color:#e8eaee}
.shot-band.port .car-btn:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.shot-band.port .car-dots button{background:#3a4048}
.shot-band.port .car-dots button[aria-selected="true"]{background:#f0857a}
.shot-band.port .card figcaption{color:#8d939c}
.shot-band.port .card img{border-color:rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.4),0 30px 60px -22px rgba(0,0,0,.7)}

.carousel{position:relative;margin-top:42px}
.car-label{text-align:center;font-size:12px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* --card-w drives everything; the stage height follows the aspect ratio so
   a portrait deck is simply taller instead of overflowing. */
.stage3d{position:relative;perspective:1700px;perspective-origin:50% 50%;
  --card-w:min(560px,52vw);
  height:calc(var(--card-w) / (var(--ratio)) + 46px);
  overflow:hidden}
#carPort .stage3d{--card-w:min(400px,38vw)}

.deck{position:absolute;inset:0;transform-style:preserve-3d}
/* Cursors state the rule: the active pane is a handle, the panes behind it
   are targets. Easing is killed mid-drag or the card lags the pointer. */
.stage3d{cursor:default}
.card{cursor:pointer}
.card.is-front{cursor:grab}
.deck.is-dragging .card.is-front{cursor:grabbing}
.deck.is-dragging .card{transition:none}
.card img{user-select:none;-webkit-user-drag:none}
.card{position:absolute;left:50%;top:50%;margin:0;width:var(--card-w);
  transform:translate(-50%,-50%);
  transition:transform .55s cubic-bezier(.22,.72,.24,1),opacity .55s;
  will-change:transform;backface-visibility:hidden}
.card img{width:100%;height:auto;border-radius:4px;background:#fff;
  box-shadow:0 2px 8px rgba(20,22,26,.12),0 26px 52px -24px rgba(20,22,26,.5);
  border:1px solid rgba(20,22,26,.1)}
.card figcaption{position:absolute;left:0;right:0;bottom:-30px;text-align:center;
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity .35s}
.card.is-front figcaption{opacity:1}
/* anything beyond the two flanking cards is out of the composition entirely */
.card.is-hidden{opacity:0;pointer-events:none}

.car-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:44px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);
  background:var(--white);color:var(--ink);font-size:21px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 3px;flex:0 0 auto}
.car-btn:hover{border-color:var(--ink)}
.car-dots{display:flex;gap:8px}
.car-dots button{width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:0;background:var(--line-2);transition:background .2s,transform .2s}
.car-dots button[aria-selected="true"]{background:var(--accent);transform:scale(1.45)}
.car-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Reduced motion, or no 3D: a plain snap scroller that still shows every
   screenshot at full size. */
.carousel.flat .stage3d{perspective:none;height:auto;overflow-x:auto;overflow-y:hidden}
.carousel.flat .deck{position:static;display:flex;gap:20px;padding:4px 20px 34px;
  transform:none;scroll-snap-type:x mandatory}
.carousel.flat .card{position:static;transform:none!important;opacity:1!important;
  flex:0 0 min(80vw,var(--card-w));scroll-snap-align:center}
.carousel.flat .card figcaption{position:static;opacity:1;margin-top:12px}
.carousel.flat .car-ctl{display:none}

@media (max-width:760px){
  .stage3d{--card-w:min(300px,74vw)}
  #carPort .stage3d{--card-w:min(232px,58vw)}
  .car-ctl{margin-top:38px}
}


/* ---------- "not a template" ----------
   Small CSS dioramas rather than icons: each one shows the actual gesture
   being described — a row being added, one being removed, colour spacers,
   pages being reordered. No icon font, no images. */
.build{background:var(--paper-2)}
.build-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.bcard{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:26px 26px 28px}
.bcard.span2{grid-column:1/-1}
.bcard h3{font-size:21px;font-weight:600;font-family:var(--ui);margin:20px 0 8px}
.bcard p{font-size:16px;margin:0}

.bviz{height:104px;border-radius:9px;background:var(--paper);padding:14px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;overflow:hidden}
.brow{display:block;height:13px;border-radius:3px;background:var(--line-2)}
.brow:nth-child(2){width:78%}
.brow.add{background:none;border:1.5px dashed var(--accent);color:var(--accent);
  height:26px;display:flex;align-items:center;justify-content:center;
  font:600 11.5px/1 var(--ui);letter-spacing:.04em}
.brow.gone{background:none;border:1.5px dashed var(--line-2);color:#b3391f;
  height:26px;display:flex;align-items:center;justify-content:center;
  font:700 15px/1 var(--ui)}

.bviz-spacer{flex-direction:row;gap:10px;align-items:stretch}
.sp{flex:1;border-radius:6px}
.sp-ink{background:#15171b}
.sp-accent{background:var(--accent)}
.sp-slate{background:#2e4052}
.sp-forest{background:#12261c}

.bviz-pages{flex-direction:row;gap:9px;align-items:center;justify-content:center}
.bviz-pages .pg{width:38px;height:50px;border-radius:4px;background:var(--white);
  border:1px solid var(--line-2)}
.bviz-pages .pg.drag{border-color:var(--accent);border-width:2px;transform:translateY(-7px)}
.bviz-pages .pg.off{opacity:.35;border-style:dashed}

.bviz-text{justify-content:flex-start}
.bviz-text::before{content:"Fixed price, stated plainly";font-family:var(--display);
  font-size:23px;color:var(--ink);line-height:1.15}
.bviz-text .cursor{display:inline-block;width:2px;height:23px;background:var(--accent);
  animation:blink 1.1s step-end infinite;margin-top:4px}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bviz-text .cursor{animation:none}}

@media (max-width:760px){
  .build-grid{grid-template-columns:1fr}
  .bcard.span2{grid-column:auto}
}


/* ---------- conversion furniture ----------
   A persistent bar, hard specs, the cost comparison and the guarantee. The
   bar only appears once the hero CTA has scrolled away, so it never competes
   with the primary call to action. */

.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(20,22,26,.97);backdrop-filter:saturate(160%) blur(10px);
  border-top:1px solid #2c313a;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cta-bar.show{transform:none}
.cta-bar-in{display:flex;align-items:center;gap:16px;padding:12px 32px;flex-wrap:wrap}
.cb-txt{color:#cfd3da;font-size:15px}
.cb-txt b{color:#fff;font-weight:600}
.cb-price{margin-left:auto;color:#fff;font-weight:600;font-size:17px}
.cb-price i{color:#8d939c;font-style:normal;font-weight:400;font-size:14px}
.cta-bar .btn{padding:10px 18px;font-size:15px}
.cta-bar .btn-p{background:#fff;border-color:#fff;color:var(--ink)}
.cta-bar .btn-p:hover{background:#efece7;border-color:#efece7}
.cb-demo{background:transparent;border-color:#3a4048;color:#e8eaee}
.cb-demo:hover{border-color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:760px){
  .cb-txt,.cb-demo{display:none}
  .cb-price{margin-left:0}
  .cta-bar-in{padding:10px 20px;gap:12px}
  .cta-bar .btn-p{margin-left:auto}
}

.specs{background:var(--paper-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:34px 0}
.spec-row{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:0}
.spec-row > div{text-align:center}
.spec-row dt{font-family:var(--display);font-size:clamp(38px,4.4vw,58px);color:var(--ink);
  line-height:1}
.spec-row dd{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.4}
@media (max-width:860px){
  .spec-row{grid-template-columns:repeat(2,1fr);gap:26px}
  .spec-row > div:last-child{grid-column:1/-1}
}

.maths{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  margin:48px 0 34px;border-top:1px solid #2c313a;padding-top:40px}
.maths-col{background:#1c1f25;border-radius:14px;padding:26px 24px}
.maths-col.win{background:#fff}
.mk{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:#8d939c;margin:0 0 10px}
.maths-col.win .mk{color:var(--accent)}
.mv{font-family:var(--display);font-size:52px;line-height:1;color:#fff;margin:0 0 12px}
.mv i{font-style:normal;font-size:20px;color:#8d939c}
.maths-col.win .mv{color:var(--ink)}
.mn{font-size:15px;color:#9aa1ad;margin:0;line-height:1.55}
.maths-col.win .mn{color:var(--body)}
.maths-vs{font-family:var(--display);font-size:24px;color:#6e757f}
.own-cta{margin-top:34px}
@media (max-width:760px){
  .maths{grid-template-columns:1fr;gap:14px}
  .maths-vs{text-align:center}
}

.guarantee{background:var(--paper-2);padding:78px 0;border-top:1px solid var(--line)}
.guar-in{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.guar-mark{width:118px;height:118px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:52px;line-height:1;padding-bottom:6px}
.guarantee .sec-h{margin-bottom:12px}
.guarantee p{font-size:17.5px;max-width:64ch;margin:0}
.guar-cta{margin-top:26px}
@media (max-width:760px){
  .guar-in{grid-template-columns:1fr;gap:22px}
  .guar-mark{width:88px;height:88px;font-size:36px}
}

.mid-cta{text-align:center;padding:0 32px 96px}
.mid-cta p{font-size:17px;color:var(--muted);margin:0}

/* ---------- ownership ---------- */
.own{background:var(--ink);color:#cfd3da;padding:104px 0}
.own h2{color:#fff;margin-bottom:52px}
.own h2 em{color:#f0857a}
.own-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;
  border-top:1px solid #2c313a;padding-top:40px}
.own-col h3{color:#fff;font-family:var(--ui);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:20px}
.own-list{list-style:none;margin:0;padding:0}
.own-list li{position:relative;padding-left:32px;margin-bottom:14px;font-size:17.5px;color:#cfd3da}
.own-list li::before{position:absolute;left:0;top:0;font-size:16px}
.own-list.yes li::before{content:"✓";color:#5fc47c}
.own-list.no li::before{content:"✕";color:#6e757f}
.own-list.no li{color:#8d939c}
.own-foot{margin:44px 0 0;font-size:17px;color:#8d939c;max-width:62ch}

/* ---------- sections ---------- */
.sec{padding:104px 0}
.sec-soft{background:var(--paper-2)}

/* themes */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.theme h3{font-family:var(--display);font-size:31px;margin:22px 0 2px}
.theme .role{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);margin-bottom:12px}
.theme p{font-size:16px}
.theme .pnote{font-size:14px;font-weight:600;color:var(--accent);margin:0}

.mock{aspect-ratio:11/8.5;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:16px 18px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 12px 26px -18px rgba(20,22,26,.4)}
/* classic */
.m-classic .mc-head{display:flex;justify-content:space-between;border-bottom:1px solid #e8eaee;
  padding-bottom:6px;margin-bottom:13px}
.m-classic .mc-head i{width:34px;height:5px;background:#c9ced6;border-radius:2px}
.m-classic .mc-head b{width:22px;height:5px;background:#dfe3e8;border-radius:2px}
.m-classic .mc-eye{width:44px;height:5px;background:var(--accent);border-radius:2px;margin-bottom:8px}
.m-classic .mc-title{width:76%;height:13px;background:#15171b;border-radius:3px;margin-bottom:15px}
.m-classic .mc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1}
.m-classic .mc-cards span{background:#f4f5f7;border-radius:7px}
.m-classic .mc-cards span.on{background:#15171b}
.m-classic .mc-foot{height:1px;background:#e8eaee;margin-top:11px}
/* dossier */
.m-dossier{padding:16px 0 0}
.m-dossier .md-seq{position:absolute;left:-4px;bottom:-16px;font-family:var(--ui);
  font-weight:700;font-size:82px;color:var(--accent);opacity:.1;line-height:.7}
.m-dossier .md-rule{height:1px;background:#e8eaee;margin:0 0 15px}
.m-dossier .md-big{width:72%;height:19px;background:#15171b;border-radius:2px;margin:0 18px 8px}
.m-dossier .md-sub{width:40%;height:6px;background:#c9ced6;border-radius:2px;margin:0 18px 16px}
.m-dossier .md-bands{margin-top:auto;position:relative;z-index:2}
.m-dossier .md-bands span{display:block;height:23px;border-top:1px solid #e8eaee;background:#fff}
.m-dossier .md-bands span.on{background:#15171b;border-color:#15171b}
/* vellum */
.m-vellum{background:#faf8f4;align-items:center;text-align:center}
.m-vellum .mv-frame{position:absolute;inset:9px;border:1px solid #e3ddd2}
.m-vellum .mv-num{font-family:var(--display);font-size:11px;letter-spacing:.3em;
  color:var(--accent);margin-bottom:14px;position:relative}
.m-vellum .mv-ctr{position:relative;margin-bottom:14px}
.m-vellum .mv-ctr i{display:block;width:30px;height:4px;background:var(--accent);
  margin:0 auto 9px;border-radius:2px}
.m-vellum .mv-ctr b{display:block;width:118px;height:11px;background:#1a1714;
  border-radius:2px;margin:0 auto 7px}
.m-vellum .mv-ctr u{display:block;width:78px;height:5px;background:#c3bcb0;
  border-radius:2px;margin:0 auto;text-decoration:none}
.m-vellum .mv-sched{width:100%;margin-top:auto;position:relative;border-top:2px solid #1a1714}
.m-vellum .mv-sched span{display:block;height:17px;border-bottom:1px solid #e3ddd2}

.samples-cta{margin-top:56px;border-top:1px solid var(--line);padding-top:32px}
.samples-cta p{font-size:16px;color:var(--muted)}
.samples{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.samples a{display:inline-flex;gap:7px;align-items:baseline;text-decoration:none;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);
  padding:11px 16px;font-size:15px;font-weight:600;color:var(--ink)}
.samples a:hover{border-color:var(--ink)}
.samples span{font-weight:400;color:var(--muted);font-size:13.5px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.steps li{border-top:2px solid var(--ink);padding-top:18px}
.steps b{display:block;font-family:var(--display);font-size:34px;color:var(--accent);
  line-height:1;margin-bottom:10px}
.steps h3{font-size:19px;font-family:var(--ui);font-weight:600;margin-bottom:7px}
.steps p{font-size:15.5px;margin:0}

/* who */
.who-list{margin:0;padding:0}
.who-list > div{display:grid;grid-template-columns:minmax(180px,.9fr) 2.4fr;gap:36px;
  border-top:1px solid var(--line);padding:26px 0}
.who-list dt{font-family:var(--display);font-size:31px;color:var(--ink);line-height:1.1}
.who-list dd{margin:0;font-size:17px;max-width:62ch}

/* features */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 52px}
.feats h4{font-size:19px;font-weight:600;margin-bottom:7px}
.feats p{font-size:16px;margin:0}

/* privacy */
.privacy-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.privacy-detail p{font-size:16.5px}
.privacy-detail b{color:var(--ink);font-weight:600}

/* price */
.price-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:11px;font-size:17px}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.price-box{background:var(--ink);color:#cfd3da;border-radius:16px;padding:34px 30px;
  position:sticky;top:96px}
.pb-lab{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:#8d939c;margin-bottom:10px}
.amount{font-family:var(--display);color:#fff;line-height:1;display:flex;
  align-items:flex-start;gap:3px;margin-bottom:6px}
.amount span{font-size:30px;margin-top:9px}
.amount b{font-size:80px;font-weight:400}
.once{font-size:15px;color:#8d939c;margin-bottom:24px}
.price-box .btn{border-color:#3a4048;background:#22262e;color:#e8eaee}
.price-box .btn:hover{border-color:#5a616b}
.price-box .btn-p{background:#fff;border-color:#fff;color:var(--ink)}
.price-box .btn-p:hover{background:#efece7}
.price-box .micro{color:#787f89}

/* faq */
.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:19px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:28px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .16s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq p{font-size:16.5px;padding:0 40px 22px 0;margin:0;max-width:70ch}

/* end */
.end{background:var(--ink);color:#fff;padding:112px 0}
.end h2{color:#fff}
.end em{color:#f0857a}

/* footer */
.foot{padding:34px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr;gap:30px;align-items:start}
  .themes{grid-template-columns:1fr;gap:44px}
  .theme{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
  .theme .mock{grid-row:span 4}
  .theme h3{margin-top:0}
  .steps{grid-template-columns:1fr 1fr}
  .own-grid,.price-in,.privacy-in{grid-template-columns:1fr;gap:36px}
  .price-box{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .nav-in{height:62px;gap:14px}
  .mark{margin-right:auto}
  .hero{padding:52px 0 8px}
  .sec,.own,.end{padding:72px 0}
  .theme{grid-template-columns:1fr;gap:16px}
  .theme .mock{grid-row:auto;max-width:340px}
  .steps{grid-template-columns:1fr;gap:24px}
  .feats{grid-template-columns:1fr;gap:28px}
  .who-list > div{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .who-list dt{font-size:26px}
  .own-grid{gap:28px}
  .cta-row .btn{flex:1 1 100%}
}