@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  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;
}

:root{
  --ink:#0B0B0B;
  --paper:#F7F6F5;
  --white:#FFFFFF;
  --soft:rgba(255,255,255,.75);
  --faint:rgba(255,255,255,.55);
  --hair:rgba(255,255,255,.10);
  --grey:#7F7F7F;
  /* The amber of a switchboard lamp. The one thing this product replaces,
     and the reason our accent is not the reference's blue. */
  /* The BeAppi signal. Rupert's call: Ansard wears the family colour. */
  --signal:#9FFF00;

  --face:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:'Inter',"Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(16px,3vw,24px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--white);
  font-family:var(--face);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  user-select:none;
  -webkit-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text;}

h1,h2,h3,p{margin:0;}

/* ---- nav ---- */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,3vw,34px);
  background:transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
  border-bottom:1px solid transparent;
}
/* Once the page moves, the bar needs a ground of its own. Without it headings
   scroll straight through the nav links. */
/* Sat over a near black page, a translucent bar reads as a grey stripe rather
   than as glass. On the dark pages it takes the page's own ground so the join
   disappears, and the hairline does the separating. */
.nav.stuck{
  background:var(--ink);
  border-bottom-color:rgba(255,255,255,.07);
}
.nav.stuck.onpaper{
  background:rgba(247,246,245,.86);
  border-bottom-color:rgba(11,11,11,.10);
}
.nav.stuck.onpaper .mark{color:var(--ink);}
.nav.stuck.onpaper .mark span.mk{color:#6FBE00;}
.nav.stuck.onpaper .nav__links a{color:rgba(11,11,11,.62);}
.nav.stuck.onpaper .nav__links a:hover{color:var(--ink);}
.nav.stuck.onpaper .burger i{background:var(--ink);}
.nav.stuck.onpaper .pill{background:var(--ink);color:var(--white);}
.mark{
  font:700 20px/1 var(--face);
  letter-spacing:-.045em;
  color:var(--white);text-decoration:none;
}
/* The full stop is the signal green. It is the only mark of the family the
   wordmark carries, which is enough.
   ⛔ Called .mk, not .dot. There is already a .dot in here for the ringing lamp
   on the phone mockup, with a glow and a blink on it, and the wordmark
   inherited both. */
.mark span.mk{color:var(--signal);}
.mark span{color:var(--white);}
.mark--sm{font-size:17px;color:var(--ink);}
.mark--sm span.mk{color:var(--signal);}
.mark--sm span{color:var(--ink);}

.nav__links{display:flex;align-items:center;gap:26px;}
.nav__links a{
  font:500 14px/1 var(--face);letter-spacing:-.01em;
  color:var(--soft);text-decoration:none;
  transition:color .4s ease;
}
.nav__links a:hover{color:var(--white);}

.nav__right{display:flex;align-items:center;gap:16px;}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);color:#000;
  font:500 14px/1 var(--face);
  letter-spacing:-.01em;
  text-decoration:none;
  height:42px;padding:0 20px;
  border-radius:9999px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
.pill:hover{transform:translateY(-1px);opacity:.9;}
.pill--big{height:52px;padding:0 30px;font-size:15px;}
.pill--dark{background:var(--ink);color:var(--white);}

.burger{
  width:34px;height:34px;border:0;background:none;padding:0;
  display:grid;align-content:center;gap:6px;cursor:pointer;
}
.burger i{display:block;height:1.5px;background:var(--white);border-radius:2px;}

/* ---- sections ---- */

.dark{background:var(--ink);}

.hero{
  padding:clamp(120px,15vh,170px) var(--pad) 0;
  text-align:center;
  overflow:hidden;
}

h1{
  font-weight:600;
  font-size:clamp(2.05rem,4.6vw,3.75rem);
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:980px;
  margin:0 auto;
  text-wrap:balance;
}

.sub{
  margin:clamp(16px,2vw,22px) auto 0;
  max-width:680px;
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.5;
  color:var(--soft);
  text-wrap:balance;
}

.hero .pill--big{margin-top:clamp(24px,3vw,32px);}

/* ---- phone ---- */

.phone{
  position:relative;
  width:min(330px,86vw);
  margin:clamp(46px,6vw,74px) auto 0;
  /* ⛔ 672. IT WENT TO 560 AND CAME STRAIGHT BACK. The gap he kept flagging
     was in the REEL handset below, .phone--sm, which is a different rule and
     which I had not touched. Shortening this one squashed a conversation that
     already filled it. Fix the element that is wrong, not the one next to it. */
  aspect-ratio:330 / 672;
  background:#0D0D0D;
  border:1.5px solid rgba(255,255,255,.13);
  border-radius:54px;
  padding:11px;
  box-shadow:0 60px 120px -60px #000, inset 0 1px 0 rgba(255,255,255,.05);
}
/* ⛔ Identical to .phone now, just without its top margin. It was 300 wide on
   a shorter body while it sat alone under the trade tabs; beside the call list
   it wants to be the same handset as the one in the hero, and the void that
   made me shrink it is gone because .thread centres its conversation. */
.phone--sm{width:min(330px,86vw);margin:0 auto;aspect-ratio:330 / 672;border-radius:54px;}

.phone__btn{
  position:absolute;
  background:#1A1A1A;
  border-radius:3px;
}
.phone__btn--silent{left:-2.5px;top:104px;width:3px;height:26px;}
.phone__btn--up{left:-2.5px;top:150px;width:3px;height:48px;}
.phone__btn--down{left:-2.5px;top:208px;width:3px;height:48px;}
.phone__btn--power{right:-2.5px;top:170px;width:3px;height:72px;}

.screen{
  height:100%;
  background:#111;
  border-radius:44px;
  padding:22px 17px 16px;
  display:flex;flex-direction:column;
  overflow:hidden;
  font-family:var(--ui);
}
/* .phone--sm .screen: no override. Same screen as the hero handset. */

.screen__bar{
  display:flex;align-items:center;gap:9px;
  padding-bottom:13px;
  border-bottom:1px solid var(--hair);
  flex:0 0 auto;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:#F5A524;
  box-shadow:0 0 12px 2px rgba(245,165,36,.5);
  animation:blink 1.5s ease-in-out infinite;
  flex:0 0 auto;
}
.dot[data-lamp="line"],.dot[data-lamp2="line"]{
  background:var(--signal);box-shadow:0 0 10px 1px rgba(159,255,0,.26);animation:none;
}
.dot[data-lamp="off"]{background:#333;box-shadow:none;animation:none;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.screen__who{
  font:600 12px/1 var(--ui);
  letter-spacing:-.01em;
  color:#EEE;
}
.screen__clock{
  margin-left:auto;
  font:400 11px/1 var(--ui);
  color:#8A8A8A;
  font-variant-numeric:tabular-nums;
}

/* ⛔ MESSAGES SIT AT THE BOTTOM, NOT THE TOP.
   .thread is flex:1 inside a fixed height phone screen, so with three
   messages in a conversation it stretched to fill the whole handset and left
   a hole the height of a phone between the last message and the outcome at
   the foot. That gap is what he flagged, twice: once here and once on the
   try-it card, and I only fixed the other one.
   justify-content:flex-end pushes the conversation down against the outcome,
   so a short call looks like a short call instead of something that failed
   to load. */
/* ⛔ margin-top:auto ON THE FIRST CHILD, NOT justify-content:flex-end.
   Both push the messages to the bottom of a tall screen, which is what a
   short conversation needs so it does not leave a phone-sized hole. But
   justify-content:flex-end on an overflowing flex column clips the TOP items
   and they cannot be scrolled back to: with seven messages the earliest one
   hung 98px above the box, cut in half. That was me fixing the gap and
   creating a worse fault in the same line.
   The auto margin collapses to nothing once the content is taller than the
   box, so a long conversation scrolls properly and a short one still sits at
   the bottom. */
.thread{
  list-style:none;margin:0;padding:15px 0 0;
  flex:1 1 auto;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.thread::-webkit-scrollbar{display:none;}
/* ⛔ Auto margins on BOTH ends, not justify-content.
   A short conversation sits centred in the screen, which reads as deliberate.
   A long one overflows, and auto margins resolve to zero the moment there is
   no free space, so nothing gets clipped and it still scrolls. justify-content
   centre or flex-end does NOT do that: it eats the overflow off the top and
   you cannot scroll back to it. That bug cost 98px of the first message. */
.thread > :first-child{margin-top:auto;}
.thread > :last-child {margin-bottom:auto;}
.thread li{
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  font-size:13.5px;line-height:1.4;
  letter-spacing:-.006em;
  padding:9px 12px;
  border-radius:14px;
  max-width:86%;
}
.thread li.in{opacity:1;transform:none;}
.thread li[data-who="ansard"]{
  background:#1D1D1D;color:#F2F2F2;
  align-self:flex-start;
  border-bottom-left-radius:5px;
}
.thread li[data-who="caller"]{
  background:#2C2C2E;color:#D8D8D8;
  align-self:flex-end;
  border-bottom-right-radius:5px;
}
.thread li[data-who="note"]{
  background:none;padding:2px 0;max-width:100%;
  font-size:11.5px;color:#E9E3D6;
  align-self:stretch;
  display:flex;align-items:center;gap:7px;
}
.thread li[data-who="note"]::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#E9E3D6;flex:0 0 auto;
}

