@font-face{font-family:'Gloock';src:url(assets/fonts/gloock.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader-italic.woff2) format('woff2');font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(assets/fonts/courier-prime-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(assets/fonts/courier-prime-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  /* Two grounds from one world: the projection room (night) and the archive paper. One accent,
     tungsten amber, in three steps: deep for text and fills on paper, light on night. */
  --black:#0B0907;--night:#15110D;--night-2:#211A14;--screen:#EFE5CF;--screen-muted:#B9AC95;--rule-night:#3A3027;
  --paper:#F4F1EA;--paper-2:#E8E1D2;--page:#FBF8F1;--ink:#221A13;--muted:#685B4D;--rule:#D3C8B5;
  --accent:#A65A1F;--accent-deep:#7F4214;--accent-light:#D99350;
  --display:'Gloock','Didot','Bodoni 72',Georgia,serif;
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --out:cubic-bezier(.16,1,.3,1);
  --g:20px;--max:1344px;--sec:96px;
  --fs-display:clamp(2.75rem,1.6rem + 3.4vw,4.75rem);
  --fs-h2:clamp(2.125rem,1.7rem + 1.8vw,3.375rem);
  --fs-h3:clamp(1.375rem,1.25rem + .5vw,1.75rem);
  --fs-line:clamp(1.5rem,1.3rem + .8vw,2.125rem);
  --fs-body:clamp(1.125rem,1.08rem + .2vw,1.25rem);
  --fs-small:1rem;
  --fs-num:.9375rem;
  --ap-ink:var(--ink);--ap-tint:var(--paper-2);--ap-accent:var(--accent);
  color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px;scrollbar-color:var(--muted) var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.dialog-open{overflow:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.012em}
h2{font-size:var(--fs-h2);line-height:1.06}
h3{font-size:var(--fs-h3);line-height:1.15}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent-deep);color:var(--page)}
.wrap{width:min(100% - 2*var(--g),var(--max));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sec{padding-top:var(--sec)}
.band,.close{padding:96px 20px;padding:var(--sec) var(--g)}
.band>.wrap,.close>.wrap{width:min(100%,var(--max))}
.sec-h{margin-bottom:32px;max-width:15em}

/* The projection room. Every night section carries its own ink, rules and drawing colours. */
.night{background:var(--night);color:var(--screen);--ap-ink:var(--screen);--ap-tint:var(--night-2);--ap-accent:var(--accent-light);color-scheme:dark}
.night a{color:var(--accent-light)}
.night a:hover{color:var(--screen)}
.night ::selection{background:var(--accent-light);color:var(--night)}
.tint{background:var(--paper-2);--ap-tint:var(--paper)}

/* Film grain over everything, stepped like a projector, never smooth. */
.grain{position:fixed;inset:-100px;z-index:40;pointer-events:none;background:url(assets/grain.png) 0 0/256px 256px;opacity:.42;mix-blend-mode:overlay;will-change:transform}
.js-motion .grain{animation:grain .5s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-37px,21px)}33%{transform:translate(23px,-44px)}50%{transform:translate(-51px,-9px)}67%{transform:translate(41px,33px)}83%{transform:translate(-13px,52px)}}

/* Buttons: one filled action per view; on night the fill steps up to the light amber. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 30px;border:0;border-radius:2px;background:var(--accent-deep);color:var(--page);font:500 var(--fs-body)/1.2 var(--serif);transition:background-color .2s var(--out)}
.btn:hover,.btn:active{background:var(--ink)}
.night .btn,.plan.feat .btn{background:var(--accent-light);color:var(--night)}
.night .btn:hover,.plan.feat .btn:hover{background:var(--screen)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 26px;border:1px solid var(--rule);border-radius:2px;background:transparent;font:500 var(--fs-body)/1.2 var(--serif);transition:border-color .2s var(--out)}
.btn-line:hover{border-color:var(--ink)}
.night .btn-line{border-color:var(--rule-night)}
.night .btn-line:hover{border-color:var(--screen)}
a.btn-line,a.btn-line:hover{color:inherit;text-decoration:none}
.link{padding:0;border:0;background:none;color:var(--accent-deep);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.link:hover{color:var(--ink)}
.night .link{color:var(--accent-light)}
.night .link:hover{color:var(--screen)}

/* Wordmark: Life in the display face, by Koko in italic, one baseline. */
.mark{display:inline-flex;align-items:baseline;gap:.4em;color:inherit;text-decoration:none;line-height:1}
.mark b{font:400 1.875rem/1 var(--display);letter-spacing:-.01em}
.mark i{font:italic 400 1rem/1 var(--serif)}
.night .mark,.night .mark:hover{color:var(--screen)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;margin-top:env(safe-area-inset-top)}
.nav .link{font-size:var(--fs-small);min-height:44px;display:inline-flex;align-items:center}

