/* ============================================================================
   Life Base — the front door.  prototype-1

   Built against three references, and the numbers in here are LIFTED, not
   guessed.  Where a value came from a real stylesheet it says so.

     stripe.com     b.stripecdn.com/mkt-ssr-statics/.../css/*.css
     voiceflow.com  /_astro/Base.CqPDQhs0.css
     notion.com     /_next/static/chunks/*.css

   And the palette is not invented either — it is main-app/styles.css's own
   :root, so the front door and the product are literally the same colours.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root{

  /* ---- ink and paper ----------------------------------------------------
     Straight out of main-app/styles.css.  --ink-soft and --ink-grey are that
     file's own names and its own hexes.  The site inherits the product's eye.

     One deliberate correction to that file: --ink there is #242424, which is
     right for 13px chrome labels and slightly weak under a 60px headline.
     Headlines get #171716; body copy keeps #242424.

     NEUTRAL, never warm.  styles.css records two failed warm passes
     ("three points of red over blue ... unmistakably brown across a whole
     column").  The site does not repeat that.                              */
  --paper:#ffffff;
  --ink:#171716;
  --ink-body:#242424;
  --ink-2:#5b5a59;          /* main-app --ink-soft   — the second sentence  */
  --ink-3:#757575;          /* main-app --ink-grey   — eyebrows, captions   */
  --ink-4:#9b9997;

  /* ---- the three whites -------------------------------------------------
     The single biggest read off the screenshots: none of the three sites is
     "white".  Notion is white page / grey card / white card inside it.
     Voiceflow tints the WHOLE page (--vfc-color-shades-shades-50:#f2f7f7)
     and floats white cards on it.  Stripe tints sections (neutral-25
     #f8fafd) and leaves the page white.

     Life Base takes Stripe's model, in the product's own neutral grey —
     which is main-app's --nav-bg #f9f9f9, one step down.                   */
  --tint:#f7f7f7;
  --tint-2:#f1f1f0;
  --tint-3:#eaeae8;

  /* ---- lines ------------------------------------------------------------
     main-app --divider / --strip-divider, verbatim.                        */
  --line:#ebebeb;
  --line-2:#dfdfdf;
  --line-hair:rgba(0,0,0,.031);  /* voiceflow --vf-nav-hairline, exactly    */

  /* ---- the one colour ---------------------------------------------------
     main-app --purple #7719aa.  It is the product's own action colour, so
     the button on the marketing page is the same button as in the app.
     Stripe does exactly this with #533afd; Notion with #2383e2.            */
  --brand:#7719aa;
  --brand-hover:#8a22c2;
  --brand-active:#65158f;
  --brand-ink:#5d1284;
  --brand-25:#faf6fd;
  --brand-50:#f4ecfa;
  --brand-100:#e7d6f2;
  --brand-200:#cfaee3;

  /* ---- the dark band ---------------------------------------------------- */
  --dark:#141416;
  --dark-2:#1c1c1f;
  --dark-3:#26262a;
  --dark-line:rgba(255,255,255,.078);   /* voiceflow --vf-nav-hairline-dark */
  --dark-ink:#f4f4f3;
  --dark-ink-2:#a3a3a0;
  --dark-ink-3:#77776f;

  /* ---- type -------------------------------------------------------------
     Two families, on purpose.

     HEADLINES are a serif.  Voiceflow's whole elegance is one decision:
     serif display + sans body, and its display weight is LIGHT
     (--vf-heading-weight:300).  ui-serif on Apple platforms is New York,
     which is a genuine display serif and costs zero network.  No webfont,
     no third party — spec 10 B2 wants this page to open on bad hotel wifi.

     BODY is main-app's own --content-font, which is also, letter for
     letter, Notion's marketing stack.                                     */
  --font-display:ui-serif,"New York","Iowan Old Style","Palatino Linotype",
                 "Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",
              Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* voiceflow's real scale: h1 4rem/1.125/-.04em, h2 3rem/1.16/-.02em,
     h3 2.25/1.2, h4 1.75/1.2, h5 1.25/1.3, display-xl 4.5rem/1.06/-.03em  */
  --t-display:clamp(2.35rem,4.6vw,3.5rem);
  --t-display-lh:1.06;
  --t-display-ls:-.032em;
  --t-h1:clamp(1.9rem,3.3vw,2.5rem);
  --t-h2:clamp(1.7rem,2.7vw,2.3rem);
  --t-h3:clamp(1.45rem,2.2vw,1.85rem);
  --t-h4:1.3125rem;
  --t-lead:clamp(1.0625rem,1.35vw,1.1875rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-eyebrow:.875rem;

  /* ---- radii — voiceflow's exact three, plus the pill -------------------
     --v2-r-panel:20px  --v2-r-card:12px  --v2-r-control:8px               */
  --r-panel:20px;
  --r-card:12px;
  --r-control:8px;
  --r-pill:999px;

  /* ---- motion -----------------------------------------------------------
     cubic-bezier(.25,1,.5,1) appears 41 times in voiceflow's stylesheet,
     more than every other curve put together.  It is the house curve.
     The hero's own entrance uses their other one, verbatim:
       .hero-pop{animation:.26s cubic-bezier(.2,.7,.3,1) .595s forwards}    */
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-pop:cubic-bezier(.2,.7,.3,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);

  /* ---- the button shadow ------------------------------------------------
     Voiceflow's --vfc-shadow-button-primary-default is SEVEN stacked
     shadows plus two insets.  That stack is most of why their button looks
     machined and a one-line box-shadow looks like a school project.
     Same construction, re-tinted to the brand.                            */
  --shadow-btn:
    0 6px 16px -8px rgba(45,8,64,.14),
    0 4px 12px -6px rgba(45,8,64,.10),
    0 3px  8px -4px rgba(45,8,64,.10),
    0 2px  6px -3px rgba(45,8,64,.07),
    0 1px  4px -2px rgba(45,8,64,.07),
    0 1px  3px -1px rgba(45,8,64,.04),
    0 1px  2px      rgba(45,8,64,.02),
    inset 0 -1px 0 1px rgba(101,21,143,.34),
    inset 0  1px 2px -1px rgba(255,255,255,.34);
  --shadow-btn-hover:
    0 10px 22px -10px rgba(45,8,64,.20),
    0  6px 14px -7px  rgba(45,8,64,.14),
    0  3px  8px -4px  rgba(45,8,64,.10),
    0  1px  3px -1px  rgba(45,8,64,.06),
    inset 0 -1px 0 1px rgba(101,21,143,.30),
    inset 0  1px 2px -1px rgba(255,255,255,.40);

  /* Flat is the direction (design doc: "no soft 3D ... flatten it").  The
     only shadows on the page are the button and the floating app window —
     the two things that are genuinely above the surface.                  */
  --shadow-win:
    0 1px 1px rgba(0,0,0,.02),
    0 4px 8px -4px rgba(0,0,0,.04),
    0 18px 34px -18px rgba(0,0,0,.10),
    0 44px 80px -44px rgba(0,0,0,.14);

  /* ---- layout -----------------------------------------------------------
     Stripe frames the ENTIRE page with a 1px column down each side and
     hairlines between sections.  Content sits inset from that frame.      */
  --frame:1272px;
  --gutter:44px;
  --nav-h:66px;             /* voiceflow --nav-spacer:4.125rem = 66px      */
  --band:96px;              /* vertical air in a section                    */
  --band-tight:68px;
}

@media (max-width:900px){
  :root{ --gutter:22px; --band:72px; --band-tight:54px; }
}
@media (max-width:560px){
  :root{ --t-display:clamp(1.95rem,8.2vw,2.4rem); }
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--brand-100);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------------------
   3. THE FRAME  —  stripe's page rules
   ------------------------------------------------------------------------- */