.card,.outcome{
  flex:0 0 auto;
  margin-top:12px;padding:13px 14px;
  background:#1A1A1A;
  border:1px solid var(--hair);
  border-radius:16px;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.card.in,.outcome.in{opacity:1;transform:none;}
.card__cap{
  font:500 10px/1 var(--ui);
  letter-spacing:.08em;text-transform:uppercase;
  color:#8A8A8A;margin-bottom:10px;
}
.card dl{margin:0;display:grid;gap:6px;}
.card dl div{display:flex;gap:12px;align-items:baseline;}
.card dt{flex:0 0 4.6em;font:400 11px/1.3 var(--ui);color:#8A8A8A;}
.card dd{margin:0;font:500 12.5px/1.3 var(--ui);color:#F2F2F2;}
.card__foot{
  margin-top:11px;
  font:400 11px/1 var(--ui);color:#E9E3D6;
  display:flex;align-items:center;gap:7px;
}
.tick{width:5px;height:5px;border-radius:50%;background:#E9E3D6;}

.outcome{
  font:500 12px/1.35 var(--ui);color:#F2F2F2;
  display:flex;align-items:center;gap:9px;
}
.outcome::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#E9E3D6;flex:0 0 auto;
}

.screen__foot{
  flex:0 0 auto;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--hair);
  font:400 11.5px/1.3 var(--ui);
  color:#6E6E6E;
  text-align:center;
}

/* ---- blocks ---- */

.block{
  padding:clamp(80px,11vh,140px) var(--pad);
}
h2{
  font-weight:600;
  font-size:clamp(1.6rem,2.9vw,2.35rem);
  line-height:1.14;
  letter-spacing:-.019em;
  text-align:center;
  max-width:19ch;
  margin:0 auto;
  text-wrap:balance;
}

.four{
  margin:clamp(44px,5vw,66px) auto 0;
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.4vw,34px);
}
.four article{
  border-top:1px solid var(--hair);
  padding-top:20px;
}
.four h3{
  font:500 clamp(16px,1.5vw,20px)/1.25 var(--face);
  letter-spacing:-.012em;
  margin-bottom:9px;
}
.four p{
  font-size:14.5px;line-height:1.5;
  color:var(--faint);
}

/* ---- the reel ---- */

/* ⛔ one .reel rule only. There were two, and the first set bottom
   padding to 0. Whichever won, having both meant nobody could tell
   by reading it what the spacing actually was. */
.reel__title{margin-bottom:clamp(40px,5vw,60px);}

.reel__rig{
  position:relative;
  max-width:1080px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr minmax(300px,360px);
  gap:clamp(30px,5vw,80px);
  align-items:start;
}

/* ---- hero flags ---- */

.flag{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin:20px auto 0;
}
.flag span{
  font:500 12px/1 var(--face);letter-spacing:-.005em;
  color:var(--soft);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9999px;padding:8px 14px;
}

/* ---- walk the back end ---- */

.lab{padding:clamp(80px,11vh,140px) 0 clamp(70px,9vh,110px);overflow:hidden;}
.lab h2,.lab .deck__sub{padding:0 var(--pad);}

.tabs{
  margin:clamp(34px,4vw,50px) auto 0;
  display:flex;gap:4px;
  width:max-content;max-width:100%;
  padding:5px;
  background:#161616;border:1px solid var(--hair);
  border-radius:9999px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{
  flex:0 0 auto;
  border:0;background:none;cursor:pointer;
  font:500 13.5px/1 var(--face);letter-spacing:-.01em;
  color:rgba(255,255,255,.52);
  padding:11px 17px;border-radius:9999px;
  transition:background .45s ease,color .45s ease;
  white-space:nowrap;
}
.tabs button:hover{color:var(--white);}
.tabs button[aria-selected="true"]{background:#2A2A2A;color:var(--white);}

/* The console track: a snap carousel you can throw with a finger or a
   trackpad. One panel per tab, tabs and track kept in step both ways. */
.labRow{
  margin-top:clamp(30px,3.6vw,48px);
  display:flex;gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--pad);
  padding:6px max(var(--pad),(100% - 1180px) / 2) 10px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.labRow::-webkit-scrollbar{display:none;}
.labRow:focus-visible{outline:2px solid rgba(233,227,214,.30);outline-offset:6px;border-radius:22px;}
.labRow > .app{scroll-snap-align:center;}

.labHint{
  margin:14px auto 0;text-align:center;
  font:400 11px/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.30);
}

/* ---- the calls, click to play ---- */

.reel{padding:clamp(80px,11vh,140px) var(--pad) clamp(70px,9vh,110px);}

/* ⛔ THE PHONE WAS TOUCHING THE SECTIONS ABOVE AND BELOW IT. Twelve asks.
   The cause: .tape__rig and .tape__phone are in the markup and had no rule in
   this file at all, so the handset sat hard against the trade tabs above it
   and against the next section under it, with nothing but the section's own
   padding in between. */
.tape__rig{
  max-width:1080px;
  margin:clamp(44px,6vw,72px) auto clamp(34px,4.5vw,56px);
  /* ⛔ Handset left, the calls right, on one line. Stacked, the list sat a
     long way under the phone and the two read as separate things. Beside each
     other you pick a call on the right and watch it play on the left, which
     is the whole point of the section. */
  display:grid;
  grid-template-columns:minmax(280px,346px) minmax(0,1fr);
  gap:clamp(34px,5vw,68px);
  align-items:center;
}
.tape__phone{
  display:flex;justify-content:center;
  padding:clamp(8px,1.4vw,16px) 0;
}
/* ⛔ One column below 860, phone first. Verified at 390px: nothing clipped
   and nothing scrolls sideways. */
@media (max-width:860px){
  .tape__rig{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(26px,5vw,38px);
    max-width:420px;
  }
}
.reel__title{margin-bottom:0;}

.reel__rig{
  margin:clamp(40px,5vw,62px) auto 0;
  max-width:1080px;
  display:grid;
  grid-template-columns:minmax(280px,340px) 1fr;
  gap:clamp(30px,5vw,72px);
  align-items:center;
}

/* ⛔ NOT BUTTONS. He said so: "i dont really like these buttons can we do
   something different". They were five identical dark pills stacked up, which
   is the shape every list on every SaaS page has.

   This is a call log instead. No boxes, no radius, no fill: hairlines do the
   separating and the outcome sits on the right in mono. It reads as the thing
   the product actually produces, and it says what Ansard does to a call
   without a line of marketing copy next to it. */
.asks{
  list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(255,255,255,.07);
}
.asks li{
  position:relative;
  cursor:pointer;
  display:flex;align-items:baseline;gap:16px;
  padding:16px 4px 16px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.46);
  font:450 clamp(14px,1.25vw,16px)/1.35 var(--face);
  letter-spacing:-.012em;
  transition:color .45s ease,padding-left .45s cubic-bezier(.22,.61,.36,1);
}
.asks li span{flex:1 1 auto;}
/* the marker: a rule, not a dot. it grows into the row on the live one. */
.asks li::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:2px;border-radius:1px;
  background:var(--signal);
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.asks li em{
  flex:0 0 auto;font-style:normal;
  font:500 10.5px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.26);
  transition:color .45s ease;
}
.asks li:hover{color:rgba(255,255,255,.78);}
.asks li:hover em{color:rgba(255,255,255,.42);}
.asks li:focus-visible{outline:2px solid var(--signal);outline-offset:-2px;}
.asks li.on{
  color:#fff;padding-left:26px;
}
.asks li.on::before{transform:scaleY(1);}
.asks li.on em{color:var(--signal);}


/* ---- hero flags ---- */

.flag{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;margin:20px auto 0;
}
.flag span{
  font:500 12px/1 var(--face);letter-spacing:-.005em;
  color:var(--soft);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9999px;padding:8px 14px;
}

/* ---- walk the back end ---- */

.lab{padding:clamp(80px,11vh,140px) 0 clamp(70px,9vh,110px);overflow:hidden;}
.lab h2,.lab .deck__sub{padding:0 var(--pad);}

