/* Owners Row — the explainer pages. One stylesheet for all of them.

   Layout follows Keith's reference, 2026-09-13: content left, a document
   preview and the topic list right. Nav and logo deliberately out of scope —
   he said ignore them.

   ⭐ ONE FILE, NOT ONE COPY PER PAGE. Eleven pages each holding their own copy
   of the palette is the several-doors failure in a fresh coat. */
:root{
  --bg:#131211; --panel:#1A1817; --panel-2:#211E1C;
  --ink:#F4F1EC; --ink-2:#B5AFA7; --ink-3:#857F77;
  --rule:#35312C; --orange:#F35B1C; --orange-2:#FF6B2C;
  --display:"Archivo Narrow","Oswald","Antonio","Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace;

  /* ⚠️ PAIRED WITH site/index.html. Same four levels, same four numbers — a
     reader crossing from the front page into a guide must not feel the type
     change under them. Move one, move both. */
  --say-quiet: 13.5px;
  --say:       18px;
  --say-up:    21px;
  --say-loud:  27px;
}
*{box-sizing:border-box}
/* 🔴 18px, NOT 16, AND THE MEASURE IS HALF THE REASON. Keith: "font size is
   kinda small... if someone is going to take the time to read it, it has to be
   easy enough to do so."

   Measured before changing anything: 16px across a 628px column is roughly 85
   to 90 characters a line, and comfortable reading is 60 to 75. So the page had
   two problems that look like one — the type was small AND the line was long,
   and each made the other worse.

   ⭐ RAISING THE SIZE FIXES BOTH. At 18px the same column carries about 72
   characters, which lands inside the comfortable range without touching the
   layout. Line height goes to 1.7 because longer passages need more room
   between lines than a UI label does.

   ⚠️ This is the READING stylesheet. The app and the sheets are separate and
   are not affected — a form field and an essay do not want the same size. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
     -webkit-font-smoothing:antialiased;font-size:18px;line-height:1.7}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:var(--orange-2)}
header{padding:22px 0 6px}
header img{display:block;width:clamp(140px,15vw,180px);height:auto}

/* ── the two columns ─────────────────────────────────────────────────────
   1.35fr / 1fr rather than halves: the reference gives the reading column
   clearly more room, and the preview only has to be legible as a thumbnail. */
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
      gap:38px;align-items:start;padding:20px 0 10px}
@media (max-width:940px){ .cols{grid-template-columns:1fr;gap:30px} }

/* ── left column ─────────────────────────────────────────────────────── */
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
         color:var(--orange);margin:0 0 12px}
h1{font-family:var(--display);font-weight:400;margin:0 0 16px;
   font-size:clamp(34px,5.4vw,58px);line-height:1;letter-spacing:.005em;
   text-transform:uppercase}
h1 .b{display:block;color:var(--orange)}
/* 🔴 FULL --ink. Keith: make the greyed text at the top white too. It measured
   8.60:1 against the page ground and --ink is 16.61:1 — both pass AA, and
   passing AA is not the same as being easy to read at the top of a long page.
   The lede is the first thing anybody reads; softening it made the page open
   quietly for no gain. */
.lede{color:var(--ink);font-size:clamp(18px,1.9vw,21px);line-height:1.55;margin:0 0 24px;max-width:52ch}
.hr{width:76px;height:2px;background:var(--orange);margin:0 0 30px}

/* An icon in the gutter, heading and body beside it. Grid rather than a float
   so the text never wraps under the icon on a narrow screen. */
.pt{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;margin:0 0 26px}
.pt .ic{width:42px;height:42px;border:1.5px solid var(--orange);border-radius:50%;
        display:flex;align-items:center;justify-content:center;color:var(--orange)}
.pt .ic svg{width:21px;height:21px;display:block}
.pt h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.3vw,25px);
       margin:7px 0 7px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.pt p{margin:0 0 13px}
.pt ul{margin:0 0 10px;padding:0;list-style:none}
.pt li{margin:0 0 10px;padding-left:20px;position:relative}
.pt li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
               border-radius:50%;background:var(--orange)}
strong{color:var(--ink)}