/* Drawings: inline SVG line art, coloured by the section it sits in. */
.ap{display:block;width:100%;height:auto;overflow:visible;color:var(--ap-ink)}
.ap .l{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ap .f{fill:var(--ap-tint)}
.ap .d{fill:currentColor}
.ap .h{fill:none;stroke:currentColor;stroke-width:.75;vector-effect:non-scaling-stroke;opacity:.5}
.ap .a{fill:var(--ap-accent)}

/* Hero: the screen is the plate. The film plays in the gate; the still holds until it does. */
.hero{position:relative;overflow:hidden;padding-bottom:8px}
.hero-grid{display:grid;gap:28px;padding-top:6px}
.screen{position:relative;aspect-ratio:1600/1168;background:var(--black);border-radius:3px}
.screen::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;background:radial-gradient(closest-side,rgb(239 229 207 / .09),transparent);pointer-events:none}
.screen>img,.screen>canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:3px}
.screen>canvas{opacity:0}
.screen.live>canvas{opacity:1}
.hero h1{max-width:12em}
.hero .lede{max-width:27em;margin-top:20px;color:var(--screen-muted)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cta .btn,.cta .btn-line{flex:1 1 220px}
.hero .note{margin-top:14px;color:var(--screen-muted)}

/* Trust row: four promises, the line icons draw themselves. */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;padding:22px 0;border-top:1px solid var(--rule-night);font-size:var(--fs-small);line-height:1.35;color:var(--screen-muted)}
.trust li{display:flex;gap:10px;align-items:flex-start;text-wrap:balance}
.ico{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.trust .ico{color:var(--accent-light)}

/* From portrait to film: a half-frame strip of archive portraits that advances like a projector. */
.lineage .sec-h{max-width:13em}
.strip{position:relative;overflow:hidden;--holes:8;--gap:16px;--fw:calc(var(--holes) * 24px - var(--gap));--fh:calc(var(--fw) / .75)}
/* Each frame carries its own length of film base, so the strip runs off both edges of the page.
   A frame is a whole number of 24px perforations wide, so the holes line up across the joins.
   The paper ground shows through the holes. */
.strip-track{display:flex;width:max-content;will-change:transform}
.frame{position:relative;flex:none;box-sizing:content-box;width:var(--fw);height:var(--fh);padding:44px calc(var(--gap) / 2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11'%3E%3Crect x='7' y='0' width='10' height='11' rx='2' fill='%23F4F1EA'/%3E%3C/svg%3E") 0 13px/24px 11px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11'%3E%3Crect x='7' y='0' width='10' height='11' rx='2' fill='%23F4F1EA'/%3E%3C/svg%3E") 0 calc(100% - 13px)/24px 11px repeat-x,linear-gradient(var(--black),var(--black)) content-box,var(--night-2)}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.edge{position:absolute;left:calc(var(--gap) / 2 + 2px);bottom:25px;font:400 .75rem/1 var(--mono);letter-spacing:.06em;color:var(--accent-light)}
.frame-now{display:grid;place-items:center;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11'%3E%3Crect x='7' y='0' width='10' height='11' rx='2' fill='%23F4F1EA'/%3E%3C/svg%3E") 0 13px/24px 11px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='11'%3E%3Crect x='7' y='0' width='10' height='11' rx='2' fill='%23F4F1EA'/%3E%3C/svg%3E") 0 calc(100% - 13px)/24px 11px repeat-x,linear-gradient(var(--night),var(--night)) content-box,var(--night-2)}
.frame-art{width:78%;--ap-ink:var(--screen);--ap-tint:var(--night-2);--ap-accent:var(--accent-light)}
.lineage-after{margin-top:40px}
.big{font:400 var(--fs-line)/1.25 var(--serif);max-width:24em;text-wrap:balance}
:root:not(.js-motion) .strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
:root:not(.js-motion) .frame{scroll-snap-align:start}

/* The films: drawing, name, a few lines and the numbers. */
.film-list{display:grid}
.film-item{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;padding:26px 0;border-top:1px solid var(--rule);align-items:start}
.film-item:last-child{border-bottom:1px solid var(--rule)}
.film-item p{margin-top:8px;max-width:34em}
.specs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px}
.specs dt{font-size:.875rem;color:var(--muted)}
.specs dd{font-size:var(--fs-small)}

/* Every word, in their voice: a frame from the interview, then the edit timeline under it. */
.story-voice{display:grid;gap:22px}
.vframe{position:relative;display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:4/3;padding:18px 20px 22px;background:var(--black);border-radius:3px;overflow:hidden}
.vframe::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 62% at 50% 46%,rgb(239 229 207 / .07),transparent 72%);pointer-events:none}
.card{grid-row:2;align-self:center;justify-self:center;max-width:13em;text-align:center;font:400 var(--fs-h3)/1.2 var(--display);color:var(--screen);text-wrap:balance}
.subs{grid-row:3;justify-self:center;max-width:30em;text-align:center;font:400 var(--fs-small)/1.45 var(--serif);color:var(--screen);text-wrap:balance}
.tc{position:absolute;top:14px;right:16px;font:400 .75rem/1 var(--mono);letter-spacing:.04em;color:var(--screen-muted)}
.uncut{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:10px 14px;font-size:.875rem;color:var(--screen-muted)}
.uc-l{grid-column:1}.uc-bar{grid-column:2}.uc-r{grid-column:3}
.uncut>:nth-child(-n+3){grid-row:1}.uncut>:nth-child(n+4):nth-child(-n+6){grid-row:2}
.uc-r{font:400 .8125rem/1 var(--mono);color:var(--screen)}
.uc-bar{position:relative;height:14px;border-radius:1px}
.uc-all{background:var(--screen-muted);opacity:.55}
.uc-cut{background:var(--night-2)}
.uc-cut i{position:absolute;top:0;bottom:0;left:calc(var(--l) * 100%);width:calc(var(--w) * 100%);min-width:3px;background:var(--accent-light);border-radius:1px}
.uc-ph{grid-area:1/2/3/3;position:relative;align-self:stretch;margin:-4px 0;pointer-events:none}
.uc-ph::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--p,.236) * 100%);width:1px;background:var(--screen)}
.voice-cap{margin-top:24px;max-width:34em;color:var(--screen-muted)}