.frame{
  max-width:var(--frame);
  margin:0 auto;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  position:relative;
}
@media (max-width:1320px){ .frame{border-left:0;border-right:0} }

.wrap{
  max-width:calc(var(--frame) - var(--gutter)*2);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.wrap-narrow{max-width:820px;margin:0 auto}
.wrap-mid{max-width:1010px;margin:0 auto}

section{position:relative}
.rule{border-top:1px solid var(--line)}       /* the horizontal hairline    */
.band{padding-top:var(--band);padding-bottom:var(--band)}
.band-tight{padding-top:var(--band-tight);padding-bottom:var(--band-tight)}
.tinted{background:var(--tint)}
.tinted-2{background:var(--tint-2)}

/* ---------------------------------------------------------------------------
   4. TYPE
   ------------------------------------------------------------------------- */
.display,.h1,.h2,.h3{
  font-family:var(--font-display);
  font-weight:400;                       /* voiceflow: --vf-heading-weight:300 */
  color:var(--ink);
  text-wrap:balance;
}
.display{font-size:var(--t-display);line-height:var(--t-display-lh);letter-spacing:var(--t-display-ls)}
.h1{font-size:var(--t-h1);line-height:1.115;letter-spacing:-.03em}
.h2{font-size:var(--t-h2);line-height:1.14;letter-spacing:-.024em}
.h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
.h4{font-family:var(--font-sans);font-size:var(--t-h4);line-height:1.3;
    letter-spacing:-.012em;font-weight:600;color:var(--ink)}

/* THE TWO-TONE SENTENCE.  Stripe's signature and the thing most worth
   stealing: the headline and its explanation are one paragraph at one size,
   the second half simply lighter.  Their exact pair is
   neutral-900 #1a2c44 over neutral-500 #64748d — a 3.4:1 step.  Ours is
   #171716 over #5b5a59, which is the same step in neutral grey. */
.two-tone .said{color:var(--ink)}
.two-tone .then{color:var(--ink-2)}

/* THE HIGHLIGHT PILL.  Notion's hero puts a soft pill with a dot around one
   word, and it is the only colour on an otherwise black page.  One per page,
   never two. */
.mark{
  display:inline-flex;align-items:center;gap:.34em;
  background:var(--brand-50);
  border-radius:var(--r-pill);
  padding:.02em .44em .06em .40em;
  margin:0 -.06em;
  color:var(--ink);
}
.mark::before{
  content:"";width:.36em;height:.36em;border-radius:50%;
  background:var(--brand);flex:none;
  margin-top:.06em;
}

.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.p{color:var(--ink-2);line-height:1.62;text-wrap:pretty}
.p + .p{margin-top:1.05em}
.small{font-size:var(--t-small);color:var(--ink-2)}
.quiet{color:var(--ink-3)}

/* THE EYEBROW.  Voiceflow's .vf-section-label, to the letter: sans, 14px,
   weight 600, letter-spacing 0, and NOT uppercase.  Every one of the
   thirty-one screenshots agrees — "Omnichannel", "Infrastructure",
   "Capture knowledge", "New from Voiceflow".  Sentence case throughout. */
.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--t-eyebrow);
  font-weight:600;
  letter-spacing:0;
  line-height:1.4;
  color:var(--ink-3);
  display:block;
  margin-bottom:14px;
}
.eyebrow-brand{color:var(--brand-ink)}

/* THE BOLD LEAD-IN.  Voiceflow "Build. Design intelligent workflows…" and
   Stripe "Professional services. Get tailored guidance…".  Same line, bold
   first clause, regular after.  Cheapest fast-reading benefit there is. */
.leadin{color:var(--ink-2);line-height:1.6}
.leadin b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------------------
   5. BUTTONS AND LINKS
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 20px;
  border-radius:var(--r-control);
  font-family:var(--font-sans);
  font-size:.9688rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
  transition:background .18s var(--ease),box-shadow .22s var(--ease),
             transform .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease);
}
.btn:active{transform:translateY(.5px)}

.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-btn-hover)}
.btn-primary:active{background:var(--brand-active)}

/* Notion's second hero button is not an outline, it is a soft-tinted fill of
   the same hue.  Reads quieter than a border and much better than grey. */
.btn-soft{background:var(--brand-50);color:var(--brand-ink)}
.btn-soft:hover{background:var(--brand-100)}

.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-4);background:#fff}

.btn-dark{background:#fff;color:var(--dark)}
.btn-dark:hover{background:var(--tint-2)}
.btn-on-dark{background:rgba(255,255,255,.10);color:#fff;
             box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn-on-dark:hover{background:rgba(255,255,255,.16)}

.btn-sm{height:38px;padding:0 15px;font-size:.9063rem}

/* THE ARROW LINK.  Inside sections all three sites use a link, never a
   button — "Read more →", "View plans ›", "Explore no-code ›".  Buttons are
   spent only in the hero and the closing.  It is what keeps the page calm.
   The arrow travels 3px on hover; nothing else moves. */
.alink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.9688rem;font-weight:600;color:var(--brand-ink);
  transition:color .16s var(--ease);
}
.alink svg{transition:transform .22s var(--ease)}
.alink:hover{color:var(--brand)}
.alink:hover svg{transform:translateX(3px)}
.alink-ink{color:var(--ink)}
.alink-ink:hover{color:var(--ink-2)}
.alink-dark{color:#fff}
.alink-dark:hover{color:var(--dark-ink-2)}

/* Notion's black circle arrow, sitting beside the bold statement in a card. */
.circ{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--ink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),transform .22s var(--ease);
}
.circ svg{transition:transform .22s var(--ease)}
a:hover .circ,.circ:hover{background:var(--brand)}
a:hover .circ svg{transform:translateX(2px)}

/* ---------------------------------------------------------------------------
   6. PILLS AND CHIPS
   The 20% Nomad List correction the design doc allows "with care": rounded
   pills used for CATEGORY, and nowhere else on the page.
   ------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 13px;
  border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;color:var(--ink-2);
  background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
  white-space:nowrap;
}
.pill:hover{box-shadow:inset 0 0 0 1px var(--ink-4);color:var(--ink)}
.pill[aria-selected="true"],.pill.is-on{
  background:var(--ink);color:#fff;box-shadow:none;
}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}

.tag{
  display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;letter-spacing:.01em;
  background:var(--tint-2);color:var(--ink-3);
}
.tag-free{background:#e9f7ee;color:#1c7a3e}
.tag-ai{background:var(--brand-50);color:var(--brand-ink)}

/* ---------------------------------------------------------------------------
   7. NAV
   Notion and Stripe pin a flat bar.  Voiceflow does something better: the
   bar detaches on scroll into a frosted rounded pill floating over the
   content (--vf-nav-frost-2:#e4e7e780).  Both are here; the pill is what
   this page uses.
   ------------------------------------------------------------------------- */
.nav-spacer{height:var(--nav-h)}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:padding .3s var(--ease);
  padding:0;
}
.nav-inner{
  max-width:var(--frame);margin:0 auto;width:100%;
  height:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:26px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  border-radius:0;
  transition:max-width .34s var(--ease),background .3s var(--ease),
             border-radius .34s var(--ease),box-shadow .3s var(--ease),
             height .3s var(--ease),border-color .3s var(--ease);
}
/* the detached state */
.nav.is-float{padding:10px 0}
.nav.is-float .nav-inner{
  max-width:1088px;height:54px;
  border-radius:var(--r-pill);
  border-bottom-color:transparent;
  background:rgba(250,250,249,.92);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 0 0 1px rgba(0,0,0,.045),0 8px 26px -14px rgba(0,0,0,.22);
  padding:0 12px 0 20px;
}