/* ⚠️ NOT a disclaimer box, and it appears once per page rather than per
   section. A repeated legal warning is the hedging Keith has ruled against. */
.scope{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
       background:var(--panel);border:1px solid var(--rule);border-radius:8px;
       padding:16px 18px;margin:34px 0 0}
.scope .ic{color:var(--ink-3)} .scope .ic svg{width:20px;height:20px}
.scope h3{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
          color:var(--ink-2);margin:3px 0 7px}
/* ⚠️ AND THE SCOPE BLOCK WAS FAILING AA OUTRIGHT — --ink-3 at 13.5px measures
   3.60:1 where body text needs 4.5. It is the page's honest-limit box, which
   makes it the worst thing on the site to have set faint. */
.scope p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.scope b{color:var(--ink-2)}

/* ── right column ────────────────────────────────────────────────────── */
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:20px}
@media (max-width:940px){ .side{position:static} }
.card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:18px}
.card .hd{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px}
.card .hd h2{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
             color:var(--ink-2);margin:0}
.card .hd span{font:600 11px/1 var(--body);letter-spacing:.1em;color:var(--ink-3)}

/* The sheet itself is white and printed — it sits on the dark panel as an
   object, which is what it is. */
/* 🔴 CAPPED AT ITS OWN PIXEL WIDTH. The file is 340px wide on purpose (see
   build-learn.ts); letting it stretch to fill the card would upscale a
   deliberately soft image into a blurry one. Small and sharp beats large and
   mushy, and both are unusable as a document, which is the point. */
.shot{display:block;width:100%;max-width:340px;margin:0 auto;height:auto;
      border-radius:3px;background:#fff;border:1px solid var(--rule)}
.noshot{display:flex;align-items:center;justify-content:center;text-align:center;
        aspect-ratio:768/1008;border:1px dashed var(--rule);border-radius:3px;
        color:var(--ink-3);font-size:13.5px;padding:22px;line-height:1.5}

/* Three route thumbnails stacked, for a guide with no sheet of its own. */
.routeshots{display:flex;gap:8px}
.routeshots .mini{max-width:none;min-width:0;flex:1 1 0}

/* == THE REFERRAL PANEL ====================================================
   Keith: "a collage of the docs with the pandadoc logo over the top and make
   it clickable, try it free here, make that the pdf image."

   🔴 IT REPLACES A PANEL THAT WAS DOING NOTHING. Every other page here shows
   the document it is about; the e-signature page has no document of its own,
   so the slot held three sheets it merely mentions. Meanwhile the only
   referral link on the page sat at 83% of its height, past where most readers
   stop. This puts the answer at eye level without moving it into the prose.

   ⚠️ THE SHEETS ARE REAL AND DELIBERATELY SOFT. Same previews as everywhere
   else, fanned and then veiled — they say "your paperwork" at a glance and
   cannot be read as documents, which is the rule the previews already follow.

   ⚠️ The mark is set in TYPE until an approved asset replaces it. Using a
   company's logo to promote a referral can imply a partnership, and their
   affiliate programme publishes assets for exactly this purpose. .plogo is
   waiting for a local file — never a hotlink to their server, on a site that
   promises nothing leaves your device. */
.promo{position:relative;display:block;border-radius:6px;overflow:hidden;
       aspect-ratio:768/1008;text-decoration:none;
       border:1px solid var(--rule);background:#15130F;
       transition:border-color .16s ease,transform .16s ease}
.promo:hover{border-color:var(--orange);transform:translateY(-2px)}
.promo .fan{position:absolute;inset:0;display:block}
/* Fanned rather than gridded: a stack of paper reads as a stack of paper, and
   the rotation is what stops three rectangles looking like a table. */
.promo .fan img{position:absolute;top:7%;width:62%;height:auto;border-radius:2px;
                background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.55)}
.promo .fan .f0{left:4%;transform:rotate(-7deg)}
.promo .fan .f1{left:19%;transform:rotate(1deg)}
.promo .fan .f2{left:34%;transform:rotate(9deg)}
.promo .veil{position:absolute;inset:0;display:block;
             background:linear-gradient(180deg,rgba(12,10,8,.35) 0%,rgba(12,10,8,.72) 46%,rgba(12,10,8,.93) 100%)}