/* Everything you keep: the box laid out, one drawing and one number per object. */
.kit{display:grid}
.k{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--rule);align-items:start}
.k:last-child{border-bottom:1px solid var(--rule)}
.k .num{margin-top:4px;font-size:var(--fs-small);color:var(--accent-deep);font-variant-numeric:tabular-nums}
.k .num+p{margin-top:8px;max-width:30em}

/* The book: an open spread on the paper ground. */
.spread{display:grid;gap:12px}
.page{position:relative;background:var(--page);padding:22px;border-radius:2px}
.page-l{display:grid;align-content:center}
.page-l img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:1px}
.page-r{display:flex;flex-direction:column}
.ch-t{font-size:var(--fs-h3)}
.words{margin-top:14px;font:italic 400 var(--fs-body)/1.55 var(--serif)}
.qr{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:.875rem;line-height:1.4;color:var(--muted)}
.qr svg{flex:none;width:84px;height:84px;color:var(--ink)}
.folio{display:flex;justify-content:space-between;margin-top:auto;padding-top:22px;font-size:.875rem;color:var(--muted)}
.folio span{font:400 .8125rem/1 var(--mono)}
.spread figcaption{grid-column:1/-1;margin-top:6px;font-size:var(--fs-small);color:var(--muted);max-width:40em}
.book-facts{display:grid;margin-top:36px}
.book-facts li{padding:16px 0;border-top:1px solid var(--rule)}
.book-facts li:last-child{border-bottom:1px solid var(--rule)}
.book-facts b{font-weight:600}

/* How it works: the steps run down a length of film. */
.reel-steps{position:relative;padding-left:44px}
.reel-steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:24px;border-radius:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22'%3E%3Crect x='7' y='6' width='10' height='10' rx='2' fill='%23F4F1EA'/%3E%3C/svg%3E") 0 0/24px 22px repeat-y,var(--night-2)}
.reel-steps li{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:14px;padding:20px 0;border-top:1px solid var(--rule)}
.reel-steps li:last-child{border-bottom:1px solid var(--rule)}
.when{padding-top:.3em;font:400 .875rem/1.2 var(--mono);color:var(--accent-deep)}
.reel-steps p{margin-top:6px;max-width:32em}
.how-art{display:none}

