/* ============================================================================
   AVANO — the design system, 2026-07-29.
   Written for the rebuild, not derived from avano.css. The new pages link this
   sheet ALONE: no avano.css, no avano-pages.css. That is deliberate and it is
   the one rule in this file worth stating twice.

   The old sheet is 39 KB grown over three weeks, and site/README.md records
   what it does to a page that half-adopts it — index.html and brand.html each
   carried a page-local `:root` that beat every token in the shared sheet, and
   the failure was invisible in dark because the dark rule is
   `:root:not([data-theme="light"])`, which out-specifies a plain `:root`. It
   only showed in light. Linking both sheets would have re-opened exactly that
   class of fight in the opposite direction. There is no cascade to lose here
   because there is only one sheet.

   THE CONCEPT: the specification document.

   Avano's mark is three bores drilled through a graphite plate, and the
   product's whole thesis is absence — no number, no account, no accounts
   table, no disk, no push. So the site is built as a technical specification
   rather than a landing page: hairline rules, a persistent mono margin
   carrying section numbers and status, a ledger instead of cards, and the
   bore itself as the only ornament. A journalist should be able to screenshot
   any section of it and have the screenshot read as evidence.

   WHAT THIS SYSTEM DOES NOT HAVE, on purpose:
     - no gradient hero, no purple, no blue-to-violet anything
     - no rounded card with an accent rail down its left edge
     - no emoji section markers — the marker is a drilled bore
     - no Inter, no system-ui in the display stack
     - status is set TYPOGRAPHICALLY (solid ink vs hairline outline) rather
       than chromatically, so the page does not turn into a traffic light and
       a limit never reads as a warning triangle.

   THEME. Light is primary and the default; dark follows the OS; an explicit
   choice beats both. The three-block pattern below is load-bearing and is the
   same one site/README.md documents — do not collapse it into a single media
   query, and do not add a page-local `:root`.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. tokens */

/* THE PALETTE COMES FROM THE APP, not from this file.
   `design/app-cipher-mockup.html` is the single source of truth for the UI on
   both platforms, and its tokens are:

     --peri #a8c0e6   --peri-deep #6d86a6   --peri-bright #c6d3e6
     --accent2 #7c9bc9   --warm/--danger #d98a7e
     --bg #06070b   --surface #0c0f16   --text #eef2f8
     --muted #7b859a   --faint #59627a   --line rgba(168,192,230,.14)

   The app is dark and periwinkle. The site is white-ground, so the two themes
   below relate to those tokens differently and deliberately:

     DARK  — uses the app's literal values. The dark site *is* the app surface.
     LIGHT — same hues, re-weighted for a white ground. Periwinkle #a8c0e6 sits
             at hue 216° and 78% lightness, which is invisible as a link on
             white; the light accent is that exact hue taken down to 32%, and
             the warm #d98a7e (hue 8°) likewise down to 40%. Same family,
             legible weight — not a different colour scheme that happens to be
             blue.

   The neutrals are cool rather than grey for the same reason: the app's
   --muted #7b859a is a blue-grey, and a neutral #6e757f next to it reads as a
   different company's product. */

