/* ══════════════════════════════════════════════════════════════════════
   A NEW GROUND.

   Every version of this page has been cream with graphite type, because
   the film is, and each one has read quiet and then cheap. The film gets
   away with it because it MOVES; a still page in that palette has
   nothing to hold a person.

   Two things changed here. The ground went to near-black, which the
   app's own ramp was built for in the first place. And every picture of
   the product on the page is now a real one, rendered at full size and
   cut out of the film, because the app on a dark ground is the best
   material this project has and it was being thrown away.

   Cream is still here, one press away. It is the second ground now
   rather than the first.
   ══════════════════════════════════════════════════════════════════════ */

/* 29 Sep 2026: the app's own colours (Toldit 0.2.244, build 251). Dark is the app's default
   paper, Graphite; light is Chalk. Values come from the app's palette code with the default
   avatar colour, Mono: no accent colour anywhere, the accent is the writing itself. Text
   steps follow the app's page pen (secondary 78% of the ink, tertiary 58% on dark). */
:root{
  --v-ground:#1C1C1C;
  --v-raise:#262626;
  --v-raise2:#303030;
  --v-ink:#F1EFED;
  --v-mid:#D8D6D4;
  --v-soft:#C2C1BF;
  --v-faint:#989695;
  --v-dim:#696969;
  --v-line:rgba(241,239,237,.12);
  --v-line2:rgba(241,239,237,.18);
  --v-cr:#F1EFED;
  --v-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --v-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --v-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --v-glide:cubic-bezier(.22,.8,.22,1);
}
html.light{
  --v-ground:#F7F7F5;
  --v-raise:#EDEDEB;
  --v-raise2:#E1E1E0;
  --v-ink:#21201F;
  --v-mid:#3B3A39;
  --v-soft:#524F4B;
  --v-faint:#63605B;
  --v-dim:#8E8E8D;
  --v-line:rgba(33,32,31,.10);
  --v-line2:rgba(33,32,31,.16);
  --v-cr:#21201F;
}