/* Reasons: eight reasons to film, each with its own drawn icon. */
.reason-grid{display:grid}
.reason-grid li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--rule);align-items:start}
.reason-grid li:last-child{border-bottom:1px solid var(--rule)}
.reason-grid p{margin-top:6px;max-width:30em}
.ri{display:block;width:48px;height:48px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.ri .a{stroke:var(--accent)}

/* The promise, in the projection room. */
.promise-art{max-width:300px;margin-bottom:28px}
.lines li{font:400 var(--fs-line)/1.22 var(--serif);padding:18px 0;border-top:1px solid var(--rule-night);text-wrap:balance}
.lines li:last-child{border-bottom:1px solid var(--rule-night)}
.promise .after{margin-top:24px;max-width:32em;color:var(--screen-muted)}

/* Packages: The Story is lit like the screen. */
.plans{display:grid;gap:20px}
.plan{display:flex;flex-direction:column;padding:26px 22px 24px;border-top:1px solid var(--rule)}
.plan.feat{background:var(--night);color:var(--screen);border-top-color:transparent;border-radius:3px;color-scheme:dark}
.plan h3{font-size:var(--fs-h3)}
.amt{margin-top:8px;font:400 clamp(2.5rem,2rem + 1.6vw,3.5rem)/1 var(--display);font-variant-numeric:tabular-nums}
.plan .d{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.plan.feat .d{border-bottom-color:var(--rule-night);color:var(--screen-muted)}
.plan ul{display:grid;gap:12px;align-content:start;flex:1;margin:20px 0 28px;font-size:var(--fs-small);line-height:1.45}
.plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start}
.plan li.inc{display:block;color:var(--muted)}
.plan .ico{width:18px;height:18px;margin-top:.12em;stroke:var(--accent-deep);stroke-width:1.7}
.plan.feat .ico{stroke:var(--accent-light)}
.plan .btn,.plan .btn-line{width:100%}
.extras{margin-top:28px}
.extras li{padding:14px 0;border-top:1px solid var(--rule)}
.extras li:last-child{border-bottom:1px solid var(--rule)}
.extras b{font-weight:600;margin-right:.35em}

/* Straight answers */
.answers>div{padding:20px 0;border-top:1px solid var(--rule)}
.answers>div:last-child{border-bottom:1px solid var(--rule)}
.answers dt{font:400 1.375rem/1.25 var(--display);margin-bottom:8px}

/* Close: the projector comes back on. */
.close{margin-top:var(--sec)}
.close-grid{display:grid;gap:32px}
.close-screen{position:relative;aspect-ratio:1600/1168;background:var(--black) url(assets/film/still-close-800.webp) center/cover;border-radius:3px}
.close-screen canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:3px;opacity:0}
.close-screen.live canvas{opacity:1}
.close h2{font-size:var(--fs-display);line-height:1.02;max-width:9em}
.close h2+p{margin-top:16px;color:var(--screen-muted)}
.close .btn{margin-top:28px;width:100%}
.close .note{margin-top:14px;color:var(--screen-muted)}

/* Footer */
.foot{padding:40px 0 136px;border-top:1px solid var(--rule-night);font-size:var(--fs-small);color:var(--screen-muted)}
.foot p{margin-top:14px;max-width:34em}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:14px}
.foot nav a,.foot nav .link{display:inline-flex;align-items:center;min-height:44px}

