/* ONE TAKE · Site 02 · STUDIO FLOOR — light editorial, hanging reels */

@font-face{font-family:"Playfair";font-weight:400;src:url("fonts/PlayfairDisplay-Regular.woff") format("woff"),url("fonts/PlayfairDisplay-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Playfair";font-weight:700;src:url("fonts/PlayfairDisplay-Bold.woff") format("woff"),url("fonts/PlayfairDisplay-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:400;src:url("fonts/Inter-Regular.woff") format("woff"),url("fonts/Inter-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Inter";font-weight:700;src:url("fonts/Inter-Bold.woff") format("woff"),url("fonts/Inter-Bold.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Outfit";font-weight:100 900;src:url("fonts/Outfit-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"Outfit";font-weight:100 900;src:url("fonts/Outfit-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}
@font-face{font-family:"Poppins";font-weight:700;src:url("fonts/Poppins-Bold.woff") format("woff"),url("fonts/Poppins-Bold.ttf") format("truetype");font-display:swap}

:root{
  --paper:#f4f1ec; --paper-2:#ebe6de; --ink:#151412; --ink-2:rgba(21,20,18,.62); --ink-3:rgba(21,20,18,.38); --line:rgba(21,20,18,.12);
  --red:#ff3132;
  /* Outfit (SIL OFL, self-hosted, variable weight) for everything, owner 2026-09-19; Inter stays as the fallback */
  --display:"Outfit","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --sans:"Outfit","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:var(--display); /* headings used to be Playfair; every heading rule still reads --serif, which now resolves to the grotesque */
  --gutter:clamp(20px,4.5vw,72px); --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--sans);font-size:clamp(15px,1.05vw,18px);line-height:1.55;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(rgba(21,20,18,.05) .6px,transparent .7px);background-size:22px 22px}
body.is-loading{overflow:hidden}
img,video{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}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.0;letter-spacing:-.025em}
h2{font-size:clamp(38px,5.6vw,88px)}
h3{font-size:clamp(26px,2.4vw,38px)}
em{font-style:normal;color:var(--red)}
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.kicker i{width:22px;height:1px;background:var(--red)}
.sec-head{max-width:1300px;margin:0 auto;display:grid;gap:14px}
.sec-head--center{text-align:center;justify-items:center}
.sec-head--center .kicker{justify-content:center}
.sec-head__p{color:var(--ink-2);max-width:58ch;font-size:clamp(16px,1.15vw,19px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#ff5254;transform:translateY(-2px)}
.btn--line{border:1px solid var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--lg{height:60px;padding:0 32px;font-size:16px}

/* veil loader: lifted from 01-the-cut's hero (Anton letters as a multiply mask over a reel) */
@font-face{font-family:"Anton";src:url("fonts/Anton-Regular.woff") format("woff"),url("fonts/Anton-Regular.ttf") format("truetype");font-display:block} /* block, not swap: a swap from Impact to Anton mid-glide made the title lurch */
.veil{position:fixed;inset:0;z-index:100;isolation:isolate;overflow:hidden;background:radial-gradient(60% 50% at 50% 48%,#5a1415 0%,#2a0c0d 45%,#0a0a0b 100%)}
.veil__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.9;filter:brightness(1.12) contrast(1.05) saturate(1.05)}
.veil__mask{position:absolute;inset:0;z-index:2;background:#000;mix-blend-mode:multiply;display:grid;place-items:center}
.veil__title{font-family:"Anton",Impact,"Arial Narrow",sans-serif;color:#fff;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;line-height:.86;letter-spacing:-.01em;font-size:clamp(140px,48vw,520px)}
.veil__word{display:block;opacity:0;will-change:opacity} /* the words hold their place and fade in; the start pose is held here until main.js takes over */
@media (prefers-reduced-motion:reduce){.veil__word{opacity:1}}
@media (min-width:900px){.veil__title{flex-direction:row;gap:.12em;font-size:clamp(170px,29vw,560px)}}
/* MOBILE INTRO: a phone cannot hold ONE TAKE at a size worth seeing, so the camera pans the word
   instead, one letter at a time, with the reel playing through it as it always has. The letters then
   fold into the stacked wordmark as the camera pulls back. Desktop keeps the fade it has.
   Held behind the curtain too: while HOLD is true the static title is what a visitor should see. */
.veil__pan{display:none;position:absolute;left:0;top:0;align-items:flex-start;white-space:nowrap;
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;color:#fff;font-size:96vh;line-height:.78;
  letter-spacing:-.005em;transform-origin:0 0;will-change:transform;
  /* the gap exists so ONE letter is on screen at a time: the narrowest glyph is 304px on a 375px
     screen, so its neighbour needs to sit more than 187.5 - 152 = 36px away. A flex gap does this
     without touching the measured glyph widths the fold depends on. It is closed again by the fold. */
  gap:.09em}
.veil__pan span{display:block;will-change:transform}
.veil__pan .gap{margin-left:.24em}
@media (max-width:899px){
  html:not(.is-hold) .veil__title{display:none}
  html:not(.is-hold) .veil__pan{display:flex}
}

/* holding curtain: a quiet line under the title while the site is not yet open */
.veil__soon{display:none;position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);z-index:3;width:min(560px,calc(100vw - 32px));margin:0;text-align:center;color:rgba(255,255,255,.8);font-family:var(--sans)}
.veil__soonK{margin:0 0 6px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.veil__soonP{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.65)}
.veil__row{display:flex;align-items:center;gap:0;padding:3px 3px 3px 18px;border-radius:999px;background:var(--paper);box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.veil__row input[type=email]{flex:1;min-width:0;height:42px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none}
.veil__row input::placeholder{color:rgba(21,20,18,.5)}
.veil__row .btn{height:42px;padding:0 18px;flex:none}
.veil__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.veil__msg{margin:12px 0 0;min-height:1.4em;font-size:13px;color:rgba(255,255,255,.8)}
.veil__msg a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.veil__soon.is-done .veil__row{display:none}
.veil__soon.is-done .veil__soonP{display:none}
.veil__soon.is-done .veil__msg{font-size:16px;color:#fff}
.is-hold .veil__soon{display:block}
.is-hold .veil{cursor:default}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);transition:background .5s,padding .5s,box-shadow .5s}
.nav.is-scrolled{background:rgba(244,241,236,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 var(--line)}
.logo{height:38px;width:auto;display:block}.logo--sm{height:34px}
.nav .logo{height:44px} /* one size, static and scrolled */
@media (max-width:820px){.nav .logo{height:40px}}
.logo__ink{fill:var(--ink)}.logo__slot{fill:var(--paper)}
.logo__frame{fill:none;stroke:var(--ink);stroke-width:11}.logo__hinge{fill:var(--red)}
.logo__one,.logo__take{font-family:"Poppins",var(--sans);font-weight:700;font-size:64px;letter-spacing:-.02em}
.logo__one{fill:var(--ink)}.logo__take{fill:var(--red)}
.nav__links{display:flex;gap:30px;font-size:14px;color:rgba(21,20,18,.86);font-weight:500}
/* the right-hand group: the button, then a quiet Sign in link in the menu style */
.nav__cta{display:flex;align-items:center;gap:26px}
.nav__signin{position:relative;padding:6px 0;font-size:14px;color:rgba(21,20,18,.86);font-weight:500;transition:color .3s;white-space:nowrap}
.nav__signin::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__signin:hover{color:var(--ink)}.nav__signin:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:820px){.nav__cta{gap:14px}}
.nav__links a{position:relative;padding:6px 0;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover{color:var(--ink)}.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:820px){.nav__links{display:none}.nav .btn{height:40px;padding:0 16px}}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;padding-top:clamp(90px,14vh,150px)}
.hero__inner{position:relative;min-height:calc(100vh - 90px);display:grid;align-items:center;padding:0 var(--gutter);perspective:1600px} /* gives the mouse tilt its depth; the rig's own perspective handles the reels */
.hero__copy{position:relative;z-index:3;max-width:min(880px,58vw);display:grid;gap:22px}
/* headline is sized off Playfair's real width (line 1 = 8.24em) so each line always holds */
.hero__h{font-size:clamp(30px,10.6vw,60px);line-height:.98}
@media (min-width:900px){.hero__h{font-size:clamp(56px,6.1vw,96px)}}
.hero__h .ln>span{white-space:nowrap}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;transform:translateY(112%)}
.hero__p{color:var(--ink-2);max-width:50ch;font-size:clamp(16px,1.2vw,20px)}
/* keyword highlighter: typed on letter by letter in red, then wiped off from the left (driven in main.js) */
.hl{background:none;color:inherit;padding:0;margin:0}
.hl .ch{display:inline;padding:.04em 0}
.hl .ch{transition:background-color .28s ease,color .28s ease}
.hl .ch.on{background:var(--red);color:#fff;transition:none} /* on: instant per letter for the sweep; off: a soft lift */
.hl .ch:first-child{padding-left:.16em;margin-left:-.16em;border-radius:3px 0 0 3px}
.hl .ch:last-child{padding-right:.16em;margin-right:-.16em;border-radius:0 3px 3px 0}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.rig-mouse{position:absolute;inset:0;z-index:2;perspective:1500px;perspective-origin:50% 40%;pointer-events:none}
.rig{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.hang{position:absolute;left:50%;top:-16vh; /* pivots above the viewport so every string enters from the top edge, whatever its depth */transform:translateX(var(--x)) translateZ(var(--z)) rotate(var(--r,0deg));transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.string{display:block;width:1px;height:calc(var(--s,22vh) + 16vh); /* --s = where the reel's top lands (px or vh) */margin:0 auto;background:linear-gradient(var(--ink-3),var(--ink-2))}
.string--long{height:clamp(120px,20vh,220px)}
.hang--far .phone,.hang--far .string{opacity:.86;filter:saturate(.92)} /* set-back reels: a touch quieter, still fully readable */
.hang.is-hidden{display:none}
.swing{transform-origin:50% 0;transform-style:preserve-3d;will-change:transform} /* pivot = top of the string; physics in main.js drives rotate() */
@keyframes sway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
.hang .phone{width:var(--w,200px);transform-style:preserve-3d;will-change:transform;backface-visibility:visible}
.phone__shade{position:absolute;inset:0;z-index:3;background:#000;opacity:0;pointer-events:none;border-radius:inherit}
.phone{position:relative;width:clamp(120px,15vw,236px);aspect-ratio:9/16;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;background:#111;box-shadow:0 60px 90px -30px rgba(21,20,18,.45),0 12px 30px -10px rgba(21,20,18,.3);transform:translateZ(0)}
.phone--sm{width:clamp(130px,13vw,210px)}
.phone--md{width:clamp(140px,17vw,240px)}
.phone video{width:100%;height:100%;object-fit:cover}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);pointer-events:none}
.hero__floor{position:absolute;left:0;right:0;bottom:0;height:34vh;background:linear-gradient(transparent,var(--paper-2));pointer-events:none;z-index:1}
@media (max-width:899px){
  .hero__inner{align-items:end;padding-bottom:12vh}
  .hero__copy{max-width:100%}
  .rig-mouse{perspective-origin:50% 10%}
}

/* MOBILE HERO: the hanging rig crops the reels at both edges at this width and eats the top of the
   screen, so below 900px it stands down and the reels are swiped at their own 9:16 instead. The rig's
   markup stays in the page but never loads a video: its <video>s are data-lazy and the observer only
   reaches what is on screen. */
.hero__p--m,.deck,.deck__dots{display:none}
.deck__card{position:relative;flex:0 0 auto;width:min(58vw,212px);aspect-ratio:9/16;border-radius:18px;
  overflow:hidden;scroll-snap-align:start;background:var(--paper-2);cursor:pointer;
  box-shadow:0 18px 34px -22px rgba(21,20,18,.55)}
.deck__card video{width:100%;height:100%;object-fit:cover;display:block}
.deck__card:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.deck__tag{position:absolute;left:10px;bottom:10px;z-index:2;font-size:11px;font-weight:600;color:#fff;
  background:rgba(10,10,11,.5);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.deck__snd{position:absolute;right:9px;top:9px;z-index:2;width:26px;height:26px;border-radius:50%;
  background:rgba(10,10,11,.45);backdrop-filter:blur(6px);display:grid;place-items:center;
  font-size:13px;line-height:1;color:#fff}
.deck__card.is-loud .deck__snd{background:var(--red)}
.deck__dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);transition:.3s}
.deck__dots i.on{background:var(--ink);width:16px;border-radius:3px}
@media (max-width:899px){
  .rig-mouse,.hero__floor{display:none}
  .hero{padding-top:clamp(74px,11vh,110px)}
  .hero__inner{align-items:start;padding-bottom:5vh;min-height:0}   /* the deck makes the column tall: top-aligned, not bottom */
  .hero__copy{gap:16px}
  .hero__p:not(.hero__p--m){display:none}
  .hero__p--m{display:block;font-size:15px;line-height:1.5}
  /* the deck bleeds to both screen edges but its first card still lands on the gutter */
  .deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 0;scroll-padding-left:var(--gutter);
    scrollbar-width:none}
  .deck::-webkit-scrollbar{display:none}
  .deck__dots{display:flex;gap:5px;justify-content:center;margin-top:-4px}
}

/* HOW IT WORKS · stacked sticky cards, app window left, narrative right */
.how{padding:6vh var(--gutter) 8vh}
/* the heading pins under the nav for the whole of Section 2 and releases as Section 3 arrives */
.how .sec-head{position:relative;z-index:5;margin:0;padding:6px 0 14px;max-width:none;background:var(--paper)} /* pinned by ScrollTrigger; released with the last card */
.how .sec-head h2{margin:0}
.steps{position:relative;max-width:none;margin:0} /* cards run gutter to gutter, matching the heading on the left */
.step{position:sticky;top:calc(88px + 96px);display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);padding:clamp(18px,2.4vw,34px);border-radius:24px;background:#fffdf8;border:1px solid var(--line);margin-bottom:6vh;min-height:min(68vh,620px);will-change:transform;transform-origin:50% 0;box-shadow:0 30px 70px -34px rgba(21,20,18,.35)}
/* every card rests on the same line; the previous one fades out beneath the next (main.js) */
@media (min-width:900px){.step{grid-template-columns:1.25fr 1fr;align-items:start}}
@media (max-width:899px){
  .step{position:relative;top:auto!important;min-height:0}
  .how .sec-head{position:static;background:none;padding:0 0 18px}
  /* the run-out to Become a member was 192px of paper: the last card's 6vh margin, this section's
     8vh foot and the pricing block's 78px top. The 78px is nav clearance - the bar is fixed at 76px
     and "Start creating" anchors to #pricing - so the other two go instead. */
  .step:last-child{margin-bottom:0}
  .how{padding-bottom:2vh}
}
.window{position:relative;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);padding-top:34px} /* title bar + the recording at its own aspect, nothing cropped */
.window::before{content:"";position:absolute;top:0;left:0;right:0;height:34px;background:#1c1b19;z-index:1}
.window>i{position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.28);z-index:2}
.window>i:nth-child(1){left:14px}.window>i:nth-child(2){left:30px}.window>i:nth-child(3){left:46px}
.window video{display:block;width:100%;aspect-ratio:1440/830;height:auto;object-fit:cover;background:#111}
.step__body{display:grid;gap:14px;align-content:start;align-self:start} /* title line sits level with the top of the window */
.step__t{font-size:clamp(28px,2.6vw,42px);line-height:1.05}
.step__n{color:var(--red)}
.step__body p{color:var(--ink-2);max-width:46ch;font-size:clamp(16px,1.15vw,19px)}
.step__cap{min-height:13.5em;opacity:1;transform:none;transition:opacity .42s var(--ease),transform .42s var(--ease)} /* narrative beat: fades out, swaps, fades in */
.step__cap.is-out{opacity:0;transform:translateY(6px)}

/* THE WALL */
.wallsec{padding:12vh 0 10vh;overflow:hidden}
.wallsec .sec-head{padding:0 var(--gutter) 8vh}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,30px);padding:0 var(--gutter);align-items:start}
.col{display:grid;gap:clamp(12px,2vw,30px);will-change:transform}
.col:nth-child(2){margin-top:clamp(60px,12vh,160px)}
.col:nth-child(3){margin-top:clamp(20px,5vh,70px)}
.tile{position:relative;display:grid;gap:12px;transform:rotate(var(--tilt,0deg));transition:transform .8s var(--ease)}
.tile:hover{transform:rotate(0) translateY(-6px)}
.tile .phone{width:100%;cursor:pointer}
.tile__cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 4px}
.tile__cap h3{font-size:clamp(17px,1.4vw,22px)}
.tile__cap span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tile__sound{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(21,20,18,.55);color:#fff;display:grid;place-items:center;font-size:11px;opacity:0;transition:opacity .3s}
.tile:hover .tile__sound,.tile.is-loud .tile__sound{opacity:1}
.tile.is-loud .tile__sound{background:var(--red)}
.tile.is-loud .phone{outline:3px solid var(--red);outline-offset:4px}
@media (max-width:767px){.wall{grid-template-columns:repeat(2,1fr)}.col:nth-child(3){display:none}}

/* PRICING · pinned like Sections 2 and 3: the heading sits at 94px (88px nav clearance + 6px), the same place and size as theirs */
.pricing{position:relative;background:var(--paper)}
.pricing__pin{position:relative;height:100vh;padding:94px var(--gutter) 0;overflow:hidden;background:var(--paper)}
/* depth: a floor the cards stand on (the hero's gradient) */
.pricing__pin::before{content:"";position:absolute;left:0;right:0;bottom:0;height:40vh;background:linear-gradient(transparent,var(--paper-2));pointer-events:none;z-index:0}
.pricing__pin>*{position:relative;z-index:1}
.pricing__pin h2{margin:0 0 14px;white-space:nowrap}
.pricing__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:min(4vh,40px)}  /* card left, sheet right */
.plan{display:grid;justify-items:start;perspective:1100px;transform:rotate(-4deg) translateY(-24px);padding:0 0 0 1vw;order:-1;will-change:transform,opacity}  /* leans the other way from the sheet */
/* the membership card: credit-card proportions, ink with a soft sheen and the brand's red stripe along the foot */
.mcard{position:relative;height:min(380px,40vh);aspect-ratio:1.586;max-width:100%;border-radius:22px;padding:clamp(18px,2vw,28px);display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);overflow:hidden;will-change:transform,opacity;
  background:radial-gradient(120% 140% at 0% 0%,#2c2b28 0%,var(--ink) 55%,#0b0a09 100%);transform-style:preserve-3d;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 60px 90px -34px rgba(21,20,18,.62),0 22px 34px -16px rgba(21,20,18,.42),0 4px 8px -4px rgba(21,20,18,.3)}
.mcard::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);pointer-events:none}
.mcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red)}
.mcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mcard__logo{height:clamp(46px,7vh,80px);width:auto;display:block}
.mcard__k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,236,.6);padding-top:6px}
.mcard__price{align-self:end;display:flex;align-items:baseline;gap:10px;margin:0;font-family:var(--display)}
.mcard__price b{font-size:clamp(44px,6.5vh,72px);font-weight:700;letter-spacing:-.03em;line-height:1}
.mcard__price span{font-size:clamp(15px,1.1vw,18px);color:rgba(244,241,236,.75)}
/* the member line: the typed email in embossed capitals, a red caret while the field has focus, and "member since" once the address is complete */
.mcard__name{display:flex;align-items:center;gap:6px;min-height:1.3em;margin:clamp(6px,1.4vh,14px) 0 0;font-size:clamp(11px,1.5vh,14px);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.86);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.7)}
.mcard__name b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.mcard__caret{display:none;flex:none;width:2px;height:1.1em;background:var(--red);animation:caret 1s steps(1) infinite}
.mcard.is-typing .mcard__caret{display:block}
.mcard__since{margin-left:auto;font-size:9.5px;letter-spacing:.16em;color:rgba(244,241,236,.55);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s;white-space:nowrap}
.mcard.is-valid .mcard__since{opacity:1;transform:none}
@keyframes caret{50%{opacity:0}}
.mcard__foot{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:14px 0 8px;font-size:12px;letter-spacing:.03em;line-height:1.45;color:rgba(244,241,236,.68)}
.mcard__foot span:first-child{color:var(--paper);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.mcard__foot span:last-child{text-align:right;max-width:56%}
.rates__tops{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.rates__tops span{padding:4px 10px;border-radius:999px;border:1px solid rgba(21,20,18,.25);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rates__tops .rates__topk{border:0;padding:0 4px 0 0;font-weight:500;color:rgba(21,20,18,.86);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.rates__tops .rates__topnote{border:0;padding:0 0 0 4px;font-weight:400;color:rgba(21,20,18,.72);font-size:12px}

/* the sheet on the desk: a second sheet of paper, square corners, laid over the page at a slight angle, carrying the conversation and the sign-up */
.desk{position:relative;max-width:720px;justify-self:end;margin-top:calc(-1 * min(3.5vh,32px) - 100px);background:#fffdf8;padding:clamp(26px,3vw,44px);box-shadow:0 40px 80px -40px rgba(21,20,18,.45),0 10px 24px -14px rgba(21,20,18,.3),inset 0 1px 0 rgba(255,255,255,.8);transform:rotate(1.5deg);transform-origin:50% 50%;will-change:transform,opacity}
.offer{display:grid;gap:14px;align-content:center}
.qa{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.3vh,14px)}
.qa li{position:relative;display:grid;gap:4px;padding:0 0 clamp(8px,1.3vh,13px) 44px;border-bottom:1px solid var(--line)}
.qa__n{position:absolute;left:0;top:.5em;font-size:11px;letter-spacing:.16em;color:rgba(21,20,18,.7)}
.qa q{font-family:var(--serif);font-size:clamp(21px,1.75vw,30px);line-height:1.12;letter-spacing:-.015em;quotes:none;color:var(--ink)}
.qa p{margin:0;color:rgba(21,20,18,.86);font-size:clamp(14px,1vw,16.5px);line-height:1.55}
.qa p b{color:var(--ink);font-weight:700}
.qa q,.qa p{--wipe:130%;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 28%),transparent var(--wipe));mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 28%),transparent var(--wipe))}
.join{margin-top:2px;padding-top:clamp(12px,1.8vh,20px);display:grid;gap:10px}
.join__k{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,20,18,.86);font-weight:500}
.join__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.join__google{gap:10px;background:var(--paper);border-color:var(--line);color:var(--ink)}
.join__google svg{width:16px;height:16px;flex:none}
.join__or{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,20,18,.7)}
.join__form{display:flex;align-items:center;flex:1;min-width:280px;padding:3px 3px 3px 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);transition:border-color .3s}
.join__form:focus-within{border-color:var(--ink)}
.join__form input{flex:1;min-width:0;height:40px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none}
.join__form input::placeholder{color:rgba(21,20,18,.55)}
.join__form .btn{height:40px;padding:0 18px;flex:none}
.join__fine{margin:0;font-size:12.5px;line-height:1.5;color:rgba(21,20,18,.72);max-width:62ch}
/* short windows (laptops at 768px high): a smaller card gives the sheet more width, the sheet tightens, the fine print goes */
@media (max-height:820px) and (min-width:900px){
  .mcard{height:min(380px,34vh)}
  .desk{padding:20px 22px}
  .qa{gap:8px}.qa li{padding-bottom:8px;gap:3px}
  .qa q{font-size:clamp(19px,1.5vw,24px)}.qa p{font-size:13.5px;line-height:1.45}
  .join{padding-top:8px;gap:6px}.join__fine,.rates__topnote{display:none}
  .qa{gap:6px}.qa li{padding-bottom:6px;gap:2px}.qa p{font-size:13px;line-height:1.4}
  .pricing__grid{margin-top:min(2.5vh,24px)}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1200px){.rates__topnote{display:none}}