.nav-logo{display:flex;align-items:center;gap:9px;flex:none;color:var(--ink)}
.nav-logo .lb-mark{width:22px;height:22px;flex:none}
.nav-logo span{font-family:var(--font-display);font-size:1.175rem;letter-spacing:-.022em;
               line-height:1;padding-bottom:2px}

.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto}
.nav-links a{
  padding:8px 12px;border-radius:var(--r-control);
  font-size:.9375rem;font-weight:500;color:var(--ink-body);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.nav-links a:hover{background:rgba(0,0,0,.045);color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}

/* two actions on the right, always: one quiet, one coloured.  All three
   reference sites do exactly this and never more than this. */
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
.nav-quiet{font-size:.9375rem;font-weight:500;color:var(--ink-2);padding:8px 10px;
           border-radius:var(--r-control);transition:color .15s var(--ease)}
.nav-quiet:hover{color:var(--ink)}

.nav-burger{display:none;width:38px;height:38px;border-radius:var(--r-control);
            align-items:center;justify-content:center;color:var(--ink)}
.nav-burger:hover{background:rgba(0,0,0,.05)}

@media (max-width:940px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .nav.is-float .nav-inner{max-width:calc(100% - 24px)}
}
/* SMALL SCREENS.  Notion and Stripe both drop to logo + burger and move the
   call to action into the sheet.  Keeping a full-size purple button in a
   390px bar leaves the logo and the burger fighting over what is left. */
@media (max-width:560px){
  .nav-quiet{display:none}
  .nav-actions .btn-primary{display:none}
  .nav-sheet .btn{width:100%;margin-top:16px}
}

.nav-sheet{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:79;
  background:#fff;border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 22px;
  display:none;
}
.nav-sheet.is-open{display:block}
.nav-sheet a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
             font-size:1.0625rem;font-weight:500}
.nav-sheet a:last-of-type{border-bottom:0}
.nav-sheet .btn{margin-top:16px}

/* ---------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------- */
.hero{padding-top:78px;padding-bottom:0;overflow:hidden}
.hero-head{max-width:928px;margin:0 auto;text-align:center}
.hero-title{font-size:clamp(2.05rem,3.5vw,2.95rem);line-height:1.14;letter-spacing:-.026em}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
/* Two buttons of different widths, stacked and centred, read as ragged.
   Full width is the only tidy answer on a phone. */
@media (max-width:560px){
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-title{font-size:clamp(1.85rem,7.6vw,2.3rem)}
}
.hero-note{margin-top:16px;font-size:.875rem;color:var(--ink-3)}

/* The product is cut off by the fold on purpose.  Notion's window runs off
   the bottom of the viewport; Stripe's cards run off the right.  Nothing in
   any of the thirty-one screenshots is a complete screenshot in a box —
   that cropping is most of why it reads as native rather than pasted in. */
.hero-stage{
  margin-top:52px;
  height:clamp(330px,46vh,462px);
  position:relative;
}
.hero-stage .appwin{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1064px,100%);
  height:640px;                /* taller than the stage — it is CUT */
}

/* Notion's hand-drawn doodles sit beside the window.  The design doc bans
   illustrated figures, so ours are structural marks instead: hairline
   brackets that frame the product without decorating it. */
.hero-glow{
  position:absolute;left:50%;top:-40px;transform:translateX(-50%);
  width:1200px;height:520px;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 52% at 50% 40%,var(--brand-25) 0%,rgba(255,255,255,0) 72%);
}

/* ---------------------------------------------------------------------------
   9. THE APP WINDOW  —  a real Life Base shell, drawn in CSS
   Shape taken from main-app/index.html: header across both nav columns,
   #sections-list beside #pages-list, one bar under both, page on the right.
   ------------------------------------------------------------------------- */