:root {
  /* --- ground. #ffffff exactly. Not cream, not warm paper, not off-white. --- */
  --paper:        #ffffff;
  --paper-sunk:   #eff4fa;   /* a periwinkle wash, not a grey                 */
  --ink:          #0a0d14;   /* the app's --bg2 family                        */
  --ink-2:        #3c4557;   /* secondary prose                               */
  --ink-3:        #6b7488;   /* mono labels, captions — app --muted, darkened */
  --ink-4:        #98a1b4;   /* the faintest legible step                     */
  /* The hairline the whole grid is built from. Tinted toward the periwinkle
     rather than neutral: it is the single most-repeated element on the page,
     so it is where a hue costs nothing and is felt everywhere. */
  --rule:         #d7e1ee;
  --rule-strong:  #a9bcd4;

  /* --- THE TWO BRAND COLOURS, AT FULL STRENGTH ---------------------------
     CORRECTED 2026-07-29 after the founder rejected the first light theme:
     "e alb cu negru ... app-ul nu e negru." He was right and the mistake is
     worth naming precisely, because it looked like good practice.

     I took the app's periwinkle #a8c0e6 and walked it down to #2a4a79 so it
     would clear 4.5:1 as link text on white. That is a correct instinct for
     TEXT and I then used the darkened value as the page's ONLY chromatic
     element -- so periwinkle appeared nowhere at its real value, terracotta
     appeared nowhere at all, and the page became black-on-white with a navy
     underline. Measured off the app's own Shield screen for comparison:
     #a8c0e6 occurs 39 times as a text colour, 31 times as a border and twice
     as a fill; #d98a7e occurs 5 times. The app is not black and the site
     must not be.

     The fix is that CONTRAST IS A CONSTRAINT ON TEXT, NOT ON COLOUR. So:

       --peri / --terra      the real values, used at full strength anywhere
                             they are not carrying body copy: rules, washes,
                             fills, tiles, diagram strokes, tags, large marks.
       --peri-ink / --terra-ink  darkened, and used ONLY under body copy.

     Two colours against white is not decoration here, it is the brand. */
  --peri:         #a8c0e6;   /* the app's identity colour, unmodified        */
  --peri-bright:  #c6d3e6;
  --peri-line:    #b9cde8;   /* a hairline that reads blue, not grey         */
  --peri-wash:    #eaf1f9;   /* panel and tile fills                         */
  --peri-ink:     #35618f;   /* 6.4:1 on white — links and small type only   */

  --terra:        #d98a7e;   /* the app's --warm, unmodified                 */
  --terra-line:   #e8b3a9;
  --terra-wash:   #fbeee9;
  --terra-ink:    #a1442f;   /* 6.0:1 on white — the limits ledger's type    */

  /* aliases kept so the rest of the sheet reads by role rather than by hue */
  --accent:       var(--peri-ink);
  --accent-lift:  #4478ad;
  --signal:       var(--terra-ink);
  --signal-soft:  var(--terra-wash);

  /* --- the drilled bore, lit on its lower-right inner wall ---------------- */
  /* A hole, not a dome. The difference is entirely in the rim: a sphere has a
     soft broad highlight and no hard edge, a bore has a crisp dark lip at the
     upper-left where the surface cuts away and a narrow crescent of light on
     the far inner wall. So the body gradient stays dark across most of its
     travel and only turns near the end, the lit crescent is tight rather than
     a glow, and the inset shadow is heavy at the top. */
  /* A HOLE, NOT A DISC. Fourth attempt; the first three failed differently
     and all three lessons are worth keeping.

       v1  shaded the lower-right of the whole shape -- that is how you light a
           sphere, not a hole.
       v2  fixed the direction with inset box-shadows and failed only at size:
           blur and spread are ABSOLUTE PIXELS, so values tuned on a 26px
           masthead bore are proportionally invisible at 130px.
       v3  moved to a percentage gradient, which did scale, and was STILL a
           black disc -- for the reason that actually mattered and that I never
           questioned: I PORTED THE APP'S RECIPE TO A GROUND IT DOES NOT SUIT.
           In the app a bore reads as a hole because it is DARKER than the
           #06070b surface around it. On white a dark interior is not an
           opening cut through paper, it is a black dot printed on it. Its
           gradient also ran rgb(6,9,13) to rgb(27,36,48) -- about 25 levels,
           both ends black to the eye, so there was no depth cue inside the
           shape at all, only at its rim.

     A real hole in a white sheet contains no black. You see the near wall
     occluded, the far wall catching light, and a soft darkening where the
     surface turns into the opening. So the light interior is LIGHT --
     #f8fafd down to #8f9eb1, about 100 levels -- darkest at the top inner edge
     and lit at the bottom. The dark theme keeps the app's derivation because
     it is correct there. Two grounds, two derivations: this treatment is not
     portable between them, which is the whole finding.

     SVG rather than more CSS: objectBoundingBox gradients scale by
     construction, the occlusion and rim are real geometry instead of shadow
     stacks that behave differently at every size, and it is one asset the app
     can share rather than two recipes drifting apart. */
  --bore-img:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='24%' y1='8%' x2='78%' y2='94%'%3E%3Cstop offset='0%' stop-color='%2366788e'/%3E%3Cstop offset='20%' stop-color='%238394a9'/%3E%3Cstop offset='52%' stop-color='%23a6b4c6'/%3E%3Cstop offset='80%' stop-color='%23c3cfdd'/%3E%3Cstop offset='100%' stop-color='%23dbe4ef'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='34%' cy='18%' r='60%'%3E%3Cstop offset='0%' stop-color='%233f5064' stop-opacity='.55'/%3E%3Cstop offset='58%' stop-color='%233f5064' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23a)'/%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23b)'/%3E%3Ccircle cx='50' cy='50' r='49.4' fill='none' stroke='%235c6e84' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  --bore-shadow:  0 0 0 1px rgba(53,97,143,.10), 0 1px 1px rgba(53,97,143,.10);

  /* --- type ------------------------------------------------------------- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* A modular scale, ~1.28, set in rem against a 17px base. Every size on the
     site is one of these. If a page needs a size that is not here, the scale
     is wrong, not the page. */
  --t-2xs:  0.625rem;    /* 10px — mono micro-label, always letterspaced      */
  --t-xs:   0.6875rem;   /* 11px — mono label                                */
  --t-sm:   0.8125rem;   /* 13px — mono body, captions                       */
  --t-ui:   0.9375rem;   /* 15px — nav, buttons                              */
  --t-base: 1.0625rem;   /* 17px — prose                                     */
  --t-md:   1.1875rem;   /* 19px — ledger lead-in                            */
  --t-lg:   1.375rem;    /* 22px — lede                                      */
  --t-h3:   1.5rem;      /* 24px                                             */
  --t-h2:   clamp(1.75rem, 3vw, 2.625rem);    /* 42px at 1440                */
  --t-h1:   clamp(2.375rem, 5.2vw, 4rem);     /* 64px at 1440                */
  --t-num:  clamp(2.25rem, 4.5vw, 3.25rem);   /* the big mono figures        */

  /* --- space. 4px base, doubling with two half-steps. ------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --s11: 176px;

  /* --- grid ------------------------------------------------------------- */
  --measure:  1240px;      /* the outer frame                                */
  --prose:    68ch;        /* the reading measure, never exceeded            */
  --gutter:   clamp(20px, 5vw, 64px);
  --rail:     190px;       /* the mono margin carrying numbers and status    */
  --rail-gap: clamp(24px, 4vw, 56px);

  /* Vertical rhythm. Tightened from 112px on 2026-07-29: the survey's page
     target is under 6,000px at 1440 and only the two shortest pages in the
     category (Session 4,213 · Telegram 2,744) manage it, both reading as the
     most confident. Space before the FIRST element still buys the expensive
     look; space between every element afterwards just buys scroll. */
  --sec-y: clamp(48px, 6vw, 88px);

  color-scheme: light;
}

/* dark follows the OS — unless the visitor chose light explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* the app's own tokens, verbatim */
    --paper:       #06070b;
    --paper-sunk:  #0c0f16;
    --ink:         #eef2f8;
    --ink-2:       #b6c0d2;
    --ink-3:       #7b859a;
    --ink-4:       #59627a;
    --rule:        rgba(168,192,230,.14);
    --rule-strong: rgba(168,192,230,.30);
    --bore-img:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='22%' y1='8%' x2='80%' y2='94%'%3E%3Cstop offset='0%' stop-color='%2303050a'/%3E%3Cstop offset='30%' stop-color='%23080c13'/%3E%3Cstop offset='62%' stop-color='%231a2331'/%3E%3Cstop offset='86%' stop-color='%2344576f'/%3E%3Cstop offset='100%' stop-color='%237f99bb'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='36%' cy='20%' r='62%'%3E%3Cstop offset='0%' stop-color='%23000000' stop-opacity='.72'/%3E%3Cstop offset='62%' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23a)'/%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23b)'/%3E%3Ccircle cx='50' cy='50' r='49.4' fill='none' stroke='%23a8c0e6' stroke-opacity='.20' stroke-width='1.1'/%3E%3C/svg%3E");
    --bore-shadow: 0 0 0 1px rgba(168,192,230,.10);
    --peri-ink:    #a8c0e6;
    --terra-ink:   #d98a7e;
    --peri-line:   rgba(168,192,230,.30);
    --peri-wash:   #10151f;
    --terra-line:  rgba(217,138,126,.35);
    --terra-wash:  #1d1512;
    --accent:      #a8c0e6;
    --accent-lift: #c6d3e6;
    --signal:      #d98a7e;
    --signal-soft: #1d1512;
    --bore-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06);
    color-scheme: dark;
  }
}
/* an explicit choice beats the OS in both directions */
:root[data-theme="dark"] {
  /* the app's own tokens, verbatim — kept in step with the block above */
  --paper:       #06070b;
  --paper-sunk:  #0c0f16;
  --ink:         #eef2f8;
  --ink-2:       #b6c0d2;
  --ink-3:       #7b859a;
  --ink-4:       #59627a;
  --rule:        rgba(168,192,230,.14);
  --rule-strong: rgba(168,192,230,.30);
  --bore-img:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='22%' y1='8%' x2='80%' y2='94%'%3E%3Cstop offset='0%' stop-color='%2303050a'/%3E%3Cstop offset='30%' stop-color='%23080c13'/%3E%3Cstop offset='62%' stop-color='%231a2331'/%3E%3Cstop offset='86%' stop-color='%2344576f'/%3E%3Cstop offset='100%' stop-color='%237f99bb'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='36%' cy='20%' r='62%'%3E%3Cstop offset='0%' stop-color='%23000000' stop-opacity='.72'/%3E%3Cstop offset='62%' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23a)'/%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23b)'/%3E%3Ccircle cx='50' cy='50' r='49.4' fill='none' stroke='%23a8c0e6' stroke-opacity='.20' stroke-width='1.1'/%3E%3C/svg%3E");
  --bore-shadow: 0 0 0 1px rgba(168,192,230,.10);
  --peri-ink:    #a8c0e6;
  --terra-ink:   #d98a7e;
  --peri-line:   rgba(168,192,230,.30);
  --peri-wash:   #10151f;
  --terra-line:  rgba(217,138,126,.35);
  --terra-wash:  #1d1512;
  --accent:      #a8c0e6;
  --accent-lift: #c6d3e6;
  --signal:      #d98a7e;
  --signal-soft: #1d1512;
  --bore-shadow: inset 0 1px 3px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------- 2. baseline */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* the full-bleed rules are 100vw; nothing else bleeds */
}

