/* =====================================================================
   SaveSaveSaveSave — shared paper stylesheet

   Used by whitepaper.html, privacy.html and terms.html. It exists so the
   three document pages cannot drift apart: the chrome, the paper sheet,
   the accents and the print rules are defined once.

   index.html deliberately does NOT use this file. The scanner is a single
   self-contained page by design, and splitting its CSS out would break
   that property for no benefit.
   ===================================================================== */
:root{
    /* Chrome — matches the scanner: near-black, with purple and blue doing
       the colour work. */
    --ink:#08080C;
    --surface:#131318;
    --border:#2A2A35;
    --text-muted:#9B9BAB;
    --accent:#B98CFF;
    --accent-solid:#9945FF;
    --accent-2:#00D1FF;

    /* Paper — this is a document, so it stays a light sheet. Both accents
       were contrast-checked against white: 7.1:1 and 6.7:1. */
    --paper:#FFFFFF;
    --paper-text:#1B2430;
    --paper-muted:#5B677D;
    --paper-border:#E4E8ED;
    --paper-accent:#6D28D9;
    --paper-accent-2:#1D4ED8;
    --paper-tint:#F6F2FF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;
    background:
      radial-gradient(ellipse 900px 520px at 12% -12%, rgba(153,69,255,0.20), transparent 70%),
      radial-gradient(ellipse 760px 520px at 100% -4%, rgba(0,209,255,0.10), transparent 70%),
      var(--ink);
    color:var(--paper-text);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--paper-accent);}
  a:focus-visible, button:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

  header.top{display:flex; align-items:center; justify-content:space-between; padding:22px 20px; max-width:820px; margin:0 auto; gap:16px; flex-wrap:wrap;}
  /* The wordmark is the way home from every page except the scanner
     itself. It is an <a>, not a click handler on a <div>, so it works
     with the keyboard, with a middle-click into a new tab, and with a
     screen reader announcing it as a link.

     It is NOT a link on index.html. There the logo would reload the
     page a visitor may have just pasted a long message into, and losing
     someone's input to a stray click on the logo is a worse outcome
     than a logo that does nothing while you are already home. */
  .brand{display:flex; align-items:center; gap:12px; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.15rem; color:#ECECF2;}
  a.brand{text-decoration:none; border-radius:2px; transition:opacity 0.15s ease;}
  a.brand:hover{opacity:0.82;}
  a.brand:hover .wordmark .wm:nth-child(4){color:var(--accent-2);}
  a.brand:focus-visible{outline:3px solid var(--accent); outline-offset:4px;}
  /* The mark is a <span> inside the link, so give it block layout back. */
  a.brand .brand-mark{display:block; flex:0 0 auto;}
  .brand-mark{width:26px; height:26px; border-radius:0;
    background:linear-gradient(135deg, var(--accent-solid) 0%, var(--accent-2) 100%);
    box-shadow: -5px 5px 0 -1px rgba(153,69,255,0.55), -10px 10px 0 -2px rgba(153,69,255,0.22);
    margin-left:8px;}
  .wordmark{display:flex; white-space:nowrap;}
  .wordmark .wm{margin-left:0.14em;}
  .wordmark .wm:nth-child(1){opacity:1; color:#ECECF2;}
  .wordmark .wm:nth-child(2){opacity:0.68; color:#ECECF2;}
  .wordmark .wm:nth-child(3){opacity:0.42; color:#ECECF2;}
  .wordmark .wm:nth-child(4){opacity:1; color:var(--accent); margin-left:0;}
  .nav-link{color:var(--text-muted); font-size:0.85rem; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border);}
  .nav-link:hover{color:var(--accent);}
  .top-rule{height:1px; max-width:820px; margin:0 auto 22px;
    background:linear-gradient(90deg, var(--accent-solid), var(--accent-2) 45%, transparent 85%);
    opacity:0.55;}

  .paper-wrap{max-width:820px; margin:0 auto; padding:0 20px 60px;}
  .paper{
    background:var(--paper); color:var(--paper-text);
    border-radius:0; padding:52px 56px 60px;
    border-top:3px solid var(--accent-solid);
    box-shadow:0 30px 80px -30px rgba(0,0,0,0.7);
  }

  /* One button, centred. It carried two lines of explanatory text until
     they were removed as clutter — a download button does not need to be
     told what a PDF is. */
  .toolbar{
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--border); border-radius:0;
    padding:14px 20px; max-width:820px; margin:0 auto 22px;
  }
  .dl-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--accent-solid), #7B2FE0); color:#FFFFFF; font-weight:700;
    font-family:'Space Grotesk', sans-serif; font-size:0.92rem;
    padding:12px 20px; border-radius:2px; text-decoration:none; white-space:nowrap;
  }
  .dl-btn:hover{filter:brightness(1.12);}

  .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.06em; color:var(--paper-accent); text-transform:uppercase; margin:0 0 10px;}
  h1.title{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:2.1rem; line-height:1.2; margin:0 0 8px; color:var(--paper-text);}
  .subtitle{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem; color:var(--paper-accent); margin:0 0 18px;}
  .meta{color:var(--paper-muted); font-size:1rem; margin:0 0 26px;}
  blockquote.tagline{
    font-style:italic; font-size:1.15rem; line-height:1.6; color:var(--paper-accent);
    border-right:3px solid var(--paper-accent); margin:0 0 36px; padding:4px 20px 4px 0;
  }

  h2{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.5rem; color:var(--paper-text); margin:44px 0 16px; padding-top:8px; border-top:1px solid var(--paper-border);}
  h2:first-of-type{border-top:none; margin-top:0;}
  h3{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.08rem; color:var(--paper-accent); margin:26px 0 8px;}
  p{font-size:1.13rem; line-height:1.75; margin:0 0 18px; color:var(--paper-text);}
  ul, ol{font-size:1.13rem; line-height:1.7; margin:0 0 18px; padding-right:1.4em;}
  li{margin-bottom:10px;}
  strong{color:var(--paper-text);}
  em{color:var(--paper-accent);}
  code{font-family:'IBM Plex Mono', monospace; font-size:0.92em; background:var(--paper-tint); padding:1px 5px; border-radius:2px; color:var(--paper-accent);}

  .tag-live{color:#15803D; font-weight:600;}
  .tag-new{background:var(--paper-accent); color:#FFFFFF; font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem; letter-spacing:0.06em; padding:2px 7px; border-radius:2px; vertical-align:2px; margin-right:8px;}
  .tag-roadmap{color:#B45309; font-weight:600;}

  .rule-box{background:var(--paper-tint); border-right:3px solid var(--paper-accent); padding:18px 22px; margin:0 0 20px;}
  .rule-box .ladder{font-family:'IBM Plex Mono', monospace; font-size:1rem; color:var(--paper-accent);
    margin:0 0 10px; font-weight:600; letter-spacing:0.02em;}
  .rule-box p:last-child{margin-bottom:0;}

  table.chains{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:1.02rem;}
  table.chains th{text-align:right; font-family:'Space Grotesk', sans-serif; color:var(--paper-text); border-bottom:2px solid var(--paper-border); padding:8px 10px;}
  table.chains td{padding:8px 10px; border-bottom:1px solid var(--paper-border); color:var(--paper-muted); vertical-align:top;}
  table.chains td.num{font-family:'IBM Plex Mono', monospace; color:var(--paper-text); white-space:nowrap;}

  .glossary dt{font-weight:700; font-size:1.1rem; margin-top:18px; color:var(--paper-text);}
  .glossary dd{margin:4px 0 0; color:var(--paper-muted); font-size:1.05rem; line-height:1.6;}

  /* ---- Explanatory figures (guide pages) --------------------------
     Diagrams are inline SVG so they need no extra request, inherit the
     page font, and print with the document. Figure text is kept large in
     viewBox units so it stays legible when the SVG scales down on a
     phone. */
  .fig{margin:26px 0 30px; padding:0;}
  .fig svg{width:100%; height:auto; display:block;}
  .fig figcaption{font-size:0.92rem; color:var(--paper-muted); margin-top:10px; line-height:1.55;
    border-right:3px solid var(--paper-border); padding-right:12px;}
  .fig-frame{border:1px solid var(--paper-border); padding:18px 16px; background:#FDFCFF;}

  /* Step cards — reflow on a phone in a way an SVG cannot. */
  .steps{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0 28px;}
  .step-card{border:1px solid var(--paper-border); padding:14px 16px; background:#FDFCFF;}
  .step-card .n{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
    color:var(--paper-accent); display:block; margin-bottom:6px;}
  .step-card h4{font-family:'Space Grotesk',sans-serif; font-size:1rem; margin:0 0 8px; color:var(--paper-text);}
  .step-card p{font-size:0.95rem; line-height:1.55; margin:0 0 6px;}
  .step-card .yes{color:#15803D; font-weight:600;}
  .step-card .no{color:#B45309; font-weight:600;}
  @media (max-width: 640px){ .steps{grid-template-columns:1fr;} }

  /* ---- Live demo blocks (guide 2 onwards) -------------------------- */
  .demo{border:1px solid var(--paper-border); background:#FDFCFF; padding:16px 18px; margin:0 0 12px;}
  .demo .lab{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--paper-muted); display:block; margin-bottom:9px;}
  .demo .line{font-size:1.08rem; line-height:1.9; margin:0; color:var(--paper-text);}
  .zw{display:inline-block; background:#FEF3C7; border:1px solid #B45309; color:#7C2D12;
    font-family:'IBM Plex Mono',monospace; font-size:0.62rem; line-height:1.5; padding:0 4px;
    border-radius:2px; vertical-align:2px; margin:0 1px;}
  .tagch{background:#EDE9FE; border-color:#6D28D9; color:#4C1D95;}
  .counts{display:flex; gap:18px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace;
    font-size:0.82rem; color:var(--paper-muted); margin-top:4px;}
  .counts b{color:var(--paper-text); font-weight:600;}
  .homo{color:#B91C1C; text-decoration:underline; text-decoration-style:wavy; text-underline-offset:4px;}

  /* ---- Reveal blocks · native <details>, no script needed ---------- */
  .reveal{border:1px solid var(--paper-border); background:#FDFCFF; margin:0 0 14px;}
  .reveal summary{cursor:pointer; padding:14px 18px; font-family:'Space Grotesk',sans-serif;
    font-weight:600; font-size:0.98rem; color:var(--paper-accent); list-style:none;}
  .reveal summary::-webkit-details-marker{display:none;}
  .reveal summary::before{content:"▸ "; font-size:0.9em;}
  .reveal[open] summary::before{content:"▾ ";}
  .reveal summary:hover{background:var(--paper-tint);}
  .reveal .inner{padding:0 18px 16px; border-top:1px solid var(--paper-border);}
  .reveal .inner p{font-size:1rem; line-height:1.65; margin:12px 0 0;}
  .msg{font-family:'IBM Plex Mono',monospace; font-size:0.9rem; line-height:1.75;
    background:#FFFFFF; border:1px solid var(--paper-border); padding:14px 16px; margin:0 0 10px;
    white-space:pre-wrap; color:var(--paper-text);}
  .msg .inj{background:#FEE2E2; border-bottom:2px solid #B91C1C; color:#7F1D1D;}

  /* ---- Keyed tiles · a labelled block that keeps ordinary prose -----
     The step-card grid is for short parallel items. These are for the
     numbered sections of a guide, where each one runs to a paragraph or
     two and a two-column grid would leave one column half empty. */
  .tile{border-right:3px solid var(--paper-accent); background:var(--paper-tint);
    padding:16px 20px; margin:0 0 18px;}
  .tile .n{display:block; font-family:'IBM Plex Mono',monospace; font-size:0.74rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-accent); margin:0 0 6px;}
  .tile h3{margin:0 0 10px; color:var(--paper-text);}
  .tile p{font-size:1.05rem; line-height:1.68;}
  .tile ul{margin:0 0 14px;}
  .tile > :last-child{margin-bottom:0;}

  /* A one-line shape, stated as a shape. Monospace because the point is
     the arrow, not the sentence. */
  .pattern{background:#FFFFFF; border:1px solid var(--paper-border);
    font-family:'IBM Plex Mono',monospace; font-size:0.98rem; line-height:2;
    text-align:center; padding:14px 16px; margin:0 0 20px; color:var(--paper-accent);}
  .pattern b{color:var(--paper-text); font-weight:600;}

  /* Two sources side by side. The colours are load-bearing: green is the
     instruction the reader wrote, red is the one they didn't. */
  .two-up{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 22px;}
  .two-up .src{border:1px solid var(--paper-border); padding:14px 16px; background:#FFFFFF;}
  .two-up .src .lbl{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:0.95rem; margin:0 0 8px;}
  .two-up .src q{font-family:'IBM Plex Mono',monospace; font-size:0.9rem; line-height:1.6;
    color:var(--paper-text); quotes:none;}
  .two-up .yours{border-right:3px solid #15803D;}
  .two-up .yours .lbl{color:#15803D;}
  .two-up .theirs{border-right:3px solid #B91C1C;}
  .two-up .theirs .lbl{color:#B91C1C;}
  @media (max-width: 640px){ .two-up{grid-template-columns:1fr;} }

  /* ---- URL anatomy -------------------------------------------------
     A diagram built out of text instead of a picture.

     The SVG version of this looked right and failed four ways: it could
     not wrap on a phone, its alignment depended on a web font arriving,
     its text could not be selected or copied, and with styles stripped
     its labels collapsed into one unreadable run of words. A list of
     labelled parts survives all four, and a screen reader reads it out
     part by part instead of reaching for a summary written beside it.

     Colour is never the only signal here: every part also carries its
     name in words, so the diagram works in greyscale and for a reader
     who cannot distinguish the tints. */
  .urlparts{margin:0 0 10px; border:1px solid var(--paper-border);
    background:#FFFFFF; padding:16px;}
  .urlparts ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
  .urlparts li{flex:0 1 auto; min-width:0; border-right:3px solid var(--paper-border);
    padding:7px 11px; background:var(--paper-tint);}
  .urlparts code{display:block; font-size:0.95rem; word-break:break-all;
    color:var(--paper-text); background:none; padding:0;}
  .urlparts .up-tag{display:block; font-family:'IBM Plex Sans',sans-serif;
    font-size:0.78rem; line-height:1.45; color:var(--paper-muted); margin-top:4px;}
  .urlparts .owner{border-right-color:var(--paper-text); background:#EDF0F4;}
  .urlparts .owner code{font-weight:600;}
  .urlparts .owner .up-tag{color:var(--paper-text); font-weight:600;}
  .urlparts .warn{border-right-color:#B91C1C; background:#FEF2F2;}
  .urlparts .warn .up-tag{color:#B91C1C;}
  .urlparts .muted code{color:var(--paper-muted);}
  .urlparts .strike code{text-decoration:line-through;
    text-decoration-color:#B91C1C; text-decoration-thickness:2px;}
  .urlparts-note{font-size:0.9rem; color:var(--paper-muted); margin:0 0 22px;}
  @media (max-width: 640px){
    .urlparts ol{display:block;}
    .urlparts li{margin:0 0 8px;}
    .urlparts li:last-child{margin-bottom:0;}
  }

  /* ---- Tables in guides --------------------------------------------
     Two things a table must not do on a phone: push the page sideways,
     or shrink until it cannot be read. This one scrolls inside its own
     frame, the frame is focusable so a keyboard can reach the scroll,
     and a line underneath says it scrolls — an invisible scroll area is
     the same as a missing column. */
  .tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--paper-border); margin:0 0 6px; background:#FFFFFF;}
  .gtable{border-collapse:collapse; width:100%; min-width:440px; font-size:0.97rem;}
  .gtable th, .gtable td{text-align:right; padding:10px 14px; vertical-align:top;
    line-height:1.55; border-bottom:1px solid var(--paper-border);}
  .gtable thead th{font-family:'Space Grotesk',sans-serif; font-size:0.8rem;
    letter-spacing:0.05em; text-transform:uppercase; color:var(--paper-muted);
    background:var(--paper-tint);}
  .gtable tbody tr:last-child td{border-bottom:none;}
  .gtable code{font-size:0.92rem; word-break:break-all;}
  .gtable .can{border-right:3px solid #15803D;}
  .gtable .cannot{border-right:3px solid #B91C1C;}
  .tbl-note{font-size:0.85rem; color:var(--paper-muted); margin:0 0 22px;}

  /* On a phone, a comparison table read sideways is a table nobody
     finishes. `.tbl-wrap.stack` turns each row into a block and moves
     the column heading onto each cell, so the pairing survives without
     a horizontal scroll. Every cell keeps its own heading, so the
     meaning does not depend on remembering which column you were in. */
  @media (max-width: 640px){
    .tbl-wrap.stack{overflow-x:visible;}
    .tbl-wrap.stack .gtable{min-width:0;}
    .tbl-wrap.stack thead{position:absolute; width:1px; height:1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
    .tbl-wrap.stack tbody tr{display:block; padding:6px 0;
      border-bottom:1px solid var(--paper-border);}
    .tbl-wrap.stack tbody tr:last-child{border-bottom:none;}
    .tbl-wrap.stack td{display:block; border-bottom:none; padding:7px 14px;}
    .tbl-wrap.stack td::before{content:attr(data-label); display:block;
      font-family:'Space Grotesk',sans-serif; font-size:0.7rem; letter-spacing:0.05em;
      text-transform:uppercase; color:var(--paper-muted); margin-bottom:3px;}
  }


  /* Section numbers as their own mark above the heading, rather than
     "1." glued to the title. Two reasons: the eye can find a section
     without reading it, and a screen reader announces the heading text
     first instead of a bare digit. */
  .paper h2 .sec-n{display:block; font-family:'IBM Plex Mono',monospace;
    font-size:0.74rem; font-weight:500; letter-spacing:0.14em;
    color:var(--paper-accent); margin:0 0 6px;}

  /* The label that marks the worked example as invented. It sits on the
     message block itself, not in the prose above it, so it travels with
     the thing it describes if the page is skimmed or excerpted. */
  .msg-label{display:block; font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--paper-muted); margin:0 0 6px;}

  /* ---- Guides index ----------------------------------------------- */
  .guide-list{display:grid; gap:14px; margin:26px 0 10px;}
  .guide-card{display:block; border:1px solid var(--paper-border); border-right:3px solid var(--paper-accent);
    padding:18px 20px; text-decoration:none; background:#FFFFFF;}
  .guide-card:hover{background:var(--paper-tint);}
  .guide-card h3{margin:0 0 6px; color:var(--paper-text); font-size:1.15rem;}
  .guide-card p{margin:0 0 8px; font-size:1rem; line-height:1.6; color:var(--paper-muted);}
  .guide-meta{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em;
    color:var(--paper-accent); text-transform:uppercase;}
  .guide-soon{border:1px dashed var(--paper-border); border-right:3px solid var(--paper-border);
    padding:16px 20px; background:#FCFCFD;}
  .guide-soon h3{margin:0 0 6px; color:var(--paper-muted); font-size:1.05rem;}
  .guide-soon p{margin:0; font-size:0.96rem; line-height:1.6; color:var(--paper-muted);}
  .guide-soon .guide-meta{color:var(--paper-muted);}

  .closing-quote{font-size:1.2rem; line-height:1.7; color:var(--paper-text); margin:24px 0;}
  hr.sep{border:none; border-top:1px solid var(--paper-border); margin:36px 0;}
  .living-note{font-style:italic; color:var(--paper-muted); font-size:1rem;}

  /* Author bio at the end of each guide. */
  .author-box{margin:36px 0 0; padding:18px 20px; border:1px solid var(--paper-border); background:var(--paper-tint); color:var(--paper-text);}
  .author-box p{margin:0; font-size:0.98rem; line-height:1.6;}
  .author-box p + p{margin-top:6px;}
  .keep-reading{margin-top:40px; padding-top:24px; border-top:1px solid var(--paper-border);}
  .keep-reading ul{list-style:none; margin:10px 0 0; padding:0;}
  .keep-reading li{margin:0 0 10px; font-size:1.02rem;}
  .keep-reading a{text-decoration:none;}
  .keep-reading a:hover{text-decoration:underline;}
  .bottom-cta{text-align:center; margin-top:40px; padding-top:32px; border-top:1px solid var(--paper-border);}

  footer.site-footer{max-width:820px; margin:40px auto 60px; padding:0 20px; text-align:center; color:var(--text-muted); font-size:0.8rem;}
  /* The global p rule is for the white paper; on the dark page it made the footer text near-invisible. */
  footer.site-footer p{color:inherit; font-size:inherit; line-height:1.9; margin:0;}
  footer.site-footer a{white-space:nowrap;}
  .coffee-btn{display:inline-block; margin-right:8px; padding:3px 10px; border:1px solid #FF5E5B; border-radius:999px; color:#FF8A87 !important; text-decoration:none; font-size:0.78rem; white-space:nowrap;}
  .coffee-btn:hover{background:rgba(255,94,91,0.14);}

  /* ---- Advertising rails -------------------------------------------
     Fixed in the page gutters, so they never enter the document flow.
     That is the whole design: a unit that participates in layout can
     push content down when a creative loads, and the site's Cumulative
     Layout Shift is already measured at 0.332, which Google rates poor.
     A fixed rail cannot make that number worse.

     NOT RENDERED below 1280px. `display:none` rather than a visual hide,
     so on a phone the markup costs nothing and the reading column keeps
     the full width. Roughly a third of visitors arrive on Android and
     none of them should meet a rail.

     NOTHING IS SHOWN UNTIL AN AD ACTUALLY FILLS. A rail starts at
     data-ad-state="pending" and stays hidden; a small script promotes it
     to "filled" only once AdSense reports a creative. Without this an
     unfilled slot leaves the word "Advertisement" floating above an
     empty box — which is exactly how the page read during review, and
     how it would read on every page AdSense declines to fill.

     KILL SWITCH: <html data-ads="off"> removes every slot instantly. */
  .ad-rail{display:none;}
  @media (min-width: 1280px){
    .ad-rail[data-ad-state="filled"]{
      display:block; position:fixed; top:96px; width:160px; z-index:1;
      max-height:calc(100vh - 140px); overflow:hidden;
    }
    .ad-rail-left{right:max(12px, calc((100vw - 820px) / 2 - 176px));}
    .ad-rail-right{left:max(12px, calc((100vw - 820px) / 2 - 176px));}
    .ad-rail .adsbygoogle{width:160px; min-height:600px;}
  }
  /* Always announced as advertising, in the same place, in a style that
     deliberately does not match any control or verdict on the page. */
  .ad-label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:0.6rem;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
    opacity:0.75; margin-bottom:6px; text-align:center;
  }
  :root[data-ads="off"] .ad-rail{display:none !important;}

  /* Print / PDF. The dark chrome is screen furniture; on paper only the
     document itself should survive. The PDF shipped from this site is
     generated by printing this page, so these rules are what that file
     looks like — keeping the two editions from drifting apart. */
  @media print{
    @page{size:A4; margin:18mm 16mm 20mm;}
    body{background:#FFFFFF !important; font-family:'IBM Plex Sans', 'Liberation Sans', system-ui, sans-serif;}
    header.top, .top-rule, .toolbar, .bottom-cta, footer.site-footer{display:none !important;}
    .paper-wrap{max-width:none; padding:0;}
    .paper{box-shadow:none; padding:0; border-top:none;}
    h1.title{font-size:30pt;}
    .subtitle{font-size:15pt;}
    h2{font-size:16pt; margin-top:26px; page-break-after:avoid;}
    h3{font-size:12.5pt; page-break-after:avoid;}
    p, ul, ol{font-size:11.5pt; line-height:1.6;}
    li{margin-bottom:6px;}
    table.chains{font-size:10.5pt; page-break-inside:avoid;}
    .rule-box, .glossary dt, .glossary dd{page-break-inside:avoid;}
    .glossary dd{font-size:11pt;}
    blockquote.tagline{font-size:12pt;}
    a{color:var(--paper-accent); text-decoration:none;}
  }

  @media (max-width: 640px){
    /* Long hostnames in the privacy table pushed the page 122px wider than
       the viewport. Break inside them and fix the column widths rather than
       letting the table decide it needs more room than the phone has. */
    table.chains{table-layout:fixed; width:100%;}
    table.chains th, table.chains td{overflow-wrap:anywhere; padding:7px 6px;}
    code{overflow-wrap:anywhere;}
    .paper{padding:32px 22px 40px;}
    h1.title{font-size:1.6rem;}
    p, ul, ol{font-size:1.05rem;}
    table.chains{font-size:0.9rem;}
    .rule-box{padding:14px 16px;}
    .rule-box .ladder{font-size:0.82rem;}
  }

  /* Code blocks on the developer pages (tools, agents): scroll inside the
     block instead of pushing the whole page sideways on a phone. */
  .paper pre{background:#FFFFFF; border:1px solid var(--paper-border); padding:12px 14px;
    margin:0 0 16px; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;}
  .paper pre code{font-family:'IBM Plex Mono',monospace; font-size:0.84rem; line-height:1.55;
    white-space:pre; word-break:normal;}
  .paper p code, .paper li code{overflow-wrap:anywhere;}