@media (max-width:899px){
  .pricing__pin{height:auto;padding:78px var(--gutter) 10vh}
  .pricing__pin h2{white-space:normal}
  /* minmax(0,1fr), not 1fr: a bare 1fr carries an automatic min of min-content, so one unbreakable
     child was forcing this column to 369px inside a 335px section and pushing the card and the
     sheet off the right edge. */
  .pricing__grid{grid-template-columns:minmax(0,1fr);margin-top:3vh;justify-items:center}
  /* the sheet is stacked UNDER the card here, not laid beside it, so the negative margin that
     overlaps the two on desktop has to go: it was pulling the paper up over the card. */
  .desk{transform:none;padding:22px 18px;margin-top:0;max-width:100%;width:100%;justify-self:center}
  .plan{order:-1;justify-items:center;transform:none;padding:0;margin-bottom:22px;width:100%}
  .mcard{height:auto;width:100%;max-width:min(340px,100%)}
  /* the sign-up stacks: side by side, Google took 199px of 333 and squeezed the email form to 92,
     while its submit button cannot shrink below 151 and was hanging 95px off the screen. */
  .join__row{flex-direction:column;align-items:stretch;gap:10px}
  .join__google{width:100%;justify-content:center}
  .join__or{text-align:center}
  .join__form{min-width:0;width:100%}
}