.tabs{
  margin:clamp(34px,4vw,50px) auto 0;
  display:flex;gap:4px;
  width:max-content;max-width:100%;
  padding:5px;
  background:#161616;border:1px solid var(--hair);
  border-radius:9999px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{
  flex:0 0 auto;
  border:0;background:none;cursor:pointer;
  font:500 13.5px/1 var(--face);letter-spacing:-.01em;
  color:rgba(255,255,255,.52);
  padding:11px 17px;border-radius:9999px;
  transition:background .45s ease,color .45s ease;
  white-space:nowrap;
}
.tabs button:hover{color:var(--white);}
.tabs button[aria-selected="true"]{background:#2A2A2A;color:var(--white);}

.labRow{
  margin-top:clamp(30px,3.6vw,48px);
  display:flex;gap:26px;
  padding-left:max(var(--pad),(100% - 1180px) / 2);
}

.app{
  position:relative;
  flex:0 0 min(1180px,calc(100vw - var(--pad) * 2));
  display:grid;grid-template-columns:212px 1fr;
  background:linear-gradient(160deg,#151515,#0E0E0E 60%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  overflow:hidden;
  min-height:clamp(400px,46vw,520px);
  font-family:var(--ui);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 6px rgba(0,0,0,.5),
    0 60px 120px -60px rgba(0,0,0,.9);
}
/* A very soft green cast bleeding up from behind the window, so it sits in
   light rather than floating on flat black. */
.app::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,rgba(233,227,214,.05),transparent 62%);
  pointer-events:none;z-index:0;
}
.app > *{position:relative;z-index:1;}
.app--peek{flex:0 0 320px;opacity:.4;}

.app__side{
  background:#131313;border-right:1px solid var(--hair);
  padding:16px 12px;
}
.app__mk{
  display:block;padding:4px 8px 16px;
  font:700 16px/1 var(--face);letter-spacing:-.05em;color:#EDEDED;
}
.app__mk i{color:#E9E3D6;font-style:normal;}
.app__side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.app__side li{
  position:relative;
  font:450 12.5px/1 var(--ui);color:#8A8A8A;
  padding:10px 10px;border-radius:9px;
  display:flex;align-items:center;gap:10px;
  transition:background .35s ease,color .35s ease;
}
.app__side li::before{
  content:"";width:5px;height:5px;border-radius:1.5px;
  background:#3A3A3A;flex:0 0 auto;
  transition:background .35s ease,box-shadow .35s ease;
}
.app__side li:hover{color:#D8D8D8;background:rgba(255,255,255,.03);}
.app__side li.sel{
  background:linear-gradient(90deg,rgba(233,227,214,.06),rgba(255,255,255,.03));
  color:#F4F4F4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.app__side li.sel::before{
  background:var(--signal);
  box-shadow:0 0 10px 1px rgba(159,255,0,.34);
}
/* The accent rail on the live row. */
.app__side li.sel::after{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  border-radius:2px;background:var(--signal);
  box-shadow:0 0 8px rgba(159,255,0,.36);
}

.app__main{display:flex;flex-direction:column;min-width:0;}
.app__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--hair);
  font:600 12.5px/1 var(--ui);color:#EDEDED;
}
.app__live{
  display:flex;align-items:center;gap:7px;
  font:400 11px/1 var(--ui);color:#E9E3D6;
}
.app__live i{width:6px;height:6px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 8px rgba(159,255,0,.4);}

/* The console body is a list and the thing you picked, side by side. A real
   console always shows you what you selected, not just a list of selectables. */
.app__body{
  padding:clamp(16px,1.7vw,22px);min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:clamp(14px,1.6vw,20px);
  align-items:start;
}
.app__list{min-width:0;}

/* ---- the right hand rail ---- */
.app__rail{
  border:1px solid var(--hair);border-radius:13px;
  background:rgba(255,255,255,.028);
  overflow:hidden;
}
.rail__head{
  padding:14px 15px 13px;border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.022);
}
.rail__head b{
  display:block;font:600 14px/1.3 var(--ui);letter-spacing:-.014em;color:var(--white);
}
.rail__head span{
  display:block;font:400 12px/1.35 var(--ui);color:var(--faint);margin-top:3px;
}
.rail__body{padding:6px 15px;}
.rail__bit{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055);
}
.rail__bit:last-child{border-bottom:0;}
.rail__bit span{
  font:400 12.5px/1.4 var(--ui);color:var(--faint);flex:none;
}
.rail__bit b{
  font:600 13px/1.4 var(--ui);letter-spacing:-.01em;color:var(--white);
  text-align:right;font-variant-numeric:tabular-nums;
}
.rail__foot{
  padding:12px 15px 13px;border-top:1px solid var(--hair);
  font:500 11.5px/1.4 var(--ui);color:var(--faint);letter-spacing:-.005em;
}

/* A transcript in the rail, when the thing you picked is a call. */
.rail__thread{list-style:none;margin:0;padding:12px 15px;display:grid;gap:11px;}
.rail__thread li{display:grid;gap:3px;}
.rail__thread u{
  font:500 10px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.34);
}
.rail__thread p{font:400 12.5px/1.5 var(--ui);color:rgba(255,255,255,.80);margin:0;}
.rail__thread li.them p{color:rgba(255,255,255,.56);}
.said{
  font:400 14px/1.55 var(--ui);color:#E8E8E8;
  max-width:70ch;margin-bottom:16px;letter-spacing:-.005em;
}

