/* The landing pages' own type. Layout, ground, radius and the nine come from
   /nine/shell.css; the pack supplies the colour. This file is only what a
   product page needs that a business site does not. */
/* Claude's interface text, as on /pt. Anthropic's own faces are Styrene and
   Tiempos and are licensed rather than on a CDN; Inter is the closest freely
   available match. Literata was a serif and read as Times on any machine
   without it. Base up from the browser default to 15px -- a product page read
   on a projector at the back of a room, not on a laptop at arm's length. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
html,body{font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",
  "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;letter-spacing:.005em;margin:0;min-height:100%;
  -webkit-font-smoothing:antialiased}
h3{font:inherit;font-weight:600;font-size:.82rem;margin:0 0 .35rem;opacity:.72}
.name{font-size:clamp(1rem,1.4vw,1.35rem);line-height:1.08;letter-spacing:-.02em;margin:0}
.claim-wide{font-size:clamp(.95rem,1.55vw,1.3rem);line-height:1.18;letter-spacing:-.015em;
            margin:0;text-wrap:balance}
.note{font-size:.76rem;opacity:.65;line-height:1.4;margin:.35rem 0 0}
.col{display:flex;flex-direction:column;height:100%;min-height:0}
.scroll{overflow-y:auto;min-height:0;flex:1 1 auto;scrollbar-width:thin}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;height:100%;min-height:0;overflow-y:auto}
ul.plain{list-style:none;margin:0;padding:0;font-size:.84rem;line-height:1.45}
ul.plain li{margin:.4rem 0;padding-left:.9em;position:relative}
ul.plain li::before{content:"—";position:absolute;left:0;opacity:.45}

/* The ladder. The rung you are on is marked rather than hidden: a visitor who
   can see the free rung and the one above it can place themselves, and a page
   that hides the cheaper option is a page that will be checked against. */
ul.rungs{list-style:none;margin:0;padding:0;font-size:.78rem}
ul.rungs li{display:flex;gap:.5rem;align-items:baseline;padding:.3rem 0;opacity:.55}
ul.rungs li+li{border-top:1px solid var(--rule)}
ul.rungs li[data-here]{opacity:1;font-weight:600}
ul.rungs b{font-variant-numeric:tabular-nums;min-width:4.2em}

.urgent{display:flex;flex-direction:column;height:100%}
.stat{font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,3vw,2.6rem);line-height:.96;
      margin:0 0 .5rem;letter-spacing:-.03em}
.stat small{font-size:.34em;opacity:.55;margin-left:.3em;letter-spacing:0}

dl.faq-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 1.4rem;margin:0;font-size:.8rem}
dl.faq-cols dt{font-weight:600;margin:.4rem 0 .1rem}
dl.faq-cols dd{margin:0;opacity:.8;line-height:1.4}

.buy{display:flex;flex-direction:column;height:100%;min-height:0;gap:.25rem}
.buy .go{margin-top:auto}
.price{font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;margin:0}
button{font:inherit;font-weight:600;padding:.6rem .95rem;border:0;border-radius:.4rem;cursor:pointer;
       background:var(--ink);color:var(--paper);width:100%}
button:disabled{opacity:.45;cursor:default}

/* The shallow rows are a hard budget: 113px top, 143px bottom against a 16:9
   frame. These are measured trims, not taste — the claim ran to three lines,
   the ladder to four rows with its label, and the price stack to six pixels
   past the canvas. */