/* DISPLAY TYPE: light at large size, and never at `letter-spacing: normal`.
   Both are measured findings rather than taste. docs/CORP/DESIGN-INTEL.md
   sampled fourteen live sites and the single most reliable tell separating the
   pages that read expensive from the ones that read like templates is negative
   tracking on display type -- Vercel -3.84px@64, Proton -1.8px@60, Linear
   -1.41px@64, against Signal 60px w800, Mullvad 80px w600 and Wire 60px w700,
   all at default tracking. The second tell is weight: 1Password 88px/w300 and
   Stripe 48px/w300 read as companies that paid for the font and trust it;
   heavy-at-large reads as a template. So h1 is Newsreader 400, not 500. */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.014em; }
h1 { font-size: var(--t-h1); font-weight: 400; line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; max-width: 22ch; }
h3 { font-size: var(--t-h3); line-height: 1.22; }
h4 { font-size: var(--t-md); line-height: 1.3; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 var(--s5); max-width: var(--prose); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }

/* Prose links get an underline that sits off the baseline and thickens on
   hover. Structural links (nav, ledger rows, cards) opt out via .plain. */
.prose a:not(.plain), p a:not(.plain) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: text-decoration-color .18s;
}
.prose a:not(.plain):hover, p a:not(.plain):hover { text-decoration-color: currentColor; }

b, strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
code, kbd { font-family: var(--mono); font-size: 0.86em; }
code {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.08em 0.34em;
  word-break: break-word;
}
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }
img { max-width: 100%; height: auto; }
/* The UA default for <figure> is `margin: 1em 40px`. Left in, each .device in a
   flex row measured 80px wider than its box, so three 278px phones came to
   1178px inside a 1112px frame and the third wrapped to its own line — with its
   absolutely-positioned caption landing over the section below. The computed
   widths all read 278px, which is why this took a layout measurement to find
   rather than a look at the CSS. */
figure, blockquote { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-sm);
  padding: var(--s3) var(--s5);
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* ---------------------------------------------------------------- 3. layout */

.frame {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A full-bleed hairline: the spine of the whole document. It is 100vw so the
   rule crosses the viewport while the content stays in the frame. */
.bleed-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* THE SPEC ROW — the system's primary layout.
   A narrow mono rail on the left carrying the section number, a label and a
   status tag; the argument on the right. At the mobile breakpoint the rail
   stops being a column and becomes a line above the heading, which is the
   only honest way to keep it: a 190px column at 400px wide is a stack of
   two-letter lines. */
.spec {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
  padding-block: var(--sec-y);
  align-items: start;
}
.spec > .rail { position: sticky; top: 104px; }
.spec-body > * + * { margin-top: var(--s5); }

.rail-n {
  display: block;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--peri-ink);
}
.rail-t {
  display: block;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: 0.06em;
  color: var(--ink-2);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .spec > .rail { position: static; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
  .rail-t { margin-top: 0; }
}

/* A plain section for full-width content that has no rail. */
.band { padding-block: var(--sec-y); }

/* THE FRONTISPIECE — every inner page opens with one.
   Title and lede on the left, the on-page contents on the right, so the top of
   a 1240px frame carries the page's whole shape at a glance instead of a
   headline against half a screen of nothing. The columns are 7/5 rather than
   equal: the right one is an index, not a second argument. */
.pagehead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s7) var(--s9);
  align-items: end;
  padding-block: clamp(40px, 6vw, 84px) var(--sec-y);
}
.pagehead-main > * + * { margin-top: var(--s6); }
.pagehead h1 { max-width: 13ch; }
.pagehead .lede { max-width: 44ch; }
@media (max-width: 980px) {
  .pagehead { grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .pagehead h1, .pagehead .lede { max-width: none; }
}

.lede {
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);   /* 23px at 1440 */
  line-height: 1.44;
  color: var(--ink-2);
  max-width: 56ch;
  letter-spacing: -0.008em;
}
.sub { color: var(--ink-2); max-width: var(--prose); }
.prose > * + * { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s7); }
.prose h4 {
  margin-top: var(--s6);
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ 4. bore */

/* The mark, rendered in CSS. A hole, not a disc: the interior is dark at the
   upper-left where no light reaches and carries a cold highlight on the
   lower-right inner wall, which is the delivered mark's own description. The
   masthead PNG has to swap file between themes because a night bore
   composites to a flat black disc on white; this one is built from tokens and
   simply re-reads them. */
.bore {
  display: inline-block;
  width: 10px; aspect-ratio: 1;
  border-radius: 50%;
  background-image: var(--bore-img);
  background-size: 100% 100%;
  box-shadow: var(--bore-shadow);
  flex: none;
}
.bore-row { display: inline-flex; gap: 7px; align-items: center; vertical-align: middle; }
.bore-lg { width: 15px; }

/* The plate: three bores punched through a field of hairlines. The site's one
   piece of ornament, used once on the homepage. */
.plate {
  position: relative;
  height: clamp(150px, 22vw, 250px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    to bottom, var(--rule) 0 1px, transparent 1px 11px);
  background-position: 0 5px;
  overflow: hidden;
}
.plate::after {          /* fade the ruling out at both ends of the band */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--paper) 0%, transparent 16%, transparent 84%, var(--paper) 100%);
  pointer-events: none;
}
.plate-bores {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(26px, 5vw, 58px);
}
/* The paper collar is an OUTSET spread shadow, not a ::before.
   A `::before { inset:-9px; z-index:-1 }` looks like the obvious way to do it
   and is wrong: inside a stacking context a negative-z-index child paints
   after the element's own background, so the collar covered the bore and the
   band rendered as ruling with three invisible holes. A spread shadow paints
   outside the border box and behind the element by construction. */