.flow{
  border:1px solid var(--hair);border-radius:13px;
  padding:16px;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/13px 13px;
}
.node{
  background:#1A1A1A;border:1px solid var(--hair);
  border-radius:9px;padding:9px 12px;
  width:max-content;max-width:100%;
}
.node b{display:block;font:400 9.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:#7C7C7C;margin-bottom:5px;}
.node span{font:500 12.5px/1.3 var(--ui);color:#EFEFEF;}
.node--pair{display:flex;gap:9px;width:100%;flex-wrap:wrap;}
.wire{width:1px;height:15px;background:#2E2E2E;margin:0 0 0 26px;}
.flow__foot{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--hair);
  font:500 12px/1 var(--ui);color:#EFEFEF;
}
.flow__foot em{font-style:normal;font-weight:400;color:#7C7C7C;}
.flow__foot .on{
  margin-left:auto;font:400 10.5px/1 var(--ui);color:#E9E3D6;
  background:rgba(233,227,214,.08);padding:5px 9px;border-radius:6px;
}

.rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.rows li{
  display:grid;grid-template-columns:4em 1fr auto;gap:12px;align-items:baseline;
  font:400 12px/1.4 var(--ui);color:#8A8A8A;
  padding:12px 14px;
  background:linear-gradient(#1C1C1C,#171717);
  border:1px solid rgba(255,255,255,.07);border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.rows li:hover{border-color:rgba(255,255,255,.14);transform:translateX(2px);}
.rows em{font-style:normal;color:#E8E8E8;}
.rows i{font-style:normal;font-size:10.5px;padding:3px 8px;border-radius:5px;background:#242424;color:#9A9A9A;white-space:nowrap;}
.rows i.ok{background:rgba(233,227,214,.08);color:#E9E3D6;}
.rows i.warm{background:rgba(245,165,36,.13);color:#F5A524;}

/* ---- the console ---- */

.deck{padding:clamp(80px,11vh,140px) var(--pad) clamp(60px,8vh,100px);}
.deck__sub{
  margin:16px auto 0;max-width:56ch;text-align:center;
  font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.5;color:var(--faint);
}

.mac{
  margin:clamp(44px,5vw,70px) auto 0;
  width:min(940px,100%);
}
.mac__screen{
  background:#0D0D0D;
  border:1.5px solid rgba(255,255,255,.13);
  border-radius:16px;
  padding:9px;
  box-shadow:0 50px 100px -55px #000;
}
.mac__base{
  display:block;width:min(102%,1000px);height:11px;margin:0 auto;
  background:linear-gradient(#232323,#131313);
  border-radius:0 0 12px 12px;
  border:1px solid rgba(255,255,255,.09);border-top:0;
}

.con{
  background:#121212;border-radius:10px;overflow:hidden;
  font-family:var(--ui);
}
.con__top{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--hair);
  background:#161616;
}
.con__dots{display:flex;gap:6px;}
.con__dots i{width:9px;height:9px;border-radius:50%;background:#2E2E2E;display:block;}
.con__name{font:600 12px/1 var(--ui);color:#EDEDED;letter-spacing:-.01em;}
.con__range{margin-left:auto;font:400 11px/1 var(--ui);color:#7C7C7C;}

.con__body{padding:clamp(14px,1.8vw,22px);}
.con__cap{
  font:500 10px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:#7C7C7C;margin-bottom:13px;
}

.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1vw,14px);
}
.tiles div{
  position:relative;
  background:linear-gradient(#1E1E1E,#161616);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:16px 17px 17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.45);
  overflow:hidden;
}
/* A single hairline of light along the top edge. It is the cheapest thing you
   can do to stop a dark card reading as a flat grey rectangle. */
.tiles div::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.tiles p{
  font:500 10px/1.3 var(--ui);
  letter-spacing:.07em;text-transform:uppercase;
  color:#787878;margin-bottom:11px;
}
.tiles strong{
  display:block;
  font:600 clamp(26px,3.1vw,38px)/1 var(--ui);
  letter-spacing:-.035em;color:#F6F6F6;
  font-variant-numeric:tabular-nums;
}
.tiles strong.good{
  color:#E9E3D6;
  text-shadow:0 0 26px rgba(233,227,214,.22);
}

.panels{
  margin-top:clamp(10px,1.2vw,16px);
  display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(8px,1vw,14px);
}
.chart,.recent{
  position:relative;
  background:linear-gradient(#1E1E1E,#161616);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:16px 17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.45);
  overflow:hidden;
}
.chart::after,.recent::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

.plot{
  position:relative;
  height:clamp(104px,12vw,148px);
  margin-top:2px;
}
.plot svg{width:100%;height:100%;display:block;overflow:visible;}
.plot .grid{stroke:rgba(255,255,255,.05);stroke-width:1;}
.plot .area{fill:url(#ansardFill);}
.plot .line{
  fill:none;stroke:#E9E3D6;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(233,227,214,.30));
}
.plot .peak{fill:#E9E3D6;}
.plot .peakRing{fill:none;stroke:rgba(233,227,214,.22);stroke-width:1;}
.plot .peakLine{stroke:rgba(233,227,214,.20);stroke-width:1;stroke-dasharray:2 3;}

.peakTag{
  position:absolute;
  transform:translate(-50%,-100%);
  font:500 10px/1 var(--ui);
  letter-spacing:.02em;
  color:#E9E3D6;
  background:rgba(233,227,214,.07);
  border:1px solid rgba(233,227,214,.18);
  padding:4px 7px;border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
}

.hours{
  display:flex;justify-content:space-between;
  margin-top:11px;
  font:400 10px/1 var(--ui);color:#6E6E6E;
  letter-spacing:.03em;
}

.recent ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.recent li{
  display:grid;grid-template-columns:3.4em 1fr auto;
  gap:10px;align-items:baseline;
  font:400 11.5px/1.35 var(--ui);color:#8A8A8A;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.05);
}
.recent li:last-child{border-bottom:0;padding-bottom:0;}
.recent em{font-style:normal;color:#E4E4E4;}
.recent i{
  font-style:normal;font-size:10px;
  padding:3px 7px;border-radius:5px;
  background:#242424;color:#9A9A9A;white-space:nowrap;
}
.recent i.ok{background:rgba(233,227,214,.08);color:#E9E3D6;}
.recent i.warm{background:rgba(245,165,36,.13);color:#F5A524;}

/* ---- trio ---- */

/* Full bleed dark, content held to 1080. Capping the section itself let the
   light page show down both sides. */
.trio{
  padding:clamp(70px,9vh,110px) max(var(--pad),(100% - 1080px) / 2) clamp(90px,12vh,140px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px);
}
.trio h3{
  font:400 15px/1.5 var(--face);
  letter-spacing:-.003em;
  color:var(--grey);
  margin-bottom:8px;
}
.trio p{font-size:14px;line-height:1.55;color:var(--faint);}

/* ---- close ---- */

.close{
  background:var(--ink);
  padding:0 var(--pad) clamp(60px,8vh,90px);
}
.close__card{
  background:var(--paper);
  color:var(--ink);
  border-radius:28px;
  padding:clamp(56px,8vw,96px) var(--pad);
  text-align:center;
  max-width:1080px;margin:0 auto;
}
.close__card h2{color:var(--ink);font-size:clamp(1.7rem,3.1vw,2.5rem);}
.close__card p{
  margin:16px auto 0;max-width:52ch;
  font-size:15.5px;line-height:1.55;
  color:rgba(11,11,11,.62);
}
.close__card .pill{margin-top:28px;height:52px;padding:0 30px;font-size:15px;}

/* ---- foot ---- */

.foot{
  background:var(--paper);color:var(--ink);
  padding:clamp(56px,8vw,96px) clamp(18px,3vw,34px) clamp(28px,3vw,40px);
}

.foot__open{max-width:1080px;margin:0 auto;}
.foot__h{
  color:var(--ink);
  text-align:left;
  max-width:22ch;
  margin:0;
  font-size:clamp(1.5rem,2.7vw,2.15rem);
}
.foot__lede{
  margin:14px 0 0;max-width:56ch;
  font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.55;
  color:rgba(11,11,11,.58);
}

.foot__grid{
  margin-top:clamp(36px,4vw,54px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,2.6vw,40px);
}
.foot__grid article{
  border-top:1px solid rgba(11,11,11,.13);
  padding-top:18px;
}
.foot__grid h3{
  font:500 clamp(15px,1.35vw,18px)/1.3 var(--face);
  letter-spacing:-.012em;color:var(--ink);
  margin-bottom:10px;
}
.foot__grid p{
  margin:0 0 9px;
  font-size:14px;line-height:1.6;
  color:rgba(11,11,11,.62);
}
.foot__grid b{color:var(--ink);font-weight:600;}
.foot__note{
  font-size:12.5px !important;
  line-height:1.55 !important;
  color:rgba(11,11,11,.42) !important;
}

.foot__base{
  max-width:1080px;margin:clamp(44px,5vw,70px) auto 0;
  padding-top:22px;
  border-top:1px solid rgba(11,11,11,.13);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.foot__base p{font-size:13px;color:rgba(11,11,11,.5);margin:0;}

/* ---- narrow ---- */

@media (max-width:900px){
  .four{grid-template-columns:repeat(2,1fr);}
  .trio{grid-template-columns:1fr;gap:26px;}
}

@media (max-width:1100px){
  .nav__links{display:none;}
}

@media (max-width:900px){
  .reel__rig{grid-template-columns:1fr;gap:30px;justify-items:center;}
  .asks{width:100%;}
  .labRow{gap:14px;padding-left:var(--pad);padding-right:var(--pad);}
  .app{grid-template-columns:1fr;min-height:0;}
  .app__side{
    border-right:0;border-bottom:1px solid var(--hair);
    padding:12px;
  }
  .app__mk{display:none;}
  .app__side ul{
    grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:4px;scrollbar-width:none;
  }
  .app__side ul::-webkit-scrollbar{display:none;}
  .app{flex:0 0 calc(100vw - var(--pad) * 2);}
  .rows li{grid-template-columns:4em 1fr;row-gap:5px;}
  .rows i{grid-column:2;justify-self:start;}
  .node--pair{flex-direction:column;}

  .tiles{grid-template-columns:repeat(2,1fr);}
  .panels{grid-template-columns:1fr;}
  .mac__screen{border-radius:13px;padding:7px;}
}

@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr;gap:24px;}
  .foot__h{max-width:none;}
}

@media (max-width:560px){
  .four{grid-template-columns:1fr;gap:22px;}
  .recent li{grid-template-columns:3.2em 1fr;row-gap:4px;}
  .recent i{grid-column:2;justify-self:start;}
  h1{max-width:none;}
  .phone{width:min(300px,84vw);}
  .thread li{font-size:13px;}
}

@media (max-width:400px){
  .nav{padding:16px 16px;}
  .pill{height:38px;padding:0 16px;font-size:13px;}
  .phone{width:min(280px,86vw);border-radius:46px;}
  .screen{border-radius:37px;padding:18px 14px 13px;}
  .phone--sm{width:min(232px,72vw);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto;}
}

/* ---- sector picker ---- */

.sectors{
  margin:clamp(30px,3.4vw,44px) auto 0;
  display:flex;gap:4px;
  width:max-content;max-width:100%;
  padding:5px;
  background:#161616;border:1px solid var(--hair);
  border-radius:9999px;
  overflow-x:auto;scrollbar-width:none;
}
.sectors::-webkit-scrollbar{display:none;}
.sectors button{
  flex:0 0 auto;border:0;background:none;cursor:pointer;
  font:500 13.5px/1 var(--face);letter-spacing:-.01em;
  color:rgba(255,255,255,.52);
  padding:11px 17px;border-radius:9999px;
  transition:background .45s ease,color .45s ease;
  white-space:nowrap;
}
.sectors button:hover{color:var(--white);}
.sectors button[aria-selected="true"]{background:#2A2A2A;color:var(--white);}

.askWrap{display:grid;gap:14px;}

.odd{
  display:block;text-decoration:none;
  padding:17px 20px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:13px;
  transition:border-color .4s ease,background .4s ease;
}
.odd:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.02);}
.odd b{
  display:block;
  font:500 clamp(14px,1.25vw,16px)/1.35 var(--face);
  letter-spacing:-.012em;color:var(--white);margin-bottom:5px;
}
.odd span{
  display:block;
  font-size:13.5px;line-height:1.5;color:var(--faint);
}

.app__side li .tag{
  margin-left:auto;
  font:600 10px/1 var(--ui);
  min-width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;padding:0 5px;
  background:rgba(233,227,214,.14);
  color:#EDE7DA;
}

.four--big article h3{font-size:clamp(17px,1.7vw,21px);}
.four--big article p{font-size:15px;line-height:1.6;}
.four--big b{color:var(--white);font-weight:600;}

/* ---- comparison ---- */
.vs{
  max-width:1080px;margin:clamp(38px,4.5vw,58px) auto 0;
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  font-family:var(--ui);
}
.vs__row{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;
  align-items:center;gap:12px;
  padding:15px clamp(16px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.06);
  font-size:14px;color:var(--faint);
}
.vs__row:first-child{border-top:0;}
.vs__row--head{
  background:rgba(255,255,255,.03);
  font:500 11px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.vs__row span:first-child{color:var(--white);font-weight:500;}
.vs__row--head span:first-child{color:rgba(255,255,255,.42);font-weight:500;}
.vs__row b{font-weight:400;color:rgba(255,255,255,.42);}
.vs__row b.y{color:var(--white);font-weight:600;}
.vs__foot{
  max-width:1080px;margin:20px auto 0;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.40);
}
@media (max-width:760px){
  .vs__row{grid-template-columns:1fr;gap:4px;padding:14px 16px;}
  .vs__row--head{display:none;}
  .vs__row b::before{content:attr(data-l);}
  .vs__row b{font-size:13px;}
  .vs__row b:nth-of-type(1)::before{content:"A person: ";color:rgba(255,255,255,.3);}
  .vs__row b:nth-of-type(2)::before{content:"Typical AI line: ";color:rgba(255,255,255,.3);}
  .vs__row b:nth-of-type(3)::before{content:"Ansard: ";color:rgba(255,255,255,.3);}
}

/* ---- everything else teaser ---- */
.tease{padding:clamp(80px,11vh,140px) var(--pad);}
.tease__in{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.25fr;
  gap:clamp(30px,5vw,80px);align-items:start;
}
.tease__num b{
  display:block;
  font:400 clamp(5rem,11vw,9.5rem)/.8 var(--face);
  letter-spacing:-.05em;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.tease__num span{
  display:block;margin-top:18px;max-width:22ch;
  font-size:clamp(14px,1.2vw,16px);line-height:1.5;color:var(--faint);
}
.tease__list ul{
  list-style:none;margin:0 0 clamp(26px,3vw,36px);padding:0;
  display:grid;gap:0;
}
.tease__list li{
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.45;
  color:var(--soft);
}
.tease__list li:first-child{border-top:1px solid rgba(255,255,255,.07);}
@media (max-width:900px){
  .tease__in{grid-template-columns:1fr;gap:26px;}
  .tease__num span{max-width:none;}
}

/* ---- last night ---- */
.night{padding:clamp(80px,11vh,140px) var(--pad);}
.night__in{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(30px,5vw,76px);align-items:start;
}
.night__say h2{text-align:left;margin:0;max-width:15ch;}
.night__say .deck__sub{text-align:left;margin:16px 0 0;max-width:42ch;}

.night__score{
  display:flex;gap:clamp(20px,3vw,42px);
  margin-top:clamp(28px,3.4vw,42px);
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--hair);
}
.night__score b{
  display:block;
  font:400 clamp(2.2rem,4.4vw,3.6rem)/1 var(--face);
  letter-spacing:-.04em;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.night__score span{
  display:block;margin-top:8px;
  font:400 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.40);
}
.night__score div:last-child b{color:rgba(255,255,255,.34);}

.night__log{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;
  border:1px solid var(--hair);border-radius:16px;
  overflow:hidden;
  font-family:var(--ui);
  background:linear-gradient(#141414,#0E0E0E);
}
.night__log li{
  display:grid;grid-template-columns:4.4em 1fr auto;
  gap:14px;align-items:baseline;
  padding:14px clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(255,255,255,.055);
  font-size:13px;color:#8A8A8A;
  opacity:0;transform:translateY(-6px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.night__log li:first-child{border-top:0;}
.night__log li.in{opacity:1;transform:none;}
.night__log em{font-style:normal;color:#EAEAEA;}
.night__log i{
  font-style:normal;font-size:10.5px;
  letter-spacing:.06em;
  padding:4px 9px;border-radius:6px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.62);
  white-space:nowrap;
}

@media (max-width:900px){
  .night__in{grid-template-columns:1fr;gap:28px;}
  .night__say h2,.night__say .deck__sub{max-width:none;}
  .night__log li{grid-template-columns:4em 1fr;row-gap:5px;}
  .night__log i{grid-column:2;justify-self:start;}
}

/* ---- it learns ---- */
.grow{padding:clamp(80px,11vh,140px) var(--pad);}
.grow__in{max-width:1080px;margin:0 auto;}
.grow__say h2{text-align:left;margin:0;max-width:24ch;}
.grow__say .deck__sub{text-align:left;margin:16px 0 0;max-width:62ch;}

.grow__grid{
  margin-top:clamp(34px,4vw,54px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,26px);
}
.grow__card{
  padding:clamp(22px,2.6vw,32px);
  border:1px solid rgba(255,255,255,.09);border-radius:18px;
  background:linear-gradient(160deg,#161616,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--ui);
}
.grow__cap{
  margin:0 0 18px;font:500 10.5px/1 var(--ui);
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.36);
}

.grow__url{
  display:flex;align-items:center;gap:2px;
  padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:10px;
  background:#191919;font:400 13px/1 var(--ui);color:#EDEDED;
}
.grow__url span{color:#6E6E6E;}
.grow__url i{
  margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);padding:4px 8px;border-radius:5px;
}
.grow__pull{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;}
.grow__pull li{
  position:relative;padding-left:22px;
  font-size:13.5px;line-height:1.45;color:#C9C9C9;
}
.grow__pull li::before{
  content:"";position:absolute;left:0;top:.35em;
  width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.10);
}
.grow__note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:#7E7E7E;}

.grow__know{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;}
.grow__know b{
  font:400 clamp(2.2rem,3.6vw,3rem)/1 var(--face);letter-spacing:-.04em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.grow__know span{font-size:13px;color:#7E7E7E;max-width:12ch;line-height:1.35;}

.grow__ask{
  padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  background:#191919;
}
.grow__count{margin:0 0 9px;font-size:11.5px;color:#8A8A8A;}
.grow__count b{color:#EDEDED;font-weight:600;font-variant-numeric:tabular-nums;}
.grow__q{
  margin:0 0 14px;font-size:14.5px;line-height:1.4;color:#F2F2F2;
  transition:opacity .3s ease;min-height:2.8em;
}
.grow__btn{
  width:100%;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:9px;
  background:rgba(255,255,255,.06);color:#fff;
  font:500 12.5px/1 var(--ui);padding:12px;
  transition:background .4s ease,border-color .4s ease;
}
.grow__btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);}

.grow__learned{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;}
.grow__learned li{
  position:relative;padding-left:22px;
  font-size:12.5px;line-height:1.4;color:#7E7E7E;
  opacity:0;transform:translateY(-4px);
  transition:opacity .5s ease,transform .5s ease;
}
.grow__learned li.in{opacity:1;transform:none;}
.grow__learned li::before{
  content:"";position:absolute;left:0;top:.3em;
  width:11px;height:11px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
}

@media (max-width:900px){
  .grow__grid{grid-template-columns:1fr;}
  .grow__say h2,.grow__say .deck__sub{max-width:none;}
}

/* ---- call or text ---- */
.chan{
  margin:clamp(26px,3vw,36px) auto 0;
  display:flex;gap:4px;width:max-content;
  padding:5px;background:#161616;border:1px solid var(--hair);border-radius:9999px;
}
.chan button{
  border:0;background:none;cursor:pointer;
  font:500 13.5px/1 var(--face);letter-spacing:-.01em;
  color:rgba(255,255,255,.52);padding:11px 22px;border-radius:9999px;
  transition:background .45s ease,color .45s ease;
}
.chan button:hover{color:var(--white);}
.chan button[aria-selected="true"]{background:#2A2A2A;color:var(--white);}

.tryText{display:block;}
.tryText[hidden]{display:none;}
.tryText__cap{
  margin:0 0 14px;font:400 13.5px/1.45 var(--ui);color:var(--faint);
}
.tryText__row{display:flex;gap:9px;}
.tryText__row input{
  flex:1 1 auto;min-width:0;
  background:#161616;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:15px 17px;
  font:400 14.5px/1 var(--ui);color:#fff;
  outline:none;transition:border-color .35s ease;
}
.tryText__row input::placeholder{color:rgba(255,255,255,.30);}
.tryText__row input:focus{border-color:rgba(255,255,255,.34);}
.tryText__row button{
  flex:0 0 auto;cursor:pointer;border:0;border-radius:12px;
  background:var(--white);color:#000;
  font:500 13.5px/1 var(--face);padding:0 22px;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.tryText__row button:hover{opacity:.9;transform:translateY(-1px);}
.tryText__hint{
  margin:13px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.38);
}
.asks[hidden],.sectors[hidden]{display:none;}

/* ---- the diary ---- */
.diary{padding:clamp(80px,11vh,140px) var(--pad);}
.diary__in{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);align-items:center;
}
.diary__say h2{text-align:left;margin:0;max-width:17ch;}
.diary__say .deck__sub{text-align:left;margin:16px 0 0;max-width:46ch;}
.diary__say .deck__sub b{color:var(--white);font-weight:600;}
.diary__btn{
  margin-top:clamp(24px,3vw,32px);cursor:pointer;
  border:0;border-radius:9999px;background:var(--white);color:#000;
  font:500 14px/1 var(--face);height:46px;padding:0 24px;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.diary__btn:hover{opacity:.9;transform:translateY(-1px);}
.diary__btn:disabled{opacity:.35;cursor:default;transform:none;}
.diary__hint{margin:14px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.42);max-width:40ch;}

.diary__grid{
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  background:linear-gradient(#141414,#0E0E0E);font-family:var(--ui);
}
.diary__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(14px,1.8vw,20px);
  border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03);
  font:600 12.5px/1 var(--ui);color:#EDEDED;
}
.diary__head span:last-child{font-weight:400;color:#7E7E7E;font-variant-numeric:tabular-nums;}
.diary__slots{list-style:none;margin:0;padding:0;}
.diary__slots li{
  display:grid;grid-template-columns:4.4em 1fr;gap:14px;align-items:baseline;
  padding:12px clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(255,255,255,.05);
  font-size:13px;color:#8A8A8A;
  transition:background .6s ease;
}
.diary__slots li:first-child{border-top:0;}
.diary__slots em{font-style:normal;color:#EAEAEA;}
.diary__slots li.free em{color:#5A5A5A;}
.diary__slots li.landing{background:rgba(255,255,255,.10);}

.close__app{
  margin:20px auto 0;max-width:44ch;
  font-size:13px;line-height:1.55;color:rgba(11,11,11,.52);
}

@media (max-width:900px){
  .diary__in{grid-template-columns:1fr;gap:28px;}
  .diary__say h2,.diary__say .deck__sub{max-width:none;}
}

/* ---- console chrome, second pass ---- */
.app__side{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#151515,#101010);
}
.app__side ul{flex:1 1 auto;align-content:start;}

.app__who{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;align-items:center;
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.app__av{
  grid-row:1 / span 2;
  width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  font:600 11px/1 var(--ui);color:#EDEDED;letter-spacing:.03em;
}
.app__who b{font:500 12px/1.2 var(--ui);color:#EDEDED;align-self:end;}
.app__who i{font-style:normal;font:400 10.5px/1.2 var(--ui);color:#6E6E6E;align-self:start;}

.app__top{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:16px;align-items:center;
  background:rgba(255,255,255,.02);
}
.app__crumb{font:600 12.5px/1 var(--ui);color:#EDEDED;white-space:nowrap;}
.app__find{display:block;min-width:0;}
.app__find input{
  width:100%;background:#171717;
  border:1px solid rgba(255,255,255,.08);border-radius:8px;
  padding:8px 12px;
  font:400 11.5px/1 var(--ui);color:#B9B9B9;
  outline:none;cursor:default;
}
.app__find input::placeholder{color:#5E5E5E;}

.app__chips{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:12px clamp(16px,1.7vw,22px) 0;
}
.chip{
  font:400 10.5px/1 var(--ui);letter-spacing:.03em;
  color:#8A8A8A;
  border:1px solid rgba(255,255,255,.09);border-radius:9999px;
  padding:7px 12px;white-space:nowrap;
}
.chip--on{background:rgba(255,255,255,.09);color:#F0F0F0;border-color:rgba(255,255,255,.16);}

.app__body{padding-top:clamp(12px,1.4vw,16px);}

.rows__head{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 14px 8px 0 !important;
  font:500 10px/1 var(--ui) !important;
  letter-spacing:.11em;text-transform:uppercase;
  color:#6A6A6A !important;
}
.rows__head:hover{transform:none !important;}
.rows__head em,.rows__head i{
  font-style:normal;color:#6A6A6A !important;
  background:none !important;padding:0 !important;font-size:10px !important;
  letter-spacing:.11em;text-transform:uppercase;
}

/* ---- talk to it ---- */
.talk{padding:clamp(80px,11vh,140px) var(--pad);}
.talk__in{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,72px);align-items:center;
}
.talk__say h2{text-align:left;margin:0;max-width:15ch;}
.talk__say .deck__sub{text-align:left;margin:16px 0 0;max-width:46ch;}
.talk__prompts{
  list-style:none;margin:clamp(24px,3vw,32px) 0 0;padding:0;display:grid;gap:0;
}
.talk__prompts li{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14.5px;line-height:1.45;color:var(--soft);
}
.talk__prompts li:first-child{border-top:1px solid rgba(255,255,255,.07);}
.talk__note{margin:16px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.42);max-width:44ch;}

.talk__box{
  border:1px solid var(--hair);border-radius:20px;
  background:linear-gradient(160deg,#161616,#0E0E0E 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  min-height:clamp(300px,34vw,380px);
  display:grid;place-items:center;
  padding:clamp(24px,3vw,36px);
  font-family:var(--ui);
}
.talk__idle{text-align:center;}
.talk__ring{
  display:block;width:74px;height:74px;margin:0 auto 22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  position:relative;
  /* Set from the cursor: 0 across the card, 1 stood on it. */
  --near:0;
}
/* Rings travelling out from the middle, the way a phone ring carries.
   ⛔ They stop at the edge of the ring itself. Expanding past it put them
   straight through the line of text underneath, which read as a fault. */
.talk__ring::before,
.talk__ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,calc(.20 + var(--near) * .26));
  animation:carry 4.6s cubic-bezier(.16,.68,.4,1) infinite;
  will-change:transform,opacity;
}
.talk__ring::after{animation-delay:2.3s;}

@keyframes carry{
  0%   {transform:scale(.14);opacity:0}
  14%  {opacity:.9}
  100% {transform:scale(1);  opacity:0}
}

/* The lamp they come from. A solid signal dot with a soft white halo, not a
   wash of green: green at low alpha over black mixes to olive, which is what
   made the last one look like a murky blob. */
.talk__inner{
  position:absolute;top:50%;left:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:
    0 0 calc(9px + var(--near) * 7px) calc(1px + var(--near) * 2px) rgba(159,255,0,.45),
    0 0 calc(20px + var(--near) * 16px) calc(3px + var(--near) * 4px) rgba(255,255,255,.10);
  animation:breathe 7.5s ease-in-out infinite;
  transition:box-shadow 1.1s ease;
}
@keyframes breathe{
  0%,100%{transform:scale(.88);opacity:.72}
  50%    {transform:scale(1);   opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .talk__ring::before,.talk__ring::after,.talk__inner{animation:none}
  .talk__ring::before{opacity:.45;transform:scale(.62)}
  .talk__ring::after{display:none}
}
.talk__idle p{margin:0 0 18px;font-size:14px;color:#B9B9B9;}
.talk__go{
  cursor:pointer;border:0;border-radius:9999px;
  background:var(--white);color:#000;
  font:500 14px/1 var(--face);height:46px;padding:0 30px;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.talk__go:hover{opacity:.9;transform:translateY(-1px);}
.talk__go:disabled{opacity:.4;cursor:default;transform:none;}
.talk__small{margin:16px 0 0 !important;font-size:12px !important;color:#6E6E6E !important;}

@media (max-width:900px){
  .talk__in{grid-template-columns:1fr;gap:28px;}
  .talk__say h2,.talk__say .deck__sub,.talk__note{max-width:none;}
}

.diary__say h2 a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);}
.diary__say h2 a:hover{border-bottom-color:rgba(255,255,255,.7);}

/* ---- mobile menu ---- */
.sheet{
  position:fixed;inset:0;z-index:55;
  background:rgba(11,11,11,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);
}
.sheet[hidden]{display:none;}
.sheet__links{display:grid;gap:2px;width:min(420px,100%);}
.sheet__links a{
  display:flex;align-items:center;
  min-height:60px;padding:0 4px;
  font:400 clamp(1.6rem,7vw,2.2rem)/1 var(--face);
  letter-spacing:-.03em;
  color:var(--soft);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sheet__links a:active,.sheet__links a:hover{color:var(--white);}
.sheet__cta{
  margin-top:22px;border-bottom:0 !important;
  justify-content:center !important;
  background:var(--white);color:#000 !important;
  border-radius:9999px;min-height:56px !important;
  font-size:16px !important;font-weight:500;letter-spacing:-.01em !important;
}
.burger.is-open i:first-child{transform:translateY(3.75px) rotate(45deg);}
.burger.is-open i:last-child{transform:translateY(-3.75px) rotate(-45deg);}
.burger i{transition:transform .35s cubic-bezier(.22,.61,.36,1);}

/* ---- thumb-sized targets ---- */
@media (max-width:900px){
  .burger{width:44px;height:44px;}
  .pill{height:44px;padding:0 20px;}
  .chan button,.sectors button,.tabs button{padding:14px 18px;min-height:44px;}
  .asks li{padding-top:17px;padding-bottom:17px;}
  .grow__btn,.diary__btn,.dg__take,.talk__go,.gate__btn,.addon__btn,.tryText__row button{
    min-height:46px;
  }
  .app__side li{min-height:44px;}
  .tryText__row input{min-height:48px;}
}

@media (max-width:900px){
  /* the console search fields inside each panel */
  .app__find input{min-height:44px;}
  /* the wordmark is a small logo, so give it a thumb area without resizing it */
  .mark{display:inline-flex;align-items:center;min-height:44px;}
  .foot__base .mark--sm{min-height:44px;}
}

/* ---- mobile density ---- */
@media (max-width:760px){
  /* sections were desktop-sized. Tighten the vertical rhythm. */
  .block,.night,.grow,.reel,.lab,.deck,.diary,.talk,.tease{
    padding-top:clamp(48px,7vh,68px);
    padding-bottom:clamp(48px,7vh,68px);
  }
  .hero{padding-top:clamp(96px,13vh,120px);}

  /* the night log: one line per call, chip inline, and only the first five */
  .night__log li{
    grid-template-columns:3.6em 1fr auto;
    row-gap:0;
    padding:11px 14px;
    font-size:12.5px;
  }
  .night__log em{font-size:13px;}
  .night__log i{
    grid-column:auto;justify-self:end;
    font-size:9.5px;padding:3px 7px;
  }
  .night__log li:nth-child(n+6){display:none;}
  .night__more{
    display:block;padding:13px 14px;
    border-top:1px solid rgba(255,255,255,.055);
    font:400 12px/1 var(--ui);color:rgba(255,255,255,.42);
  }

  /* the features teaser list was ten lines. Six is the same point. */
  .tease__list li:nth-child(n+7){display:none;}

  /* the ask list, trimmed */
  .asks li{padding:14px 16px 14px 36px;font-size:14px;}
  .asks li::before{left:15px;}

  /* the console panel is tall on a phone */
  .app{min-height:0;}
  .app__body{padding:14px;grid-template-columns:1fr;gap:14px;}
  .app__rail{order:2;}
  .said{font-size:13px;margin-bottom:12px;}

  /* comparison rows */
  .vs__row{padding:12px 16px;}
}

/* ---- bottom scrim ---- */
/* A soft light at the foot of the viewport, so the page always looks like it
   carries on past the fold rather than stopping dead. */
.scrim{
  position:fixed;left:0;right:0;bottom:0;
  height:clamp(90px,13vh,150px);
  pointer-events:none;z-index:40;
  background:linear-gradient(to top,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 34%,
    rgba(255,255,255,0) 100%);
  opacity:1;
  transition:opacity .6s ease;
}
.scrim.gone{opacity:0;}
@media (prefers-reduced-motion:reduce){.scrim{transition:none;}}

/* ---- the try-it box, once it is live ---- */
.live{
  width:100%;height:100%;min-height:inherit;
  display:grid;grid-template-rows:auto 1fr auto;gap:14px;
  font-family:var(--ui);text-align:left;
}
.live__top{display:flex;align-items:center;gap:9px;}
.live__lamp{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.30);
  transition:background 1.2s ease;
}
.live__lamp--hear{background:var(--signal);}
.live__lamp--talk{background:var(--signal);animation:live-say 1.9s ease-in-out infinite;}
@keyframes live-say{0%,100%{opacity:1}50%{opacity:.28}}
.live__state{
  font:500 12px/1 var(--ui);letter-spacing:.02em;color:var(--faint);
  flex:1;min-width:0;
}
.live__end{
  cursor:pointer;border:1px solid var(--hair);background:transparent;
  color:var(--faint);border-radius:9999px;
  font:500 11.5px/1 var(--ui);height:27px;padding:0 13px;flex:none;
  transition:color .5s ease,border-color .5s ease;
}
.live__end:hover{color:var(--white);border-color:rgba(255,255,255,.28);}

.live__lines{
  list-style:none;margin:0;padding:0;
  overflow-y:auto;overscroll-behavior:contain;
  display:grid;gap:12px;align-content:start;
  min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.live__lines::-webkit-scrollbar{width:3px;}
.live__lines::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px;}
/* ⛔ FADE, DO NOT MOVE.
   Each line used to slide up 5px over 0.55s as it arrived. On its own that is
   a nice touch. In a live conversation the bubble above is still growing while
   this one is sliding, the scroller is following both, and the whole rail
   appears to shudder. That is the jumpiness, and it is the animation, not the
   network.
   Opacity alone gives the same sense of something arriving and moves nothing,
   so the rail only ever changes height for words that actually landed. */
.live__line{
  display:grid;gap:3px;
  animation:live-in .32s ease both;
  contain:layout style;      /* a line reflowing cannot reflow its siblings */
}
@keyframes live-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.live__line{animation:none;}}
.live__who{
  font:500 10.5px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.live__line--us .live__who{color:var(--signal);}
.live__said{font:400 14.5px/1.5 var(--ui);color:var(--soft);}
.live__line--us .live__said{color:var(--white);}
/* The live dot rides at the end of the text. ⛔ It is inline on purpose, so
   it sits after the last word rather than pinned somewhere, but it must never
   be able to push a line onto a new row on its own: at the end of a full line
   that would make the bubble grow and shrink as words arrive. */
.live__line.is-live .live__said::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--signal);margin-left:5px;vertical-align:baseline;
  animation:live-say 1.4s ease-in-out infinite;
}
.live__line.is-live .live__said{padding-right:11px;}
.live__line.is-live .live__said::after{margin-right:-11px;}

.live__foot{display:flex;align-items:center;gap:11px;}
.live__level{display:flex;align-items:center;gap:2.5px;height:15px;flex:none;}
.live__level i{
  display:block;width:2.5px;height:15px;border-radius:2px;
  background:rgba(255,255,255,.34);
  transform:scaleY(.18);transform-origin:center;
  transition:transform .11s linear;
}
.live__hint{font:400 11.5px/1.4 var(--ui);color:rgba(255,255,255,.34);}

@media (max-width:900px){
  .talk__box{min-height:340px;}
  .live__lines{max-height:210px;}
}
@media (max-width:420px){
  .live__hint{font-size:11px;}
  .live__said{font-size:14px;}
}

/* ⛔ Belt and braces on the iOS number detector. The meta tag stops it finding
   them; this catches any tel: link we write on purpose, and any Android or
   in-app browser that ignores the meta, so a number never turns up in somebody
   else's blue. */
/* ⛔ :not([class]) MATTERS. Without it this rule beat every styled button on
   the site that happens to be a mailto, because an attribute selector outranks
   a plain class. It turned the partner page's white button into white text on
   white. This only wants to catch bare numbers and addresses in running text,
   which never carry a class. */
a[href^="tel:"]:not([class]),
a[href^="mailto:"]:not([class]){
  color:inherit;text-decoration:none;-webkit-text-decoration-color:transparent;
}

/* The nav while the menu is open: no background of its own, whatever the
   scroll position had decided. The sheet behind it provides the ground. */
.nav.over-menu,
.nav.stuck.over-menu,
.nav.stuck.onpaper.over-menu{
  background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.nav.stuck.onpaper.over-menu .mark{color:var(--white);}
.nav.stuck.onpaper.over-menu .mark span.mk{color:var(--signal);}
.nav.stuck.onpaper.over-menu .burger i{background:var(--white);}

/* The ring IS the button. ⛔ It already lit up as you approached it, which is
   the whole language of a control, and then you had to click something else.
   A button element, so it takes a tap, a keyboard and a focus ring. */
button.talk__ring{
  padding:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease;
}
button.talk__ring:hover{transform:scale(1.06);}
button.talk__ring:active{transform:scale(.97);}
button.talk__ring:focus-visible{
  outline:2px solid var(--signal);outline-offset:6px;
}

/* Footer's quieter row: where a partner or a developer goes looking, and a
   shop owner never has to. */
.foot__more{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;
}
.foot__more a{
  font:400 13px/1 var(--ui);color:rgba(255,255,255,.42);
  text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.foot__more a:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.3);}
.foot--light .foot__more a,
.foot.onpaper .foot__more a{color:rgba(11,11,11,.5);}

/* ── the ringer ───────────────────────────────────────────────────────────
   ⛔ WHY NOT A WAVEFORM. Every voice product shows one, so a waveform says
   "AI voice" and nothing about Ansard. This answers a PHONE, so what idles
   here is a line, ringing.

   The cadence is the real British one. BT ringing tone is 400ms on, 200ms off,
   400ms on, then two seconds of silence, and that pattern is recognisable to
   anyone in this country without a word of explanation. It is also the one
   thing about this product nobody else can borrow without looking like they
   borrowed it. */
.ringer{
  display:block;width:100%;max-width:420px;margin:0 auto 26px;
  padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.ringer:hover{transform:scale(1.015);}
.ringer:active{transform:scale(.995);}
.ringer:focus-visible{outline:2px solid var(--signal);outline-offset:12px;border-radius:8px;}

/* The line. A phone line: thin, level, waiting. */
.ringer__line{
  position:relative;display:block;height:74px;
}
.ringer__line::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),rgba(255,255,255,.22) 22%,
    rgba(255,255,255,.22) 78%,rgba(255,255,255,0));
}

/* The dot on the line is where the call is. */
.ringer__dot{
  position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--signal);
  box-shadow:0 0 12px 2px rgba(159,255,0,.4);
  animation:ring-dot 3s steps(1,end) infinite;
}

/* Two pulses out of the dot, in the real cadence: on, off, on, long pause. */
.ringer__pulse{
  position:absolute;top:50%;left:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1px solid rgba(159,255,0,.55);
  opacity:0;animation:ring-out 3s cubic-bezier(.15,.6,.3,1) infinite;
}
.ringer__pulse--b{animation-delay:.6s;}

@keyframes ring-out{
  0%   {transform:scale(.5);opacity:0}
  4%   {opacity:.85}
  /* 400ms of a 3s loop is 13.3%: the ring carries out and is gone. */
  13.3%{transform:scale(6);opacity:0}
  100% {transform:scale(6);opacity:0}
}
/* The dot brightens for each of the two bursts, then rests. */
@keyframes ring-dot{
  0%,13.3%   {opacity:1}
  13.4%,19.9%{opacity:.35}
  20%,33.3%  {opacity:1}
  33.4%,100% {opacity:.35}
}

.ringer__say{
  display:block;margin-top:6px;
  font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(159,255,0,.75);
  animation:ring-say 3s steps(1,end) infinite;
}
@keyframes ring-say{
  0%,33.3%{opacity:1}
  33.4%,100%{opacity:.4}
}

@media (prefers-reduced-motion:reduce){
  .ringer__pulse{animation:none;opacity:.4;transform:scale(2.4);}
  .ringer__dot,.ringer__say{animation:none;opacity:1;}
}
@keyframes tape-ring{
  0%,13.3%{opacity:1}  13.4%,19.9%{opacity:.2}
  20%,33.3%{opacity:1} 33.4%,100%{opacity:.2}
}
@keyframes tape-in{from{opacity:0}to{opacity:1}}

.orb__say{
  text-align:center;font:400 14.5px/1.5 var(--ui);
  color:rgba(255,255,255,.5);margin:0 0 18px;
}

/* The core. Layered so it has depth rather than being a flat disc: a hot
   centre, a body, and a rim that catches the light. */
.orb__core{
  position:absolute;inset:34%;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #E9FFB0 0%, #B9FF3D 26%, #7ACC00 62%, #3C6600 100%);
  box-shadow:
    inset 0 -6px 14px rgba(0,0,0,.45),
    inset 0 4px 10px rgba(255,255,255,.35),
    0 0 30px 4px rgba(159,255,0,.30),
    0 0 90px 18px rgba(159,255,0,.12);
  animation:orb-breathe 6.5s ease-in-out infinite;
}
@keyframes orb-breathe{
  0%,100%{transform:scale(.94)}
  50%    {transform:scale(1.05)}
}

/* A haze behind everything, so the orb sits IN the card rather than on it. */
.orb__glow{
  position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(159,255,0,.16),rgba(159,255,0,0) 62%);
  animation:orb-breathe 6.5s ease-in-out infinite reverse;
}

/* ⛔ THE RINGS CARRY IN THE REAL BRITISH CADENCE. BT ringing tone is 400ms on,
   200ms off, 400ms on, then two seconds of nothing. Everybody here knows that
   rhythm without being told what it is, and no competitor is using it. */
.orb__ring{
  position:absolute;inset:22%;border-radius:50%;
  border:1px solid rgba(159,255,0,.5);
  opacity:0;pointer-events:none;
  animation:orb-out 3s cubic-bezier(.16,.62,.3,1) infinite;
  will-change:transform,opacity;
}
.orb__ring--b{animation-delay:.6s;}
.orb__ring--c{animation-delay:.12s;border-color:rgba(255,255,255,.16);}
@keyframes orb-out{
  0%    {transform:scale(.62);opacity:0}
  6%    {opacity:.75}
  /* 400ms of a 3s loop is 13.3%: the ring is gone before the second burst */
  13.3% {transform:scale(2.15);opacity:0}
  100%  {transform:scale(2.15);opacity:0}
}
.orb:hover .orb__ring{border-color:rgba(159,255,0,.75);}

.orb__say{
  text-align:center;font:400 14.5px/1.5 var(--ui);
  color:rgba(255,255,255,.5);margin:0 0 18px;
}

@media (prefers-reduced-motion:reduce){
  .orb__core,.orb__glow{animation:none;}
  .orb__ring{animation:none;opacity:.3;transform:scale(1.5);}
}

/* ── the live line ────────────────────────────────────────────────────────
   ⛔ Built to the reference he gave after five wrong guesses: a trace spiking
   across a faint grid, with the orb sitting on the line. Not a waveform,
   which every voice product shows. Not a phone screen, which this page has
   two of already.
   The spike rhythm is the British ring cadence, which is the part nobody else
   can borrow without it being obvious. */
.trace{
  position:relative;display:block;width:100%;
  padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  margin:clamp(10px,2vw,22px) 0 clamp(20px,3vw,28px);
  border-radius:16px;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.trace:hover{transform:scale(1.01);}
.trace:active{transform:scale(.995);}
.trace:focus-visible{outline:2px solid var(--signal);outline-offset:6px;}
.trace__c{display:block;width:100%;height:auto;}

/* ⛔ The mark, not an orb. A shaded ball is the cheapest thing you can put on
   a dark page. This is the wordmark's own "a." sitting on the line, and the
   dot beats in time with the spikes.
   The beat is a 3s loop with the hit at 20%, which is 0.6s: the exact British
   ring cadence CADENCE/LOOP in js/trace.js draws. Change one, change both. */
.trace__mk{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(64px,9.5vw,82px);aspect-ratio:1;
  border-radius:26%;                       /* the squircle, not a circle */
  display:flex;align-items:center;justify-content:center;gap:.09em;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(159,255,0,.13),rgba(11,11,11,.94) 70%),
    #0E0E0E;
  border:1px solid rgba(159,255,0,.26);
  box-shadow:0 0 0 6px rgba(11,11,11,.72),      /* holds the line off the edge */
             0 0 40px 4px rgba(159,255,0,.11),
             inset 0 1px 0 rgba(255,255,255,.05);
}
.trace__mk b{
  font-family:var(--face);font-weight:600;
  font-size:clamp(30px,4.4vw,38px);line-height:1;
  letter-spacing:-.04em;color:#fff;
  transform:translateY(-.02em);
}
.trace__mk i{
  width:.20em;aspect-ratio:1;border-radius:50%;
  font-size:clamp(30px,4.4vw,38px);
  background:var(--signal);
  align-self:flex-end;margin-bottom:.14em;
  animation:mk-beat 3s linear infinite;
}
/* two hits then quiet, the way a British phone rings */
@keyframes mk-beat{
  0%   {transform:scale(1);   box-shadow:0 0 10px 1px rgba(159,255,0,.5)}
  6%   {transform:scale(1.7); box-shadow:0 0 20px 5px rgba(159,255,0,.8)}
  14%  {transform:scale(1);   box-shadow:0 0 10px 1px rgba(159,255,0,.5)}
  20%  {transform:scale(1.7); box-shadow:0 0 20px 5px rgba(159,255,0,.8)}
  28%  {transform:scale(1);   box-shadow:0 0 10px 1px rgba(159,255,0,.5)}
  100% {transform:scale(1);   box-shadow:0 0 10px 1px rgba(159,255,0,.5)}
}
.trace:hover .trace__mk{
  border-color:rgba(159,255,0,.44);
  box-shadow:0 0 0 6px rgba(11,11,11,.72),
             0 0 54px 8px rgba(159,255,0,.18),
             inset 0 1px 0 rgba(255,255,255,.06);
}
@media (prefers-reduced-motion:reduce){
  .trace__mk i{animation:none;}
}

/* ---- start form -----------------------------------------------------------
   23 Aug. Twenty "Start free" buttons and every one led to another page with a
   "Start free" button on it. This is the end of that loop. Two rows of two, so
   it reads as four short questions rather than a form, because the last one was
   "way too long awful". */
.start{
  margin:30px auto 0;
  max-width:680px;
  text-align:left;
  display:flex;flex-direction:column;gap:14px;
}
.start__row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.start__f{display:flex;flex-direction:column;gap:7px;min-width:0;}
.start__f span{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(11,11,11,.5);
}
.start__f input,
.start__f select{
  height:50px;width:100%;box-sizing:border-box;
  border:1px solid rgba(11,11,11,.16);border-radius:11px;
  background:#fff;color:var(--ink);
  padding:0 14px;font:inherit;font-size:15px;
  transition:border-color .25s ease;
  -webkit-appearance:none;appearance:none;
}
.start__f select{
  /* A native arrow on a white field looks like a browser default, which is the
     one thing this page must never look like. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  padding-right:38px;
}
.start__f input::placeholder{color:rgba(11,11,11,.3);}
.start__f input:focus,
.start__f select:focus{outline:none;border-color:rgba(11,11,11,.55);}
.start__f input:focus-visible,
.start__f select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.start__f input[aria-invalid="true"]{border-color:#B4341F;}

/* Nobody sees this. Anything that fills it in is not a person. */
.start__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.start button[type="submit"]{margin-top:6px;align-self:flex-start;}
.start button[disabled]{opacity:.5;cursor:default;}
.start__said{
  margin:2px 0 0;min-height:20px;
  font-size:14.5px;line-height:1.5;color:rgba(11,11,11,.62);
}
.start__said.bad{color:#B4341F;}
.start__said.good{color:var(--ink);font-weight:500;}

/* ⛔ 390px. Two columns will not carry a label and a 50px field at that width. */
@media (max-width:640px){
  .start__row{grid-template-columns:1fr;}
  .start button[type="submit"]{align-self:stretch;width:100%;}
}