/* Investn Group LLC, The Board.
   A house sale set as a departure board: one route, named stops, a time
   against each. Graphite field, one signal blue, Archivo at one width axis.
   Square corners; the only round shape is the wordmark's dot and the stops
   on the line. Direction contract: .impeccable/surfaces/v2-sell-html.md */

/* Archivo, variable across weight and width, self-hosted so the first
   screen does not wait on a third party. Open Font License, from Google
   Fonts v25; latin subset only, which is every character this site sets. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("/fonts/archivo-latin-var.4c98b9d4.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================
   Tokens
   ========================================================== */
:root{
  color-scheme:dark;

  /* grounds */
  --field:#0E1116;
  --field-2:#151A21;
  --platform:#F2F3F5;
  /* ink on the field */
  --ink:#FFFFFF;
  --glass:#C6CDD6;
  --glass-2:#939CA9;
  /* ink on the platform */
  --p-ink:#0E1116;
  --p-text:#434B57;
  --p-glass:#5E6674;   /* 5.2:1 on the platform; the old #6C7480 measured 4.25:1 */
  /* signal */
  --signal:#2F5BFF;
  --signal-deep:#1E45D6;
  --signal-ink:#93AAFF;
  /* rules */
  --rule:rgba(255,255,255,.14);
  --rule-hi:rgba(255,255,255,.34);
  --p-rule:#D8DBE1;

  /* type: one family, one width axis */
  --f:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --t-display:clamp(2.75rem,6vw,6.5rem);
  --t-head:clamp(1.8125rem,3.3vw,2.875rem);
  --t-fig:clamp(2.125rem,4.2vw,3.875rem);
  --t-row:clamp(1.125rem,1.6vw,1.375rem);
  --t-claim:clamp(1.3125rem,2.1vw,2rem);   /* a row that makes a claim: a reason, a chore, a way to reach us */
  --t-lede:clamp(1.0625rem,1.35vw,1.25rem);
  --t-body:1.0625rem;
  --t-read:1.1875rem;   /* long-form only: 17px is a scanning size, not a reading one */
  --t-small:.9375rem;
  --t-fine:.8125rem;
  --t-label:.75rem;

  /* layout */
  --wrap:1680px;
  --gut:clamp(20px,3.4vw,56px);
  --rail:72px;          /* the line's gutter */
  --measure:1400px;     /* how wide a row is allowed to run before it stops reading */
  --band:clamp(72px,7vw,120px);

  --ease:cubic-bezier(.2,.9,.3,1);
}

/* ==========================================================
   Base
   ========================================================== */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;caret-color:var(--signal);scrollbar-color:var(--rule-hi) var(--field);}
[id]{scroll-margin-top:92px;}
body{
  margin:0;background:var(--field);color:var(--ink);
  font-family:var(--f);font-size:var(--t-body);line-height:1.6;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
}
img{max-width:100%;display:block;}
p{margin:0 0 16px;}
a{color:var(--signal-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--signal-ink) 40%,transparent);transition:color .15s ease,border-color .15s ease;}
::selection{background:var(--signal);color:var(--ink);}
:focus-visible{outline:2px solid var(--signal-ink);outline-offset:3px;}
/* the ring is 8.5:1 on graphite but only 2:1 on the platform, so the light
   ground takes the deep cobalt instead */