/* FOOTER */
.foot{display:grid;gap:30px;padding:8vh var(--gutter) 40px;border-top:1px solid var(--line)}
@media (min-width:800px){.foot{grid-template-columns:1.4fr 1fr;align-items:start}.foot__legal{grid-column:1/-1}}
.foot__l p{color:rgba(21,20,18,.86);margin-top:16px;max-width:36ch}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px;color:rgba(21,20,18,.86);font-weight:500}
.foot__links a:hover{color:var(--ink)}
.foot__legal{font-size:13px;color:rgba(21,20,18,.72)}
.foot__legal a{text-decoration:underline;text-underline-offset:3px}

/* LEGAL PAGES (privacy, terms, cookies): one reading column, the site's type and colours, no motion */
.legal{max-width:780px;margin:0 auto;padding:clamp(120px,16vh,170px) var(--gutter) 10vh}
.legal h1{font-size:clamp(40px,5vw,72px);margin:0 0 10px}
.legal__meta{color:var(--ink-3);font-size:14px;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:6px 18px}
.legal__sum{background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:0 0 38px;color:var(--ink-2);font-size:clamp(15px,1.05vw,17px)}
.legal__sum strong{color:var(--ink)}
.legal__sum ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.legal h2{font-size:clamp(24px,2.2vw,34px);margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.legal h3{font-size:clamp(18px,1.3vw,21px);font-family:var(--sans);font-weight:700;letter-spacing:0;margin:22px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:clamp(15px,1.05vw,17px);line-height:1.65}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.legal a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:clamp(13.5px,.95vw,15px)}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.legal th{color:var(--ink);font-weight:700}
.legal .todo{background:rgba(255,49,50,.08);border-left:3px solid var(--red);padding:2px 8px;color:var(--ink)} /* an owner-supplied detail still to fill in */
.legal ul.legal__toc{margin:0 0 30px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} /* outranks the .legal ul grid rule so the pills flow inline */
.legal__toc a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;text-decoration:none;color:var(--ink-2)}
.legal__toc a:hover{border-color:var(--ink);color:var(--ink)}
.legal__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);margin:0 0 22px}
.legal__back:hover{color:var(--ink)}
/* cookie notice: a quiet card centred at the foot of the window; the site sets no tracking cookies, so this informs rather than asks */
.cookie{position:fixed;left:50%;bottom:22px;z-index:70;width:min(560px,calc(100vw - 32px));--x:-50%;background:var(--ink);color:var(--paper);border-radius:18px;padding:18px 20px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);display:grid;gap:12px;font-size:14px;line-height:1.5;transform:translate(var(--x),20px);opacity:0;transition:transform .6s var(--ease),opacity .5s}
.cookie.is-in{transform:translate(var(--x),0);opacity:1}
.cookie p{margin:0;color:rgba(244,241,236,.8)}
.cookie a{text-decoration:underline;text-underline-offset:3px;color:var(--paper)}
.cookie__row{display:flex;flex-wrap:wrap;gap:8px}
.cookie .btn{height:38px;padding:0 16px;font-size:13px}
.cookie .btn--line{border-color:rgba(244,241,236,.35);color:var(--paper)}
@media (max-width:560px){.cookie{bottom:12px}}