/* Sticky bar: shows once the hero button has gone, hides at the close and in the chat. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(var(--g),env(safe-area-inset-right)) max(24px,calc(env(safe-area-inset-bottom) + 12px)) max(var(--g),env(safe-area-inset-left));background:var(--night);color:var(--screen);border-top:1px solid var(--rule-night);transform:translateY(110%);visibility:hidden;transition:transform .35s var(--out),visibility 0s .35s}
.sticky.on{transform:none;visibility:visible;transition:transform .35s var(--out),visibility 0s}
.sticky p{font:400 1.25rem/1.1 var(--display)}
.sticky .btn{min-height:48px;padding:12px 20px;font-size:var(--fs-small);background:var(--accent-light);color:var(--night)}
.sticky .btn:hover{background:var(--screen)}

/* Chat */
dialog{padding:0;border:0;background:var(--page);color:var(--ink);max-width:100vw;max-height:100vh;max-height:100dvh}
dialog::backdrop{background:rgb(21 17 13 / .55)}
.chat{position:fixed;inset:auto 0 0;margin:0;width:100%;height:min(780px,100vh);height:min(780px,100dvh);border-top:1px solid var(--rule)}
.chat-shell{height:100%;display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px var(--g);border-bottom:1px solid var(--rule)}
.avatar{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-deep);color:var(--page);font:400 24px/1 var(--display)}
.chat-head h2{font:400 1rem/1.3 var(--serif);letter-spacing:0}
.chat-head h2 .mark b{font-size:1.5rem}
.chat-head p{font-size:.8125rem;color:var(--muted);margin-top:2px}
.icon-btn{width:44px;height:44px;margin-left:auto;display:grid;place-items:center;border:0;background:none;border-radius:2px}
.icon-btn:hover{background:var(--paper-2)}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px var(--g);display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;font-size:1.0625rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.kobi{align-self:flex-start}
.msg.you{align-self:flex-end;background:var(--paper-2);padding:10px 14px;border-radius:2px}
.msg.sys{align-self:stretch;max-width:none;font-size:.875rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
.msg.sum{align-self:stretch;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 0;border-block:1px solid var(--rule);white-space:normal}
.msg.sum dt{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--g)}
.chips:empty{display:none}
.chips button{min-height:44px;padding:8px 14px;border:1px solid var(--rule);border-radius:2px;background:transparent;font-size:.9375rem;text-align:left}
.chips button:hover{border-color:var(--ink)}
.chips button:disabled,.send:disabled{opacity:.5;cursor:wait}
.chat-form{padding:16px var(--g) 10px}
.chat-form label{display:block;margin-bottom:8px;font-size:.8125rem;color:var(--muted)}
.field{display:flex;border:1px solid var(--rule);border-radius:2px;background:var(--page)}
.field:focus-within{border-color:var(--ink)}
.field input{flex:1;min-width:0;height:52px;padding:0 14px;border:0;outline:0;background:transparent;font-size:17px;caret-color:var(--accent)}
.field input::placeholder{color:var(--muted);opacity:.75}
.send{width:52px;display:grid;place-items:center;border:0;background:none;color:var(--accent-deep)}
.err{margin-top:8px;font-size:.875rem;color:var(--accent-deep)}
.err:empty{display:none}
.chat-foot{display:flex;justify-content:flex-end;padding:8px var(--g) max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.chat-foot .link{font-size:.8125rem;color:var(--muted);min-height:36px}
.privacy{width:min(520px,calc(100vw - 32px));padding:36px 28px 28px;border:1px solid var(--rule);border-radius:2px}
.privacy h2{margin-bottom:16px;font-size:var(--fs-h3)}
.privacy p+p{margin-top:12px}
.privacy .btn-line{margin-top:24px}
.privacy .icon-btn{position:absolute;top:8px;right:8px}
.credits{width:min(680px,calc(100vw - 32px))}
.credit-list{display:grid;margin-top:20px;font-size:.9375rem;line-height:1.45}
.credit-list li{padding:10px 0;border-top:1px solid var(--rule)}
.credit-list li:last-child{border-bottom:1px solid var(--rule)}
.credit-list span{color:var(--muted)}

/* Motion: the opening sequence, the one heading reveal, and the stories. */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .wi{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--out);transition-delay:calc(var(--i)*55ms + var(--d,0ms))}
.js .split-in .wi{transform:none}
.js h1{--d:420ms}
.js .hero .screen{opacity:0;transition:opacity .9s var(--out)}
.js .hero.go .screen{opacity:1}
.js .hero .follow{opacity:0;transform:translateY(14px);transition:opacity .8s var(--out),transform .8s var(--out)}
.js .hero.go .follow{opacity:1;transform:none}
.js .hero.go .lede{transition-delay:880ms}
.js .hero.go .cta{transition-delay:960ms}
.js .hero.go .note{transition-delay:1040ms}
.js .trust{opacity:0;transition:opacity .8s var(--out) 1.1s}
.js .hero.go .trust{opacity:1}
.js .draw .ico,.js .draw .ri{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--out)}
.js .draw.in .ico,.js .draw.in .ri{stroke-dashoffset:0}
.draw li:nth-child(2) .ico{transition-delay:.12s}.draw li:nth-child(3) .ico{transition-delay:.24s}.draw li:nth-child(4) .ico{transition-delay:.36s}
/* The interview story: the question card, then the answer as two subtitles. */
.js-motion .story-voice .card,.js-motion .story-voice .sl{transition:opacity .5s var(--out)}
.js-motion .story-voice.run .card{opacity:0}
.js-motion .story-voice.run.q .card{opacity:1}
.story-voice.run .subs{display:grid}
.story-voice.run .sl{grid-area:1/1;opacity:0}
.story-voice.run .sl.on{opacity:1}

