/* =========================================================================
   DreamPack Studio — marketing site
   ---------------------------------------------------------------------
   Direction: a dark room, cinematically lit, with very little in it. The
   rendered scenes carry the atmosphere; the type stays out of their way.

   Three rules the file obeys:
   1. Colour is rationed. Red means "this commits". Nothing else is red, and
      it is the app's red (#D63B2F), not a second one chosen for this page.
   2. Only `transform` and `opacity` animate on scroll — everything else is a
      paint the compositor cannot skip.
   3. Words are expensive. If a rule here exists to make room for more text,
      it is the wrong rule.
   ========================================================================= */

:root{
  --void:#070B10;
  --deep:#0C131B;
  --board:#131D28;

  --ink:#F2F6FA;
  --ink-soft:#A8B7C4;
  --ink-faint:#8FA3B5;
  --line:#1E2C3A;
  --line-strong:#33465B;

  /* The app's red, verbatim from realize-platform/styles.css. The site used
     to run a brighter vermilion (#FF5C4A) because it is a dark theme and the
     app is a light one — but a customer meets both, and two different reds
     across one product reads as two products. The app's is the one that
     prints, so the site moved.
     It is also the better contrast here: white on #D63B2F is 4.6:1 against
     3.0:1 on the old vermilion, so the buttons went from large-text-only to
     passing AA outright. --hot is the hover, --deep the shadow side of the
     logo's gradient; both are derived from the base rather than picked. */
  --red:#D63B2F;
  --red-hot:#E8493B;
  --red-deep:#A82E24;
  --cyan:#5BB8DC;
  --cyan-deep:#2E86AB;
  --ok:#5CC08A;
  --warn:#E3A24A;

  /* the paper the product actually makes */
  --paper:#FAFAF8;
  --paper-ink:#1E2A38;
  --paper-soft:#5C6B7A;
  --paper-faint:#8B98A5;
  --paper-line:#DDE2E2;

  --display:"Archivo","Avenir Next",Futura,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1180px;
  --r:14px;
  --r-lg:22px;
  --r-pill:100px;
  --grid:44px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  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;}
::selection{background:var(--red);color:#fff;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:100px;border:3px solid var(--void);}

/* =========================================================================
   The room — graph paper lit by a lamp that follows the pointer
   -------------------------------------------------------------------------
   The grid is MASKED by the light rather than overlaid with a highlight, so
   the page reads as a dark room with a lamp in it. Same pixels either way;
   completely different perceived material.
   ========================================================================= */
.room{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.room__grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right,rgba(120,160,200,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(120,160,200,.05) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(640px 640px at var(--mx,50%) var(--my,40%),#000,rgba(0,0,0,.5) 44%,transparent 75%);
          mask-image:radial-gradient(640px 640px at var(--mx,50%) var(--my,40%),#000,rgba(0,0,0,.5) 44%,transparent 75%);
}
.room__grid--base{
  -webkit-mask-image:none;mask-image:none;
  background-size:calc(var(--grid) * 4) calc(var(--grid) * 4);opacity:.45;
}
.room__glow{
  position:absolute;inset:0;
  background:radial-gradient(780px 580px at var(--mx,50%) var(--my,40%),rgba(214,59,47,.075),transparent 70%);
}
.room__grain{
  position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* =========================================================================
   Cursor — a crosshair, the app's own cursor for placing a callout
   ========================================================================= */
.cursor{
  position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .3s;
  will-change:transform;
}
.cursor.is-on{opacity:1;}
.cursor__ring{
  position:absolute;inset:0;border:1px solid rgba(91,184,220,.5);border-radius:100px;
  transition:transform .28s var(--ease),border-color .28s,background .28s;
}
.cursor__ring::before,.cursor__ring::after{content:"";position:absolute;background:rgba(91,184,220,.45);}
.cursor__ring::before{left:50%;top:-7px;width:1px;height:5px;margin-left:-.5px;}
.cursor__ring::after{left:50%;bottom:-7px;width:1px;height:5px;margin-left:-.5px;}
.cursor__dot{position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--red);border-radius:100px;}
.cursor.is-hot .cursor__ring{transform:scale(1.9);border-color:var(--red);background:rgba(214,59,47,.1);}
@media (pointer:coarse){.cursor{display:none;}}

/* =========================================================================
   Layout + type
   ========================================================================= */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.wrap--wide{max-width:1400px;}
.wrap--narrow{max-width:780px;}
main{position:relative;z-index:1;}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.032em;line-height:1;margin:0;font-stretch:112%;}
.h-xl{font-size:clamp(46px,8vw,120px);line-height:.94;letter-spacing:-.042em;}
.h-lg{font-size:clamp(34px,5.2vw,68px);line-height:1;letter-spacing:-.036em;}
.h-md{font-size:clamp(27px,3.4vw,44px);line-height:1.05;}

/* The one italic voice on the page. Two words total — which is what stops it
   reading as decoration and makes it read as a signature. */
.ser{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;font-stretch:normal;}
.ink-red{color:var(--red);}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;align-items:center;gap:12px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--red);flex:none;}
.eyebrow--center{justify-content:center;}
.eyebrow--center::after{content:"";width:24px;height:1px;background:var(--red);flex:none;}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-soft);max-width:52ch;margin:22px 0 0;}
.lede b{color:var(--ink);font-weight:600;}
.mini-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}