.platform :focus-visible{outline-color:var(--signal-deep);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.skip:focus{position:fixed;width:auto;height:auto;overflow:visible;clip-path:none;left:12px;top:12px;z-index:99;background:var(--signal);color:var(--ink);padding:12px 16px;border:0;}
/* The brand's dot. Archivo sets a square period, so the circle is drawn.
   An inline-block sits its bottom edge on the baseline, which is exactly
   where a full stop belongs; the glyph stays for anyone reading the page
   aloud. */
.dot{
  display:inline-block;width:.24em;height:.19em;vertical-align:baseline;
  position:relative;overflow:hidden;text-indent:-10em;
}
.dot::after{
  content:"";position:absolute;left:.04em;bottom:0;
  width:.19em;height:.19em;border-radius:50%;background:var(--signal);
}
/* a drawn stop never wraps away from the word it ends */
.nb{white-space:nowrap;}

/* ==========================================================
   Type roles. One family; width carries the board voice.
   ========================================================== */
h1{
  font-size:var(--t-display);font-weight:800;line-height:.95;letter-spacing:-.038em;
  margin:0 0 28px;max-width:15ch;text-wrap:balance;
}
h2{
  font-size:var(--t-head);font-weight:800;line-height:1.02;letter-spacing:-.032em;
  margin:0 0 20px;max-width:18ch;text-wrap:balance;
}
.sub,.lede{font-size:var(--t-lede);line-height:1.5;color:var(--glass);max-width:46ch;margin:0 0 36px;}
/* Every block of prose in this system is capped for measure, which is right,
   but a cap alone still drops a single word onto a line of its own. Measured
   2026-09-21: 14 blocks ended on a last line using under a third of its
   width, one of them on a single word. text-wrap:pretty reflows the tail. */
.why,.rest,.a,.a p,.legal,.ident-note,.route p,
.recap dd,.ident dd,.cmp td,.cmp tbody th,.towns li,.reach span{
  text-wrap:pretty;
}
/* A lede and a form note are one or two sentences, not prose. Balanced,
   they split evenly instead of running full and then stranding a word. */
.sub,.lede,.note{text-wrap:balance;}
/* A statement this short is a heading in everything but markup, so it
   balances across its lines instead of merely avoiding an orphan. */
.turn{text-wrap:balance;}
/* Field labels: the same family at its normal width, quietly tracked. */
.figs dt,.ident dt,.recap dt,.terms dt,.spec dt,.counts dt,.cmp thead th,.cmp td::before,.field label,.route .no{
  font-size:var(--t-label);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.3;
  /* the board voice: Archivo's width axis run wide, which is the one thing
     a departure board does that a normal page does not */
  font-stretch:112%;
}
.route .no{font-size:var(--t-small);text-transform:none;letter-spacing:.02em;}

/* ==========================================================
   Head: the board strip
   ========================================================== */
.head{position:sticky;top:0;z-index:50;background:var(--field);border-bottom:1px solid var(--rule);}
.head-in{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:32px;
}
.brand{border:0;color:var(--ink);line-height:0;flex:none;padding-block:7px;}  /* 30px tall was under the 44px target */
.wm{width:124px;height:auto;}
/* On wide screens the menu is simply the nav, inline and on the right. The
   same element becomes a native popover on phones, so no script runs. */
.nav{display:flex;align-items:center;gap:26px;flex:none;margin-left:auto;}
.nav:not(:popover-open){display:flex;}
.nav[popover]{position:static;inset:auto;width:auto;height:auto;margin:0 0 0 auto;padding:0;border:0;background:none;color:inherit;overflow:visible;}
.nav a{color:var(--glass);border:0;font-size:var(--t-small);font-weight:500;padding-block:10px;margin-block:-10px;}
.head .tel{color:var(--ink);font-weight:700;font-size:var(--t-small);border:0;padding-block:10px;margin-block:-10px;flex:none;}
.menu-btn{display:none;}
/* scroll progress: the line at the top of the board */
.progress{height:2px;background:transparent;}
.progress i{display:block;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left center;}

/* ==========================================================
   The line. One rail down the page; every section is a stop on it.
   ========================================================== */
main{position:relative;padding-left:var(--rail);}
main::before{
  content:"";position:absolute;left:calc(var(--rail) / 2);top:0;bottom:0;width:1px;
  background:var(--ink);opacity:.45;mix-blend-mode:difference;z-index:2;pointer-events:none;
}
main > section{position:relative;padding-block:var(--band);padding-right:var(--gut);}
main > section::before{
  content:"";position:absolute;left:calc(var(--rail) / -2 - 6px);top:calc(var(--band) - 4px);
  width:13px;height:13px;border-radius:50%;background:var(--signal);
  outline:5px solid var(--field);
}
.verdict::before{top:calc(var(--band) + clamp(28px,3.4vw,56px) + 12px);}
main > section:first-child{padding-top:clamp(44px,5vw,88px);}
main > section:first-child::before{top:clamp(48px,5vw,92px);}
.platform::before{outline-color:var(--platform);}

/* ==========================================================
   Hero
   ========================================================== */
/* the board is a panel, not a flat dark theme: a perforated grain sits under
   the first screen the way it sits on an enamel sign */
.hero{
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 5.5%,transparent) 1px,transparent 1.2px);
  background-size:22px 22px;background-position:0 0;
  /* the plate runs off the right edge instead of stopping at the measure */
  padding-right:0;
}
.hero-in{
  max-width:none;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,3vw,56px);align-items:start;
}
.hero-type{max-width:930px;}
.hero .sub{margin-bottom:20px;}
/* What selling to us skips, in four words each, the way a seller would say
   it. One row, separated by hairlines, set in the text voice rather than
   as badges so it reads as a promise and not as decoration. */
.nos{list-style:none;margin:0 0 36px;padding:0;display:flex;flex-wrap:wrap;row-gap:8px;}
.nos li{font-size:var(--t-lede);font-weight:700;letter-spacing:-.014em;color:var(--ink);padding:0 18px;border-left:1px solid var(--rule-hi);line-height:1.2;}
.nos li:first-child{padding-left:0;border-left:0;}

/* The route: three steps, each a bold claim with one plain line under it,
   hung on the same line the page runs on. The line is drawn stop to stop,
   so it holds whatever the rows wrap to. */
.route{list-style:none;margin:44px 0 0;padding:0 0 0 36px;max-width:900px;}
.route li:first-child{border-top:1px solid var(--rule-hi);}
.route li{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.route li::before{
  content:"";position:absolute;left:-34px;top:29px;width:9px;height:9px;border-radius:50%;
  background:var(--signal);outline:4px solid var(--field);z-index:1;
}
.route li:not(:last-child)::after{
  content:"";position:absolute;left:-30px;top:33px;bottom:-33px;width:1px;
  background:var(--rule-hi);transform-origin:center top;
}
.route p{margin:0;font-size:var(--t-lede);line-height:1.45;color:var(--glass);max-width:52ch;}
.route p b{display:block;font-size:var(--t-row);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink);margin-bottom:4px;}
.route .no{font-weight:700;color:var(--signal-ink);}