*{box-sizing:border-box;margin:0;padding:0}
.v5 a{color:inherit}
body.v5{background:var(--v-ground);color:var(--v-ink);font-family:var(--v-sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* the surface is not a flat fill */
body.v5::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;background-size:150px 150px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='150' height='150' filter='url(%23n)'/></svg>")}

.wrap{width:min(1340px,calc(100% - clamp(28px,5vw,96px)));margin:0 auto}

/* ── the bar ─────────────────────────────────────────────────────── */
.vbar{position:fixed;top:0;left:0;right:0;z-index:60;
  padding:clamp(14px,2vh,22px) 0;
  transition:background .4s var(--v-glide),backdrop-filter .4s var(--v-glide),
             box-shadow .4s var(--v-glide)}
.vbar.stuck{background:color-mix(in srgb,var(--v-ground) 72%,transparent);
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 1px 0 var(--v-line)}
.vbar .wrap{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.vmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.vmark .tile{width:26px;height:26px;border-radius:8px;position:relative;flex:none;
  background:linear-gradient(160deg,#4C4F56,#232529);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 6px 16px -8px #000}
html.light .vmark .tile{background:linear-gradient(160deg,#3A3D42,#1A1C20)}
.vmark .tile i{position:absolute;top:45%;width:4.5px;height:4.5px;border-radius:999px;
  background:#F1EFED;transform:translateY(-50%)}
.vmark .tile i:nth-child(1){left:6px}.vmark .tile i:nth-child(2){right:6px}
.vmark b{font:560 15.5px var(--v-sans);letter-spacing:-.025em}
.vbar nav{margin-left:auto;display:flex;gap:clamp(14px,1.8vw,30px)}
.vbar nav a{font:400 14px var(--v-sans);color:var(--v-soft);text-decoration:none;
  transition:color .2s var(--v-glide)}
.vbar nav a:hover{color:var(--v-ink)}
.vpill{font:600 8.5px var(--v-sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-faint);padding:8px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--v-line2);display:flex;align-items:center;gap:8px}
.vpill::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--v-cr)}
@media(max-width:760px){ .vbar nav{display:none} }

/* ── every band, and the light that falls on it ──────────────────── */
.band{position:relative;padding:clamp(66px,9.5vh,140px) 0}
.band.lit::before{content:"";position:absolute;left:50%;top:0;width:min(1400px,140vw);
  height:min(760px,80vh);transform:translateX(-50%);pointer-events:none;display:none}
/* 29 Sep 2026: no glow on either ground. The app draws flat surfaces. */
/* On the dark ground this is a faint warm light and it works. On cream it
   was a near-white blob sitting in the middle of the screen, which reads
   as a smudge on the monitor rather than as light. Cream is a flat, even
   ground now. 2026-09-01. */
html.light .band.lit::before{display:none}

/* ── type ────────────────────────────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:10px;
  font:600 9.5px var(--v-sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--v-faint)}
.eyebrow s{text-decoration:none;width:6px;height:6px;border-radius:999px;
  background:var(--ec,var(--v-cr))}
h1.display{font:620 clamp(46px,7.6vw,116px)/.94 var(--v-sans);letter-spacing:-.05em;
  text-wrap:balance}
h2.display{font:600 clamp(32px,4.6vw,64px)/1.0 var(--v-sans);letter-spacing:-.044em;
  text-wrap:balance}
.lede{font:400 clamp(16px,1.5vw,19px)/1.62 var(--v-sans);color:var(--v-soft);
  letter-spacing:-.008em;max-width:46ch}
/* What was said is set in the app's own sans - a second typeface is what
   makes a page look like a template. It is told apart from everything
   else by WEIGHT and by the mark beside it: the page's headings are
   heavy, its body is regular, and speech is large and light, held by a
   rule in the colour the app uses when it has heard you. */
.said{position:relative;padding-left:clamp(18px,1.8vw,30px);
  font:300 clamp(24px,3vw,44px)/1.2 var(--v-sans);letter-spacing:-.034em;
  color:var(--v-ink);text-wrap:balance}
.said::before{content:"";position:absolute;left:0;top:.12em;bottom:.1em;width:2px;
  border-radius:2px;background:var(--v-cr)}
.keyvoice .said{padding-left:0;max-width:18ch;text-align:center}
.keyvoice .said::before{display:none}

/* ── the opening ─────────────────────────────────────────────────── */
.open{min-height:min(92svh,900px);display:flex;align-items:center;
  padding-top:clamp(90px,14vh,150px)}
.open .lede{margin-top:clamp(22px,3vh,34px)}
.open .keys{display:flex;align-items:center;gap:10px;margin-top:clamp(30px,4vh,48px)}
.open kbd{font:500 13px var(--v-sans);color:var(--v-mid);padding:8px 13px;border-radius:8px;
  background:var(--v-raise);box-shadow:inset 0 0 0 1px var(--v-line2),0 2px 0 rgba(0,0,0,.3)}
.open .keys em{font-style:normal;font:400 14px var(--v-sans);color:var(--v-faint);
  margin-left:6px}

/* ── a real screen ───────────────────────────────────────────────── */
.shot{position:relative;border-radius:clamp(10px,1vw,16px);overflow:hidden;display:block;
  background:var(--v-raise);
  box-shadow:0 0 0 1px var(--v-line),0 2px 6px rgba(0,0,0,.5),
             0 34px 70px -30px rgba(0,0,0,.75),0 90px 150px -70px rgba(0,0,0,.9)}
html.light .shot{box-shadow:0 0 0 1px rgba(20,18,15,.07),0 2px 6px rgba(20,18,15,.05),
             0 30px 60px -28px rgba(20,18,15,.20),0 80px 140px -80px rgba(20,18,15,.22)}
.shot img{width:100%;height:auto;display:block}
/* a highlight along the top edge, the way glass takes light */
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
html.light .shot::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* ── the film ────────────────────────────────────────────────────── */
.reelv{position:relative;border-radius:clamp(10px,1vw,16px);overflow:hidden;
  background:var(--v-raise);aspect-ratio:16/9;
  box-shadow:0 0 0 1px var(--v-line),0 3px 8px rgba(0,0,0,.5),
             0 44px 90px -34px rgba(0,0,0,.8),0 110px 180px -80px rgba(0,0,0,.9)}
html.light .reelv{box-shadow:0 0 0 1px rgba(20,18,15,.07),0 3px 8px rgba(20,18,15,.06),
             0 40px 80px -34px rgba(20,18,15,.22),0 100px 170px -90px rgba(20,18,15,.24)}
.reelv video{width:100%;height:100%;object-fit:cover;display:block}
.reelfacts{display:flex;gap:clamp(20px,3vw,58px);flex-wrap:wrap;
  margin-top:clamp(20px,2.6vh,32px)}
.reelfacts .f{display:flex;flex-direction:column;gap:5px}
.reelfacts .f b{font:600 9px var(--v-sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--v-faint)}
.reelfacts .f span{font:400 14.5px var(--v-sans);color:var(--v-mid)}

/* ── the turns: what was said, and what came back ────────────────── */
.turnv{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(26px,3.6vw,66px);align-items:center;
  padding:clamp(38px,5.6vh,86px) 0}
.turnv:nth-child(even){direction:rtl}
.turnv:nth-child(even) > *{direction:ltr}
.turnv .say{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px)}
.turnv .say .made{font:400 15px/1.6 var(--v-sans);color:var(--v-soft);max-width:34ch}
.turnv .say .made b{color:var(--v-mid);font-weight:500}
@media(max-width:900px){
  .turnv,.turnv:nth-child(even){grid-template-columns:1fr;direction:ltr;gap:26px}
}

/* the run arrives, it does not sit there waiting */
.rise2{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--v-glide),transform 1s var(--v-glide)}
.rise2.in{opacity:1;transform:none}
html:not(.js) .rise2{opacity:1;transform:none}

/* ── the key you can press ───────────────────────────────────────── */
.keyband{text-align:center}
.keystage{display:flex;flex-direction:column;align-items:center;
  gap:clamp(24px,3.4vh,48px);margin-top:clamp(34px,5vh,70px)}
.keyvoice{position:relative;min-height:clamp(58px,8vh,96px);display:flex;
  align-items:center;justify-content:center;width:100%}
.keyvoice .said{opacity:calc(1 - var(--gone,0));
  transform:translateY(calc(var(--gone,0) * -16px)) scale(calc(1 - var(--gone,0) * .05))}
.keyvoice .said .w{opacity:.14;transition:opacity .2s var(--v-glide)}
.keyvoice .said .w.on{opacity:1}
.keyvoice .filed{position:absolute;display:flex;align-items:center;gap:11px;
  white-space:nowrap;font:400 16px var(--v-sans);color:var(--v-soft);opacity:0;
  transform:translateY(10px);
  transition:opacity .36s var(--v-glide),transform .36s var(--v-glide)}
.keyvoice .filed.in{opacity:1;transform:none}
.keyvoice .filed s{text-decoration:none;width:6px;height:6px;border-radius:999px;
  background:var(--v-cr)}
.keyvoice .filed b{color:var(--v-ink);font-weight:500}
.keyrow{display:flex;align-items:center;gap:clamp(22px,3.4vw,60px)}
.bigkey{position:relative;display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);
  padding:clamp(17px,2.2vh,27px) clamp(26px,2.8vw,44px);border-radius:clamp(13px,1.3vw,19px);
  background:linear-gradient(180deg,var(--v-raise),color-mix(in srgb,var(--v-raise) 82%,#000));
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;border:0;
  font:500 clamp(18px,2vw,27px) var(--v-sans);letter-spacing:-.02em;color:var(--v-mid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px var(--v-line2),
             0 3px 0 rgba(0,0,0,.5),0 18px 34px -18px rgba(0,0,0,.8);
  transition:transform .1s var(--v-glide),box-shadow .1s var(--v-glide),
             color .18s var(--v-glide),background .18s var(--v-glide)}
html.light .bigkey{background:linear-gradient(180deg,#fff,#EDEDEB);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,18,15,.10),
             0 3px 0 rgba(20,18,15,.10),0 16px 30px -18px rgba(20,18,15,.30)}
.bigkey:hover{color:var(--v-ink)}
.bigkey.down{color:var(--v-ink);transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--v-cr),
             0 0 0 4px color-mix(in srgb,var(--v-cr) 22%,transparent),
             0 4px 14px -8px rgba(0,0,0,.7)}
.bigkey.ask{animation:vask 3.2s var(--v-glide) infinite}
@keyframes vask{0%,72%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px var(--v-line2),
  0 3px 0 rgba(0,0,0,.5),0 18px 34px -18px rgba(0,0,0,.8)}
 36%{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px var(--v-cr),
  0 0 0 5px color-mix(in srgb,var(--v-cr) 16%,transparent),0 18px 34px -18px rgba(0,0,0,.8)}}
.keypet{width:clamp(104px,10vw,158px);flex:none}
.keypet .hang{position:static;width:100%;opacity:1}
.keypet .hang svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(-4px 9px 20px rgba(0,0,0,.6))}
html.light .keypet .hang svg{filter:drop-shadow(-4px 8px 16px rgba(20,18,15,.22))}
.keyhint{font:400 14px var(--v-sans);color:var(--v-dim);min-height:1.5em}
.keyhint b{color:var(--v-soft);font-weight:400}
.keyafter{display:flex;align-items:baseline;justify-content:center;gap:clamp(12px,1.8vw,26px);
  flex-wrap:wrap;margin-top:clamp(16px,2.4vh,32px)}
.keyafter b{font:500 clamp(18px,2vw,26px) var(--v-sans);letter-spacing:-.028em}
.keyafter span{font:400 15px var(--v-sans);color:var(--v-soft)}
@media(max-width:700px){ .keyrow{flex-direction:column;gap:26px} }

/* ── nowhere ─────────────────────────────────────────────────────── */
.nowhere{text-align:center}
.marks{display:flex;justify-content:center;gap:clamp(18px,3vw,52px);flex-wrap:wrap;
  margin-top:clamp(34px,5vh,64px)}
.marks span{display:flex;align-items:center;gap:10px;font:400 15px var(--v-sans);
  color:var(--v-soft)}
.marks span s{text-decoration:none;width:17px;height:17px;border-radius:999px;flex:none;
  box-shadow:inset 0 0 0 1px var(--v-line2);position:relative}
.marks span s::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:1.5px;
  border-radius:2px;background:var(--v-dim);transform:translate(-50%,-50%) rotate(-45deg)}
.marks span.yes s{box-shadow:inset 0 0 0 1px var(--v-cr)}
.marks span.yes s::after{width:6px;height:6px;border-radius:999px;background:var(--v-cr);
  transform:translate(-50%,-50%)}

/* ── price ───────────────────────────────────────────────────────── */
.plansv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(38px,5vh,64px)}
.planv{position:relative;padding:clamp(24px,2.6vw,36px);border-radius:16px;
  background:var(--v-raise);display:flex;flex-direction:column;gap:16px;
  box-shadow:0 0 0 1px var(--v-line),0 2px 5px rgba(0,0,0,.4),
             0 20px 44px -24px rgba(0,0,0,.7)}
html.light .planv{box-shadow:0 0 0 1px rgba(20,18,15,.07),0 2px 5px rgba(20,18,15,.05),
             0 18px 40px -24px rgba(20,18,15,.16)}
.planv.lead{box-shadow:0 0 0 1.5px var(--v-cr),0 2px 6px rgba(0,0,0,.4),
             0 30px 60px -26px rgba(0,0,0,.8)}
.planv .tagv{position:absolute;top:-10px;left:clamp(24px,2.6vw,36px);
  font:600 8.5px var(--v-sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--v-ground);background:var(--v-cr);padding:5px 10px;border-radius:999px}
.planv .cap2{font:600 9px var(--v-sans);letter-spacing:.19em;text-transform:uppercase;
  color:var(--v-faint)}
.planv .amt2{display:flex;align-items:baseline;gap:9px}
.planv .amt2 b{font:640 clamp(30px,3.4vw,46px) var(--v-sans);letter-spacing:-.044em}
.planv.lead .amt2 b{color:var(--v-cr)}
.planv .amt2 em{font-style:normal;font:400 14px var(--v-sans);color:var(--v-faint)}
.planv > p{font:400 14.5px/1.55 var(--v-sans);color:var(--v-mid)}
.planv ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:2px}
.planv li{position:relative;padding-left:18px;font:400 13.5px/1.5 var(--v-sans);
  color:var(--v-soft)}