/* The nav is fixed, so an anchor jump would otherwise put a section heading underneath it. 88px is
   the clearance the pinned headings already use (88px nav + 6px). This applies to a deep link from
   outside, the browser's own jump and an in-page click, which is why it is here and not in the JS. */
#hero,#how,#samples,#pricing,#auth{scroll-margin-top:88px}

/* reveal helpers */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .veil,.cursor{display:none!important}
  .reveal,.pstep__card,.pstep__media{opacity:1;transform:none}
  .pstep::before{transform:translate(-50%,-50%) scale(1)}
  .ln>span{transform:none}
  .tile{transform:none}
}

/* ===== SAMPLES · a held phone, six reels swiped by the thumb as the page scrolls ===== */
.feed{position:relative;background:var(--paper)}
/* the copy takes a fixed column; the phone is centred in whatever is left, between the text and the browser's right edge, and between the nav and the bottom */
.feed__pin{position:relative;height:100vh;display:grid;grid-template-columns:minmax(0,680px) 1fr;align-items:center;column-gap:0;padding:82px 0 0 var(--gutter);overflow:hidden;background:var(--paper);transition:background-color .9s ease,color .6s ease;
  --ph:min(78vh,calc(100vh - 82px - 8vh),980px);--u:8px}
/* the heading sits exactly where Section 2's pinned "How it works" sits (88px nav clearance + 6px), at the same size (the page h2) */
.feed__copy{align-self:start;max-width:680px;padding:12px 0 0}
.feed__copy h2{margin:0 0 18px}/* the six messages stack in one grid cell so the block keeps the height of the tallest; only the current one is shown */
.msgs{display:grid;margin-top:9vh;padding-top:26px;border-top:1px solid var(--line)}  /* the chapter text sits a little lower so it centres on the page below the nav */
.msg{grid-area:1/1;visibility:hidden}
.msg.is-on{visibility:visible}
.msg__tag{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.feed__n{color:var(--red)}
.msg__tag .msg__fmt::before{content:"";display:inline-block;width:18px;height:1px;background:var(--line);margin-right:12px;vertical-align:middle}
.msg{position:relative}
.msg__h{position:relative;font-size:clamp(28px,2.7vw,44px);line-height:1.08;margin:0 0 18px;padding:0 .1em 0 .08em;margin-left:-.08em}
.msg__h,.msg__p{--wipe:130%;-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 28%),transparent var(--wipe));mask-image:linear-gradient(90deg,#000 calc(var(--wipe) - 28%),transparent var(--wipe))}
.msg__h .num,.msg__p .num{font-variant-numeric:tabular-nums;color:var(--red)}
.msg__p{position:relative;color:var(--ink-2);font-size:clamp(16px,1.15vw,19px);line-height:1.6;max-width:58ch;margin:0 0 14px;will-change:transform;transition:color .6s ease}
.msg__p:last-child{margin-bottom:0}
.rail{display:flex;gap:8px;margin-top:26px}
.rail i{display:block;height:3px;width:14px;border-radius:2px;background:var(--line);transition:width .55s var(--ease),background .3s}
.rail i.on{width:48px;background:var(--red)}
.feed__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* the phone mockup (media/hand/phone.webp, green screen keyed out); the reels are mapped onto the screen's measured corners */
.feed__stage{position:relative;z-index:2;height:var(--ph);aspect-ratio:var(--ar,2387/4731);justify-self:center;align-self:center;margin:0;will-change:transform;transform-origin:50% 60%}

.shot{position:absolute;inset:0}
.shot__base{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;user-select:none}
/* the grey (#C2C2C2) frame, camera pill kept black, sits over the black one and fades in on the ink chapters, in step with the background */
.shot__base--ink{z-index:3;opacity:0;transition:opacity .9s ease}
.feed__pin.is-dark .shot__base--ink{opacity:1}
/* three shadows: a wide ambient pool, a mid cast to the lower right, and a tight contact shadow under the edge */
.shot::after{content:"";position:absolute;left:6%;right:6%;top:4%;bottom:1%;border-radius:18%/9%;z-index:0;
  box-shadow:0 70px 110px -40px rgba(21,20,18,.42),18px 30px 50px -22px rgba(21,20,18,.34),0 8px 14px -6px rgba(21,20,18,.28)}
/* the glass sits a hair below the frame: a dark inner edge over the reel, above everything on the screen */
.shot__screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 calc(var(--u) * 5) rgba(0,0,0,.65)}
.shot__thumb{position:absolute;z-index:3;pointer-events:none;user-select:none;will-change:transform}
.iphone__screen{position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;background:#000;overflow:hidden;cursor:pointer;border-radius:calc(var(--u) * 44);-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}

/* the feed inside the glass */
.reels{position:absolute;left:0;right:0;top:0;will-change:transform}
.reel{position:relative;width:100%;height:calc(100% / var(--n,6));background:#000;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel__rail{position:absolute;right:calc(var(--u) * 10);bottom:calc(var(--u) * 148);display:grid;gap:calc(var(--u) * 16);justify-items:center;font-size:calc(var(--u) * 13);font-weight:600;line-height:1.1}
.reel__rail span{display:grid;justify-items:center;gap:calc(var(--u) * 5)}
.reel__rail svg{width:calc(var(--u) * 28);height:calc(var(--u) * 28);display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.reel__audio{display:block;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:calc(var(--u) * 6);border:1.5px solid #fff;background:#333 center/cover no-repeat}
.reel__meta{position:absolute;left:calc(var(--u) * 14);right:calc(var(--u) * 72);bottom:calc(var(--u) * 122);font-size:calc(var(--u) * 14);line-height:1.3}
.reel__user{display:flex;align-items:center;gap:calc(var(--u) * 10)}
.reel__avatar{flex:none;width:calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;padding:2px;background:conic-gradient(from 200deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34)}
.reel__avatar i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #000;background:#111 url(media/brand/favicon.png) center/62% no-repeat}
.reel__handle{font-weight:600;font-size:calc(var(--u) * 15)}
.reel__follow{border:1px solid rgba(255,255,255,.85);border-radius:calc(var(--u) * 8);padding:calc(var(--u) * 5) calc(var(--u) * 12);font-weight:600;font-size:calc(var(--u) * 13)}
.reel__music,.reel__cap{margin:calc(var(--u) * 9) 0 0;font-size:calc(var(--u) * 13.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__prog{position:absolute;left:calc(var(--u) * 14);right:calc(var(--u) * 14);bottom:calc(var(--u) * 106);height:2px;background:rgba(255,255,255,.3)}
.reel__prog i{display:block;height:100%;width:0;background:#fff}

/* fixed chrome: status bar, tab bar, home indicator, sound flash */
.ig-status{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u) * 16) calc(var(--u) * 32) 0;
  color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;font-size:calc(var(--u) * 16);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.ig-status .r{display:flex;align-items:center;gap:calc(var(--u) * 6)}
.ig-status .r svg{height:calc(var(--u) * 12);width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig-status .r svg:last-child{height:calc(var(--u) * 12.5)}
.ig-tabs{position:absolute;left:calc(var(--u) * 42);right:calc(var(--u) * 42);bottom:calc(var(--u) * 24);height:calc(var(--u) * 60);border-radius:999px;background:rgba(22,22,24,.94);
  display:flex;justify-content:space-around;align-items:center;padding:0 calc(var(--u) * 8);z-index:5;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.45);color:#fff}
.ig-tabs>svg,.ig-tabs .on svg{width:calc(var(--u) * 25);height:calc(var(--u) * 25);display:block}
.ig-tabs .on{background:rgba(255,255,255,.14);border-radius:999px;padding:calc(var(--u) * 10) calc(var(--u) * 26)}
.ig-tabs .me{position:relative;width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:50%;background:url(media/poster/talking-head.jpg) center/cover}
.ig-tabs .me::after{content:"";position:absolute;right:-2px;bottom:-1px;width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:50%;background:#ff3040;border:2px solid #161618}
.ig-home{position:absolute;left:50%;bottom:calc(var(--u) * 8);transform:translateX(-50%);width:calc(var(--u) * 134);height:calc(var(--u) * 5);border-radius:3px;background:#fff;opacity:.92;z-index:6;pointer-events:none}
.ig-sound{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:calc(var(--u) * 66);height:calc(var(--u) * 66);border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .3s,transform .3s;z-index:5;pointer-events:none}
.ig-sound svg{width:56%;height:56%}
.ig-sound.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (max-width:899px){
  .feed__pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding-top:78px;row-gap:8px;--ph:46vh}
  .feed__copy{align-self:start;padding:0}
  .feed__copy h2{margin-bottom:8px}
  .feed__copy .kicker{margin-bottom:10px}
  .feed__copy .sec-head__p{display:none}
  .msgs{margin-top:10px;padding-top:10px}
  .msg__h{font-size:22px;margin-bottom:8px}
  .msg__p{font-size:14px;line-height:1.5;margin-bottom:8px}
  .msg__p:nth-of-type(2){display:none}
  .rail{margin-top:12px}
  .feed__cta{display:none}
  .feed__stage{justify-self:center;margin:0}
}

/* Our story is desktop-only. Owner, 2026-09-24: six full-screen chapters made the phone page too
   long to scroll (it was 16 screens; without this it is 10). The section is hidden here and its
   JavaScript never runs, and every link that pointed at it stands down with it so nothing on a
   phone scrolls to an anchor that is not there. */
@media (max-width:899px){
  .feed{display:none}
  a[href="#samples"]{display:none}   /* nav, hero CTA and footer alike: the anchor is not on the page */
  .hero__cta .btn{flex:1}          /* Start creating takes the width the story button gave up */
}

/* the dark beat (chapter 4): paper and ink swap; everything transitions with the background */
.feed__pin.is-dark{background-color:var(--ink);color:var(--paper)}
.feed__pin.is-dark .msg__p{color:rgba(244,241,236,.72)}
.feed__pin.is-dark .msgs{border-color:rgba(244,241,236,.18)}
.feed__pin.is-dark .rail i{background:rgba(244,241,236,.22)}
.feed__pin.is-dark .rail i.on{background:var(--red)}
.feed__pin.is-dark .btn--line{border-color:rgba(244,241,236,.35);color:var(--paper)}
.feed__pin.is-dark .shot::after{box-shadow:0 70px 110px -40px rgba(0,0,0,.8),18px 30px 50px -22px rgba(0,0,0,.6),0 8px 14px -6px rgba(0,0,0,.55)}
.msgs,.rail i,.btn--line{transition:border-color .6s ease,background-color .5s ease,color .6s ease}