.plate-bores .bore {
  width: clamp(38px, 6.4vw, 74px);
  /* The collar is listed FIRST because earlier shadows paint over later ones;
     a drop shadow behind it would be covered, so there isn't one. A hole does
     not cast a shadow onto the surface it is cut into. */
  box-shadow: 0 0 0 10px var(--paper), var(--bore-shadow);
}

/* ----------------------------------------------------------- 4b. the product */

/* Real captures of the running app, not mockups: site/product/*.webp are
   downscaled from fastlane/metadata/android/en-US/images/phoneScreenshots/.
   Three of the five are used. `1_welcome.png` is deliberately NOT on this site
   — its copy reads "No one sees that you talk", which is stronger than what
   limits.html says is true, and publishing a screenshot of our own overclaim
   would be the same defect as writing one. Reported rather than cropped out.

   The frame is built from the app's own surface tokens rather than a generic
   grey bezel, so the device reads as an object out of the product sitting on
   the site's paper. The glow is periwinkle at very low alpha — the same cold
   light the bores catch — and not a drop shadow, because a drop shadow under a
   floating phone is the single most generic gesture in this category. */

.device {
  position: relative;
  width: 100%;
  max-width: 300px;
  border-radius: 30px;
  padding: 8px;
  background: #0c0f16;                            /* the app's --surface */
  border: 1px solid rgba(168, 192, 230, .18);
  box-shadow:
    0 0 0 1px rgba(10, 13, 20, .06),
    0 26px 60px -22px rgba(42, 74, 121, .42),
    0 4px 14px -6px rgba(10, 13, 20, .18);
  flex: none;
}
.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}
.device figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px);
  font-family: var(--mono);
  font-size: var(--t-xs); line-height: 1.55; letter-spacing: .02em;
  color: var(--ink-3);
}
.device figcaption b { color: var(--ink-2); font-weight: 500; }

/* a row of devices, with the middle one lifted */
.devices {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap;
}
.devices .device { max-width: 278px; }
.devices .device:nth-child(2) { transform: translateY(-28px); }
@media (max-width: 860px) {
  .devices .device:nth-child(2) { transform: none; }
  .devices { gap: 64px 24px; }
}

/* The homepage hero: argument on the left, the product on the right, standing
   on the ruled plate rather than floating on nothing. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px);
}
.showcase-art { position: relative; display: flex; justify-content: center; }
.showcase-art::before {          /* the cold light behind the device */
  content: ""; position: absolute; z-index: 0;
  inset: -14% -22% -10%;
  background: radial-gradient(52% 46% at 50% 42%, rgba(168, 192, 230, .30), rgba(168, 192, 230, 0) 72%);
  pointer-events: none;
}
.showcase-art .device { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .showcase-art { margin-top: var(--s5); }
}

/* ---------------------------------------------------------- 4c. the absences */

/* Session's technique, our content. Six absences drawn as marked objects on
   one flat band, so each *nothing* acquires a shape you can look at. The
   survey calls it the single most transferable idea in the category and
   Session's own list is a near-match for ours.

   Where we depart: their band is saturated lime. Ours is the app's own ground
   (--bg #06070b), because a periwinkle band on white washes out, and because a
   single dark interruption in a white page is both the one saturated field the
   directive allows and thematically the product's own surface showing through.
   The objects are hairline strokes in periwinkle, struck through. No padlock,
   no shield, no keyhole, no glowing node graph -- the last of which is the
   category's next dead cliche and is already on three of ten sites. */

.absences {
  background: #06070b;
  color: #eef2f8;
  width: 100vw; position: relative; left: 50%; transform: translateX(-50%);
  padding-block: clamp(56px, 7vw, 104px);
}
/* In dark the band and the page ground are the same #06070b, so the band stops
   reading as a band. Lift it to the app's --surface, which is what a panel
   sitting on that ground is in the product itself. The tiles inside stay on
   --bg so the hairline grid still separates them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .absences { background: #0c0f16; }
  :root:not([data-theme="light"]) .absence { background: #0c0f16; }
}
:root[data-theme="dark"] .absences { background: #0c0f16; }
:root[data-theme="dark"] .absence { background: #0c0f16; }
.absences-in { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.absences .kicker { color: #7b859a; }
.absences h2 { color: #eef2f8; max-width: 20ch; }
.absences .sub { color: #b6c0d2; }

/* Three across, two down. `auto-fit` gave four columns at 1440 and left the
   last two tiles orphaned on a second row, which reads as a mistake rather
   than a grid — six items want 3x2 or 2x3, never 4+2. */