.planv li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:999px;background:var(--v-line2)}
.planv li b{color:var(--v-mid);font-weight:500}
.planv .go{margin-top:auto;padding-top:8px;font:400 13.5px var(--v-sans);color:var(--v-cr);
  text-decoration:none}
@media(max-width:900px){ .plansv{grid-template-columns:1fr} }

/* ── questions ───────────────────────────────────────────────────── */
.qsv{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,90px);
  margin-top:clamp(34px,4.6vh,60px)}
.qsv .qa{padding:clamp(20px,2.6vh,30px) 0;border-top:1px solid var(--v-line)}
.qsv .qa h3{font:500 17px var(--v-sans);letter-spacing:-.02em;margin-bottom:9px}
.qsv .qa p{font:400 14.5px/1.62 var(--v-sans);color:var(--v-soft);max-width:44ch}
@media(max-width:860px){ .qsv{grid-template-columns:1fr} }

/* ── the close ───────────────────────────────────────────────────── */
.slotv{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(30px,4vh,52px);padding:clamp(20px,2.4vw,30px);border-radius:15px;
  background:var(--v-raise);box-shadow:0 0 0 1px var(--v-line)}
.slotv .st2{display:flex;flex-direction:column;gap:5px}
.slotv .st2 b{font:500 15.5px var(--v-sans);letter-spacing:-.018em}
.slotv .st2 span{font:400 13.5px var(--v-sans);color:var(--v-soft)}
.slotv .cap3{margin-left:auto;font:600 8.5px var(--v-sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-faint);padding:9px 15px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--v-line2);display:flex;align-items:center;gap:8px}
.slotv .cap3::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--v-cr)}