/* The form. Three fields, because a seller in trouble should not have to
   fill in a page. Square, ruled, and set in the page's own type; the label
   sits above the field in the quiet label voice. */
.ask{max-width:540px;margin:0 0 8px;}
.field{margin:0 0 14px;}
.field label{display:block;color:var(--glass-2);margin-bottom:7px;}
.field label span{text-transform:none;letter-spacing:0;font-weight:400;}
.field input{
  width:100%;font-family:inherit;font-size:var(--t-body);line-height:1.4;color:var(--ink);
  background:var(--field-2);border:1px solid var(--rule-hi);border-radius:0;padding:14px 16px;
}
.field input::placeholder{color:var(--glass-2);}
.field input:focus-visible{outline:2px solid var(--signal-ink);outline-offset:2px;border-color:var(--signal-ink);}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.ask .act{width:100%;justify-content:center;margin-top:4px;}
.ask .note{margin:14px 0 0;max-width:none;}   /* the form is 540px and already the measure */

/* the action: a signal block, square, with the board's arrow */
.act{
  display:inline-flex;align-items:center;gap:14px;background:var(--signal);color:var(--ink);border:0;
  font-family:inherit;cursor:pointer;text-align:left;
  font-size:var(--t-row);font-weight:700;letter-spacing:-.018em;line-height:1.1;padding:20px 30px;
  transition:background-color .15s ease,transform .16s var(--ease);
}
.act::after{
  content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .16s var(--ease);
}
.act:active{transform:scale(.985);}
.note{font-size:var(--t-small);line-height:1.5;color:var(--glass-2);max-width:52ch;margin:0;}
/* The address as plain text rather than a link. A mailto: does nothing at all
   and reports nothing when the browser has no mail app registered, so if every
   instance of the address is a link, the fallback fails exactly when it is
   needed. One click selects the whole of it, ready to copy. */
.addr{color:var(--ink);font-weight:600;white-space:nowrap;-webkit-user-select:all;user-select:all;}
.platform .addr,.note-text .addr{color:var(--p-ink);}

/* The plates. Every photograph is graded the same way, cooled and dropped
   a stop, so a warm dusk window and a lit kitchen read as one material with
   the field instead of sitting on top of it. */
.plate{position:relative;margin:6px 0 0;border-top:1px solid var(--rule-hi);padding-top:14px;}
.plate img{width:100%;height:clamp(380px,43vw,720px);object-fit:cover;object-position:center 58%;filter:saturate(.92) brightness(.98) contrast(1.03);}
.plate::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--field) 55%,transparent));
}
/* The street runs the full width of the screen, fading into the ground at
   both edges so it reads as a band of the page, not a picture on it. */
.band{position:relative;margin:0 0 0 calc(var(--rail) * -1);}
.band img{width:100%;height:clamp(260px,32vw,540px);object-fit:cover;object-position:center 64%;filter:saturate(.9) brightness(.94) contrast(1.03);}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--field) 75%,transparent),color-mix(in srgb,var(--field) 10%,transparent) 34%,color-mix(in srgb,var(--field) 10%,transparent) 62%,color-mix(in srgb,var(--field) 95%,transparent));
}


/* ==========================================================
   Why people call us
   ========================================================== */
.calls-list{list-style:none;margin:0;padding:0;max-width:var(--measure);border-top:1px solid var(--rule-hi);}
.calls-list li{
  font-size:var(--t-claim);line-height:1.3;letter-spacing:-.022em;color:var(--glass-2);
  padding:clamp(20px,1.8vw,30px) 0;border-bottom:1px solid var(--rule);
}
.calls-list b{color:var(--ink);font-weight:700;}
.turn{font-size:var(--t-claim);font-weight:700;letter-spacing:-.024em;line-height:1.25;color:var(--ink);max-width:44ch;margin:clamp(40px,4vw,72px) 0 0;}

/* ==========================================================
   Off the list: rows struck off the board
   ========================================================== */
.off-list{list-style:none;margin:0;padding:0;max-width:var(--measure);border-top:1px solid var(--rule-hi);}
.off-list li{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6px clamp(40px,5vw,96px);align-items:baseline;
  padding:clamp(22px,2vw,32px) 0;border-bottom:1px solid var(--rule);
}
.off-list s{
  font-size:var(--t-claim);font-weight:700;letter-spacing:-.024em;line-height:1.28;color:var(--ink);
  text-decoration-line:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px;
}
.off-list s > span{position:relative;}
.off-list .why{font-size:var(--t-lede);color:var(--glass);line-height:1.5;max-width:46ch;}

/* ==========================================================
   What the offer contains: the figures
   ========================================================== */
.figs{margin:0;max-width:var(--measure);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px;border-top:1px solid var(--rule-hi);padding-top:36px;}
.figs dt{color:var(--glass-2);margin-bottom:14px;}
.figs dd{margin:0;}
.fig{
  display:block;font-size:var(--t-fig);font-weight:800;line-height:.98;letter-spacing:-.04em;
  color:var(--ink);margin-bottom:14px;
}
.rest{display:block;font-size:var(--t-small);line-height:1.55;color:var(--glass);}  /* the figure column is the measure */