.absence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(28px, 3.5vw, 44px);
  background: rgba(168, 192, 230, .14);      /* the 1px gap becomes the rule */
  border: 1px solid rgba(168, 192, 230, .14);
}
.absence { background: #06070b; padding: clamp(20px, 2.2vw, 28px); }
.absence svg { width: 40px; height: 40px; display: block; color: #a8c0e6; }
.absence .t {
  display: block; margin-top: var(--s5);
  font-family: var(--serif); font-size: var(--t-md); line-height: 1.28;
  letter-spacing: -0.012em; color: #eef2f8;
}
.absence .d {
  display: block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.62;
  color: #7b859a;
}
@media (max-width: 900px) { .absence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .absence-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- 4d. the seizure block */

/* The one hard artefact on the page, and the only place the signal colour is
   used on the homepage. Deliberately NOT stylised: no red SECURE stamp, no
   terminal chrome, no green-on-black. Its power is that it is boring and real.

   It is live HTML rather than an image on purpose. The directive's reason is
   that a marketing PNG can bake in a real handle or timestamp, which for this
   product would be a leak on our own homepage; the second reason is that the
   schema below is read out of rust/avano-storage/src, so it stays true when
   the schema changes rather than going stale as a picture. */

.artefact {
  border: 1px solid var(--peri-line);
  background: var(--peri-wash);
  font-family: var(--mono);
  font-size: var(--t-sm);
  line-height: 1.75;
  overflow-x: auto;
  max-width: 100%;
}
.artefact-h {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--peri-line);
  font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.artefact-b { padding: var(--s5); display: block; white-space: pre; min-width: 0; }
.artefact-b .col { color: var(--ink-2); }
.artefact-b .sealed { color: var(--ink-4); }
.artefact-b .clear { color: var(--signal); }
.artefact-b .cmt { color: var(--ink-4); }
.artefact-key {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-top: var(--s4);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
}
.artefact-key i { font-style: normal; }
.artefact-key .sw { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: baseline; }
.artefact-key .sw--clear { background: var(--signal); }
.artefact-key .sw--sealed { background: var(--ink-4); }

/* --------------------------------------------------- 4e. frameless fragments */

/* Linear's move: crop to the one control being discussed, no device frame, no
   browser chrome, no drop-shadow theatre -- and let one bleed off the right
   edge so the page reads as a corner of a dense real product rather than a
   marketing render. */
.fragment {
  border: 1px solid var(--peri-line);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 13, 20, .04);
  background: #0c0f16;
  line-height: 0;
}
.fragment img { width: 100%; height: auto; display: block; }
.fragment--bleed { border-right: 0; border-radius: 2px 0 0 2px; margin-right: calc(var(--gutter) * -1 - 40px); }
@media (max-width: 900px) { .fragment--bleed { margin-right: calc(var(--gutter) * -1); } }
.fragment-cap {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.6;
  color: var(--ink-3); margin-top: var(--s4); max-width: 46ch;
}

/* --------------------------------------------------------------- 5. masthead */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 66px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand__bores { height: 17px; width: auto; display: block; }
/* The wordmark is a single flat #ECF1F4 fill, so brightness(0) recolours it to
   ink without touching a letterform. The bores are SWAPPED by file instead —
   see site/README.md for why filtering is wrong for them. */
.brand__wm { height: 15px; width: auto; display: block; filter: brightness(0); }
/* ORDER IS LOAD-BEARING. These rules are all one specificity apart at most, so
   the light default must come FIRST and the dark overrides after it. Written
   the other way round (dark rule, then the plain `.brand__bores` default) the
   default wins everywhere and the dark theme silently serves the day bores —
   which is the same later-rule-at-equal-specificity trap site/README.md
   records for the page-local `:root` blocks, in a different costume. */
.brand__bores { content: url("brand/avano-bores-site-day@3x.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__wm { filter: none; }
  :root:not([data-theme="light"]) .brand__bores { content: url("brand/avano-bores-site@3x.png"); }
}
:root[data-theme="dark"] .brand__wm { filter: none; }
:root[data-theme="dark"] .brand__bores { content: url("brand/avano-bores-site@3x.png"); }

.nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.nav a {
  font-family: var(--mono);
  font-size: var(--t-xs); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-2);
  padding-block: var(--s3);
  position: relative;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  border-bottom: 2px solid var(--ink);
}

.nav-tools { display: flex; align-items: center; gap: var(--s3); margin-left: var(--s2); }

.theme-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--rule);
  border-radius: 50%; cursor: pointer; color: var(--ink-3);
  padding: 0; flex: none;
}
.theme-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-btn svg { width: 14px; height: 14px; display: block; }

.menu-btn { display: none; }

@media (max-width: 1080px) {
  /* DOM order is brand · nav · nav-tools · menu-btn. On mobile the nav leaves
     the flow (absolute), so the tools carry the auto margin instead of it. */
  .menu-btn {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-left: var(--s2);
    background: transparent; border: 1px solid var(--rule); border-radius: 3px;
    cursor: pointer; color: var(--ink); padding: 0;
  }
  .menu-btn svg { width: 15px; height: 15px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s2) var(--gutter) var(--s5);
    margin-left: 0;
    display: none;
  }
  .masthead[data-open="true"] .nav { display: flex; }
  .nav a { padding-block: var(--s4); border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav .btn { margin-top: var(--s5); text-align: center; border-bottom: 0; }
  .nav-tools { margin-left: auto; }
}

/* ------------------------------------------------------------------ 6. tags */

/* Status, set typographically rather than chromatically. LIVE is solid ink.
   Anything not yet true is a hairline outline — it reads as unfilled, which is
   what it is. Only REFUSED and the limits ledger get the signal colour, and
   that is the whole budget for it on the site. */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px 3px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-3);
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: middle;
}
.tag--live    { background: var(--peri); border-color: var(--peri); color: #0a0d14; }
.tag--partial { border-color: var(--peri-line); background: var(--peri-wash); color: var(--peri-ink); }
.tag--not     { border-style: dashed; color: var(--ink-3); }
.tag--refused { border-color: var(--signal); color: var(--signal); }

/* The eyebrow. 12px uppercase at 2px tracking is Element's exact spec, which
   the survey singles out as the one piece of its typography worth copying --
   and it is also the cheap fix that rescues an abstract headline by naming the
   category above it, the way Wire's "Secure Messenger" eyebrow does. */
.kicker {
  display: block;
  font-family: var(--mono); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.167em; text-transform: uppercase;
  color: var(--peri-ink);
  margin-bottom: var(--s4);
}

/* ---------------------------------------------------------------- 7. ledger */

/* The system's replacement for cards. Rows divided by hairlines, each with a
   mono key on the left and the argument on the right — a datasheet, not a
   grid of tiles with an accent rail. This is the component the site uses most
   and it is why the pages read as one document. */
.ledger { border-top: 2px solid var(--peri); }
.ledger-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--s5);
  align-items: start;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.ledger-row > .k {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--peri-ink);
  padding-top: 5px;
}
.ledger-row > .v { min-width: 0; }
.ledger-row .v > h3 {
  font-size: var(--t-md); font-weight: 500; line-height: 1.32;
  letter-spacing: -0.012em;
  margin-bottom: var(--s3);
}
.ledger-row .v > p { font-size: var(--t-base); color: var(--ink-2); }
.ledger-row .v > p:first-child { margin-top: 0; }
.ledger-row > .s { padding-top: 3px; }