.sec{padding-block:clamp(86px,11vw,170px);}
.sec--tight{padding-block:clamp(72px,8.5vw,128px);}
.sec__head{max-width:56ch;}
/* A centred head is measured in PIXELS, not `ch`. 56ch is a reading measure
   for 16px body copy; applied to a 68px headline it forces a three-line stack
   out of a two-line sentence. */
.sec__head--center{margin-inline:auto;text-align:center;max-width:min(820px,100%);}
.sec__head--center .lede{margin-inline:auto;max-width:54ch;}

/* status pills, shared by every mock */
.pill-ok,.pill-cy,.pill-dash{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;
}
.pill-ok{background:#E4F1E9;color:#2E7D4F;}
.pill-cy{background:#E3F0F6;color:#2E86AB;}
.pill-dash{border:1px dashed var(--paper-line);color:var(--paper-faint);}

/* A visible marker on anything that looks like real workspace data. It IS
   sample data, and a screenshot of this page circulating without that word on
   it is how sample data quietly stops looking like sample data. */
.sample-tag{
  margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border:1px dashed var(--line-strong);border-radius:var(--r-pill);padding:3px 8px;
}

/* =========================================================================
   Buttons — big soft pills
   -------------------------------------------------------------------------
   The magnetic lean is applied to an inner span, never to the button itself:
   moving the hit area out from under the cursor attracting it makes a button
   that runs away.
   ========================================================================= */
.btn{position:relative;display:inline-flex;border-radius:var(--r-pill);isolation:isolate;}
.btn__in{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:17px 32px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.012em;
  transform:translate3d(var(--dx,0px),var(--dy,0px),0);
  transition:transform .5s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .35s;
  will-change:transform;
}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
.btn:active .btn__in{transform:translate3d(var(--dx,0),var(--dy,0),0) scale(.96);transition-duration:.08s;}

.btn--pill .btn__in{background:var(--red);color:#fff;box-shadow:0 12px 34px -10px rgba(214,59,47,.6);}
.btn--pill:hover .btn__in{background:var(--red-hot);box-shadow:0 18px 50px -12px rgba(214,59,47,.8);}

.btn--ghostpill .btn__in{
  background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);
}
.btn--ghostpill:hover .btn__in{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}

.btn--primary .btn__in{background:var(--red);color:#fff;box-shadow:0 8px 24px -8px rgba(214,59,47,.55);}
.btn--primary:hover .btn__in{background:var(--red-hot);}
.btn--sm .btn__in{padding:11px 20px;font-size:14px;}

/* =========================================================================
   Header
   ========================================================================= */
.hdr{position:fixed;top:0;left:0;right:0;z-index:600;border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s;}
.hdr.is-stuck{background:rgba(7,11,16,.7);backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line);}
.hdr__in{display:flex;align-items:center;gap:26px;height:72px;}

.logo{display:flex;align-items:center;gap:11px;flex:none;}
.logo__mark{
  position:relative;width:31px;height:31px;border-radius:9px;flex:none;overflow:hidden;
  background:linear-gradient(150deg,var(--red),var(--red-deep));
  box-shadow:0 6px 18px -6px rgba(214,59,47,.7);display:grid;place-items:center;
}
.logo__mark svg{width:17px;height:17px;}
.logo__mark::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
}
.logo:hover .logo__mark::after{animation:sheen .9s var(--ease);}
@keyframes sheen{to{transform:translateX(120%);}}
.logo__word{font-family:var(--display);font-weight:700;font-size:16.5px;font-stretch:112%;}
.logo__word em{font-style:normal;color:var(--ink-faint);font-weight:500;}

.nav{display:flex;gap:2px;margin-left:14px;}
.nav a{padding:9px 15px;border-radius:var(--r-pill);font-size:14.5px;color:var(--ink-soft);transition:color .2s,background .2s;}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.05);}