@media (min-width:700px){
  .trust{grid-template-columns:repeat(4,auto);justify-content:space-between}
  .strip{--holes:10}
  .film-item{grid-template-columns:128px minmax(0,1fr);gap:28px}
  .vframe{aspect-ratio:16/9;padding:22px 28px 26px}
  .subs{font-size:var(--fs-body)}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .k-lead{grid-column:1/-1}
  .k:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .k{grid-template-columns:96px minmax(0,1fr)}
  .k-lead{grid-template-columns:200px minmax(0,1fr);align-items:center}
  .spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .page{padding:32px}
  .page-l{border-radius:2px 0 0 2px;box-shadow:inset -22px 0 26px -20px rgb(34 26 19 / .22)}
  .page-r{border-radius:0 2px 2px 0;box-shadow:inset 22px 0 26px -20px rgb(34 26 19 / .22)}
  .spread figcaption{margin-top:14px}
  .reason-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .reason-grid li:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .reason-grid li:nth-child(even) .ri{transition-delay:.12s}
  .close .btn{width:auto}
}
@media (min-width:700px) and (max-width:1099px){
  :root{--g:40px}
  .plans{max-width:600px}
  .cta .btn,.cta .btn-line{flex:0 1 auto}
}
@media (min-width:1100px){
  :root{--g:48px;--sec:150px}
  .nav{height:88px}
  .mark b{font-size:2.125rem}
  .sec-h{margin-bottom:48px}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center;padding-top:8px}
  .cta .btn,.cta .btn-line{flex:0 1 auto}
  .trust{margin-top:56px;padding:26px 0}
  .film-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
  .film-item:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .film-item{grid-template-columns:150px minmax(0,1fr);padding:34px 0}
  .voice-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:72px;align-items:start}
  .voice .sec-h{grid-column:1;grid-row:1;margin:0}
  .voice-cap{grid-column:1;grid-row:2;align-self:start}
  .story-voice{grid-column:2;grid-row:1/3}
  .kit{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
  .k-lead{grid-column:1/3}
  .k,.k-lead{grid-template-columns:1fr;gap:18px;padding:30px 0;align-content:start}
  .k-lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .k .art{height:120px;display:flex;align-items:flex-end}
  .k .art .ap{width:auto;height:100%;max-width:100%}
  .k-lead .art{height:auto}
  .k-lead .art .ap{width:100%;height:auto}
  .k:nth-last-child(-n+4){border-bottom:1px solid var(--rule)}
  .k-lead h3{font-size:var(--fs-h2)}
  .book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:72px;align-items:start}
  .book-sec .sec-h{grid-column:1;grid-row:1}
  .book-facts{grid-column:1;grid-row:2;margin-top:0}
  .spread{grid-column:2;grid-row:1/3}
  .page{padding:44px 40px}
  .how-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:96px;align-items:start}
  .how-art{display:block;position:sticky;top:18vh}
  .reel-steps li{grid-template-columns:6rem minmax(0,1fr);padding:24px 0}
  .reason-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
  .reason-grid li{grid-template-columns:1fr;align-content:start;gap:22px;padding:32px 0 34px}
  .reason-grid li:nth-last-child(-n+4){border-bottom:1px solid var(--rule)}
  .ri{width:64px;height:64px}
  .reason-grid li:nth-child(4n+2) .ri{transition-delay:.12s}
  .reason-grid li:nth-child(4n+3) .ri{transition-delay:.24s}
  .reason-grid li:nth-child(4n+4) .ri{transition-delay:.36s}
  .promise-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:center}
  .promise-art{max-width:none;margin:0}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
  .extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
  .extras li{border-bottom:1px solid var(--rule)}
  .answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;align-items:start}
  .answers>div{border-bottom:1px solid var(--rule)}
  .close-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:center}
  .foot-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:48px;align-items:center}
  .foot p,.foot nav{margin-top:0}
  .chat{inset:auto 24px 24px auto;width:420px;height:min(740px,calc(100vh - 48px));height:min(740px,calc(100dvh - 48px));border:1px solid var(--rule);border-radius:2px;box-shadow:0 24px 64px rgb(21 17 13 / .3)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js .wi,.js .hero .follow{transform:none;transition:opacity .3s}
  .js .hero .follow,.js .hero .screen{opacity:1}
  .js .trust{opacity:1;transition:none}
  .js .draw .ico,.js .draw .ri{stroke-dashoffset:0;transition:none}
  .sticky,.sticky.on{transition:none}
}