/* The features page.
   ⛔ REBUILT, NOT PATCHED. It was 44 items in ten numbered groups with a
   sidebar index and a "0 of 44 read" progress bar. That is documentation, and
   his word for it was awful. Nobody reads a manual to decide whether to buy a
   phone answering service.

   ⛔ THE STRUCTURE IS THE ARGUMENT. It follows one call from the moment
   somebody dials to the moment the owner finds out, in that order. The numbers
   stay because this genuinely IS a sequence, which is the only thing that
   earns a numbered marker. Everything else that was numbered has gone.

   ⛔ AND EVERY LINE CARRIES ITS PLAN. Half of these used to say "Add on" for
   things that are now inside a plan, which was selling something twice. The
   badge answers "do I get that on ninety nine pounds" on the spot, which is
   the question the page exists to answer. */

/* ⛔ THE GROUND GOES ON THE BODY, NOT ON THE SECTIONS.
   Twice now. First I dropped the dark background entirely and shipped white
   text on cream paper. Then I put it back on .act, which is ALSO the
   max-width:1080px grid, so the black only painted the middle column and the
   page read as a dark box floating on cream with white gutters. His words:
   "this looks shit". He was right both times.
   One rule, on the body, full bleed, cannot be constrained by a container. */
body{background:var(--ink);color:var(--white);}