.hdr__cta{margin-left:auto;display:flex;align-items:center;gap:12px;}
/* Sign in. Styled as nav, not as a button: it is for people who already pay
   us, and it must not compete with the one CTA on the page. It goes with the
   nav below the breakpoint — the drawer carries its own copy. */
.hdr__signin{
  padding:9px 4px;font-size:14.5px;color:var(--ink-soft);
  transition:color .2s;white-space:nowrap;
}
.hdr__signin:hover{color:var(--ink);}
.hdr__burger{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line-strong);}
.hdr__burger span{display:block;width:16px;height:1.5px;background:var(--ink);margin:3.5px auto;transition:transform .3s var(--ease),opacity .2s;}
.hdr__burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hdr__burger.is-open span:nth-child(2){opacity:0;}
.hdr__burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.hdr__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--cyan));
  transform:scaleX(var(--p,0));transform-origin:0 50%;opacity:0;transition:opacity .4s;
}
.hdr.is-stuck .hdr__prog{opacity:.9;}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:120px 0 90px;overflow:hidden;
}
/* The render is inset past the top and bottom so the parallax has somewhere
   to travel without exposing an edge. `background-attachment:fixed` would do
   this in one line and jitters on iOS, so it is a transform on a real element. */
.hero__scene{position:absolute;inset:-8% 0;z-index:0;will-change:transform;}
.hero__scene img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
/* Two scrims. The linear one keeps the header and the scroll cue legible; the
   radial one opens a pool of clean darkness behind the headline, so the
   display type never has to sit on the render's brightest patch. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 52% at 50% 46%,rgba(4,7,11,.86),rgba(4,7,11,.34) 62%,transparent 82%),
    linear-gradient(180deg,rgba(7,11,16,.86) 0%,rgba(7,11,16,.22) 26%,rgba(7,11,16,.5) 70%,var(--void) 100%);
}
.hero__in{position:relative;z-index:2;}
.hero .eyebrow{margin-bottom:26px;}

.reveal-line{display:block;overflow:hidden;}
.reveal-line > span{
  display:inline-block;transform:translateY(104%);opacity:0;
  animation:riseIn 1s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 110ms + 220ms);
}
@keyframes riseIn{to{transform:none;opacity:1;}}

.hero__sub{
  margin:28px auto 0;max-width:34ch;
  font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--ink-soft);
  animation:fadeUp .9s var(--ease) .72s both;
}
.hero__acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px;
  animation:fadeUp .9s var(--ease) .86s both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.hero__scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  animation:fadeUp 1s var(--ease) 1.3s both;
}
.hero__scroll i{display:block;width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.28),transparent);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:linear-gradient(transparent,var(--red));animation:tick 2.2s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes tick{to{top:52px;}}

.hero__badge{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;display:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  align-items:center;gap:9px;
}
.hero__badge .dot{width:5px;height:5px;border-radius:100px;background:var(--ok);box-shadow:0 0 9px var(--ok);}

/* =========================================================================
   THREE STEPS
   -------------------------------------------------------------------------
   Tall section, sticky stage, one number. The deck is a 3D carousel: the
   active card is forward and upright, the others are pushed back in Z and
   rotated away — so depth does the work a row of tabs would otherwise do.
   ========================================================================= */
.steps{position:relative;}
.steps__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.steps__bg img{position:sticky;top:0;width:100%;height:100svh;object-fit:cover;opacity:.62;will-change:transform;}
/* The scrim has to darken the middle enough for white type and still leave the
   arches readable. At .72 over a .24 image the render was gone entirely and
   the section was just a dark box — which is the whole atmosphere thrown away
   to protect type that was never at risk. The horizontal gradient is what
   does the real work: it clears the centre column where the card sits and
   leaves both edges bright. */