/* ==========================================================
   The platform: light ground for what a reader looks things up in
   ========================================================== */
.platform{background:var(--platform);color:var(--p-ink);margin-left:calc(var(--rail) * -1);padding-left:var(--rail);}
.platform-in{max-width:calc(var(--wrap) - var(--rail));}
.platform h2{color:var(--p-ink);}
.platform .lede{color:var(--p-text);}
.platform a{color:var(--signal-deep);border-bottom-color:color-mix(in srgb,var(--signal-deep) 35%,transparent);}
.platform .act{color:var(--ink);border-bottom:0;}
.platform ::selection{background:var(--signal);color:var(--ink);}

.cmp{width:100%;max-width:var(--measure);border-collapse:collapse;margin:8px 0 0;}
.cmp thead th{text-align:left;padding:0 20px 14px 0;border-bottom:2px solid var(--p-ink);color:var(--p-glass);}
.cmp thead th.us{color:var(--p-ink);}
.cmp tbody tr{border-bottom:1px solid var(--p-rule);}
.cmp tbody th{text-align:left;vertical-align:top;padding:18px 20px 18px 0;width:21%;font-size:var(--t-body);font-weight:700;letter-spacing:-.014em;color:var(--p-ink);}
.cmp td{vertical-align:top;padding:18px 24px 18px 0;font-size:var(--t-body);line-height:1.5;color:var(--p-text);}
/* One row, one winner, in cobalt; the other side steps back into grey. The
   table only carries the rows where the difference is real; the honest
   answer on price lives in the questions, where people go looking for it. */
.cmp td.win{color:var(--signal-deep);font-weight:700;letter-spacing:-.014em;}
.cmp td.lose{color:var(--p-glass);font-weight:400;}

/* Disclosure rows. One row grammar for questions and for counties; the
   ground decides the colours, so the same component reads on graphite and
   on the platform. */
.qs,.areas{border-top:1px solid var(--rule-hi);}
.areas{max-width:var(--measure);}
details{border-bottom:1px solid var(--rule);}
summary{
  cursor:pointer;list-style:none;position:relative;padding:22px 44px 22px 0;
  font-size:var(--t-row);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink);
  transition:color .15s ease;
}
summary::-webkit-details-marker{display:none;}
summary h3{font:inherit;color:inherit;letter-spacing:inherit;margin:0;display:inline;}
summary::after{
  content:"";position:absolute;right:6px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--signal-ink);border-bottom:2px solid var(--signal-ink);
  transform:rotate(45deg);transition:transform .18s var(--ease);
}
details[open] summary::after{transform:translateY(3px) rotate(-135deg);}
.a{padding:0 0 26px;color:var(--glass);max-width:64ch;}
.a p:last-child{margin-bottom:0;}
details::details-content{block-size:0;overflow:hidden;transition:block-size .2s var(--ease),content-visibility .2s allow-discrete;}
details[open]::details-content{block-size:auto;}
.a{opacity:1;transition:opacity .2s var(--ease);}
@starting-style{details[open] .a{opacity:0;}}
details:not([open])::details-content{transition-duration:.15s;}
/* on the platform the same rows run in ink */
.platform .qs,.platform .areas{border-top-color:var(--p-ink);}
.platform details{border-bottom-color:var(--p-rule);}
.platform summary{color:var(--p-ink);}
.platform summary::after{border-right-color:var(--signal-deep);border-bottom-color:var(--signal-deep);}
.platform .a{color:var(--p-text);}

/* Coverage: a county is a row, and opening it lists the towns with their
   ZIPs, which is what someone checks before they write to us. */
.area-meta{margin-left:14px;font-size:var(--t-small);font-weight:400;letter-spacing:0;text-transform:none;color:var(--glass-2);}
.towns{columns:232px;column-gap:40px;list-style:none;margin:0;padding:0 0 26px;}
.towns li{break-inside:avoid;font-size:var(--t-small);line-height:1.6;color:var(--glass);margin-bottom:5px;}
/* the ZIP is the quieter half of the line and still has to be readable */
.towns b{font-weight:400;color:var(--glass-2);}

/* ==========================================================
   The verdict: one framed answer, the page's last stop
   ========================================================== */
.verdict .card{border:1px solid var(--rule-hi);padding:clamp(28px,3.4vw,56px);max-width:min(100%,1280px);background:var(--field-2);}
/* The form is 540px because three fields should not run wider than that.
   The card used to be 1608px, which left a thousand pixels of empty
   graphite beside it, so the recap moves up into that space instead. */