.promo .badge{position:absolute;left:0;right:0;bottom:0;display:block;
              padding:18px 18px 20px;text-align:center}
.promo .pmark{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;
              color:#fff;margin-bottom:10px}
.promo .plogo{display:block;height:26px;width:auto;margin:0 auto 10px}
.promo .pcta{display:inline-block;background:var(--orange);color:#fff;
             font-size:15px;font-weight:700;padding:10px 20px;border-radius:6px}
.promo .psub{display:block;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.72);
             line-height:1.4}

.btn{display:block;text-align:center;background:var(--orange);color:#fff;
     text-decoration:none;font-weight:700;padding:14px 18px;border-radius:7px;
     letter-spacing:.01em;margin-top:14px}
.btn:hover{background:var(--orange-2)}
.btn2{display:block;text-align:center;background:transparent;color:var(--ink);
      text-decoration:none;font-weight:600;padding:12px 18px;border-radius:7px;
      border:1px solid var(--rule);margin-top:9px}
.btn2:hover{border-color:var(--orange);color:var(--orange-2)}

/* Three facts about the file, not three promises. Every one of these is true
   of the product TODAY — that is the rule the pages are written under. */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;
       border-top:1px solid var(--rule);padding-top:14px}
.feat{display:flex;gap:9px;align-items:flex-start;padding:0 10px;
      border-left:1px solid var(--rule)}
.feat:first-child{border-left:0;padding-left:0}
.feat svg{width:19px;height:19px;color:var(--ink-3);flex:0 0 auto;margin-top:1px}
.feat b{display:block;font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.3}
.feat span{display:block;font-size:11px;color:var(--ink-3);line-height:1.35}

.topics ul{list-style:none;padding:0;margin:0;
           display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px}
@media (max-width:520px){ .topics ul{grid-template-columns:1fr} }
.topics li{margin:0}
.topics a{display:flex;gap:7px;align-items:baseline;color:var(--ink-2);
          text-decoration:none;font-size:14px}
.topics a:hover{color:var(--orange-2)}
.topics a svg{width:11px;height:11px;color:var(--orange);flex:0 0 auto}

footer{margin-top:46px;border-top:1px solid var(--rule);padding:20px 0 38px;
       color:var(--ink-3);font-size:13.5px}
footer a{color:var(--ink-2)}

/* == PRINT ==================================================================
   🔴 THE PRINTABLE VERSION IS THIS PAGE, NOT A SECOND DOCUMENT. Fizz asked for
   "the seven as a site page, both sides, with the printable version". A
   separate printable is a second copy of the same words, and a hand-maintained
   second copy is how the two drift - which is the failure this project has
   found more times than any other. One source, two renderings.

   ⚠️ WHAT COMES OFF: the sidebar, the buttons, the sibling nav, the footer.
   None of them mean anything on paper, and the referral link least of all -
   a printed page cannot be clicked and should not carry a commercial link
   somebody cannot act on.

   ⭐ The seven headings stay exactly as they are on screen. Fixed strings, on
   the page and on the print, or the framework stops being memorable. */