.steps__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 58% at 50% 50%,rgba(6,10,14,.9),rgba(6,10,14,.55) 58%,transparent 88%),
    linear-gradient(180deg,var(--void) 0%,rgba(7,11,16,.36) 18%,rgba(7,11,16,.36) 82%,var(--void) 100%);
}
.steps__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;z-index:2;overflow:hidden;}
.steps__in{width:100%;}
.steps__head{text-align:center;margin-bottom:clamp(26px,3.4vw,44px);}
.steps__head .eyebrow{margin-bottom:16px;}

/* ---- the rail ---- */
.rail{max-width:640px;margin:0 auto clamp(26px,3.6vw,48px);}
.rail__line{height:1px;background:var(--line-strong);position:relative;}
.rail__line i{
  position:absolute;left:0;top:0;height:1px;width:100%;background:var(--red);
  transform:scaleX(var(--rp,0));transform-origin:0 50%;box-shadow:0 0 12px var(--red);
}
.rail__pts{display:flex;justify-content:space-between;margin-top:-5px;}
.rail__pt{
  position:relative;padding-top:22px;flex:1;text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);transition:color .45s var(--ease);
}
.rail__pt:first-child{text-align:left;}
.rail__pt:last-child{text-align:right;}
.rail__pt b{display:block;font-size:12px;color:var(--line-strong);margin-bottom:4px;transition:color .45s var(--ease);}
.rail__pt::before{
  content:"";position:absolute;top:-4px;width:9px;height:9px;border-radius:100px;
  background:var(--void);border:1px solid var(--line-strong);left:50%;margin-left:-4.5px;
  transition:background .45s,border-color .45s,transform .45s var(--ease),box-shadow .45s;
}
.rail__pt:first-child::before{left:0;margin-left:0;}
.rail__pt:last-child::before{left:auto;right:0;margin-left:0;}
.rail__pt.is-on{color:var(--ink);}
.rail__pt.is-on b{color:var(--red);}
.rail__pt.is-on::before{background:var(--red);border-color:var(--red);transform:scale(1.25);box-shadow:0 0 14px var(--red);}

/* ---- the deck ---- */
.deck{position:relative;height:min(52svh,470px);perspective:1500px;transform-style:preserve-3d;}
.card{
  position:absolute;inset:0;margin:auto;width:min(100%,940px);
  display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(20px,3vw,48px);align-items:center;
  transform-style:preserve-3d;
  transition:transform .9s var(--ease),opacity .7s var(--ease);
  opacity:0;pointer-events:none;
  /* Off-state: pushed back and turned away. */
  transform:translate3d(0,42px,-420px) rotateX(11deg) scale(.94);
}
.card.is-on{opacity:1;transform:none;pointer-events:auto;}
/* A card already seen leaves UPWARD and forward, so scrolling back up feels
   like reversing through the deck rather than re-dealing it. */
.card.is-past{opacity:0;transform:translate3d(0,-46px,180px) rotateX(-9deg) scale(1.05);}

/* The step number, ghosted behind the words rather than behind the mock —
   on the left it sat under an opaque paper panel and only its edges showed,
   which reads as a rendering fault rather than as a numeral. */
.card__n{
  position:absolute;right:-2%;top:50%;z-index:0;
  transform:translateY(-52%) translateZ(-40px);
  font-family:var(--display);font-weight:800;font-stretch:125%;
  font-size:clamp(150px,20vw,300px);line-height:.8;letter-spacing:-.07em;
  color:rgba(255,255,255,.055);pointer-events:none;user-select:none;
}
.card__art{position:relative;z-index:1;transform:translateZ(46px);}
.card__say{position:relative;z-index:1;transform:translateZ(24px);}
.card__say h3{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.035em;line-height:1;}
.card__say p{margin:16px 0 0;font-size:clamp(15px,1.35vw,18px);line-height:1.55;color:var(--ink-soft);max-width:30ch;}