@media (min-width:1001px){
  .card-main{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:0 clamp(48px,5.5vw,104px);align-items:start;}
  .card-main .ask{grid-column:1;grid-row:1;max-width:none;}
  .card-main .recap{grid-column:2;grid-row:1;grid-template-columns:1fr;gap:26px;margin:0;padding:0;border-top:0;}
  .card-main .recap dd{max-width:none;}
  /* one short sentence, and the card is wide enough to hold it on one line */
  .verdict > .card > .lede{max-width:72ch;}
}
.verdict h2{margin-bottom:16px;}
/* the last stop restates the whole route in three lines */
.recap{margin:0 0 36px;padding:28px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 48px;}
.recap dt{color:var(--glass-2);margin-bottom:8px;}
.recap dd{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--ink);max-width:26ch;}
.verdict .lede{margin-bottom:32px;}
.reach{list-style:none;margin:40px 0 0;padding:32px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px;}
.reach li{line-height:1.25;overflow-wrap:anywhere;}
.reach a{display:inline-block;font-size:var(--t-claim);font-weight:800;letter-spacing:-.03em;color:var(--ink);border:0;padding-block:10px;margin-block:-10px;transition:color .15s ease;}
.reach span{display:block;margin-top:6px;font-size:var(--t-small);line-height:1.5;color:var(--glass-2);}
.ident{margin:36px 0 0;padding-top:28px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 40px;}
.ident dt{color:var(--glass-2);margin-bottom:8px;}
.ident dd{margin:0;font-size:var(--t-body);line-height:1.4;color:var(--ink);}
.ident-note{margin:24px 0 0;font-size:var(--t-small);color:var(--glass-2);max-width:84ch;}  /* 58ch stranded the last word */

/* ==========================================================
   The agent page. Same world, different shapes: an agent is
   verifying an email, not deciding to sell a house, so the terms
   are the centrepiece and nothing here asks them to fill in a form.
   ========================================================== */
/* The agent hero's plate is a landscape street, not a portrait house, so it
   runs as a shorter band. Measured 2026-09-22: at 835px tall the 1660x934
   source covered only 56% of what a 2x display needs; at 460 it covers
   fully at both 1440 and 1680. */
.hero-wide .plate img{height:clamp(380px,45vw,740px);}

/* the promise under the hero sub, in ink because it is the commitment */
.promise{font-size:var(--t-lede);line-height:1.45;color:var(--ink);font-weight:500;max-width:52ch;margin:0 0 30px;text-wrap:balance;}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0 0 18px;}
/* the second action is never a second button; it is a plain line of text */
.alt{color:var(--glass);border:0;font-size:var(--t-body);font-weight:600;padding-block:10px;margin-block:-10px;}

/* The terms, set as the board itself: term, figure, condition, one per
   ruled row. This is the block an agent reads against the offer email
   in the next window, so it is the one place figures run at scale. */
.terms{margin:8px 0 0;max-width:var(--measure);border-top:2px solid var(--p-ink);}
/* One template for every row, so the three columns line up down the board.
   The figure column is capped rather than fractional: a fraction sized it to
   half the measure, which left 400px of empty platform between "Cash" and
   the condition it carries, on the one band that is read against an email. */
.terms > div{
  display:grid;grid-template-columns:minmax(0,170px) minmax(0,clamp(190px,25vw,420px)) minmax(0,1fr);
  gap:4px clamp(24px,2.6vw,48px);align-items:baseline;
  padding:clamp(18px,1.7vw,26px) 0;border-bottom:1px solid var(--p-rule);
}
.terms dt{color:var(--p-glass);}
.terms dd{margin:0;display:contents;}
/* The figures set to the right of their track, so every value lands on one
   edge with its condition beside it. A left-set column left 324px of empty
   platform between "Cash" and the words that qualify it, on the one band an
   agent reads line by line against an email. A departure board sets its
   times the same way, and for the same reason. */
.terms .fig{text-align:right;}
.platform .fig{color:var(--p-ink);font-size:var(--t-claim);margin:0;}
.platform .rest{color:var(--p-text);max-width:46ch;}

/* The buy box: 5 criteria as one band, the way a spec line reads, so it
   cannot be mistaken for the ruled rows above it. */
.spec{margin:8px 0 0;max-width:var(--measure);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-hi);border-bottom:1px solid var(--rule);}
.spec > div{padding:26px 22px 28px;border-left:1px solid var(--rule);}
.spec > div:first-child{padding-left:0;border-left:0;}
.spec dt{color:var(--glass-2);margin-bottom:10px;}
.spec dd{margin:0;font-size:var(--t-body);font-weight:700;letter-spacing:-.014em;line-height:1.35;color:var(--ink);}

/* Coverage as counts, which is what an agent checks first: is my listing
   in your area at all. The towns stay one disclosure row below. */
.counts{margin:0 0 clamp(36px,4vw,64px);max-width:var(--measure);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 32px;}
.counts dt{color:var(--glass-2);margin-bottom:10px;}
.counts dd{margin:0;}
.counts .fig{font-size:var(--t-fig);margin-bottom:6px;}
.counts .rest{font-size:var(--t-small);color:var(--glass-2);}

/* The listing they already have in mind: two columns of plain prose, a
   shape this page uses once. */
.recog{max-width:var(--measure);columns:2;column-gap:clamp(40px,5vw,96px);}
.recog p{break-inside:avoid;font-size:var(--t-lede);line-height:1.55;color:var(--glass);margin:0 0 18px;text-wrap:pretty;}
.recog p:last-child{margin-bottom:0;}

/* the agent's verdict card holds actions, not fields */
.verdict .ask .act{width:auto;}
.ident-note b{font-weight:700;color:var(--glass);}