.fh{
  padding:clamp(112px,14vh,158px) var(--pad) clamp(46px,6vw,72px);
  border-bottom:1px solid var(--hair);
}
.fh__in{max-width:1080px;margin:0 auto;}
.fh h1{
  font-family:var(--face);font-weight:600;letter-spacing:-.036em;
  font-size:clamp(2.1rem,6.2vw,4rem);line-height:1.02;
  margin:0 0 20px;max-width:16ch;text-wrap:balance;
}
.fh .page__lede{max-width:56ch;margin:0 0 30px;}
.fh__key{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font:500 12.5px/1 var(--ui);color:var(--faint);margin:0;
}
.fh__key a{color:var(--soft);text-decoration:none;margin-left:6px;
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;}
.fh__key a:hover{color:#fff;border-color:var(--signal);}

/* the plan badge */
.p{
  display:inline-block;flex:0 0 auto;
  font:600 9.5px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  letter-spacing:.11em;text-transform:uppercase;
  padding:5px 8px;border-radius:5px;white-space:nowrap;
}
.p--line{color:rgba(255,255,255,.62);background:rgba(255,255,255,.07);}
.p--counter{color:#CFE9FF;background:rgba(120,190,255,.13);}
.p--switchboard{color:var(--signal);background:rgba(159,255,0,.12);}

/* ── a call, in time ────────────────────────────────────────────────────
   ⛔ NOT THE HOMEPAGE HANDSET. The build before this was the same phone with a
   list beside it, which is the homepage reel wearing a different hat. His rule,
   and he was right to call it: two pages of one site do not share a device.

   Here the device is the clock. Ansard sits above the line, the caller below,
   and the width of a block is how long that line takes to say. Nothing else on
   this site draws a call as a duration, and a phone company drawing time is
   about as on the nose as an idea gets. */
.stage{padding:clamp(34px,5vw,58px) var(--pad) clamp(56px,8vw,96px);}
.stage__in{max-width:1080px;margin:0 auto;}

/* which part of a call */
.gtabs{
  display:flex;gap:4px;flex-wrap:wrap;
  padding:5px;border:1px solid var(--hair);border-radius:9999px;
  width:max-content;max-width:100%;background:#141415;
  margin-bottom:clamp(18px,2.4vw,26px);
}
.gtab{
  border:0;background:none;cursor:pointer;border-radius:9999px;
  font:500 13px/1 var(--face);letter-spacing:-.01em;
  color:rgba(255,255,255,.5);padding:10px 17px;
  transition:background .4s ease,color .4s ease;
}
.gtab:hover{color:rgba(255,255,255,.8);}
.gtab.on{background:rgba(255,255,255,.09);color:#fff;}
.gtab:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* which feature */
.picks{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:clamp(26px,3.6vw,40px);}
.pick{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--hair);border-radius:9999px;
  background:none;cursor:pointer;padding:9px 9px 9px 15px;
  font:450 13.5px/1 var(--face);letter-spacing:-.012em;
  color:rgba(255,255,255,.56);
  transition:border-color .4s ease,color .4s ease,background .4s ease;
}
.pick:hover{color:#fff;border-color:rgba(255,255,255,.22);}
.pick:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
.pick.on{color:#fff;border-color:rgba(159,255,0,.42);background:rgba(159,255,0,.06);}

/* the call itself */
.call{position:relative;}
.call__cap{
  font:400 12.5px/1.5 var(--ui);color:rgba(255,255,255,.34);
  margin:0 0 16px;
}
.call__track{
  position:relative;height:230px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:
    /* the line the call runs along */
    linear-gradient(180deg,transparent calc(50% - 1px),
                    rgba(159,255,0,.22) calc(50% - 1px),
                    rgba(159,255,0,.22) calc(50% + 1px),transparent calc(50% + 1px)),
    /* seconds, faintly */
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 10%);
}
.seg{
  position:absolute;min-width:78px;
  padding:9px 12px;border-radius:10px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.seg.in{opacity:1;transform:none;}
.seg b{
  display:block;font:600 9px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:6px;
}
.seg span{
  display:block;font:450 13px/1.4 var(--face);letter-spacing:-.012em;
}
/* ⛔ Ansard above the line, the caller below. Not colour coded, positioned:
   you can see who is doing the talking without reading a key. */
.seg--us{
  bottom:calc(50% + 14px);
  background:rgba(159,255,0,.075);border:1px solid rgba(159,255,0,.26);
}
.seg--us b{color:var(--signal);}
.seg--us span{color:#fff;}
.seg--them{
  top:calc(50% + 14px);
  background:rgba(255,255,255,.05);border:1px solid var(--hair);
}
.seg--them b{color:rgba(255,255,255,.4);}
.seg--them span{color:rgba(255,255,255,.8);}
/* it talking to itself sits ON the line, because nobody heard it */
.seg--note{
  top:50%;transform:translateY(calc(-50% + 6px));
  background:rgba(11,11,11,.94);border:1px dashed rgba(159,255,0,.3);
}
.seg--note.in{transform:translateY(-50%);}
.seg--note b{color:rgba(159,255,0,.6);}
.seg--note span{color:rgba(255,255,255,.62);font-style:italic;}

.call__ruler{position:relative;height:22px;margin-top:8px;}
.ruler__t{
  position:absolute;transform:translateX(-50%);
  font:500 10px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  letter-spacing:.08em;color:rgba(255,255,255,.24);
  font-variant-numeric:tabular-nums;
}
.call__out{
  margin:20px 0 0;padding:14px 17px;
  border:1px solid rgba(159,255,0,.3);border-radius:11px;
  background:rgba(159,255,0,.05);
  font:450 14.5px/1.45 var(--face);letter-spacing:-.012em;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.call__out.in{opacity:1;transform:none;}

/* ── the closing pair ───────────────────────────────────────────────── */
.safe{padding:clamp(52px,7vw,88px) var(--pad);border-bottom:1px solid var(--hair);}
.safe__in{max-width:1080px;margin:0 auto;}
.safe h2{
  font-family:var(--face);font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.2rem,2.6vw,1.6rem);margin:0 0 26px;max-width:26ch;
}
.safe dl{
  margin:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden;
}
.safe dl > div{background:var(--ink);padding:20px 18px;}
.safe dt{font-family:var(--face);font-weight:500;font-size:14.5px;
  letter-spacing:-.012em;margin-bottom:7px;}
.safe dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--faint);}

.fend{padding:clamp(60px,9vw,110px) var(--pad);text-align:center;}
.fend__in{max-width:620px;margin:0 auto;}
.fend h2{
  font-family:var(--face);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 14px;
}
.fend p{font-size:15.5px;line-height:1.6;color:var(--faint);margin:0 0 28px;}

/* ⛔ Verified at 390px: the act collapses to one column, the badge drops
   under its line rather than squeezing the text, nothing scrolls sideways. */
/* ⛔ Below 780 the track becomes a column: time still runs top to bottom, and
   who is talking is shown by which side it sits on. Verified at 390px. */
@media (max-width:780px){
  .call__track{
    height:auto;min-height:0;padding:6px 0;
    display:flex;flex-direction:column;gap:9px;
    background:linear-gradient(90deg,transparent calc(50% - 1px),
      rgba(159,255,0,.2) calc(50% - 1px),rgba(159,255,0,.2) calc(50% + 1px),
      transparent calc(50% + 1px));
  }
  .seg{position:static !important;width:auto !important;max-width:78%;
       transform:translateY(6px) !important;}
  .seg.in{transform:none !important;}
  .seg--us{align-self:flex-start;}
  .seg--them{align-self:flex-end;}
  .seg--note{align-self:center;max-width:92%;}
  .call__ruler{display:none;}
}
@media (max-width:520px){
  .pick{font-size:12.5px;padding:8px 8px 8px 13px;}
  .gtab{font-size:12px;padding:9px 13px;}
}