.appwin{
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-win),0 0 0 1px rgba(0,0,0,.055);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-align:left;
  user-select:none;
}
.appwin-bar{
  height:38px;flex:none;
  background:linear-gradient(#fbfbfb,#f4f4f4);
  border-bottom:1px solid #e4e4e4;
  display:flex;align-items:center;gap:9px;padding:0 13px;
}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots i:nth-child(1){background:#ed6a5e}
.dots i:nth-child(2){background:#f4bf4f}
.dots i:nth-child(3){background:#61c554}
.appwin-tab{
  margin-left:8px;height:26px;border-radius:6px 6px 0 0;
  background:#fff;box-shadow:0 0 0 1px #e4e4e4;
  display:flex;align-items:center;gap:6px;padding:0 12px;
  font-size:.75rem;color:var(--ink-2);font-weight:500;
}
.appwin-url{
  margin-left:auto;height:22px;border-radius:var(--r-pill);
  background:#ececec;color:#8a8a8a;font-size:.6875rem;
  display:flex;align-items:center;padding:0 12px;
}
.appwin-body{flex:1;display:flex;min-height:0;background:#fff}

/* the two nav panels, exactly the shape main-app draws */
.lbnav{width:238px;flex:none;display:flex;flex-direction:column;
       background:#f9f9f9;border-right:1px solid #ebebeb}
.lbnav-head{height:40px;flex:none;display:flex;align-items:center;gap:9px;
            padding:0 11px;border-bottom:1px solid #ebebeb}
.lbnav-head .bars{width:15px;height:11px;flex:none;position:relative}
.lbnav-head .bars::before,.lbnav-head .bars::after,.lbnav-head .bars i{
  content:"";position:absolute;left:0;right:0;height:1.4px;border-radius:1px;background:#5b5a59}
.lbnav-head .bars::before{top:0}
.lbnav-head .bars i{top:4.8px}
.lbnav-head .bars::after{bottom:0}
.lbnav-head b{font-size:.75rem;font-weight:600;color:var(--ink-body);letter-spacing:-.005em}
.lbnav-cols{flex:1;display:flex;min-height:0}
.lbcol{flex:1;min-width:0;padding:8px 0;overflow:hidden}
.lbcol + .lbcol{border-left:1px solid #ebebeb;flex:0 0 106px}
.lbrow{
  height:25px;display:flex;align-items:center;gap:7px;
  padding:0 10px;margin:0 4px;border-radius:4px;
  font-size:.75rem;color:var(--ink-body);white-space:nowrap;overflow:hidden;
}
.lbrow .sw{width:9px;height:9px;border-radius:2px;flex:none}
.lbrow.is-on{background:#ededed;font-weight:600}
.lbrow.is-dim{color:#8f8e8c}
.lbnav-foot{height:34px;flex:none;border-top:1px solid #ebebeb;
            display:flex;align-items:center;gap:9px;padding:0 11px}
.lbnav-foot .av{width:19px;height:19px;border-radius:50%;background:#8265b3;flex:none}
.lbnav-foot .ic{width:13px;height:13px;border-radius:2px;background:#d8d8d8}
.lbnav-foot .saved{margin-left:auto;font-size:.625rem;color:#9b9997}

/* the page */
.lbpage{flex:1;min-width:0;background:#fff;position:relative;overflow:hidden;
        padding:26px 34px}
.lbpage-title{font-size:1.5rem;font-weight:600;color:#141414;letter-spacing:-.02em}
.lbpage-date{font-size:.6875rem;color:#9b9997;margin-top:4px}
.lbtext{font-size:.8125rem;line-height:1.62;color:#141414;margin-top:18px;max-width:560px}
.lbtext .cur{display:inline-block;width:1.5px;height:1em;background:#141414;
             vertical-align:-2px;margin-left:1px;animation:blink 1.06s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------------------------------------------------------------------------
   10. THE "/" PANEL  —  the hero's live demo
   ------------------------------------------------------------------------- */
.slash{
  position:absolute;width:290px;
  background:#fff;border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 12px 30px -12px rgba(0,0,0,.26);
  overflow:hidden;
  opacity:0;transform:translateY(-5px) scale(.985);transform-origin:top left;
  transition:opacity .16s var(--ease),transform .22s var(--ease-pop);
  pointer-events:none;
}
.slash.is-open{opacity:1;transform:none}
.slash-search{height:34px;display:flex;align-items:center;padding:0 11px;gap:7px;
              border-bottom:1px solid #efefef;font-size:.75rem;color:#9b9997}
.slash-cat{padding:7px 11px 3px;font-size:.625rem;font-weight:700;color:#9b9997;
           letter-spacing:.03em;text-transform:uppercase}
.slash-item{
  height:36px;display:flex;align-items:center;gap:9px;padding:0 9px;margin:0 5px;
  border-radius:6px;font-size:.75rem;color:#242424;
  transition:background .12s linear;
}
.slash-item svg{width:19px;height:19px;flex:none}
.slash-item small{margin-left:auto;color:#b6b4b1;font-size:.625rem}
.slash-item.is-cursor{background:#f2ecf7}

/* ---------------------------------------------------------------------------
   11. THE LIVE APP DEMOS
   Each of these is the real app's visual language, rebuilt small.  They are
   DOM, not video: no player, no controls, nothing to buffer.
   ------------------------------------------------------------------------- */
.demo{position:relative;border-radius:var(--r-card);overflow:hidden;background:#fff}
.demo-frame{
  background:#fff;border-radius:var(--r-card);
  box-shadow:0 0 0 1px rgba(0,0,0,.062),0 10px 26px -16px rgba(0,0,0,.16);
  overflow:hidden;
}

/* — habit tracker — colours read off main-app/blocks/habit-tracker icon — */
.hb{padding:16px 18px;font-size:.8125rem}
.hb-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hb-head b{font-size:.9375rem;font-weight:600;color:var(--ink)}
.hb-head .hb-mo{margin-left:auto;font-size:.75rem;color:var(--ink-3)}
.hb-grid{display:grid;grid-template-columns:1fr repeat(7,26px);gap:5px 5px;align-items:center}
.hb-dow{font-size:.625rem;color:var(--ink-4);text-align:center;font-weight:600}
.hb-name{font-size:.8125rem;color:var(--ink-body);white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis;padding-right:8px}
.hb-name em{font-style:normal;color:var(--ink-4);font-size:.6875rem;margin-left:5px}
.hb-box{
  width:26px;height:26px;border-radius:7px;background:#f2f2f0;
  box-shadow:inset 0 0 0 1px #e6e5e2;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease-pop);
}
.hb-box:hover{box-shadow:inset 0 0 0 1px #c9c7c3}
.hb-box svg{width:14px;height:14px;opacity:0;transform:scale(.55);
            transition:opacity .16s var(--ease),transform .24s var(--ease-pop)}
.hb-box.on{background:#e8f7ec;box-shadow:inset 0 0 0 1px #9ddcae}
.hb-box.on svg{opacity:1;transform:none}
.hb-box.tap{transform:scale(.9)}
.hb-foot{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;
         border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-3)}
.hb-streak{color:#1f9d43;font-weight:700;font-variant-numeric:tabular-nums}

/* — chat page — */
.ch{padding:16px 18px;display:flex;flex-direction:column;gap:11px;
     font-size:.8125rem;height:100%}
.ch-you{align-self:flex-end;max-width:78%;background:var(--tint-2);color:var(--ink-body);
        border-radius:12px 12px 3px 12px;padding:8px 12px;line-height:1.5}
.ch-lb{max-width:92%;line-height:1.6;color:var(--ink-body)}
.ch-lb .ref{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--brand-50);color:var(--brand-ink);
  border-radius:4px;padding:0 5px;font-size:.75rem;font-weight:600;
  white-space:nowrap;
}
.ch-typing{display:inline-flex;gap:3px;align-items:center;height:14px}
.ch-typing i{width:5px;height:5px;border-radius:50%;background:#c6c4c1;
             animation:tp 1.05s var(--ease-inout) infinite}
.ch-typing i:nth-child(2){animation-delay:.14s}
.ch-typing i:nth-child(3){animation-delay:.28s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ch-bar{margin-top:auto;display:flex;align-items:center;gap:8px;
        border:1px solid var(--line-2);border-radius:var(--r-pill);
        padding:7px 8px 7px 14px;color:var(--ink-4);font-size:.8125rem}
.ch-send{width:26px;height:26px;border-radius:50%;background:var(--brand);
         margin-left:auto;flex:none;display:flex;align-items:center;justify-content:center}

/* — board — */
.bd{position:relative;height:100%;background:#fff;
    background-image:radial-gradient(circle,#e2e1de 1px,transparent 1px);
    background-size:19px 19px;overflow:hidden}
.bd-node{
  position:absolute;border-radius:10px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.075),0 5px 16px -8px rgba(0,0,0,.16);
  overflow:hidden;
}
.bd-node .cap{height:20px;display:flex;align-items:center;gap:5px;padding:0 8px;
              font-size:.625rem;color:var(--ink-3);border-bottom:1px solid #f0f0ee}
.bd-note{background:#fdf6dd;box-shadow:0 0 0 1px #efe4b6,0 5px 16px -8px rgba(0,0,0,.14);
         padding:9px 10px;font-size:.6875rem;line-height:1.45;color:#5c5330}
.bd-cursor{position:absolute;width:15px;height:19px;pointer-events:none;z-index:5;
           transition:transform .05s linear}

/* — whiteboard — */
.wb{background:#fff;height:100%;position:relative}
.wb path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wb-pen{position:absolute;top:9px;left:50%;transform:translateX(-50%);
        display:flex;gap:5px;background:#fff;border-radius:var(--r-pill);
        padding:5px 7px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 4px 12px -6px rgba(0,0,0,.2)}
.wb-pen i{width:13px;height:13px;border-radius:50%;display:block}

/* — typewriter — */
.tw{background:#fdfcf6;height:100%;padding:22px 26px;position:relative;
     display:flex;flex-direction:column;justify-content:center}
.tw::after{content:"";position:absolute;inset:auto 0 0 0;height:34px;
           background:linear-gradient(rgba(253,252,246,0),#fdfcf6)}
.tw-line{font-family:var(--font-mono);font-size:.75rem;line-height:2;color:#3b352a;
         letter-spacing:.01em}
.tw-line s{color:#a89878;text-decoration-thickness:1.5px}

/* — spreadsheet — */
.ss{font-size:.6875rem;font-variant-numeric:tabular-nums;
     padding:18px 20px;width:100%;height:100%;
     display:flex;flex-direction:column;justify-content:center}
.ss table{border-collapse:collapse;width:100%}
.ss th,.ss td{border:1px solid #e8e8e6;padding:4px 7px;text-align:right;height:24px}
.ss th{background:#f6f6f5;color:#8f8e8c;font-weight:600;text-align:center;font-size:.625rem}
.ss td:first-child{text-align:left;color:var(--ink-body)}
.ss .sel{box-shadow:inset 0 0 0 2px var(--brand);position:relative}
.ss .calc{color:#1f9d43;font-weight:700}

/* — vision board — */
.vb{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
     gap:7px;padding:11px;height:100%;align-content:stretch}
.vb i{display:block;border-radius:7px;opacity:0;transform:scale(.94);
      min-height:0;animation:vbin .46s var(--ease) forwards}
@keyframes vbin{to{opacity:1;transform:none}}

/* — insight feed — */
.if-row{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.if-row:last-child{border-bottom:0}
.if-av{width:24px;height:24px;border-radius:50%;flex:none;background:#e6e2dc}
.if-row b{font-size:.75rem;color:var(--ink);font-weight:600}
.if-row p{font-size:.75rem;color:var(--ink-2);line-height:1.5;margin-top:2px}
.if-row .why{font-size:.6875rem;color:var(--brand-ink);margin-top:4px}

/* — book shelf — */
.bs{display:flex;gap:7px;align-items:flex-end;padding:26px 18px 16px;
    border-bottom:1px solid var(--line);min-height:118px}
.bs i{display:block;border-radius:2px 4px 4px 2px;flex:none;
      box-shadow:1px 1px 0 rgba(0,0,0,.06)}

/* An app-page demo is not a card, because an app page is not a card.  The
   host states the box; the app takes it to every edge. */
.demo-flush{box-shadow:none;border-radius:var(--r-card);
            outline:1px solid var(--line);outline-offset:0}

/* ---------------------------------------------------------------------------
   12. CARDS AND GRIDS
   ------------------------------------------------------------------------- */

/* Notion's exact construction: a TINTED card, a label and a bold statement
   inside it, and then a WHITE card floating within it holding the product.
   The white card is what makes the grey one read as a stage. */
.stage{
  background:var(--tint);
  border-radius:var(--r-panel);
  padding:30px 30px 0;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
  min-height:430px;
}
.stage-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:26px}
.stage-head .h4{max-width:26ch}
.stage-head .circ{margin-left:auto}
.stage-body{flex:1;min-height:0;position:relative}
.stage-body > .demo-frame{
  position:absolute;inset:0 0 -22px 0;   /* runs off the bottom edge */
}
.stage-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stage-wide .stage-head{max-width:520px}
@media (max-width:900px){ .stage-2{grid-template-columns:1fr} }

/* the alternating benefit row */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
       gap:clamp(32px,5vw,76px);align-items:center}
.split.flip .split-copy{order:2}
.split-copy .h2{margin-bottom:18px}
.split-copy .p{max-width:44ch}
.split-copy .alink{margin-top:22px}
.split-art{position:relative}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .split.flip .split-copy{order:0}
}

/* the three-up */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.three-item .h4{margin-bottom:9px}
@media (max-width:860px){ .three{grid-template-columns:1fr;gap:30px} }

/* ---------------------------------------------------------------------------
   13. THE LIBRARY GRID
   ------------------------------------------------------------------------- */
.lib{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1080px){ .lib{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .lib{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .lib{grid-template-columns:1fr} }

.card{
  background:#fff;border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:19px 19px 17px;
  display:flex;flex-direction:column;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
a.card:hover{box-shadow:inset 0 0 0 1px var(--line-2),0 8px 22px -14px rgba(0,0,0,.22);
             transform:translateY(-2px)}
.card-icon{width:34px;height:34px;margin-bottom:14px}
.card-icon svg{width:100%;height:100%}
.card h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--ink);
         letter-spacing:-.008em;margin-bottom:6px}
.card p{font-size:.875rem;line-height:1.5;color:var(--ink-2);
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px}

/* ---------------------------------------------------------------------------
   14. THE CAROUSEL   —  voiceflow's ‹ › on the omnichannel section
   ------------------------------------------------------------------------- */
.carousel{position:relative}
.car-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:30px}
.car-nav{margin-left:auto;display:flex;gap:8px;flex:none}
.car-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);
  transition:box-shadow .16s var(--ease),background .16s var(--ease),opacity .16s linear;
}
.car-btn:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
.car-btn[disabled]{opacity:.34;cursor:default}
.car-btn[disabled]:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.car-track{
  display:flex;gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
  scroll-behavior:smooth;
}
.car-track::-webkit-scrollbar{display:none}
.car-slide{
  flex:0 0 clamp(288px,32%,384px);scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.car-slide .demo-frame{height:262px;min-height:262px;margin-bottom:16px;
                       position:relative;overflow:hidden}
.car-slide h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;
              color:var(--ink);margin-bottom:5px}
.car-slide p{font-size:.875rem;line-height:1.5;color:var(--ink-2)}

/* ---------------------------------------------------------------------------
   15. NUMBERS BAND  —  voiceflow's 500ms / 300k / 10K+ , serif and light
   ------------------------------------------------------------------------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr)}
.nums div{padding:0 26px;text-align:center}
.nums div + div{border-left:1px solid var(--line)}
.nums b{display:block;font-family:var(--font-display);font-weight:400;
        font-size:clamp(2.3rem,3.6vw,3.1rem);line-height:1.05;letter-spacing:-.03em;
        color:var(--ink)}
.nums span{display:block;margin-top:10px;font-size:.875rem;color:var(--ink-3);line-height:1.45}
@media (max-width:820px){
  .nums{grid-template-columns:1fr 1fr;gap:34px 0}
  .nums div:nth-child(3){border-left:0}
  .nums div{padding:0 14px}
}

/* ---------------------------------------------------------------------------
   16. THE DARK BAND
   Voiceflow and Stripe each go dark exactly ONCE, and both use it for the
   promise you are asked to trust.  Ours is the privacy promise.
   ------------------------------------------------------------------------- */
.dark{background:var(--dark);color:var(--dark-ink)}
.dark .display,.dark .h1,.dark .h2,.dark .h3,.dark .h4{color:#fff}
.dark .lead,.dark .p{color:var(--dark-ink-2)}
.dark .eyebrow{color:var(--dark-ink-3)}
.dark .rule{border-top-color:var(--dark-line)}
.dark .two-tone .said{color:#fff}
.dark .two-tone .then{color:#9a9a95}
.dark .nums div + div{border-left-color:var(--dark-line)}
.dark .nums b{color:#fff}
.dark .nums span{color:var(--dark-ink-3)}
.dark .leadin{color:var(--dark-ink-2)}
.dark .leadin b{color:#fff}

.promise{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
         border-radius:var(--r-card);overflow:hidden;background:var(--dark-line)}
.promise div{background:var(--dark-2);padding:24px 26px}
.promise b{display:block;color:#fff;font-weight:600;font-size:.9688rem;margin-bottom:7px}
.promise p{color:var(--dark-ink-2);font-size:.9063rem;line-height:1.55}
@media (max-width:760px){ .promise{grid-template-columns:1fr} }

.headsplit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
           gap:clamp(28px,5vw,72px);align-items:end}
.headsplit .lead{max-width:42ch;padding-bottom:6px}
@media (max-width:880px){ .headsplit{grid-template-columns:1fr;gap:22px}
                          .headsplit .lead{padding-bottom:0} }

/* ---------------------------------------------------------------------------
   17. REPLACES STRIP  —  stands where the customer-logo row stands
   ------------------------------------------------------------------------- */
.replaces{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0 clamp(20px,3.2vw,44px);
}
.replaces span{
  font-size:1.0625rem;font-weight:500;color:var(--ink-4);
  letter-spacing:-.012em;white-space:nowrap;padding:9px 0;
  transition:color .2s var(--ease);
}
.replaces:hover span{color:var(--ink-4)}
.replaces span:hover{color:var(--ink-2)}
.replaces i{width:3px;height:3px;border-radius:50%;background:#d5d3d0;display:block}

/* ---------------------------------------------------------------------------
   18. PRICING
   ------------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:900px){ .plans{grid-template-columns:1fr} }
.plan{
  background:#fff;border-radius:var(--r-panel);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:28px 26px 26px;display:flex;flex-direction:column;
}
.plan.is-lead{box-shadow:inset 0 0 0 1.5px var(--ink)}
.plan-name{font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:6px;
           display:flex;align-items:center;gap:9px}
.plan-price{font-family:var(--font-display);font-size:2.75rem;line-height:1.05;
            letter-spacing:-.03em;color:var(--ink);margin:12px 0 4px}
.plan-price sub{font-family:var(--font-sans);font-size:.9375rem;font-weight:500;
                color:var(--ink-3);vertical-align:baseline;margin-left:4px}
.plan-sub{font-size:.9063rem;color:var(--ink-2);line-height:1.5;min-height:44px}
.plan .btn{margin:22px 0 20px;width:100%}
.plan ul{display:flex;flex-direction:column;gap:11px;margin-top:auto}
.plan li{display:flex;gap:10px;font-size:.9063rem;color:var(--ink-2);line-height:1.45}
.plan li svg{flex:none;margin-top:3px;color:var(--brand)}

/* ---------------------------------------------------------------------------
   19. FAQ  —  voiceflow ships a FaqAccordion; this is that shape
   ------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 44px 22px 0;position:relative;
  font-size:1.0625rem;font-weight:600;color:var(--ink);letter-spacing:-.008em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .24s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .ans{padding:0 60px 24px 0;color:var(--ink-2);line-height:1.62;
          font-size:1rem;max-width:62ch}
.faq .ans p + p{margin-top:.9em}

/* ---------------------------------------------------------------------------
   20. FOUNDER NOTE
   ------------------------------------------------------------------------- */
.note{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:start;
}
.note-face{
  width:78px;height:78px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,#eee9f4,#e2d6ee);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.75rem;color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.note blockquote{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.55rem);
                 line-height:1.42;letter-spacing:-.016em;color:var(--ink)}
.note blockquote p + p{margin-top:.7em}
.note cite{display:block;margin-top:22px;font-style:normal;font-size:.9375rem;color:var(--ink-3)}
.note cite b{color:var(--ink);font-weight:600}
@media (max-width:700px){ .note{grid-template-columns:1fr} }

/* ---------------------------------------------------------------------------
   21. CLOSING CTA  —  all three repeat the hero here, verbatim in shape
   ------------------------------------------------------------------------- */
.close-cta{text-align:center;padding:clamp(78px,9vw,124px) 0}
.close-cta .display{max-width:16ch;margin:0 auto}
.close-cta .hero-actions{margin-top:32px}

/* ---------------------------------------------------------------------------
   22. FOOTER  —  five columns, quiet, and the honest line at the bottom
   ------------------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--tint);
      padding-top:56px;padding-bottom:40px}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
@media (max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr;gap:34px 24px} }
.foot h4{font-family:var(--font-sans);font-size:.8125rem;font-weight:600;color:var(--ink);
         margin-bottom:14px;letter-spacing:.004em}
.foot li{margin-bottom:9px}
.foot li a{font-size:.9063rem;color:var(--ink-2);transition:color .15s var(--ease)}
.foot li a:hover{color:var(--ink)}
.foot-brand p{font-size:.9063rem;color:var(--ink-2);line-height:1.55;max-width:30ch;margin-top:14px}
.foot-base{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-2);
           display:flex;gap:18px;flex-wrap:wrap;align-items:center;
           font-size:.8438rem;color:var(--ink-3)}
.foot-base a{color:var(--ink-3)}
.foot-base a:hover{color:var(--ink-2)}
.foot-base .sep{margin-left:auto}

/* ---------------------------------------------------------------------------
   23. REVEAL
   Voiceflow's hero entrance is .26s on cubic-bezier(.2,.7,.3,1) with a
   .595s delay, and content further down fades on scroll.  Small movement,
   fast, never a slide-in from the side.
   ------------------------------------------------------------------------- */
/* NOT `[data-r]`, AND THAT IS NOT A STYLE PREFERENCE.

   This page hosts main-app's real blocks, and the Spreadsheet writes
   `data-r="<row>"` on every single cell it draws. `[data-r]{opacity:0}` —
   a marketing page's scroll-reveal hook — therefore matched all 28 rows of
   somebody's spreadsheet and made the entire grid invisible, while the
   toolbar, the formula bar and the column headers rendered perfectly.

   It took a while to find because over file:// a stylesheet is opaque:
   reading `document.styleSheets[i].cssRules` throws SecurityError, so
   every attempt to ask the browser "which rule is doing this" silently
   returned nothing.

   A page that hosts other people's DOM does not get to own two-letter
   attribute names. Everything here is namespaced. */
[data-reveal]{opacity:0;transform:translateY(13px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .62s var(--ease)}
[data-reveal][data-delay="1"].in{transition-delay:.07s}
[data-reveal][data-delay="2"].in{transition-delay:.14s}
[data-reveal][data-delay="3"].in{transition-delay:.21s}
[data-reveal][data-delay="4"].in{transition-delay:.28s}

.hero-pop{opacity:0;animation:heropop .26s var(--ease-pop) forwards}
.hero-pop[data-delay="1"]{animation-delay:.06s}
.hero-pop[data-delay="2"]{animation-delay:.14s}
.hero-pop[data-delay="3"]{animation-delay:.24s}
.hero-pop[data-delay="4"]{animation-delay:.36s}
@keyframes heropop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero-pop{opacity:1;animation:none}
}

/* ---------------------------------------------------------------------------
   24. INNER PAGES
   ------------------------------------------------------------------------- */
.pagehead{padding-top:74px;padding-bottom:56px}
.pagehead .eyebrow{margin-bottom:16px}
.pagehead .lead{max-width:60ch;margin-top:20px}

.prose{max-width:58ch}
.prose h2{font-family:var(--font-display);font-weight:400;color:var(--ink);
          font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;
          margin:54px 0 16px}
.prose h3{font-family:var(--font-sans);font-weight:600;color:var(--ink);
          font-size:1.125rem;margin:34px 0 10px}
.prose p{color:var(--ink-2);line-height:1.68;margin-bottom:1.05em}
.prose strong{color:var(--ink);font-weight:600}
.prose > p:first-child{font-size:var(--t-lead);color:var(--ink-2)}
.prose ul{margin:0 0 1.3em}
.prose li{position:relative;padding-left:20px;color:var(--ink-2);line-height:1.62;margin-bottom:9px}
.prose li::before{content:"";position:absolute;left:2px;top:.72em;
                  width:5px;height:5px;border-radius:50%;background:var(--brand-200)}
.prose blockquote{border-left:2px solid var(--brand-100);padding-left:22px;margin:30px 0;
                  font-family:var(--font-display);font-size:1.25rem;line-height:1.45;
                  color:var(--ink);letter-spacing:-.012em}

.tocbox{position:sticky;top:104px}
.tocbox a{display:block;padding:6px 0;font-size:.9063rem;color:var(--ink-3);
          transition:color .15s var(--ease)}
.tocbox a:hover{color:var(--ink)}
.tocbox a.is-here{color:var(--ink);font-weight:600}
.withtoc{display:grid;grid-template-columns:216px minmax(0,1fr);gap:clamp(30px,5vw,72px)}
@media (max-width:920px){ .withtoc{grid-template-columns:1fr} .tocbox{display:none} }

/* sign-in page */
.signin{min-height:calc(100vh - var(--nav-h));display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
@media (max-width:900px){ .signin{grid-template-columns:1fr} .signin-art{display:none} }
.signin-form{display:flex;flex-direction:column;justify-content:center;
             padding:clamp(40px,6vw,80px) var(--gutter)}
.signin-form .inner{max-width:392px;width:100%;margin:0 auto}
.signin-art{background:var(--tint);border-left:1px solid var(--line);
            position:relative;overflow:hidden;display:flex;align-items:center;
            padding-left:52px}
.signin-art .appwin{width:820px;flex:none;height:520px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8438rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input{
  width:100%;height:44px;border-radius:var(--r-control);
  border:1px solid var(--line-2);padding:0 13px;
  font:inherit;font-size:.9688rem;color:var(--ink);background:#fff;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field input:focus{outline:0;border-color:var(--brand);
                   box-shadow:0 0 0 3px var(--brand-50)}
.orline{display:flex;align-items:center;gap:14px;margin:20px 0;
        font-size:.8125rem;color:var(--ink-4)}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}

/* utility */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.mb-m{margin-bottom:26px}.mb-l{margin-bottom:44px}
.maxw-55{max-width:55ch}.maxw-46{max-width:46ch}
.flex{display:flex}.gap-s{gap:10px}.gap-m{gap:18px}.wrapf{flex-wrap:wrap}
.hairline{height:1px;background:var(--line);border:0}

/* ---------------------------------------------------------------------------
   25. THE PHONE
   Last on purpose.  These override rules declared in sections 8 and 9, and
   the first attempt put them BEFORE those sections — same selector, same
   specificity, so the later declaration simply won and the media query did
   nothing at all.  It looked correct in the source and was inert in the
   browser, which is the only reason it was caught: the render showed a
   238px nav column inside a 346px window with the page title clipped
   mid-word.  A cropped window reads as deliberate; a crushed one reads as
   broken.
   ------------------------------------------------------------------------- */
@media (max-width:720px){
  .hero-stage{height:clamp(276px,40vh,340px)}
  .hero-stage .appwin{height:520px}
  .lbnav{width:128px}
  .lbcol + .lbcol{display:none}          /* the pages column, on a phone     */
  .lbnav-head b{font-size:.6875rem}
  .lbpage{padding:16px 18px}
  .lbpage-title{font-size:1.1875rem}
  .lbtext{font-size:.75rem}
  .appwin-url{display:none}
  .appwin-tab{font-size:.6875rem;padding:0 9px}
  .slash{width:206px}
  .slash-item{font-size:.6875rem}
  .stage{padding:22px 20px 0;min-height:360px}
  .car-slide{flex:0 0 84%}
  .promise div{padding:20px 20px}
  .foot-base .sep{margin-left:0;width:100%}
}

/* ===========================================================================
   26. V2
   Everything above this line is prototype-1's stylesheet, byte for byte.
   v2 removes pages rather than redesigning them, so nothing above is edited
   or deleted — the design system is identical and the two prototypes stay
   comparable. What follows is only what v2 adds.
   ========================================================================= */

/* ---- THE NAV, WITH NOTHING IN THE MIDDLE -------------------------------
   v2 is one page, so there is no site to navigate. What is left is the
   logo and the two actions, which is exactly what Notion, Voiceflow and
   Stripe keep on the right of every one of the thirty-one screenshots:
   one quiet, one coloured.

   A pill 1088px wide holding a logo and two buttons with a void between
   them reads as a bar that lost its links. It narrows to fit what it
   actually carries. */
.nav-bare .nav-links{display:none}
.nav-bare .nav-burger{display:none}
.nav.is-float .nav-bare{max-width:512px;padding:0 10px 0 20px}
@media (max-width:560px){
  .nav-bare .nav-quiet{display:flex}          /* it is the only other action */
  .nav-bare .nav-actions .btn-primary{display:inline-flex}
  .nav.is-float .nav-bare{max-width:calc(100% - 24px)}
}
@media (max-width:400px){
  .nav-bare .nav-quiet{display:none}
}

/* ---- THE HERO, WITH A SUBTITLE ----------------------------------------
   v1 ran Stripe's two-tone sentence: headline and explanation at one size,
   the second half lighter. v2 separates them, so the title is the claim on
   its own and the explanation is a subtitle beneath it. The measure is
   capped so the subtitle can never run wider than the line above it. */
.hero-sub{
  max-width:44ch;margin:22px auto 0;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.5;color:var(--ink-2);text-wrap:pretty;
}

/* ---- THE REEL ---------------------------------------------------------
   v1's carousel was one section among fifteen and sat three-up. In v2 it
   carries the page, so the slides roughly double and two sit in view with
   the third cropped at the page's own frame line.

   It reuses .carousel / .car-track / .car-slide / .car-btn unchanged, so
   assets/site.js drives it with no v2 branch in the code. Only the sizes
   are new. */
.reel .car-track{
  gap:22px;
  /* bleed to the frame's right rule, so the crop lands on the page's own
     line rather than in the middle of the content column — the way
     Stripe's "What's happening" track runs off the edge */
  margin-right:calc(var(--gutter) * -1);
  padding-right:var(--gutter);
  scroll-padding-left:0;
}
/* THE SLIDE IS SIZED BY THE WIDEST APP IN IT, NOT BY TASTE.
   Four of the seven panels are the real blocks, and each declares the size
   it wants to be drawn at (`export const layout`): the Typewriter asks for
   920x620, the Spreadsheet 760x500, the Task Manager 720x620. A slide of
   940x620 renders every one of them at 1:1, so nothing on this page is a
   shrunken picture of the product. The demos simply fill the same box. */
/* SIZED DOWN 30% FROM THE FIRST PASS.
   The panels were 940x620 so the Typewriter could render at 1:1. At that
   size the reel was most of the page and each app read as a product shot
   rather than a glimpse. 940 x 0.7 = 658, 620 x 0.7 = 434 — every app is
   still the real app, still fully interactive, laid out at its own declared
   size and scaled into the smaller box. */
.reel .car-slide{flex:0 0 clamp(280px,72%,658px)}
/* The height here is only a fallback for a panel whose app has not
   mounted yet. apps/host.js replaces it with the app's own shape the
   moment it does, which is what removes the white bands. */
.reel .car-slide .demo-frame{
  height:434px;margin-bottom:18px;background:#fff;
}
/* different apps, different heights — so each panel keeps its own */
.reel .car-track{align-items:flex-start}
/* The name is the whole caption now — twice the size, centred under its
   panel, with nothing under it. */
.reel .car-slide h3{
  font-family:var(--font-sans);font-size:2.125rem;font-weight:600;
  letter-spacing:-.022em;line-height:1.15;color:var(--ink);
  text-align:center;margin:0;
}
.reel .car-head{margin-bottom:30px}
.reel .car-btn{width:44px;height:44px}

@media (max-width:1080px){
  .reel .car-slide{flex:0 0 min(88%,600px)}
  .reel .car-slide .demo-frame{height:380px}
}
/* On a phone the real apps are scaled down to fit — they are still the real
   apps and every control still works, they are simply further away. The
   Typewriter lands near 0.4, which is legible rather than operable, and
   that is an honest limit of putting a 920px machine on a 390px screen. */
@media (max-width:700px){
  .reel .car-slide{flex:0 0 92%}
  .reel .car-slide .demo-frame{height:300px}
  .reel .car-slide h3{font-size:1.5rem}
}

/* ---- THE FOOTER, REDUCED TO THE LINE THAT HAS TO BE THERE -------------- */
.foot-min{
  border-top:1px solid var(--line);background:var(--tint);
  padding-top:30px;padding-bottom:30px;
}
.foot-min p{font-size:.8438rem;color:var(--ink-3)}

/* ---- THE REEL'S RIGHT EDGE --------------------------------------------
   The crop itself is right — Stripe's and Voiceflow's tracks both run a
   partial card off the edge, and that is what says "there is more". What
   it costs is a caption clipped mid-word, which reads as broken rather
   than as continuing. A short fade resolves it: the picture is still
   cropped, the sentence dissolves instead of being guillotined.

   It is a MASK ON THE TRACK, not an overlay on the section. The first
   attempt was an absolutely positioned ::after spanning the whole
   carousel, and the render showed why that is wrong: `top:0;bottom:0`
   covers the head as well, so it sat on top of the ‹ arrow and made an
   enabled button look disabled. A mask affects only the element it is on,
   stays pinned to that element's right edge while the content scrolls
   underneath it, and cannot reach anything else.

   Present only while there is more to the right, keyed off the same
   disabled state the arrow already carries — one piece of state, not two
   that have to be kept in step. */
.reel:has([data-next]:not([disabled])) .car-track{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 84px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 84px),transparent 100%);
}
@media (max-width:900px){
  .reel:has([data-next]:not([disabled])) .car-track{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent 100%);
  }
}

/* ---- THE HABIT GRID ON A NARROW SLIDE ---------------------------------
   At 26px per day the seven columns plus a name need ~340px. A phone's
   reel slide is ~330, so every habit name ellipsised to "Wa…" — a demo
   about keeping track of your mornings, with the mornings unreadable.
   The boxes give up the four pixels instead. */
@media (max-width:560px){
  .hb-grid{grid-template-columns:1fr repeat(7,20px);gap:3px}
  .hb-box{width:20px;height:20px;border-radius:5px}
  .hb-box svg{width:11px;height:11px}
  .hb{padding:14px 14px}
  .hb-name{font-size:.6875rem;padding-right:6px}
  .hb-name em{display:none}
  .hb-foot{font-size:.6875rem;gap:10px}
}

/* ---- THE HERO WINDOW ON A PHONE, PART TWO -----------------------------
   At 390 the window is ~346px wide. Even with the pages column already
   gone, the sections column left the page about 200px, and the habit
   tracker that mounts into it rendered its rows as "W", "T", "R" — one
   letter each. A window cropped at its edge reads as deliberate; a window
   whose contents are crushed to initials reads as broken.

   So on a phone the hero window drops the nav entirely and is the PAGE.
   The title bar, the tab, the page title, the date, the typing and the
   "/" panel are all still there, which is the whole of what the hero is
   demonstrating. Notion's own mobile hero does the same thing: it shows a
   cropped page, not the whole chrome. */
@media (max-width:560px){
  .hero-stage .lbnav{display:none}
  .hero-stage .lbpage{padding:18px 20px}
  .hero-stage [data-slot]{max-width:100%!important}
}

/* ---- 1. THE NAV STAYS PUT ----------------------------------------------
   v1 pinned the bar and let it lift off into a floating pill on scroll,
   which is Voiceflow's move. v2 does neither: the header sits at the top
   of the document, scrolls away with the page, and never changes shape.

   `position:static` is what makes it scroll away; killing `.is-float`'s
   geometry is what stops it compressing. The class is still toggled by
   site.js — leaving that alone keeps the script identical to v1's — but
   it now has nothing to change. */
.nav{position:static}
.nav-spacer{display:none}
.nav.is-float{padding:0}
.nav.is-float .nav-inner,
.nav.is-float .nav-bare{
  max-width:var(--frame);height:var(--nav-h);
  border-radius:0;border-bottom:1px solid var(--line);
  background:var(--paper);box-shadow:none;
  padding:0 var(--gutter);
}

/* ---- 2. NO PAGE FRAME --------------------------------------------------
   Stripe rules a hairline down the left and right of the whole page. It is
   a real technique and it is not wanted here: on a white page with nothing
   pressed against it, it reads as the edge of a container rather than as
   the edge of the page. */
.frame{border-left:0;border-right:0}

/* ---- 3. THE FOOTER LINE IS CENTRED ------------------------------------- */
.foot-min{text-align:center}

/* ---- 6. THE REAL APPS --------------------------------------------------
   A panel that runs main-app/blocks/<name>/block.js. The slot is the box;
   the stage inside it is laid out at the app's own declared size and
   scaled to fit. The app owns its inside, the host owns its box — which is
   the same law the surfaces in the product run on. */
[data-app]{position:relative;overflow:hidden;background:#fff}
.lbapp-stage{position:absolute;transform-origin:0 0}

/* An app is being used, not watched: no text selection dragging, and the
   cursor is the app's own. */
[data-app] *{-webkit-tap-highlight-color:transparent}

/* ---- THE DEMOS IN A BIG BOX -------------------------------------------
   Three of the seven panels are the coded demos, and they were tuned for
   the 320px frame v2 started with. The reel is now 940x620 so the real
   apps can render at 1:1, and at that size 13px type in a chat bubble
   reads as a screenshot of something far away. Each demo steps up to suit
   the box it is actually in. */
@media (min-width:1080px){
  /* A chat with two messages in a 620px box left a screen of nothing above
     them. A real chat is scrolled to the bottom: the newest message sits
     just above the box you type in. Bottom-aligned is both tidier and the
     truthful layout. */
  .reel .ch{font-size:.9688rem;padding:26px 30px;gap:14px;justify-content:flex-end}
  .reel .ch-bar{margin-top:18px}
  .reel .ch-bar{padding:11px 12px 11px 20px;font-size:.9375rem}
  .reel .ch-send{width:32px;height:32px}
  .reel .bd{background-size:26px 26px}
  .reel .bd-node .cap{height:26px;font-size:.75rem;padding:0 11px}
  .reel .bd-note{padding:13px 15px;font-size:.8125rem;line-height:1.5}
  .reel .bd-cursor{width:19px;height:24px}
  .reel .wb-pen{padding:7px 10px;gap:7px}
  .reel .wb-pen i{width:15px;height:15px}
  /* A whiteboard IS the whole white panel — that part is right. The sketch
     on it is not the panel: stretched to 940x620 the marker strokes came
     out about 8px wide and five lines had to carry the whole box. The
     board stays full size; the drawing sits on it at a size a marker
     would actually make. */
  .reel .wb{display:flex;align-items:center;justify-content:center}
  .reel .wb svg{width:min(100%,460px);height:auto;max-height:78%}
}

/* The Typewriter asks for 920px. A percentage flex-basis made the slide
   855px on a 1440 screen, so it was drawn at 0.93 — a real app, very
   slightly shrunk, for no reason. A fixed basis on wide screens gives it
   the size it asked for. */
@media (min-width:1200px){
  .reel .car-slide{flex:0 0 658px}
}

/* ---- THE HERO WINDOW IS SHOWN WHOLE ------------------------------------
   It was cropped by a short stage and then dissolved into the page with a
   gradient. Both are gone: the crop was cutting off the part that makes
   the point (the "/" panel and the app that lands under it), and a fade
   over the top of it only hid more.

   The stage is now exactly as tall as the window, so nothing is cut and
   nothing is faded. The air BELOW it stays — that was the part that was
   working, and it is what keeps this section and the reel reading as two
   sections rather than one run-on. */
.hero-stage{
  height:640px;
  margin-bottom:0;
  overflow:visible;
}
.hero{padding-bottom:clamp(52px,6vw,88px)}

@media (max-width:720px){
  .hero-stage{height:520px}
}

/* ---- THE REEL BAND IS SMALLER TOO -------------------------------------
   Asked to come down with the panels. The section was carrying 96px top
   and bottom around a 620px reel; it now carries less around a 434px one. */
#reel.band{padding-top:clamp(56px,6vw,76px);padding-bottom:clamp(56px,6vw,76px)}