@media (max-width:1000px){
  .terms > div{grid-template-columns:minmax(0,150px) minmax(0,1fr);}
  .terms .rest{grid-column:2;}
  .terms .fig{text-align:left;}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));}
  .spec > div{padding:22px 20px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);}
  .spec > div:first-child{padding-left:20px;border-left:1px solid var(--rule);}
  .spec > div:nth-child(odd){border-left:0;padding-left:0;}
  .counts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .recog{columns:1;}
}
@media (max-width:640px){
  .terms > div{grid-template-columns:1fr;gap:6px;}
  .terms .rest{grid-column:1;}
  .spec{grid-template-columns:1fr;}
  .spec > div{padding:20px 0;border-left:0;}
  .spec > div:first-child{padding-top:22px;}
  .counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .cta-row{flex-direction:column;align-items:stretch;gap:12px;}
  .cta-row .alt{text-align:center;}
}

/* ==========================================================
   The notes. Read mode, so the world splits in two: the board
   announces the piece on graphite, and the reading itself sits on
   the light platform. 1,800 words of white on near-black is tiring
   in a way 8 ruled rows of terms are not, so DESIGN.md's rule widens
   here from "light means lookup" to "light means lookup and reading".
   ========================================================== */
.note-cover{padding-bottom:clamp(40px,4vw,64px);}
.note-cover h1{max-width:20ch;margin-bottom:24px;}
.stand{font-size:var(--t-lede);line-height:1.5;color:var(--ink);font-weight:500;max-width:58ch;margin:0 0 26px;text-wrap:pretty;}
.note-cover .meta{
  font-size:var(--t-small);font-weight:400;letter-spacing:0;line-height:1.5;
  color:var(--glass-2);margin:0;max-width:none;
}

/* the reading panel */
.note-panel{padding-top:clamp(48px,5vw,80px);}
.note-wrap{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:0 clamp(40px,5vw,96px);align-items:start;max-width:calc(var(--measure) + 220px);}

/* The contents list is the route through the argument, so it is the
   route component: numbered stops, one per section, held in view. */
.toc{position:sticky;top:112px;}
.toc-h{font-size:var(--t-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-stretch:112%;line-height:1.3;color:var(--p-glass);margin:0 0 14px;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-top:1px solid var(--p-rule);}
.toc li{counter-increment:toc;border-bottom:1px solid var(--p-rule);}
.toc a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;
  padding:11px 0;border:0;color:var(--p-text);font-size:var(--t-small);line-height:1.35;
}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--signal-deep);font-weight:700;font-variant-numeric:tabular-nums;}

/* the reading column */
.note-text{max-width:62ch;font-size:var(--t-read);line-height:1.7;color:var(--p-text);}  /* 68ch measured 77 characters: ch is the zero glyph, which is wider than Archivo's average */
.note-text > :first-child{margin-top:0;}
.note-text p{margin:0 0 22px;text-wrap:pretty;}
.note-text h2{
  font-size:var(--t-head);color:var(--p-ink);max-width:24ch;
  margin:clamp(44px,4.4vw,72px) 0 18px;padding-top:clamp(20px,2vw,30px);border-top:1px solid var(--p-rule);
}
.note-text h3{
  font-size:var(--t-row);font-weight:700;letter-spacing:-.018em;line-height:1.3;
  color:var(--p-ink);margin:32px 0 12px;max-width:30ch;
}
.note-text strong{font-weight:700;color:var(--p-ink);}
.note-text em{font-style:italic;}
.note-text ul{margin:0 0 22px;padding:0;list-style:none;border-top:1px solid var(--p-rule);}
.note-text ul li{padding:16px 0;border-bottom:1px solid var(--p-rule);text-wrap:pretty;}
.note-text ol{margin:0 0 22px;padding-left:1.3em;}
.note-text ol li{margin-bottom:10px;}

/* the worked example reads as a ledger, right-set like the terms board */
.ledger{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:var(--t-body);}
.ledger caption{text-align:left;font-size:var(--t-small);color:var(--p-glass);line-height:1.5;padding-bottom:14px;border-bottom:2px solid var(--p-ink);margin-bottom:0;}
.ledger th{text-align:left;font-weight:400;color:var(--p-text);padding:13px 24px 13px 0;border-bottom:1px solid var(--p-rule);line-height:1.4;}
.ledger td{text-align:right;white-space:nowrap;font-weight:700;color:var(--p-ink);font-variant-numeric:tabular-nums;padding:13px 0;border-bottom:1px solid var(--p-rule);}
.ledger td.word{font-weight:400;color:var(--p-glass);}
.ledger .total th,.ledger .total td{border-bottom:0;border-top:2px solid var(--p-ink);color:var(--p-ink);font-weight:700;}

/* the close: one framed block, the light counterpart of the verdict card */
.endcta{border:1px solid var(--p-rule);background:color-mix(in srgb,var(--p-ink) 4%,var(--platform));padding:clamp(24px,2.6vw,40px);margin:clamp(48px,5vw,80px) 0 0;max-width:68ch;}
.endcta .t{margin:0 0 12px;border:0;padding:0;font-size:var(--t-head);color:var(--p-ink);max-width:22ch;}
.endcta p{font-size:var(--t-body);color:var(--p-text);margin:0 0 20px;}
.endcta .cta-row{margin:0 0 14px;}
.endcta .cta-note{font-size:var(--t-small);color:var(--p-glass);margin:0;}
.endcta .act{background:var(--signal-deep);}
.endcta .alt{color:var(--p-text);}