/* ---- the paper mock inside each card ---- */
.mock{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);color:var(--paper-ink);aspect-ratio:1/.62;
  box-shadow:0 4px 8px rgba(0,0,0,.35),0 34px 70px -22px rgba(0,0,0,.85);
}
.mock::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(30,42,56,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(30,42,56,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
.mock::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.55),transparent 34%,rgba(30,42,56,.05));
}
.mock__bar{
  position:relative;z-index:2;display:flex;align-items:center;gap:10px;
  padding:13px 17px;border-bottom:1px solid var(--paper-line);background:rgba(255,255,255,.72);
}
.mock__bar b{font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:-.02em;}
.mock__bar > :last-child{margin-left:auto;}
.mock__pad{position:relative;z-index:2;padding:16px 18px;height:calc(100% - 46px);display:flex;flex-direction:column;}

/* card 01 — the composer */
.prompt{
  border:1.5px solid var(--paper-line);border-radius:12px;background:#fff;
  padding:13px 15px;font-size:13.5px;line-height:1.45;min-height:56px;
}
.caret{font-style:normal;color:var(--red-deep);animation:blink 1.05s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.ccgrid{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1;min-height:0;}
.cc{
  border:1px solid var(--paper-line);border-radius:9px;background:#fff;position:relative;overflow:hidden;
  opacity:0;transform:translateY(20px) scale(.94);
}
.card.is-on .cc{animation:ccIn .75s var(--ease) forwards;animation-delay:calc(1.7s + var(--cd) * .15s);}
@keyframes ccIn{to{opacity:1;transform:none;}}
.cc::before{content:"";position:absolute;inset:16% 22%;border:1.3px dashed #C3CBCE;border-radius:6px;}
.card.is-on .cc::before{animation:ccSolid .6s var(--ease) forwards;animation-delay:calc(2.35s + var(--cd) * .15s);}
@keyframes ccSolid{to{border-style:solid;border-color:var(--paper-line);background:#F1F3F4;}}

/* card 02 — the pack pages */
.pagegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;min-height:0;}
.page{
  border:1px solid var(--paper-line);border-radius:9px;background:#fff;
  display:flex;align-items:flex-end;padding:10px;
  opacity:0;transform:translateZ(-100px) translateY(16px);
}
.card.is-on .page{animation:pageIn .7s var(--ease) forwards;animation-delay:calc(.2s + var(--pd) * .1s);}
@keyframes pageIn{to{opacity:1;transform:none;}}
.page b{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:-.02em;}

/* card 03 — the factory thread */
.msg{border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:8px;}
.msg--them{background:#F1F3F4;color:var(--paper-soft);}
.msg--you{background:#E3F0F6;color:var(--paper-ink);}
.msg__anchor,.msg__who{
  display:block;font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:5px;
}
.msg__anchor{color:var(--cyan-deep);}
.msg__who{color:var(--paper-faint);}
.stamp{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#2E7D4F;
  border-top:1px dashed var(--paper-line);padding-top:11px;
}
.stamp svg{width:13px;height:13px;flex:none;}

/* =========================================================================
   Scroll reveals
   ========================================================================= */
.rv{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}

/* =========================================================================
   The four promises
   ========================================================================= */
.four{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-top:clamp(44px,5vw,66px);
}
.fcard{background:var(--deep);padding:30px 26px 32px;transition:background .4s;}
.fcard:hover{background:var(--board);}
.fcard__k{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.022em;margin-bottom:11px;}
.fcard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.fcard b{color:var(--ink);font-weight:600;}

/* =========================================================================
   Split row
   ========================================================================= */
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(30px,5vw,76px);align-items:center;}
.row2__art{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--deep);overflow:hidden;}

.rulesheet{padding:22px 24px 24px;}
.rulesheet__hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid var(--line);}
.rulesheet__list{padding-top:16px;}
/* Hanging mark, not a flex row: as flex the bare text node became its own
   flex item and wrapped BELOW the tick the moment a line was long — which is
   every line here. */
.rulesheet p{margin:0 0 13px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);position:relative;padding-left:20px;}
.rulesheet p:last-child{margin-bottom:0;}
.rulesheet p em{display:block;font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--ink-faint);margin-top:4px;}
.rulesheet .tick,.rulesheet .cross{position:absolute;left:0;top:0;width:14px;font-style:normal;font-size:11px;line-height:1.55;}
.rulesheet .tick{color:var(--ok);}
.rulesheet .cross{color:var(--red);}
/* A hand-edited line keeps a red left edge — the app's own mark for "a person
   wrote this, and it outranks the next re-read". */