a.ledger-row { color: inherit; transition: background-color .16s; }
a.ledger-row:hover { background: var(--peri-wash); color: inherit; }
a.ledger-row:hover .v > h3 { color: var(--accent); }

@media (max-width: 760px) {
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .ledger-row > .k { padding-top: 0; }
  .ledger-row > .s { padding-top: 0; }
}

/* The limits ledger. Same bones, signal colour, and a rule down the inline
   start so a scanning eye finds the admissions as a block. */
.ledger--limits { border-top-color: var(--terra); }
.ledger--limits .ledger-row { border-bottom-color: color-mix(in srgb, var(--signal) 22%, var(--rule)); }
.ledger--limits .ledger-row > .k { color: var(--signal); }

/* ----------------------------------------------------------------- 8. stack */

/* A numbered argument: the refusals page's spine. Each item is a full-width
   band with an oversized mono index, not a card. */
.stack { counter-reset: stackitem; }
.stack-item {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--rail-gap);
  padding-block: var(--s8);
  border-top: 1px solid var(--rule);
}
.stack-item:first-child { border-top: 1px solid var(--ink); }
.stack-item > .idx { font-family: var(--mono); }
.stack-item > .idx .num {
  display: block;
  font-size: var(--t-num); font-weight: 500; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.stack-item > .idx .lbl {
  display: block; margin-top: var(--s3);
  font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 880px) {
  .stack-item { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block: var(--s7); }
  .stack-item > .idx { display: flex; align-items: baseline; gap: var(--s3); }
  .stack-item > .idx .num { font-size: var(--t-h3); }
  .stack-item > .idx .lbl { margin-top: 0; }
}

/* three-up reasons inside a stack item */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: var(--s6);
}
.reason { padding: var(--s5) var(--s5) var(--s5) 0; border-bottom: 1px solid var(--rule); }
.reason + .reason { border-left: 1px solid var(--rule); padding-left: var(--s5); }
.reason .rh {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s3); display: block;
}
.reason h4 { margin-bottom: var(--s3); font-family: var(--serif); font-size: var(--t-md);
  letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.reason p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); margin: 0; }
@media (max-width: 640px) {
  .reason + .reason { border-left: 0; padding-left: 0; }
}

/* ----------------------------------------------------------------- 9. table */

.tablewrap { overflow-x: auto; margin-block: var(--s6); }
.tablewrap table { min-width: 640px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
thead th {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--peri-ink);
  text-align: left;
  padding: 0 var(--s4) var(--s3);
  border-bottom: 2px solid var(--peri);
  vertical-align: bottom;
  white-space: nowrap;
}
tbody th {
  font-family: var(--serif); font-weight: 400;
  text-align: left; color: var(--ink);
  padding: var(--s4);
  padding-left: 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: var(--t-base);
  max-width: 34ch;
}
tbody td {
  padding: var(--s4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
}
th.us, td.us { background: var(--peri-wash); }
thead th.us { color: var(--ink); border-bottom-color: var(--ink); }
td.y { color: var(--ink); font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.tnote {
  font-size: var(--t-sm); line-height: 1.62; color: var(--ink-3);
  max-width: var(--prose); margin-top: var(--s5);
}
.tnote b { color: var(--ink-2); }

/* ---------------------------------------------------------- 10. figures/pull */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 2px solid var(--peri);
  border-bottom: 1px solid var(--rule);
}
.figure { padding: var(--s6) var(--s5) var(--s6) 0; }
.figure + .figure { border-left: 1px solid var(--rule); padding-left: var(--s5); }
.figure .n {
  display: block;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-num); line-height: 1; letter-spacing: -0.04em;
  color: var(--peri-ink);
}
.figure .n .unit { font-size: 0.42em; letter-spacing: 0.04em; color: var(--ink-3); margin-left: 3px; }
.figure .c {
  display: block; margin-top: var(--s3);
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); max-width: 26ch;
}
@media (max-width: 560px) {
  .figure + .figure { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .figure { padding-block: var(--s5); }
}

.pull {
  border-left: 3px solid var(--peri);
  padding: var(--s2) 0 var(--s2) var(--s5);
  margin-block: var(--s7);
  font-size: var(--t-lg); line-height: 1.38; letter-spacing: -0.012em;
  color: var(--ink); max-width: 46ch;
}
.pull cite { display: block; margin-top: var(--s4); font-family: var(--mono);
  font-size: var(--t-xs); font-style: normal; letter-spacing: 0.06em; color: var(--ink-3); }

/* A panel for a caveat that must be read. Sunk, not coloured — a warning box in
   signal red every few screens teaches the reader to skip it. */
.panel {
  background: var(--peri-wash);
  border: 1px solid var(--peri-line);
  padding: var(--s6);
  max-width: var(--prose);
}
.panel > .ph {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s4); display: block;
}
.panel--signal { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 30%, transparent); }
.panel--signal > .ph { color: var(--signal); }

/* ------------------------------------------------------------- 11. controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  min-height: 44px; padding: 0 var(--s5);
  border: 1px solid var(--ink); border-radius: 2px;
  color: var(--ink); background: transparent;
  cursor: pointer; transition: background-color .16s, color .16s;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--quiet { border-color: var(--rule-strong); color: var(--ink-2); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.masthead .btn { min-height: 34px; padding: 0 var(--s4); }

.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* the one form on the site */
.wl { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); max-width: 520px; }
.wl input {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--serif); font-size: var(--t-base);
  padding: 0 var(--s4); min-height: 44px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
}
.wl input::placeholder { color: var(--ink-4); }
.wl input:focus { outline: none; border-color: var(--ink); }
.wlmsg {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  margin-top: var(--s3); min-height: 1.2em; letter-spacing: 0.04em;
}

/* on-page contents */
.toc { border-top: 2px solid var(--peri); margin-top: var(--s6); max-width: 560px; }
.toc a {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-2); font-size: var(--t-base);
}
.toc a:hover { color: var(--accent); }
.toc a .tn {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.16em;
  color: var(--ink-4); flex: none; width: 2.2em;
}

/* --------------------------------------------------------------- 12. footer */