.more-notes{margin:clamp(44px,4.4vw,72px) 0 0;max-width:68ch;}
.more-notes .more-h{font-size:var(--t-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-stretch:112%;line-height:1.3;color:var(--p-glass);margin:0 0 4px;border:0;padding:0;max-width:none;}
.more-notes ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--p-rule);}
.more-notes li{border-bottom:1px solid var(--p-rule);}
.more-notes li a{display:block;padding:16px 0;border:0;font-size:var(--t-row);font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--p-ink);}
.more-notes > p{margin:18px 0 0;font-size:var(--t-small);}

.disc{margin:clamp(40px,4vw,64px) 0 0;padding-top:22px;border-top:1px solid var(--p-rule);font-size:var(--t-small);line-height:1.6;color:var(--p-glass);max-width:74ch;text-wrap:pretty;}

.lost{margin-top:8px;}   /* the 404 list, so no page carries an inline style */

/* the index: one ruled row per note */
.note-list{list-style:none;margin:0;padding:0;max-width:var(--measure);border-top:1px solid var(--rule-hi);}
.note-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px clamp(32px,4vw,72px);padding:clamp(24px,2.4vw,36px) 0;border-bottom:1px solid var(--rule);}
.note-list .nt{grid-column:1;margin:0;font-size:var(--t-claim);font-weight:700;letter-spacing:-.024em;line-height:1.25;max-width:26ch;}
.note-list .nt a{color:var(--ink);border:0;}
.note-list .nt a::after{content:"";position:absolute;inset:0;}
.note-list .nd{grid-column:1;margin:0;font-size:var(--t-lede);line-height:1.5;color:var(--glass);max-width:60ch;text-wrap:pretty;}
.note-list .for{grid-column:2;grid-row:1;margin:0;white-space:nowrap;font-size:var(--t-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-stretch:112%;color:var(--glass-2);}

@media (hover:hover) and (pointer:fine){
  .toc a:hover{color:var(--signal-deep);}
  .more-notes li a:hover{color:var(--signal-deep);}
  .note-list li:hover .nt a{color:var(--signal-ink);}
}
@media (max-width:1000px){
  .note-wrap{grid-template-columns:1fr;gap:36px;}
  .toc{position:static;max-width:520px;}
  .note-text{max-width:none;}
}
@media (max-width:640px){
  .note-list li{grid-template-columns:1fr;}
  .note-list .for{grid-column:1;grid-row:auto;}
  .ledger{font-size:var(--t-small);}
}

/* ==========================================================
   Foot
   ========================================================== */
.foot{border-top:1px solid var(--rule);margin-left:0;}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:48px var(--gut) 64px;}
.foot .legal{font-size:var(--t-fine);line-height:1.6;color:var(--glass-2);max-width:74ch;}
.foot .legal b{font-weight:700;color:var(--glass);}
/* Coverage is a fact, not small print, so it leads the footer a step
   brighter than the legal text under it. CLAUDE.md wants the counties
   named here, in the Where we buy section, and in the structured data. */
.foot .cover{color:var(--glass);margin-bottom:22px;}

/* ==========================================================
   Hover, only where a pointer hovers
   ========================================================== */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--ink);border-bottom-color:var(--signal);}
  .nav a:hover{color:var(--ink);}
  .act:hover{background:var(--signal-deep);}
  .act:hover::after{transform:translateX(3px) rotate(-45deg);}
  .reach a:hover{color:var(--signal-ink);}
  summary:hover{color:var(--signal-ink);}
  .platform summary:hover{color:var(--signal-deep);}
  .platform a:hover{color:var(--p-ink);}
  .platform .act:hover{color:var(--ink);}
}