.rulesheet p.edited{padding-left:31px;margin-left:-11px;border-left:2px solid var(--red);}
.rulesheet p.edited .tick{left:11px;}

/* =========================================================================
   The band over the fabric render
   ========================================================================= */
.band{position:relative;padding-block:clamp(96px,13vw,190px);text-align:center;overflow:hidden;}
.band__bg{position:absolute;inset:0;z-index:0;}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;will-change:transform;}
.band__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--void),rgba(7,11,16,.55) 30%,rgba(7,11,16,.55) 70%,var(--void));
}
.band__in{position:relative;z-index:2;}
.band__list{list-style:none;padding:0;margin:clamp(32px,4vw,52px) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.band__list li{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  padding:11px 20px;border-radius:var(--r-pill);
}

/* =========================================================================
   Pricing
   ========================================================================= */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:clamp(40px,5vw,60px);}
.plan{
  position:relative;padding:32px 28px 34px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--deep);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--line-strong);}
.plan--hero{
  border-color:rgba(214,59,47,.38);
  background:linear-gradient(168deg,rgba(214,59,47,.09),rgba(214,59,47,.015));
  box-shadow:0 30px 70px -28px rgba(214,59,47,.38);
}
.plan__tag{
  position:absolute;top:-1px;right:24px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:0 0 8px 8px;
}
.plan__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.plan__p{font-family:var(--display);font-weight:700;font-size:clamp(32px,3.4vw,42px);letter-spacing:-.04em;margin:15px 0 0;line-height:1;font-stretch:112%;}
.plan__p em{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-faint);letter-spacing:0;font-stretch:100%;}
.plan__d{font-size:14.5px;color:var(--ink-soft);margin:10px 0 24px;}
.plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:11px;flex:1;}
.plan li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink-soft);}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:100px;background:var(--ok);}
.plan .btn,.plan .btn__in{width:100%;justify-content:center;}
.plan .btn__in{padding:14px 22px;font-size:15px;}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq{border-top:1px solid var(--line);margin-top:28px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.022em;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--red);}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink-faint),var(--ink-faint)) center/1.5px 12px no-repeat;
  transition:transform .35s var(--ease),background .25s;
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--red),var(--red)) center/12px 1.5px no-repeat;}
.faq__a{padding:0 40px 26px 0;color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0;}

/* =========================================================================
   CTA + footer
   ========================================================================= */