/* ── foot ────────────────────────────────────────────────────────── */
.vfoot{border-top:1px solid var(--v-line);padding:clamp(44px,6vh,80px) 0 clamp(30px,4vh,54px)}
.vfoot .in4{display:flex;gap:clamp(30px,5vw,90px);flex-wrap:wrap}
.vfoot .about{max-width:34ch;display:flex;flex-direction:column;gap:14px}
.vfoot .about p{font:400 14px/1.6 var(--v-sans);color:var(--v-soft)}
.vfoot .links{margin-left:auto;display:grid;grid-template-columns:repeat(3,auto);
  gap:11px clamp(24px,3vw,54px);align-content:start}
.vfoot .links a{font:400 13.5px var(--v-sans);color:var(--v-soft);text-decoration:none}
.vfoot .links a:hover{color:var(--v-ink)}
.vfoot .base2{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(34px,4.6vh,60px);padding-top:22px;border-top:1px solid var(--v-line);
  font:400 12.5px var(--v-sans);color:var(--v-dim)}

/* ── the ground switch ───────────────────────────────────────────── */
.ground{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vh,28px);z-index:70;
  display:flex;gap:2px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--v-ground) 76%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 1px var(--v-line2),0 12px 30px -14px rgba(0,0,0,.7)}
.ground button{border:0;cursor:pointer;background:none;border-radius:999px;
  padding:8px 15px;font:600 8.5px var(--v-sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-faint);transition:background .2s var(--v-glide),color .2s var(--v-glide)}
.ground button.on{background:var(--v-raise);color:var(--v-ink);
  box-shadow:inset 0 0 0 1px var(--v-line2)}

/* the warm glow on a lit band is wider than a phone. Clip it sideways at
   the band, so the page cannot be panned to the right on a phone. clip,
   not hidden: hidden would make the band a scroll container and cut the
   key's shadow at the bottom. */
.band.lit{overflow-x:clip}

/* 2026-09-05: the ground toggle lives in the footer row, no longer floating over the page */
.vfoot .base2{align-items:center}
.vfoot .ground{position:static;right:auto;bottom:auto;z-index:auto}

/* On cream the frosted header showed whatever scrolled under it as a pale blur, a smudge
   at the top of the screen. Opaque on cream, frosted on dark. 2026-09-06. */
html.light .vbar.stuck{background:var(--v-ground);-webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask:none;mask:none}   /* the soft-edge mask let the page show through the lower half of a solid bar */