/* ==========================================================
   Motion. The rail draws with the scroll and each stop lands as its
   section arrives; a chore is crossed off as its row reaches the middle
   of the screen. Dropped under reduced motion and on browsers without
   scroll timelines, where the rail is simply drawn and the chores are
   simply struck.
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-property:color,background-color,border-color,opacity!important;}
  /* it used to be forced to full width here, which reads as "you have read
     the whole page" at the top of the page. Nothing is better than a lie. */
  .progress{display:none;}
}
@media (prefers-reduced-motion:no-preference){
  .route li::before{animation:route-land .45s var(--ease) both;}
  .route li:not(:last-child)::after{animation:route-draw .4s var(--ease) both;}
  .route li:nth-child(1)::before{animation-delay:.1s;}
  .route li:nth-child(1)::after{animation-delay:.25s;}
  .route li:nth-child(2)::before{animation-delay:.55s;}
  .route li:nth-child(2)::after{animation-delay:.7s;}
  .route li:nth-child(3)::before{animation-delay:1s;}
  @keyframes route-draw{from{transform:scaleY(0);}to{transform:scaleY(1);}}
  @keyframes route-land{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress i{animation:draw-x linear both;animation-timeline:scroll(root block);}
    main::before{transform-origin:center top;animation:draw-y linear both;animation-timeline:scroll(root block);animation-range:0% 92%;}
    main > section::before{animation:land linear both;animation-timeline:view();animation-range:cover 6% cover 22%;}
    /* The chore is crossed off by a line drawn over its letters as the row
       comes up from the bottom of the screen: each row is struck before it
       has risen 15% into the view, so by the time the whole list is on
       screen every row is done. Each row runs its own timeline, so the
       list crosses itself off in order at the reader's pace. The drawn line
       assumes one line of text: measured 2026-09-21, every chore is a single
       line from 360px up, and only the longest wraps at 320, which keeps the
       plain strike. Phones had been excluded at 641 for no measured reason. */
    @media (min-width:361px){
      .off-list s{text-decoration-color:transparent;}
      .off-list s > span::after{
        content:"";position:absolute;left:-.04em;right:-.04em;top:50%;height:2px;
        background:var(--signal);transform-origin:left center;
        animation:strike linear both;animation-timeline:view();
        animation-range:cover 0% cover 9%;
      }
      @keyframes strike{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    }
    @keyframes draw-x{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    @keyframes draw-y{from{transform:scaleY(0);}to{transform:scaleY(1);}}
    @keyframes land{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
  }
}
@supports not (animation-timeline:scroll()){
  .progress{display:none;}
}

/* ==========================================================
   Responsive. Two breakpoints: 1000 (columns fold) and 640 (phone).
   ========================================================== */
@media (max-width:1000px){
  :root{--rail:56px;--band:clamp(56px,6vw,88px);}
  .hero-in{grid-template-columns:1fr;gap:40px;}
  .hero .plate{order:-1;border-top:0;padding-top:0;}
  /* the plate still runs off the right edge; the words keep their margin */
  .hero-type{padding-right:var(--gut);}
  .hero .plate img{height:clamp(210px,56vw,420px);}
  /* a landscape plate stays a band on a phone rather than growing tall,
     which also keeps it inside the 900px source at 2x. It also follows the
     words here: an agent verifying a sender should meet the promise and the
     action first, not a photograph. */
  .hero-wide .plate img{height:clamp(240px,62vw,400px);}
  .hero-wide .plate{order:0;border-top:1px solid var(--rule-hi);padding-top:14px;margin-top:8px;}
  .figs,.off-list li,.reach{grid-template-columns:1fr;}
  .recap{grid-template-columns:repeat(2,minmax(0,1fr));}
  .off-list li{gap:8px;}

  .figs{gap:32px;}
  .ident{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* iPhone SE and folded phones: the header row measured 355px wide in a
   320px viewport, which is a horizontal scroll on the page a seller lands
   on. The menu keeps its label for screen readers only. */
@media (max-width:360px){
  .head-in{gap:10px;padding-inline:16px;}
  .wm{width:88px;}
  .menu-btn{padding:9px 11px;}
  .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .head{--t-small:.875rem;}
}
@media (max-width:640px){
  :root{--gut:20px;--rail:0px;--band:56px;}
  [id]{scroll-margin-top:84px;}
  main{padding-left:var(--gut);padding-right:0;}
  .band{margin-left:calc(var(--gut) * -1);}
  main::before,main > section::before{display:none;}
  main > section{padding-right:var(--gut);}
  .platform{margin-left:calc(var(--gut) * -1);padding-left:var(--gut);}
  .head-in{gap:16px;padding-block:14px;}
  .nav:not(:popover-open){display:none;}
  .head .tel{margin-left:auto;}
  .menu-btn{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    font:inherit;font-size:var(--t-small);font-weight:600;color:var(--ink);
    background:none;border:1px solid var(--rule-hi);padding:9px 14px;
  }
  .menu-btn::before{content:"";width:14px;height:8px;border-block:2px solid currentColor;}
  .menu-btn:active{transform:scale(.97);}
  /* the four promises sit as a 2 by 2 on a phone instead of wrapping into a broken row */
  .nos{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
  .nos li{padding:0;border:0;}
  /* the open menu drops from the header as one panel of large links */
  .nav:popover-open{
    position:fixed;inset:64px 0 auto 0;margin:0;width:auto;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:var(--field);border:0;border-bottom:1px solid var(--rule-hi);padding:4px var(--gut) 16px;
  }
  .nav:popover-open a{font-size:var(--t-row);font-weight:700;color:var(--ink);padding:16px 0;margin:0;border-bottom:1px solid var(--rule);}
  .nav:popover-open a:last-child{border-bottom:0;}
  .nav::backdrop{background:color-mix(in srgb,var(--field) 60%,transparent);}
  .wm{width:104px;}
  .route li{gap:0 14px;}
  .act{width:100%;justify-content:center;}
  .pair{grid-template-columns:1fr;}
  .ident,.recap{grid-template-columns:1fr;}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .cmp,.cmp tbody{display:block;}
  .cmp tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;padding:18px 0;}
  .cmp tbody th{grid-column:1/-1;width:auto;padding:0 0 6px;}
  .cmp td{display:block;padding:0;}
  .cmp td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--p-glass);}
}