.cta{
  position:relative;overflow:hidden;text-align:center;
  border-radius:clamp(20px,3vw,34px);border:1px solid var(--line-strong);
  background:linear-gradient(158deg,rgba(214,59,47,.15),rgba(12,19,27,.6) 55%,rgba(91,184,220,.09));
  padding:clamp(52px,7.5vw,104px) clamp(24px,5vw,64px);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(120,160,200,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(120,160,200,.07) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
}
.cta__in{position:relative;z-index:2;}
.cta .lede{margin:18px auto 0;text-align:center;}
.cta .btn{margin-top:36px;}

.ft{border-top:1px solid var(--line);padding-block:40px 34px;}
.ft__in{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.ft__nav{display:flex;gap:22px;flex-wrap:wrap;margin-inline:auto;}
.ft__nav a{font-size:14px;color:var(--ink-soft);transition:color .2s;}
.ft__nav a:hover{color:var(--red);}
.ft__c{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.ft__note{
  max-width:var(--maxw);margin:24px auto 0;padding-inline:var(--gutter);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1000px){
  /* The deck goes single-column: the mock on top, the words under it. Two
     columns inside a card inside a 52svh stage is three nested squeezes. */
  .card{grid-template-columns:1fr;gap:20px;align-content:center;}
  .card__say{text-align:center;}
  .card__say p{margin-inline:auto;}
  .card__n{top:-8%;font-size:clamp(96px,22vw,180px);}
  .deck{height:min(58svh,520px);}
}

@media (max-width:860px){
  .nav{display:none;}
  /* Goes with the nav — the drawer carries its own Sign in, and three
     controls in a 64px bar is one too many. */
  .hdr__signin{display:none;}
  .hdr__burger{display:flex;flex-direction:column;justify-content:center;}
  .hdr__in{height:64px;}
}

@media (max-width:640px){
  :root{--grid:34px;}
  .hdr__cta .btn--primary{display:none;}
  .hero{padding-top:104px;}
  .hero__acts .btn,.hero__acts .btn__in{width:100%;justify-content:center;}
  /* On a phone the scroll hairline and the product classes want the same
     30px. The classes are information; the hairline is decoration. */
  .hero__scroll{display:none;}
  .hero__badge{display:flex;}
  .deck{height:min(60svh,540px);}
  .mock{aspect-ratio:1/.68;}
  .mock__pad{padding:13px 14px;}
  .ccgrid{grid-template-columns:repeat(2,1fr);}
  .fcard{padding:24px 20px 26px;}
  .faq summary{font-size:16.5px;padding-right:34px;}
  input,select,textarea{font-size:16px;}
}

/* Short viewports — a landscape phone, or a laptop with every toolbar open.
   The sticky stage is 100svh either way, so the deck is what gives. */
@media (max-height:680px) and (min-width:1001px){
  .deck{height:min(46svh,380px);}
  .steps__head{margin-bottom:18px;}
  .rail{margin-bottom:22px;}
}

/* Drawer */
.drawer{
  position:fixed;inset:0;z-index:590;background:rgba(7,11,16,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--gutter);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.drawer.is-open{opacity:1;pointer-events:auto;}
.drawer a{
  font-family:var(--display);font-weight:700;font-size:clamp(28px,7vw,42px);letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid var(--line);
  transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.drawer.is-open a{transform:none;opacity:1;}
.drawer.is-open a:nth-child(1){transition-delay:.06s}
.drawer.is-open a:nth-child(2){transition-delay:.11s}
.drawer.is-open a:nth-child(3){transition-delay:.16s}
.drawer.is-open a:nth-child(4){transition-delay:.21s}
.drawer__cta{color:var(--red);border-bottom-color:transparent !important;}
.drawer__cta::after{content:" →";}

/* =========================================================================
   Reduced motion
   -------------------------------------------------------------------------
   A branch, not a dimmer. The deck stops being a deck and becomes three
   stacked cards, because a 3D carousel with the motion removed is just two
   invisible cards.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv,.reveal-line > span,.hero__sub,.hero__acts{opacity:1 !important;transform:none !important;}
  .cursor{display:none;}
  .room__grid{-webkit-mask-image:none;mask-image:none;opacity:.3;}
  .steps__sticky{position:relative;height:auto;padding-block:70px;}
  .deck{height:auto;display:flex;flex-direction:column;gap:56px;perspective:none;}
  .card{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;width:100%;}
  .card.is-past{opacity:1;transform:none;}
  .steps__bg{display:none;}
}

/* =========================================================================
   Scroll warp
   -------------------------------------------------------------------------
   The JS writes a small skew+scale on these while the page is moving. Three
   things have to be true for it not to look like a glitch:
   · the element owns its own compositor layer, or the skew re-rasterises
     every glyph inside it on every frame;
   · it must not be a positioning context anything sticky depends on;
   · it must have room to lean without clipping its neighbour, which is what
     the section padding already provides.
   ========================================================================= */
.fx{will-change:transform;transform-origin:50% 0;backface-visibility:hidden;}

@media (prefers-reduced-motion:reduce){
  .fx{will-change:auto;transform:none !important;}
}

/* The hero render is 16:9 and the phone crop is portrait, so `center` shows
   the empty wall and throws away the floating drawings — the one thing in
   the picture that says what this product is. Pan right to keep them. */
@media (max-width:640px){
  .hero__scene img{object-position:66% 46%;}
  .band__bg img{object-position:60% 50%;}
}

/* =========================================================================
   The steps stage on a phone
   -------------------------------------------------------------------------
   Unpinned, `.steps` has no explicit height, so it collapses to exactly its
   sticky child — one viewport. The stage then has nowhere to stick to, and
   the section heading and the rail were simply cropped off the top the
   moment you scrolled into it. Below the breakpoint the stage stops being
   sticky and the section flows at its natural height.
   ========================================================================= */
@media (max-width:640px){
  .steps__sticky{position:relative;height:auto;padding-block:clamp(64px,11vw,88px);}
  .steps__bg img{position:absolute;top:0;height:100%;}
}