.foot { border-top: 2px solid var(--peri); margin-top: var(--sec-y); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s7) var(--s5);
  padding-block: var(--s8) var(--s7);
}
.foot-brand .ftag {
  font-size: var(--t-sm); color: var(--ink-3); max-width: 30ch; margin-top: var(--s4);
}
.foot-col { display: flex; flex-direction: column; gap: var(--s3); align-items: start; }
.foot-col .fh {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--t-2xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s1);
}
.foot-col a { color: var(--ink-2); font-size: var(--t-sm); }
.foot-col a:hover { color: var(--ink); }
.foot-note {
  border-top: 1px solid var(--rule);
  padding-block: var(--s5) var(--s8);
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.7;
  color: var(--ink-3); max-width: 92ch; letter-spacing: 0.02em;
}
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- 13. motion */

/* One orchestrated load, then nothing. Rules draw from the inline start and the
   content above the fold staggers up behind them. Everything below the fold is
   revealed on scroll by avano-system.js, which sets [data-seen]. */
@media (prefers-reduced-motion: no-preference) {
  .in { opacity: 0; transform: translateY(14px); animation: rise .72s cubic-bezier(.22,.7,.24,1) forwards; }
  .in[data-d="1"] { animation-delay: .07s; }
  .in[data-d="2"] { animation-delay: .14s; }
  .in[data-d="3"] { animation-delay: .21s; }
  .in[data-d="4"] { animation-delay: .28s; }
  .in[data-d="5"] { animation-delay: .35s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  .draw { transform-origin: left center; animation: draw .9s cubic-bezier(.22,.7,.24,1) forwards; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .r { opacity: 0; transform: translateY(16px); transition: opacity .68s cubic-bezier(.22,.7,.24,1), transform .68s cubic-bezier(.22,.7,.24,1); }
  .r[data-seen] { opacity: 1; transform: none; }
  .r[data-seen][data-d="1"] { transition-delay: .06s; }
  .r[data-seen][data-d="2"] { transition-delay: .12s; }
  .r[data-seen][data-d="3"] { transition-delay: .18s; }
}
/* The reduced-motion contract: no transform, no fade, everything visible. The
   .r class must never be the only thing making an element visible without it. */
@media (prefers-reduced-motion: reduce) {
  .in, .r { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- 14. utility */

.mono { font-family: var(--mono); }
.small { font-size: var(--t-sm); }
.dim { color: var(--ink-3); }
.narrow { max-width: var(--prose); }
.mt7 { margin-top: var(--s7); }
.mt6 { margin-top: var(--s6); }
.mt5 { margin-top: var(--s5); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ============================================================================
   6b. THE WIRE — the page doing the thing instead of describing it.

   Avano's central claim is that a network observer cannot read your volume off
   the link: the phone emits at a constant rate whether you are writing or
   sitting in silence. That is not photographable and it is not describable in
   a way anyone believes. It is, however, demonstrable in a browser in five
   seconds with nothing installed, and no competitor can copy the demo without
   the product actually behaving this way.

   The two-view toggle is the whole point. YOUR view highlights the pulse
   carrying your message; the OBSERVER view is the identical wire with the
   highlight removed, because that is precisely what the difference is —
   nothing on the wire, only knowledge you have and they do not.

   It is a dark panel on a white page on purpose. The app's #06070b is
   legitimate here because it IS the product; a light site showing a dark app
   should look like this.
   ============================================================================ */

.wire {
  background: #06070b;
  border: 1px solid rgba(168, 192, 230, .22);
  border-radius: 3px;
  padding: clamp(20px, 2.6vw, 30px);
  color: #eef2f8;
  box-shadow: 0 30px 70px -34px rgba(53, 97, 143, .5);
}
.wire-top {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.wire-top .wl2 {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .2em; text-transform: uppercase; color: #a8c0e6;
}
.wire-top .wr2 {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: #59627a;
}
.wire-lane { position: relative; }
.wire-lane .cap2 {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .18em;
  text-transform: uppercase; color: #59627a; margin-bottom: 7px; display: block;
}
.wire canvas { display: block; width: 100%; }
.wire .youc { height: 34px; }
.wire .strip {
  background: #0c0f16; border: 1px solid rgba(168, 192, 230, .14);
  border-radius: 3px; overflow: hidden;
}
.wire .wc { height: 116px; }
@media (max-width: 560px) { .wire .wc { height: 96px; } }

.wire-ctl { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s5); }
.wire form { display: flex; gap: 7px; flex: 1 1 260px; min-width: 0; }
.wire input {
  flex: 1; min-width: 0;
  background: #0c0f16; border: 1px solid rgba(168, 192, 230, .22);
  color: #eef2f8; font-family: var(--serif); font-size: var(--t-base);
  padding: 0 var(--s4); min-height: 44px; border-radius: 2px;
}
.wire input::placeholder { color: #59627a; }
.wire input:focus { outline: none; border-color: #a8c0e6; }
.wire form button {
  background: #a8c0e6; color: #06070b; border: 0; border-radius: 2px;
  font-family: var(--mono); font-weight: 500; font-size: var(--t-2xs);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 0 var(--s5); min-height: 44px; cursor: pointer;
}
.wire form button:hover { background: #c6d3e6; }

.wire-seg { display: inline-flex; border: 1px solid rgba(168,192,230,.30); border-radius: 2px; overflow: hidden; }
.wire-seg button {
  background: transparent; color: #a8c0e6; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em;
  text-transform: uppercase; padding: 0 var(--s4); min-height: 44px;
}
.wire-seg button.on { background: #a8c0e6; color: #06070b; }

.wire-note {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.6;
  color: #a8c0e6; margin-top: var(--s4); min-height: 2.6em;
  transition: opacity .4s, filter .4s;
}
.wire-take {
  margin-top: var(--s4); color: #b6c0d2; font-size: var(--t-sm); line-height: 1.68; max-width: 74ch;
}
.wire-take b { color: #eef2f8; font-weight: 500; }
.wire-take .lim { color: #d98a7e; }

/* ============================================================================
   6c. DOWNLOAD CONTROLS — present, finished, and honestly not-yet.

   The founder wants launch to be a link change and nothing else. So the state
   lives in ONE place: the DOWNLOADS object at the top of avano-system.js. A
   null value renders the control in its not-yet state; setting a URL turns the
   same control into a live link. The markup never changes.

   Deliberately NOT Apple or Google badge artwork. We do not have the official
   assets, and improvising them is a trademark problem rather than a taste one.
   These are plain typographic controls using the correct product names.
   ============================================================================ */

.dl { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block: var(--s6) var(--s5); }
.dl-item {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 11px var(--s5) 10px; min-height: 54px;
  background: var(--paper);
  text-decoration: none; min-width: 172px;
}
.dl-item .g { display: flex; flex-direction: column; line-height: 1.2; }
.dl-item .g .a {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.dl-item .g .b {
  font-family: var(--serif); font-size: var(--t-md); color: var(--ink); margin-top: 3px;
}
.dl-item svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
/* not-yet is the DEFAULT state in the markup, so a visitor with JavaScript off
   is never shown a live-looking control we cannot honour. */
.dl-item[aria-disabled="true"] { background: var(--paper-sunk); cursor: default; }
.dl-item[aria-disabled="true"] .g .b { color: var(--ink-3); }
a.dl-item:not([aria-disabled="true"]) { border-color: var(--peri); }
a.dl-item:not([aria-disabled="true"]):hover { background: var(--peri-wash); }
a.dl-item:not([aria-disabled="true"]) svg { color: var(--peri-ink); }
.dl-note {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.65;
  color: var(--ink-3); max-width: 68ch;
}

/* ============================================================================
   7b. THE WORDMARK, RENDERED LIVE — not a PNG.

   `design/app-cipher-mockup.html` renders the wordmark as live type: Archivo
   800 with a carved text-shadow stack and a specular sweep clipped to the
   glyphs. That is the real treatment and the site was shipping a flat 1600px
   raster of it, which goes soft the moment it is set large and cannot take the
   page's own light.

   The app's carve is cut into a DARK surface, so its stack is dark above and
   light below. On white that inverts in weight but not in direction: the top
   inner edge of a cut still sits in shadow and the lower inner wall still
   catches the light. So the light-ground stack is a fine white top edge, a
   periwinkle catch on the lower edge, and a soft blue-grey drop — an
   engraving into paper rather than a letterpress bruise.

   Archivo 800 is already self-hosted (site/fonts/archivo-800-latin.woff2), so
   this costs no new request.
   ============================================================================ */

.wordmark {
  position: relative;
  display: inline-block;
  font-family: 'Archivo', var(--serif), sans-serif;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.075em;
  transform: scale(1.15, .8);
  transform-origin: left center;
  color: var(--ink);
  white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.wordmark__carve {
  text-shadow:
    0 -1px 0 rgba(255,255,255,.95),
    0 -2px 2px rgba(53,97,143,.10),
    0 1px 0 rgba(168,192,230,.75),
    0 2px 3px rgba(53,97,143,.20),
    0 5px 12px rgba(53,97,143,.10);
}
/* The specular sweep was authored for the app's near-black ground, where a
   near-white band at .62 reads as light travelling across metal. Ported to
   this white page over near-black letters it did the opposite: it lifted the
   two middle letters toward grey, so AVANO rendered as a black "AV", a silver
   "AN" and a black "O" -- which looks like a broken font rather than a lit
   one. The founder's note was "logo ul mare sa fie corect".

   Two changes, and the second matters more than the first. The band is much
   weaker, because on a light ground the eye reads a highlight as ABSENCE OF
   INK rather than as added light. And it is periwinkle throughout instead of
   passing through #c6d3e6, so what little shows reads as the app's own colour
   rather than as grey -- the mark picks up the product's blue instead of
   losing density. The dark-mode block below is untouched: it was already
   correct on the ground it was drawn for. */
.wordmark__spec {
  position: absolute; left: 0; top: 0; width: 100%;
  background: linear-gradient(104deg,
    transparent 22%, rgba(168,192,230,.10) 38%, rgba(168,192,230,.30) 47%,
    rgba(168,192,230,.09) 57%, transparent 72%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  pointer-events: none;
}
/* On the app's own ground the original stack is correct, so dark restores it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark { color: #121725; }
  :root:not([data-theme="light"]) .wordmark__carve {
    text-shadow:
      0 -1px 0 rgba(0,0,0,.99), .4px -2.4px 2.6px rgba(0,0,0,.68),
      0 -5px 7px rgba(0,0,0,.42), -.5px 1px 0 rgba(203,231,246,.5),
      .8px 1px 0 rgba(238,245,250,.34), 0 2.4px 3px rgba(169,207,226,.2),
      0 6px 14px rgba(169,207,226,.07), 0 7px 14px rgba(0,0,0,.42);
  }
  :root:not([data-theme="light"]) .wordmark__spec {
    background: linear-gradient(104deg, transparent 18%, rgba(216,238,250,.06) 34%,
      rgba(224,242,252,.22) 45%, rgba(216,238,250,.05) 56%, transparent 72%);
    -webkit-background-clip: text; background-clip: text;
  }
}
:root[data-theme="dark"] .wordmark { color: #121725; }
:root[data-theme="dark"] .wordmark__carve {
  text-shadow:
    0 -1px 0 rgba(0,0,0,.99), .4px -2.4px 2.6px rgba(0,0,0,.68),
    0 -5px 7px rgba(0,0,0,.42), -.5px 1px 0 rgba(203,231,246,.5),
    .8px 1px 0 rgba(238,245,250,.34), 0 2.4px 3px rgba(169,207,226,.2),
    0 6px 14px rgba(169,207,226,.07), 0 7px 14px rgba(0,0,0,.42);
}
:root[data-theme="dark"] .wordmark__spec {
  background: linear-gradient(104deg, transparent 18%, rgba(216,238,250,.06) 34%,
    rgba(224,242,252,.22) 45%, rgba(216,238,250,.05) 56%, transparent 72%);
  -webkit-background-clip: text; background-clip: text;
}

/* the masthead lockup, live and larger than the raster it replaces */
.brand { text-decoration: none; }
.brand .wordmark { font-size: 26px; }
.brand-bores { display: inline-flex; gap: 6px; align-items: center; }
.brand-bores .bore { width: 11px; }

/* THE LOCKUP — the brand at full size, bores milled into the page's own
   surface. Live CSS rather than the raster: at hero scale the -day PNG's
   inner edge goes soft and stops reading as a cut, which is the exact defect
   this mark has been corrected for once already. Drawn, it takes the page's
   light and stays a hole at any size. */
.lockup { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
/* align-items:center is load-bearing. A flex row defaults to stretch, so a
   .bore next to any taller sibling is pulled into an ellipse -- invisible
   while all three are equal, and immediate the moment one differs. */
.lockup .lockup-bores { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 44px); }
.lockup .lockup-bores .bore { width: clamp(34px, 5.2vw, 62px); }
.lockup .wordmark { font-size: clamp(56px, 11vw, 132px); transform-origin: center; }

/* the wordmark is rendered twice (carve + specular sweep), so the accessible
   name comes from one visually-hidden span rather than from duplicated text */
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.wordmark__carve, .wordmark__spec { speak: none; }