.canvas{overflow:hidden}
.claim-wide{font-size:clamp(.9rem,1.35vw,1.12rem);line-height:1.22}
ul.rungs{font-size:.74rem}
ul.rungs li{padding:.22rem 0}
.buy{gap:.15rem}
.price{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.buy .note{margin:.15rem 0 0;font-size:.72rem}

/* The ladder is three rows and a label in a 113px canvas. It was 24px over:
   the label, the padding and three bordered rows do not fit at .74rem. */
ul.rungs{font-size:.7rem;line-height:1.25}
ul.rungs li{padding:.12rem 0}
ul.rungs b{min-width:3.6em}
.name{font-size:clamp(.95rem,1.25vw,1.2rem)}

/* Still 14 over: the canvas label's own margin and the frame padding, not the
   rows. Same lesson as the Agentimeter — on a shallow row the padding written
   for a deep one is most of the budget. */
.canvas[data-space="poster"]{--frame-pad:6px 10px 8px}
.canvas[data-space="poster"] > h2{margin-bottom:2px}
.canvas[data-space="talk"]{--frame-pad:6px 12px 8px}


/* ── the meter ──────────────────────────────────────────────────────────────
   The dial is the look. It carries its own colour and its own banded arc from
   /agentible/meter.js, so nothing here paints it — this only gives it room and
   puts the box under it. The three depth rows that used to sit here are gone:
   Is 13/29, Can 6/30, Ought 8/31 is the kernel explaining itself to somebody
   who has not asked yet. */
.meter{display:flex;flex-direction:column;align-items:center;justify-content:center;
       height:100%;min-height:0;gap:.1rem;text-align:center}

/* THE FACE AND THE FORM SHARE ONE BOX. The SVG's viewBox is 1000x580 and the
   form is positioned as a percentage of that same box, so the two scale
   together and the needle's pivot stays under the field at every width. Put
   the form outside this and it drifts off the dial the moment the canvas
   changes shape. */
.face{position:relative;width:100%;max-width:470px;aspect-ratio:1000/580}
.face .dial{position:absolute;inset:0;line-height:0}
.face .dial svg{width:100%;height:100%;display:block}
.face form.box{position:absolute;left:14%;right:14%;top:63%;width:auto}
/* The mark sits smaller and quieter than the dial that replaces it: it is a
   face waiting for a reading, not a reading. */
.meter .dial[data-unscored]{opacity:.42;margin-bottom:.6rem}
.meter .dial svg{max-width:100%;height:auto}
.meter .band{font-size:clamp(.78rem,1.05vw,.92rem);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;opacity:.72;
             margin:0;line-height:1.1}
.meter .note{margin:.2rem 0 .7rem;max-width:44ch}

form.box{display:flex;gap:.5rem;align-items:stretch;margin:0;width:min(100%,32rem);
         background:var(--card);border:1px solid var(--rule);border-radius:.55rem;
         padding:.4rem .4rem .4rem 1rem;text-align:left}
form.box:focus-within{border-color:var(--muted)}
form.box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;
               font-family:inherit;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
form.box input::placeholder{font-weight:400;opacity:.5}
form.box button{width:4.6rem;padding:.5rem .4rem;border-radius:.45rem;line-height:1.1;
                font-weight:700;font-size:.86rem}

/* ── the three stages ───────────────────────────────────────────────────────
   Above the dial, as on the napkin's sibling: the figure first because that is
   what is being waited for, then the word, then what it means. A stage stays
   dim until its own criteria land, so the row fills left to right and the
   filling IS the progress bar — there is no second one. */
ul.stages{list-style:none;display:flex;gap:1.6rem;justify-content:center;
          margin:0 0 .3rem;padding:0;flex-wrap:wrap}
ul.stages li{text-align:center;opacity:.34;transition:opacity .35s ease}
ul.stages li[data-done]{opacity:1}
ul.stages b{display:block;font-variant-numeric:tabular-nums;font-size:1.15rem;
            font-weight:600;letter-spacing:-.02em;line-height:1.1}
ul.stages span{display:block;font-size:.76rem;font-weight:600;letter-spacing:.02em}
ul.stages i{display:block;font-style:normal;font-size:.68rem;opacity:.6}

/* While it runs, the caption stops competing with the needle. */
.meter[data-running] .band{opacity:.35}

/* ── the film ───────────────────────────────────────────────────────────────
   One line at a time about THEIR site, and ninety ticks that fill as the
   capabilities are checked. The bar is the ninety itself rather than a
   percentage of an unknown total, so a visitor can count what is missing. */
.film{width:min(100%,34rem);margin:.5rem auto 0}
.film[hidden]{display:none}
.film .now{margin:0 0 .4rem;font-size:.82rem;min-height:1.3em;line-height:1.3;
           font-variant-numeric:tabular-nums;opacity:.85}
.ticks{display:flex;gap:1px;height:16px;align-items:stretch}
.ticks i{flex:1 1 0;background:var(--rule);border-radius:1px;opacity:.45;
         transition:background .18s ease,opacity .18s ease}
.ticks i[data-state="got"]{background:var(--ok,#1a7f5a);opacity:1}
.ticks i[data-state="missed"]{background:var(--ink);opacity:.16}

/* The three bands carry their own denominator, because they are 29, 30 and 31
   and not a tidy thirty each. */
ul.stages b small{font-size:.62em;opacity:.5;font-weight:400;letter-spacing:0}


/* The canvas is 497 tall and has to hold the bands, the face, the film, the
   verdict and the call to action. At 640 the face alone took 371 and pushed
   the film out of the bottom of the canvas — where it was still running,
   invisibly. 520 leaves room for everything that has to be seen. */
.meter .note{margin:.15rem 0 0}
.meter .band{margin:.25rem 0 0}
.fix{display:inline-block;margin-top:.45rem;padding:.5rem 1.1rem;border-radius:.4rem;
     background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;
     font-size:.86rem;letter-spacing:-.01em}
.fix[hidden]{display:none}
.fix:hover{opacity:.88}

/* ── the score, which is the whole point of the page ──────────────────────
   Until 28 Sep the biggest thing on a finished scan was the level's NAME and
   the number was a clause in a grey sentence beneath it. A visitor came for one
   figure; it was the smallest text on the screen. */
.meter .score{display:block;line-height:.92;letter-spacing:-.04em;
  margin:.15rem 0 .35rem}
.meter .score b{font-size:clamp(3.4rem,9vw,6.2rem);font-weight:700;
  font-style:normal}
.meter .score i{font-size:clamp(1rem,2.1vw,1.5rem);font-weight:500;
  font-style:normal;opacity:.5;margin-left:.3rem;letter-spacing:-.02em}
.meter .miss{display:block;font-size:clamp(.95rem,1.5vw,1.15rem);font-weight:500;
  opacity:.82}
.meter .who{display:block;font-size:.78rem;opacity:.42;margin-top:.3rem;
  word-break:break-all}

/* ── the fact list that replaces the proof after a scan ─────────────────── */
.urgent.facts{overflow-y:auto;text-align:left}
.urgent.facts .ask{font-size:.95rem;line-height:1.35;font-weight:600;
  margin:0 0 .5rem}
.urgent.facts .sum{font-size:.95rem;opacity:.72;margin:0 0 .55rem}
.urgent.facts .sum b{font-size:1.75rem;font-weight:700;opacity:1}
.urgent.facts .more{font-size:.8rem;opacity:.5;margin:.3rem 0 0;padding-left:23px}
.urgent.facts .cap{font-size:.72rem;opacity:.45;margin:-.45rem 0 .2rem}
.urgent.facts h3{font-size:.76rem;letter-spacing:.085em;text-transform:uppercase;
  margin:.8rem 0 .35rem;font-weight:700}
.urgent.facts h3.yes{color:#69B37F}
.urgent.facts h3.no{color:#E0705F}
.facts-list{list-style:none;padding:0;margin:0}
.facts-list li{display:grid;grid-template-columns:16px 1fr;gap:7px;
  align-items:baseline;font-size:.88rem;line-height:1.45;padding:2.5px 0}
.facts-list .ic{font-weight:700;font-size:.78rem}
.facts-list li.yes .ic{color:#69B37F}
.facts-list li.no{opacity:.72}
.facts-list li.no .ic{color:#E0705F}
.urgent.facts .doable{margin:.7rem 0 0;padding-top:.55rem;
  border-top:1px dashed rgba(255,255,255,.14);font-size:.8rem;line-height:1.5;opacity:.6}
/* ── the evidence, behind each line ────────────────────────────────────────
   Cloudflare flips its whole card over to show an audit. In a rail this narrow
   a flip hides the list you were reading, so the line opens in place instead.
   The cue stays quiet until wanted: twenty-six rows each shouting an affordance
   is a panel of buttons, not a panel of facts. */
.facts-list li.has-why{align-items:start}
.facts-list .fx{min-width:0}
.facts-list button.fact{all:unset;box-sizing:border-box;display:flex;
  width:100%;gap:.6rem;align-items:baseline;justify-content:space-between;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.facts-list button.fact .cue{flex:none;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;opacity:.28;transition:opacity .15s}
.facts-list button.fact:hover .cue{opacity:.7}
.facts-list button.fact[aria-expanded="true"] .cue{opacity:.7}
.facts-list button.fact:focus-visible{outline:1px dotted rgba(255,255,255,.45);
  outline-offset:3px}
.facts-list .ev{margin:.4rem 0 .55rem;padding:.5rem .65rem .55rem;
  border-left:2px solid rgba(255,255,255,.17);background:rgba(255,255,255,.04);
  border-radius:0 4px 4px 0;font-size:.79rem;line-height:1.5}
.facts-list .ev .ehow{margin:0 0 .3rem;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5}
.facts-list .ev blockquote{margin:0;font-style:italic;opacity:.95;
  overflow-wrap:anywhere}
.facts-list .ev code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.73rem;opacity:.88;overflow-wrap:anywhere}
.facts-list .ev code.raw{display:block;opacity:.55}
.facts-list .ev .elook{list-style:none;margin:0;padding:0}
.facts-list .ev .elook li{display:block;padding:1px 0;opacity:.88}
.facts-list .ev .ecaveat,.facts-list .ev .eargue{margin:.4rem 0 0;
  font-size:.73rem;line-height:1.45;opacity:.5}
/* An open cross is being read, so it stops being the dimmest thing on screen. */
.facts-list li.no:has(.ev:not([hidden])){opacity:.95}
.urgent.facts .hint{font-size:.7rem;opacity:.4;margin:-.2rem 0 .5rem}

/* ── #40 · no score, and nothing on screen that could be mistaken for one ──
   A refused fetch used to render as 0 of 90 under a needle at rest, which is
   the dial showing a number it did not measure. When the scan reports it could
   not read the site, the needle, the ninety ticks and the three band totals all
   go — there is nothing for them to be about — and the sentence takes the space
   the score had. */
.meter[data-unread] #dial,
.meter[data-unread] .film,
.meter[data-unread] .stages{display:none}
.meter[data-unread] .band{opacity:.5}
.meter .unsay{display:block;font-size:clamp(.95rem,1.55vw,1.2rem);font-weight:500;
  line-height:1.45;max-width:46ch;margin:.2rem auto 0;text-wrap:pretty}
/* the panel's version of the same thing */
.urgent.facts .unread{font-size:.92rem;line-height:1.5;margin:0 0 .6rem}
.urgent.facts .unread.blocked{color:#E0705F}

/* ── the twelve chapters, filling in while the scan runs ──────────────────
   Three things per row and a fourth that only appears when it is known: the
   number, the name, the score, and why. Before its event arrives a row is
   dimmed and shows an em dash, so the shape of the answer is visible from the
   first second. */
/* Bounded and scrolling in its own right, so twelve chapters can never push the
   score off the canvas again. The canvas clips; this is the thing that would
   have made it clip. */
/* flex:0 0 auto is not a nicety. .meter is a flex COLUMN, and as an ordinary
   flex item this box was shrunk to EIGHT PIXELS against 843 of content at
   1440x810 — ninety-nine per cent of the narrative hidden behind a scrollbar
   nobody would ever find. Measured, not guessed; it is the same shape of bug as
   the facts panel collapsing to zero height, and the same one-line cure. */
.meter #filmChapters{flex:0 0 auto;max-height:min(38vh,300px);overflow-y:auto;
  scrollbar-width:thin;
  margin-top:.6rem;border-top:1px dashed rgba(255,255,255,.14);padding-top:.5rem}
.meter .chapters{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  text-align:left;max-width:52ch;margin-inline:auto}

/* ── the proper shape for twelve of them ─────────────────────────────────
   A canvas here is about 832x512 — wider than it is tall — and twelve panels
   stacked one-wide is a column 843px long inside 512px of room. No clamp fixes
   that; it only chooses which two thirds to hide. So above a real desktop width
   the meter stops being one tall stack and becomes two columns: the number a
   visitor came for on the left, the twelve chapters that explain it on the
   right, each with the full height of the canvas.

   :has() rather than a class, so the second column exists only while there are
   chapters in it. An empty half-canvas before a scan would be worse than the
   clipping. */
@media (min-width:62rem){
  .meter:has(#filmChapters:not([hidden])){
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:1.5rem;align-items:center;justify-items:center}
  .meter:has(#filmChapters:not([hidden])) > *{grid-column:1;justify-self:center}
  .meter:has(#filmChapters:not([hidden])) #filmChapters{
    /* span, NOT `1 / -1`. Every other child is auto-placed, so the rows here are
       IMPLICIT, and -1 names the end of the EXPLICIT grid — which is row line 2.
       The box duly stretched to the full height of one row, 118px of 345, and
       looked like the clamp was still wrong. It was covering one twelfth of what
       it needed to cover. */
    grid-column:2;grid-row:1 / span 50;align-self:stretch;justify-self:stretch;
    /* max-height:100% and min-height:0, because the canvas is the budget. Given
       a free hand the column grew to 664 inside 512 and the canvas overflowed by
       201px — which is the ORIGINAL bug, the one that pushed the score clean off
       the page, arriving from the other direction. Twelve panels that cannot be
       clipped are worth nothing if they evict the number. */
    /* min(100%, 30rem) and not 100%. `100%` here is 100% of the GRID AREA, which
       is the sum of every row in column one — 664px — so the box dutifully grew
       to 664 while holding 468 of panels, and the canvas overflowed. It read as
       the chapters being too tall. They were not: measured, column one alone is
       565px inside a 512px canvas, which is a 52px overflow this page has had
       since before the chapters existed. 30rem holds all twelve at 39px each
       with room, and cannot drive the canvas at all. */
    max-height:min(100%,30rem);min-height:0;margin-top:0;padding:0 0 0 1.2rem;
    border-top:0;border-left:1px dashed rgba(255,255,255,.14);
    display:flex;flex-direction:column;justify-content:center}
  /* ONE COLUMN, WIDE. Six-and-six was the obvious fix and it bought nothing:
     at 164px a panel's why-line wraps to three lines, so each grew from 47px to
     110 and twelve still came to 664. Halving the count per column doubled the
     height of each. Width is what makes a panel short, so the column stays whole
     and the panels get tighter instead. */
  .meter:has(#filmChapters:not([hidden])) .chapters{max-width:none;margin-inline:0}
  /* 47px x 12 is 564 against 512 of canvas — fifty-two over, which is padding
     rather than content. This is the fifty-two. */
  .meter:has(#filmChapters:not([hidden])) .ch[data-done]{padding:.1rem .1rem}
  .meter:has(#filmChapters:not([hidden])) .ch-why{line-height:1.25}
}

/* WHAT A PANEL SAYS CHANGES WHEN ITS SCORE LANDS, and that is what makes twelve
   of them fit. While the scan runs, "whether a stranger can tell what you sell"
   is the only useful line, because there is no score yet. The moment one
   arrives, the useful line is why — and keeping both costs 69px a panel, which
   is 828px for twelve and does not fit any canvas we have. One line at a time
   is 40px, and twelve of those fit with room to spare. */
.meter .ch[data-done] .ch-means{display:none}
.meter .ch{display:grid;grid-template-columns:1.4rem 1fr auto;gap:.5rem .6rem;
  align-items:baseline;padding:.32rem .1rem;opacity:.38;transition:opacity .25s}
.meter .ch[data-done]{opacity:1}
.meter .ch-n{font-size:.62rem;color:var(--muted);font-variant-numeric:tabular-nums}
.meter .ch-name{font-size:.84rem;font-weight:600}
.meter .ch-score{font-size:.84rem;font-weight:700;font-variant-numeric:tabular-nums}
.meter .ch[data-state="none"] .ch-score{color:#E0705F}
.meter .ch[data-state="all"] .ch-score{color:#69B37F}
.meter .ch-means{grid-column:2 / -1;font-size:.72rem;line-height:1.35;opacity:.55}
.meter .ch-why{grid-column:2 / -1;font-size:.72rem;line-height:1.35;opacity:.8;
  font-style:italic}
.meter .ch-why:empty{display:none}