@media print {
  :root { color-scheme: light; }
  html, body { background:#FFF !important; color:#000 !important; }
  header, footer, .side, .btn, .btn2, .promo, .topics, .feats { display:none !important; }
  .wrap, main, .cols { max-width:none !important; width:auto !important;
                       margin:0 !important; padding:0 !important; display:block !important; }
  h1 { font-size:20pt; line-height:1.1; margin:0 0 6pt; }
  .lede { font-size:11pt; color:#000 !important; margin:0 0 12pt; }
  /* A category must not be split across a page break - the heading and its
     checks are one thing, and half of THE PRESSURE on its own says nothing. */
  .block { break-inside:avoid; page-break-inside:avoid; margin:0 0 11pt; }
  .block h2 { font-size:12pt; margin:0 0 4pt; }
  .block .ic { display:none !important; }
  p, li { font-size:9.5pt; line-height:1.45; color:#000 !important; }
  ul { margin:5pt 0 0; padding-left:14pt; }
  a { color:#000 !important; text-decoration:none !important; }
  @page { size: letter; margin: 0.55in; }
}

/* == THE ONE STANDOUT LINE ==================================================
   ⭐ "Those are looked at, not looked up." It answers the question a reader is
   entitled to ask — why does this page exist when VIN, title and
   stolen-vehicle databases already do — and Keith asked for it to carry design
   weight rather than sit inside a paragraph.

   ⚠️ ONE PER IDEA, NOT ONE PER PAGE — corrected 2026-09-15 rather than left
   contradicting itself. The original rule said one per page, and the seven page
   then earned a second: "one document tells you nothing, two that disagree tell
   you everything" opens THE PAPERWORK, and "those are looked at, not looked up"
   closes the limits four sections later.

   The rule's purpose is that the treatment CLAIMS this sentence matters more
   than the ones around it — so what breaks it is two standouts competing in the
   same breath, not two doing different jobs at opposite ends of a long page.
   Three would be too many here. A five-section explainer still gets one. */
.keyline { display:block; margin:16px 0 4px; padding:14px 0 14px 18px;
           border-left:4px solid var(--orange); font-size:22px; font-weight:700;
           line-height:1.3; color:var(--ink); }
@media print {
  .keyline { border-left:2pt solid #000; font-size:11.5pt; margin:8pt 0 4pt;
             padding:6pt 0 6pt 10pt; }
}

/* == CONTENTS, AND THE RHYTHM BETWEEN SECTIONS ==============================
   Keith: dress up the learn pages. What they actually lacked was not ornament
   — it was shape. Twelve sections ran together with no way to see the page's
   structure without scrolling all of it, and at 18px the old 26px gap between
   sections was tighter than the gap between paragraphs inside one.

   ⭐ The contents list is the strongest part and it is not decoration: on the
   seven it shows the framework before the reader starts, which is the thing
   worth remembering three months later. */
.toc { margin:4px 0 8px; padding:18px 20px; border:1px solid var(--rule);
       border-left:4px solid var(--orange); border-radius:9px; background:var(--panel); }
.toc .tl { display:block; font:600 11px/1 var(--body); letter-spacing:.15em;
           text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.toc ol { margin:0; padding:0; list-style:none; counter-reset:toc;
          display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 24px; }
.toc li { counter-increment:toc; }
.toc a { display:block; color:var(--ink); text-decoration:none; font-size:16px;
         line-height:1.35; padding:3px 0; }
/* The number is the index, so it steps back — the heading is what you read. */
.toc a::before { content:counter(toc) ". "; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.toc a:hover { color:var(--orange); }
@media (max-width:620px){ .toc ol{ grid-template-columns:1fr; } }

/* Sections get room to breathe and a hairline to separate them. The rule is
   on the TOP of each, not the bottom, so the last section does not end on a
   line with nothing under it. */
.pt { margin:0 0 34px; padding-top:28px; border-top:1px solid var(--rule); }
.pt:first-of-type { border-top:0; padding-top:0; }
/* A heading that can be linked to should not sit flush under a fixed header
   when you arrive at it. */
.pt[id] { scroll-margin-top:24px; }

@media print {
  .toc { display:none !important; }
  .pt { border-top:0.5pt solid #999; padding-top:8pt; margin:0 0 10pt; }
  .pt:first-of-type { border-top:0; padding-top:0; }
}

/* == THE ESSAY PAGE =========================================================
   One column, no sidebar, no document preview. /why.html is two people
   speaking rather than a page explaining something, and the two-column
   reading-plus-artifact layout would frame it as product copy.

   ⚠️ NARROWER THAN THE GUIDES ON PURPOSE. 34rem is about 62 characters at
   18px — tighter than the 72 the guides run at, because a personal piece is
   read straight through rather than scanned for the part you need. */
/* Widened with the type: at 20px, 34rem was down to about 54 characters a
   line, which breaks the sentences up more than it helps. 37rem holds ~62. */
.essay { max-width:37rem; margin:0 auto; padding:16px 0 10px; }
.essay h1 { font-size:clamp(30px,4.4vw,44px); line-height:1.05; margin:0 0 26px; }
/* 🔴 FULL --ink AND 20px. Keith: bigger and more white for visibility.
   Measured: --ink-2 on this ground is 8.60:1 and --ink is 16.61:1 — both pass
   AA, and passing AA is not the same as being comfortable to read.

   ⭐ AND THIS PAGE EARNS THE FULL WEIGHT WHERE THE GUIDES DO NOT. A guide is
   scanned for the part you need, so a softer body keeps the headings and the
   standout lines doing the navigating. This one is read straight through and
   has nothing to navigate — so there is no hierarchy for a softer body to
   serve, and softening it only made it harder to read. */
.essay p { margin:0 0 22px; font-size:20px; line-height:1.72; color:var(--ink); }
.essay p strong { color:var(--ink); }
/* The one line they set on its own. It is the turn in the piece, and it is
   theirs — the treatment only gives it the room the sentence already asks for. */
.essay .beat { color:var(--ink); font-size:24px; line-height:1.4;
               margin:34px 0 34px; }
.essay .sign { color:var(--ink); font-weight:600; margin:32px 0 0; }
.essay .onward { display:flex; gap:12px; flex-wrap:wrap; margin:38px 0 0;
                 padding-top:26px; border-top:1px solid var(--rule); }
.essay .onward .btn, .essay .onward .btn2 { margin:0; flex:1 1 14rem; }
@media print { .essay .onward { display:none !important; } }

/* == "WE HAVE THIS ONE" — inline, where the form is mentioned ===============
   Keith: when a page talks about a form we already produce, say so there,
   so nobody has to go looking for it.

   ⚠️ A LINK, NOT A HOVER TIP. Hover does not exist on a phone, and the phone
   is most of this traffic — a tooltip would have hidden the feature from the
   people most likely to want it. The mark is always visible and always
   tappable; the title attribute is a bonus for whoever has a mouse.

   ⭐ It is an OFFER, not a citation. Underlined in the accent so it reads as
   something being handed to you rather than a reference to go and chase. */
.have { color:var(--ink); text-decoration:none;
        border-bottom:2px solid var(--orange); padding-bottom:1px; }
.have:hover { color:var(--orange); }
.have .hm { display:inline-block; margin-left:7px; padding:2px 7px 3px;
            border:1px solid var(--orange); border-radius:4px;
            font:600 10.5px/1 var(--body); letter-spacing:.07em;
            text-transform:uppercase; color:var(--orange);
            vertical-align:2px; white-space:nowrap; }
.have:hover .hm { background:var(--orange); color:#12100E; }
/* On paper it is neither a link nor an offer — it is just the words. */
@media print { .have { border-bottom:0 } .have .hm { display:none } }

/* == THE RULE UNDER EACH HEADING, AND THE LINE ABOVE THEM ALL ===============
   Keith: "some people will just read that slogan and move on... but they got
   something out of it." That is the standard for this whole site in one
   sentence — a page should reward a skim rather than punish it.

   ⭐ THE RULE IS SET LARGER THAN THE BODY, which looks backwards and is not.
   It is the layer somebody reads if they read nothing else, so it cannot be
   the smallest thing in the section. The prose underneath is for whoever
   stayed. */
.pt .rule { margin:2px 0 14px; font-size:20px; line-height:1.3;
            font-weight:600; color:var(--orange); }

/* The contents list carries the rules too, so the top of the page IS the
   summary — eight lines, and somebody who reads only those has the whole
   framework. */
.toc a { padding:7px 0; }
.toc .tr { display:block; margin-top:3px; font-size:14px; font-weight:400;
           line-height:1.35; color:var(--ink-2); }
.toc a:hover .tr { color:var(--ink); }

/* The one line above all eight. Bigger than the lede, because it is the only
   sentence on the page that is about the reader rather than the deal. */
.thesis { margin:0 0 26px; padding:18px 0 0; border-top:1px solid var(--rule);
          font-size:clamp(21px,2.6vw,27px); line-height:1.3; font-weight:700;
          color:var(--ink); max-width:26ch; }
@media print {
  .pt .rule { color:#000; font-size:12pt; }
  .thesis { font-size:14pt; border-top:1pt solid #000; max-width:none; }
}