/* SoldStack: the one shared stylesheet. Light-native: white page, near-black text, soft gray rules, pill buttons.
   It replaces site.css, page.css, price.css, firstlookup.css and light.css (light.css used to re-theme the dark
   site.css under body.light; that re-theming is folded in here and the always-overridden dark rules are gone).
   The homepage adds static/home-light.css on top; a few pages keep a small inline <style> of their own.
   Sections: base and homepage price card / document pages / price pages / first-lookup box / light components /
   account page. */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url(/static/fonts/familjen-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url(/static/fonts/familjen-grotesk-latin.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}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/schibsted-grotesk-latin.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}
@font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fragment-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/fragment-mono-latin.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: the light palette (old token names kept; values are the light ones). */

:root{
  /* one accent, for three things only: the primary button, the headline price and "sold" labels (plus focus rings).
     Contrast: #0A7A4B on white 5.39:1, white on #0A7A4B 5.39:1, white on the hover shade 6.15:1, on #F5F5F7 4.95:1. */
  --accent:#0A7A4B;
  --accent-hover:#097045;
  --accent-ink:#FFFFFF;
  --accent-wash:#E9F5EF;
  /* five text sizes, nothing else */
  --fs-display:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);
  --fs-h2:clamp(1.625rem,1.25rem + 1.5vw,2.5rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --line-2:#D2D2D7;
  --mat:#FFFFFF;
  --mat-deep:#F5F5F7;
  --mat-ink:#1D1D1F;
  --mat-line:rgba(0,0,0,.06);
  --mat-line-2:rgba(0,0,0,.12);
  --chalk:#1D1D1F;
  --chalk-2:#424245;
  --chalk-3:#6E6E73;
  --sheet:#FFFFFF;
  --ink:#1D1D1F;
  --ink-2:#6E6E73;
  --rule:#E5E5EA;
  --wash:#F5F5F7;
  --buy:#1B6B43;
  --pass:#A83A28;
  --maybe:#6F560F;
  --live:#1B6B43;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,48px);
  --max:1080px;
  --ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:rgba(242,240,235,.3) #1A1A1A}
body{margin:0}
/* browser-drawn parts, themed from the palette: lime selection on the page, charcoal selection on paper */

input,textarea{caret-color:var(--chalk)}
:is(.sheet,.measure-row,.fl,.gsheet) :is(input,textarea){caret-color:var(--ink)}
/* paper surfaces get a dark thin thumb on a clear track, so the page's chalk thumb never lands on paper */
:is(.sheet,.measure-row,.fl,.gsheet){scrollbar-color:rgba(18,18,18,.3) transparent}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

img,svg{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main code,.footer code{font:400 .86em/1.3 var(--mono);background:rgba(242,240,235,.1);padding:.2em .42em;border-radius:0}
.label{font:500 var(--fs-small)/1.25 var(--mono)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* drawings: every [data-flat] gets an inline technical flat */
[data-flat] svg{width:100%;height:auto;overflow:visible}
[data-flat] .o{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
[data-flat] .st{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 4;stroke-linecap:round;opacity:.75}
.flats{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-flats{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.band-flats{-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.flat{position:absolute;color:var(--chalk);opacity:.34}
.anim .flat svg{opacity:0}

/* nav */
.navbar{position:sticky;top:0;z-index:50;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.navbar.scrolled{-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.nav{display:flex;align-items:center;gap:28px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}

.nav nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;line-height:1}
.nav nav a,.nav-right ul a{text-decoration:none;transition:color .2s}

.nav-sub{display:none}

/* buttons: square, mono, uppercase; lime is the primary action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .3s var(--ease)}
.btn svg{width:16px;height:16px}

/* the nav button is an outline that fills lime on hover */

.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* hero */
.hero{position:relative;overflow:hidden}
.ruler{position:absolute;left:0;right:0;top:0;height:16px;opacity:.7;
  background-image:repeating-linear-gradient(90deg,var(--chalk-3) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,var(--chalk-3) 0 1px,transparent 1px 120px);
  background-size:100% 6px,100% 14px;background-repeat:no-repeat;background-position:-1px 0,-1px 0}
.f-jacket{width:min(40vw,520px);left:-4%;top:900px;transform:rotate(-9deg)}
.f-sneaker{width:min(44vw,600px);right:-6%;top:0;transform:rotate(7deg)}
.f-bag{width:min(30vw,400px);left:38%;bottom:-4%;transform:rotate(-5deg)}
.f-leggings{width:min(15vw,200px);left:35%;top:-4%;transform:rotate(14deg);opacity:.22}
.hero-copy{position:relative}
.hero-copy .hero-mark{width:clamp(96px,11vw,150px);right:2%;top:-6px;transform:rotate(-8deg);opacity:.6}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,72px);align-items:start;padding-top:clamp(28px,5vw,64px)}
h1{font:600 var(--fs-display)/.92 var(--display);letter-spacing:-.035em}
/* SplitText word masks (overflow:clip) cut off descenders at line-height < 1: pad each mask down and pull it back up so the layout is unchanged */
h1 div[style*="overflow: clip"],h2 div[style*="overflow: clip"]{padding-bottom:.2em;margin-bottom:-.2em}

.measure-row{display:grid;align-items:stretch;
  transition:box-shadow .3s var(--ease)}

.field{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;cursor:text}

.field i{font-style:normal;text-transform:none;letter-spacing:0}
.field input{border:0;background:transparent;padding:3px 0;width:100%;min-width:0;outline:none;caret-color:var(--ink)}

.cost{display:flex;align-items:center;gap:2px}
.cost b{font-weight:500;color:var(--ink-2)}

.examples{display:flex;flex-wrap:wrap;align-items:center}
.examples>span{font:500 var(--fs-small)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-2);margin-right:4px}
.chip{cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s}
.live{display:flex;align-items:center;gap:10px;color:var(--chalk-2);font-size:var(--fs-small);margin:22px 0 0}
.hero-cta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sheet-next{margin:16px 0 0;padding:12px 14px;font-size:var(--fs-small)}
.sheet-next a{color:var(--ink);font-weight:600}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live)}

/* the spec sheet */
.sheet-wrap{perspective:1800px}
.sheet{position:relative;color:var(--ink);transform-style:preserve-3d;container-type:inline-size}

.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px}
.sheet-title{font:600 var(--fs-h3)/1.1 var(--display);margin:7px 0 0;text-transform:capitalize;overflow-wrap:anywhere;letter-spacing:-.015em}
.sheet-meta{display:grid;grid-template-columns:auto auto;gap:4px 12px;margin:0;font:400 var(--fs-small)/1.4 var(--mono);text-align:right;flex:none}
.sheet-meta dt{color:var(--ink-2)}
.sheet-meta dd{margin:0}
.sheet-body{padding-top:18px;min-height:400px;transition:opacity .25s}
.sheet.busy .sheet-body{opacity:.45}
.median{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
.sheet-flat{width:118px}
.sheet-flat .o{stroke-width:1.9}
.tape{position:relative}
.tape-band{position:absolute}
.tape-dot{position:absolute;width:7px;height:7px;margin-left:-3.5px;border-radius:50%}
.tape-needle{position:absolute;width:2px;margin-left:-1px}
.tape-needle::before{content:"";position:absolute;top:-1px;left:-5px;border:6px solid transparent;border-top-color:var(--ink)}
.tape-ticks{position:relative;height:18px}
.tape-ticks span{position:absolute;transform:translateX(-50%)}
.tape-ticks span:first-child{transform:none}
.tape-ticks span:last-child{transform:translateX(-100%)}
.sheet-pom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0}

.sheet-pom dd{margin:5px 0 0}
.verdict{display:flex;gap:14px;margin-top:0}
.verdict strong{flex:none}
.v-buy strong{color:var(--buy)}  .v-maybe strong{color:var(--maybe)}
.verdict p{margin:0;line-height:1.5}

.conds{width:100%;border-collapse:collapse}
.conds caption{text-align:left;margin-bottom:4px}
.conds th,.conds td{font-size:var(--fs-small);text-align:left;vertical-align:baseline}
.conds th{font-weight:500;color:var(--ink)}
.conds td{white-space:nowrap}
.conds .conds-m{text-align:right}
@media (max-width:480px){
  .conds .conds-r{display:none}}
.sales{list-style:none;margin:0;padding:0}
.sales li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sales li>div{min-width:0}
.sales a{display:block;color:var(--ink);font-weight:500;font-size:var(--fs-small);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sales a:hover{text-decoration:underline}
.sales span{font-size:var(--fs-small);color:var(--ink-2)}
.sales b{flex:none}
.sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px}
.link-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;color:var(--ink);font:600 var(--fs-small)/1 var(--body);cursor:pointer;flex:none}
.link-btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-btn:hover svg{transform:translateX(3px)}
.back-head{align-items:center}
.snip{margin:14px 0 0;padding:14px 16px;color:var(--ink);font:400 var(--fs-small)/1.65 var(--mono);overflow-x:auto;overflow-y:hidden;white-space:pre}
.snip-res{max-height:340px}
.snip .k{color:#4A5A00;font-weight:500} .snip .s{color:#8A4B12} .snip .n{color:#2142A8}
.skel{height:14px;margin:16px 0;animation:shim 1.4s linear infinite}
.skel.short{width:58%}
@keyframes shim{to{background-position:-200% 0}}
.empty{padding:36px 0}
.empty-big{font:600 var(--fs-h2)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 10px}
.empty p:not(.empty-big){color:var(--ink-2);margin:0}

/* bands */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--mat-line-2)}
.h2{position:relative;font:600 var(--fs-h2)/.98 var(--display);max-width:17ch;letter-spacing:-.025em}
.prose p{color:var(--chalk-2);max-width:34rem;margin:0 0 14px}
.prose strong{color:var(--chalk);font-weight:600}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.band-flats .flat{opacity:.24}
.f-api{width:min(48vw,620px);right:-9%;top:4%;transform:rotate(-7deg)}
.f-price{width:min(32vw,400px);left:-7%;bottom:0;transform:rotate(9deg)}
.f-how{width:min(30vw,380px);right:-4%;top:10%;transform:rotate(-8deg)}
.f-build{width:min(40vw,520px);right:-10%;bottom:4%;transform:rotate(6deg)}
.f-key{width:min(16vw,200px);left:46%;top:8%;transform:rotate(-12deg)}
.band .wrap{position:relative;z-index:1}

/* how it works */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--chalk)}
.step{padding:28px clamp(16px,2.6vw,36px) 4px 0}
.step+.step{border-left:1px solid var(--mat-line-2);padding-left:clamp(16px,2.6vw,36px)}
.step h3{font:600 var(--fs-h3)/1.15 var(--display);letter-spacing:-.015em;margin:0 0 10px}
.step p{color:var(--chalk-2);font-size:var(--fs-body);margin:0 0 20px}
.step-code{display:inline-block;font:400 var(--fs-small)/1.4 var(--mono)!important;background:var(--mat-deep)!important;border:1px solid var(--mat-line-2);padding:9px 11px!important;border-radius:0!important}
.struck{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.struck li{position:relative;font:400 var(--fs-small)/1.6 var(--mono);color:var(--chalk-2)}
.struck li::after{content:"";position:absolute;left:-2px;top:52%;height:1.5px;width:calc((100% + 4px) * var(--strike,1));background:var(--chalk)}
.measures{list-style:none;margin:0;padding:0;font:400 var(--fs-small)/1.4 var(--mono)}
.measures li{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;border-top:1px dashed var(--mat-line-2)}

/* api */
.well{border-bottom:1px solid var(--mat-line-2)}
.tabs{display:flex;gap:18px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:14px 0 12px;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.tabs button:hover{color:var(--chalk)}
.tabs [aria-selected="true"]{color:var(--chalk);border-bottom-color:var(--ink)}
.tabs .tab-copy{margin-left:auto;align-self:center;border-radius:980px;font:500 var(--fs-small)/1 var(--body);padding:7px 12px;cursor:pointer;transition:background-color .2s,color .2s}
.well pre{margin:0;padding:22px 0 26px;font:400 var(--fs-small)/1.75 var(--mono);overflow:auto;max-height:440px}

.pom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);margin:64px 0 0;border-top:1px solid var(--chalk)}
.pom>div{padding:18px 0 20px;border-bottom:1px solid var(--mat-line-2)}
.pom dt{font:500 var(--fs-small)/1.3 var(--mono)}
.pom dd{margin:6px 0 0;color:var(--chalk-2);font-size:var(--fs-small)}

/* uses */
.build .lede{margin-top:0}
.uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--chalk)}
.use{padding:28px clamp(16px,3vw,40px) 30px 0;border-bottom:1px solid var(--mat-line-2)}
.use:nth-child(even){padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--mat-line-2)}
.use h3{font:600 var(--fs-h3)/1.2 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.use p{color:var(--chalk-2);margin:0 0 16px;max-width:34rem}
.use .sees{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font:400 var(--fs-small)/1.5 var(--mono);color:var(--chalk)}
.sees span{font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-2)}

/* coverage */
.runs{border-top:1px solid var(--chalk)}
.run{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--mat-line-2)}
.run>span{font:600 var(--fs-h3)/1.2 var(--display);letter-spacing:-.01em;color:var(--chalk-2)}
.run.live>span{color:var(--chalk);font-size:var(--fs-h2)}
.run em{font:normal 500 var(--fs-small)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-2)}
.run.live{grid-template-columns:minmax(0,1fr) auto}
.run.live em{color:#FFFFFF;background:var(--live);padding:6px 9px;border-radius:0}
.vote{font:500 var(--fs-small)/1 var(--body);border-radius:980px;padding:8px 14px;cursor:pointer;transition:background-color .2s,color .2s}
.vote-msg{color:var(--chalk-2);font-size:var(--fs-small);margin:14px 0 0}

/* pricing: a size chart */

.chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px}
.size{display:flex;flex-direction:column}

.size-name{font:600 var(--fs-h3)/1 var(--display);letter-spacing:-.015em;margin:0}
.size-for{font-size:var(--fs-small);margin:8px 0 18px;min-height:2.9em}
.size-price{margin:0}
.size-price strong{font:500 var(--fs-h2)/1 var(--display);letter-spacing:-.045em}
.size-price span{color:var(--chalk-2);font-size:var(--fs-small);margin-left:6px}
.size-rows{flex:1;margin:22px 0 24px}
.size-rows>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed var(--mat-line-2);font-size:var(--fs-small)}

.size-rows dd{margin:0;font:400 var(--fs-small)/1.5 var(--mono);text-align:right}
.hold p{color:var(--chalk-2);font-size:var(--fs-small);margin:14px 0 8px}
.hold form{display:flex;flex-direction:column;gap:8px}

/* inputs on the mat */
.keyform input,.hold input{padding:13px 14px;font:500 var(--fs-body)/1.2 var(--body);outline:none;min-width:0;transition:border-color .2s}
.keyform input::placeholder,.hold input::placeholder{color:var(--chalk-3)}
.keyform input:focus,.hold input:focus{border-color:var(--ink)}
.form-msg{min-height:1.4em;font-size:var(--fs-small)}

/* free key */
.keyform{display:flex;gap:10px;margin-top:26px;max-width:30rem}
.keyform input{flex:1}
.manage{font-size:var(--fs-small)}

.signed-in{color:var(--chalk-2);font-size:var(--fs-small);margin:10px 0 0}
.signed-in a{color:var(--chalk);font-weight:600}
.keyline{font:500 var(--fs-body)/1.5 var(--mono);margin:12px 0 18px;word-break:break-all}
.keyline.stub{border:1px dashed #D2D2D7;padding:16px}
.key-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.keycard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:var(--fs-small)}
.keycard dt{color:var(--chalk-2)}
.keycard dd{margin:0}
.keycard .snip{background:none;border-top:1px dashed var(--mat-line-2);border-radius:0;padding:14px 0 0;color:var(--chalk);font-size:var(--fs-small);white-space:pre-wrap;word-break:break-all}
/* the issued key's example has a Copy button (copy.js): leave it a row of its own so it doesn't sit on the URL */
.keycard .cp-wrap>.snip{padding-top:44px}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq{border-top:1px solid var(--chalk)}
.faq details{border-bottom:1px solid var(--mat-line-2)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font:500 var(--fs-body)/1.3 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--chalk),var(--chalk)) center/12px 1.5px no-repeat,linear-gradient(var(--chalk),var(--chalk)) center/1.5px 12px no-repeat;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--chalk-2);margin:0 0 22px;max-width:42rem}

/* footer */
.footer{padding:44px 0 52px}
.footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
.footer p{color:var(--chalk-2);margin:0;font-size:var(--fs-small)}
.footer nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 20px}
.footer nav a{text-decoration:none;font-size:var(--fs-small)}
.footer nav a:hover{color:var(--ink);text-decoration:underline}
@media (pointer:coarse){
  .footer nav{gap:0 20px}.footer nav a{display:inline-flex;align-items:center;min-height:44px}}

/* responsive */
@media (max-width:1020px){
  .hero-grid,.split,.faq-grid{grid-template-columns:minmax(0,1fr)}

  .chart{grid-template-columns:repeat(2,minmax(0,1fr))}

  .pom{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-bag{left:auto;right:-6%;bottom:auto;top:44%}
  .f-jacket{top:auto;bottom:-4%}
}
@media (max-width:880px){
  .nav nav{display:none}.nav .btn{margin-left:auto}
  /* the full nav is hidden: a second row under the logo bar keeps the three main pages one tap away */
  .nav-sub{display:flex;flex-wrap:wrap;gap:0 28px}
  .nav-sub a{display:flex;align-items:center;min-height:44px;text-decoration:none}

}
@media (max-width:720px){
  .f-how,.f-key{display:none}

  .steps,.uses{grid-template-columns:minmax(0,1fr)}
  .step+.step{border-left:0;padding-left:0;border-top:1px solid var(--mat-line-2)}
  .use:nth-child(even){padding-left:0;border-left:0}

  .field-item{grid-column:1/-1;border-bottom:1px solid var(--rule)}

  .f-jacket{width:64vw;left:auto;right:-30%;top:300px}
  .f-sneaker{width:70vw;right:-26%;top:-1%}
  .f-bag{width:46vw;left:-18%;right:auto;top:560px;bottom:auto}
  .flat{opacity:.24}
  .band-flats .flat{opacity:.3}
  .band-flats{-webkit-mask-image:none;mask-image:none}
  .f-api,.f-build{width:56vw;top:auto;bottom:6px}
  .f-api{right:4%;transform:rotate(-5deg)}
  .f-build{left:4%;right:auto;transform:rotate(5deg)}
  .f-price{width:40vw;left:auto;right:6%;bottom:6px;transform:rotate(6deg)}
  .f-leggings{display:none}
}
@media (max-width:560px){
  .chart,.pom{grid-template-columns:minmax(0,1fr)}

  .size-for{min-height:0}

  .sheet-head{flex-direction:column;gap:10px}
  .sheet-meta{text-align:left}
  .sheet-pom{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet-flat{width:84px}
  .keyform{flex-direction:column}
  .hero-copy .hero-mark{display:none}
  .footer nav{margin-left:0}
}

/* one-month pass, under the plan chart */
.pass:not(td){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:center;margin-top:28px;padding:22px 24px}
.pass h3{margin:0 0 4px;font:600 var(--fs-h3)/1.2 var(--display);color:var(--chalk);letter-spacing:-.015em}
.pass p{margin:0;color:var(--chalk-2)}
.pass p strong{color:var(--chalk)}
.pass .hold{grid-column:1/-1}
.pass .hold:empty{display:none}
.pass[hidden]{display:none}
@media (max-width:640px){
  .pass:not(td){grid-template-columns:minmax(0,1fr)}.pass .btn{justify-self:start}}

/* code-block captions are file names and content types, not points of measure: keep them lowercase mono */
.code .code-head span{text-transform:none;letter-spacing:.02em;line-height:1.3}

/* docs-style pages: the section h3 steps clearly above 17px body, the contents list keeps a readable line height */
.doc .sheet section>h3{font:600 var(--fs-h3)/1.25 var(--display);letter-spacing:-.015em}
main .sheet code{line-height:1.3}
nav.toc,nav.toc ol,nav.toc a,nav.toc p{line-height:1.3}

/* code blocks scroll sideways only: a 1px line-height overflow must not add a vertical scrollbar */
pre{overflow-y:hidden;scrollbar-width:thin}

/* tabular figures for prices, counts and data cells only. Never on running text: in these fonts tabular figures also
   make "." and "," digit-wide, which reads as "3 . 5 days" in a sentence. Last in the file because the font shorthand
   resets font-variant-numeric. */
.size-price strong,.size-rows dd,.sheet-pom dd,.sales b,.field-cost input,.gsheet td,.conds td{font-variant-numeric:tabular-nums}

/* wide tables on phones: a hint line and a right-edge fade while there's more to scroll to (static/copy.js) */
.scroll-hint{text-align:right;font:500 var(--fs-small)/1.2 var(--mono)}
.scroll-hint[hidden]{display:none}
.x-scroll:not(.x-end){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}

/* "Free: we'll price 20 of your items" (FREE20_FORM in app/pages.py): a dark card with a lime edge, on the homepage mat
   and on paper sheets. Self-contained, since the homepage doesn't load price.css where the other .listreq styles live. */

.free20{--f20-pad:clamp(22px,3.4vw,40px);container-type:inline-size;
  padding:var(--f20-pad);scroll-margin-top:90px}
.sheet .free20{padding:var(--f20-pad)}
.f20-in{display:grid;gap:22px}
@container (min-width:700px){
  .f20-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}}
.free20 .f20-h{font:600 var(--fs-h2)/1.02 var(--display);margin:0 0 14px;max-width:13ch;letter-spacing:-.025em}
.free20 .f20-copy p{font-size:var(--fs-body);line-height:1.55;margin:0;max-width:30rem}
.free20 .listreq{display:grid;gap:14px;max-width:none;margin:0}
.free20 .lr-row label{display:block;margin:0 0 6px}
.free20 .listreq input,.free20 .listreq textarea{display:block;width:100%;min-width:0;caret-color:var(--ink);
  padding:12px 14px;font:500 var(--fs-body)/1.35 var(--body)}
.free20 .listreq textarea{font:400 var(--fs-small)/1.45 var(--mono);resize:vertical;min-height:7.5rem}
.free20 .listreq :is(input,textarea)::placeholder{opacity:1}
.free20 .listreq :is(input,textarea):focus{outline:2px solid var(--ink);outline-offset:2px}
.free20 .listreq .btn{justify-self:start;min-height:48px}
.free20 .lr-msg{margin:0;font-size:var(--fs-small);line-height:1.45;min-height:1.4em;max-width:none}
.free20 .lr-msg:empty{display:none}
.free20 .lr-ok{font-weight:600}
.free20 .lr-err{font-weight:500}
@container (max-width:479px){
  .free20 .listreq .btn{justify-self:stretch}}

/* ===== Document pages: docs, terms, privacy, Sheets setup, landing and guide pages ===== */
/* Document pages (docs, terms, privacy, Sheets setup) and the shared chrome of the price pages, on the Price Ruler page.
   Loads after site.css, which owns the tokens, the mat, buttons and the drawings. */
:root{/* old token names, mapped onto the Price Ruler palette so page-level styles keep working */
  --paper:var(--sheet); --thermal:var(--ink); --thermal-2:var(--ink-2); --rule-soft:var(--rule); --red:var(--pass);
  --counter:var(--mat); --counter-deep:var(--mat-deep); --counter-ink:var(--mat-ink); --counter-rule:var(--mat-line-2);
  --on-counter:var(--chalk); --on-counter-2:var(--chalk-2)}

/* nav on server-rendered and document pages */
.nav-right{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-right ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;line-height:1}

/* page head on the dark page */
.head{position:relative;padding:clamp(28px,5vw,64px) 0 clamp(32px,4vw,52px);overflow-x:clip}
.head h1{font:600 var(--fs-display)/.95 var(--display);margin:0;max-width:16ch;text-transform:none;letter-spacing:-.035em}
.head p{font-size:var(--fs-h3);max-width:38rem;margin:18px 0 0}
.head-flat{position:absolute;right:0;top:12px;width:min(30vw,340px);pointer-events:none;transform:rotate(6deg)}
.head>*:not(.head-flat){position:relative;z-index:1}

/* index + the paper sheet */
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(56px,8vw,96px)}
.layout.solo{grid-template-columns:minmax(0,1fr)}
.layout.solo>.sheet{max-width:none}
.toc{position:sticky;top:88px;font:400 var(--fs-small)/1 var(--mono)}
.toc p{margin:0 0 14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--mat-line-2)}
.toc a{display:block;padding:9px 0 9px 14px;margin-left:-1px;border-left:2px solid transparent;text-decoration:none;transition:color .2s,border-color .2s}

:where(body:not(.home-l)) .sheet{padding:clamp(28px,5vw,60px) clamp(20px,5vw,60px) clamp(40px,6vw,72px);max-width:880px}
:where(body:not(.home-l)) .sheet section{scroll-margin-top:90px}
:where(body:not(.home-l)) .sheet section+section{margin-top:52px;padding-top:44px;border-top:1px solid var(--rule)}
:where(body:not(.home-l)) .sheet h2{font:600 var(--fs-h2)/1.05 var(--display);margin:0 0 18px;text-transform:none;letter-spacing:-.025em}
:where(body:not(.home-l)) .sheet h3{font:600 var(--fs-h3)/1.3 var(--body);margin:30px 0 10px;letter-spacing:-.015em}
:where(body:not(.home-l)) .sheet p,:where(body:not(.home-l)) .sheet li{max-width:44rem}
:where(body:not(.home-l)) .sheet p{margin:0 0 14px}
:where(body:not(.home-l)) .sheet ul,:where(body:not(.home-l)) .sheet ol{padding-left:1.2em;margin:0 0 14px}
:where(body:not(.home-l)) .sheet li{margin:4px 0}
:where(body:not(.home-l)) .sheet strong{color:var(--ink)}
:where(body:not(.home-l)) .sheet a:where(:not(.btn,.copy)){color:var(--ink);font-weight:600}
:where(body:not(.home-l)) .sheet code{font:400 .86em/1 var(--mono);padding:.2em .42em;white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* code: paper-toned, ruled, dark-on-light */
.code{margin:14px 0 22px}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;
  font:500 var(--fs-small)/1 var(--mono)}
.copy{white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}

.code pre{margin:0;padding:16px 14px 18px;overflow-x:auto;font:400 var(--fs-small)/1.75 var(--mono);color:var(--ink)}
.code pre code{font:inherit;padding:0}
.code .c{color:#625D54} .code .k{color:#4A5A00;font-weight:500} .code .s{color:#8A4B12} .code .n{color:#2142A8}

/* definition tables, ruled like a spec */
.fields{margin:10px 0 22px;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,2.1fr);gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--rule)}
.row dt{font:500 var(--fs-small)/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.row dt span{display:block;font-size:var(--fs-small);color:var(--ink-2)}
/* plain-language label lists (privacy) read as text, not parameter names */
.fields.plain .row dt{font-family:var(--body);font-weight:600;overflow-wrap:normal}
.row dd{margin:0;font-size:var(--fs-body)}
.row dd p{margin:0}
.callout{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0;margin:18px 0}
.callout p{margin:0}

/* footer on document and price pages */
body:where(:not(.home-l))>footer{padding:40px 0 48px;font-size:var(--fs-small)}
body:where(:not(.home-l))>footer .wrap{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
body:where(:not(.home-l))>footer a{text-decoration:none}
body:where(:not(.home-l))>footer a:hover{text-decoration:underline}

/* touch screens: 44px targets for the contents list and footer links (desktop is unchanged) */
@media (pointer:coarse){
  .toc a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
  body:where(:not(.home-l))>footer a{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:961px) and (max-width:1180px){
  .layout:not(.solo){grid-template-columns:176px minmax(0,1fr);gap:28px}}
@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .toc ol{display:flex;gap:6px;overflow-x:auto;border-left:0;padding-bottom:4px;scrollbar-width:none}
  .toc ol::-webkit-scrollbar{display:none}
  .toc a{padding:9px 12px;margin:0;white-space:nowrap}

  :where(body:not(.home-l)) .sheet{max-width:none}
}
@media (max-width:880px){
  .nav-right ul{display:none}}
@media (max-width:560px){
  .row{grid-template-columns:minmax(0,1fr)}
  .head-flat{width:44vw;right:-12%}
}

/* resale report: the category bar chart (inline SVG on the paper sheet) */
.rchart{margin:20px 0 10px}
.rchart svg{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.rchart text{font:500 var(--fs-small)/1 var(--body);fill:var(--ink)}
.rchart .n{font-weight:400;fill:var(--ink-2)}
.rchart .v{font:600 var(--fs-small)/1 var(--mono)}
.rchart .ax{font:400 var(--fs-small)/1 var(--mono);fill:var(--ink-2)}

.rchart figcaption{margin-top:6px;font-size:var(--fs-small);color:var(--ink-2);max-width:44rem}
:where(body:not(.home-l)) .sheet.landing .compare.kept td:nth-child(2){font-weight:400}
:where(body:not(.home-l)) .sheet.landing .compare.kept td:last-child{font-weight:600}

/* /alerts: the early-access signup on the dark page. Ruled, not boxed: a chalk top rule, dark inputs, labels above. */
.head.al-head h1{max-width:20ch;font-size:var(--fs-display);letter-spacing:-.035em}
.head.al-head{padding-bottom:clamp(28px,4vw,44px)}
.al-signup{margin-top:26px;max-width:58rem;border-top:1px solid var(--chalk);padding-top:20px;scroll-margin-top:84px}
.alform[hidden],.al-done[hidden]{display:none}
.alform{display:grid;gap:16px;justify-items:start}
.al-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(0,1.4fr);gap:14px 16px;width:100%}
.al-field label{display:block;font:500 var(--fs-small)/1.3 var(--mono);margin-bottom:7px}
.al-hint{text-transform:none;letter-spacing:0;font-style:italic;color:var(--chalk-3)}
.al-field input{width:100%;min-width:0;padding:13px 14px;font:500 var(--fs-body)/1.35 var(--body)}
.al-field input::placeholder{color:var(--chalk-3);font-weight:400}
.al-field input:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.al-field input[aria-invalid="true"]{border-color:#F2A596}
.head .al-err{font-size:var(--fs-small);line-height:1.4;margin:7px 0 0;max-width:none}
.al-err:empty,.al-status:empty{display:none}
.head .al-status{font-size:var(--fs-small);margin:0}
.al-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.head .al-note{font-size:var(--fs-small);margin:-4px 0 0;max-width:none}
.head .al-done .al-msg{font:600 var(--fs-h2)/1.15 var(--display);letter-spacing:-.025em;color:var(--chalk);max-width:34rem;margin:0}
.head .al-done p+p{margin-top:14px}
.al-done:focus{outline:none}
.al-done a{color:var(--chalk);font-weight:600}
@media (max-width:720px){
  .head.al-head{padding-top:8px}
  .al-signup{margin-top:18px;padding-top:14px}
  .al-fields{grid-template-columns:minmax(0,1fr);gap:10px}
  .al-field label{margin-bottom:4px}
  .al-field input{padding:11px 14px}
  .alform{gap:12px}
  .alform{justify-items:stretch}
  .alform .btn{width:100%}
}

/* price pages: the quiet link to the deal-alerts list */
.answer .alerts-link{margin:14px 0 0;font-size:var(--fs-small);max-width:none}
.answer .alerts-link a{color:var(--chalk-2)}
.answer .alerts-link a:hover{color:var(--chalk)}

/* ===== Price pages: price guide, item pages, fee calculator, brand and worth pages ===== */
/* Price guide, item pages, fee calculator and developer landing pages on the Price Ruler page.
   Loads after site.css and page.css. Data sits on paper sheets; tools sit in ruled regions on the dark page. */


/* lookup: the same ruled measure bar as the homepage */
.lookup{display:flex;gap:0;margin-top:24px;max-width:36rem;transition:outline-color .2s}
.lookup:focus-within{outline-offset:2px}
.lookup input{flex:1;min-width:0;background:transparent;border:0;font:400 var(--fs-body)/1.3 var(--mono);outline:none}

/* the same bar when it sits on a paper sheet */

:where(body:not(.home-l)) .sheet .lookup:focus-within{outline-color:var(--ink)}

/* the answer: one enormous median */
.answer .big{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:22px 0 0;max-width:none}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,3vw,40px);margin:30px 0 0;border-top:1px solid var(--chalk)}
.strip div{padding:14px 0 16px;border-bottom:1px solid var(--mat-line-2)}
.strip dt{font:500 var(--fs-small)/1.3 var(--mono)}
.strip dd{margin:8px 0 0;font:500 var(--fs-h3)/1.15 var(--display);letter-spacing:0;color:var(--chalk);font-variant-numeric:tabular-nums}
.answer .conds{max-width:44rem}
.answer .conds caption{margin-bottom:6px}

.answer .conds th{color:var(--chalk);font-size:var(--fs-small)}

.answer .note{font-size:var(--fs-small);margin-top:16px;max-width:44rem}
.answer .note strong{color:var(--chalk);text-transform:capitalize}

/* recent sales on a white spec sheet + tools beside it */
.price-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(48px,7vw,88px)}
.paper{background:var(--sheet);color:var(--ink)}
.receipt{padding:24px 24px 22px;font:400 var(--fs-small)/1.5 var(--body)}
.r-head{padding-bottom:14px}
.r-store{font:600 var(--fs-h3)/1.1 var(--display);letter-spacing:-.015em}
.r-sub{font:400 var(--fs-small)/1.4 var(--mono);color:var(--ink-2);margin-top:6px}
.r-cut{border:0;border-top:1px solid var(--rule);margin:12px 0}
.r-items{list-style:none;margin:0;padding:0}
.r-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;padding:9px 0;border-bottom:1px solid var(--rule)}
.r-item:last-child{border-bottom:0}
.r-n{font:400 var(--fs-small)/1.6 var(--mono);color:var(--ink-2)}
.r-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.r-title a{text-decoration:none;color:inherit}
.r-title a:hover{text-decoration:underline}
.r-meta{grid-column:2/4;color:var(--ink-2);font-size:var(--fs-small)}
.r-price{font:500 var(--fs-small)/1.5 var(--mono);text-align:right}
.r-foot{color:var(--ink-2);font:400 var(--fs-small)/1.5 var(--mono);margin:8px 0 0}
aside{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;min-width:0}
:where(body:not(.home-l)) .well{border-top:1px solid var(--chalk);padding:18px 0 4px}
:where(body:not(.home-l)) .well h2,.related h2,.devs h2,:where(body:not(.home-l)) .how h2,.group h2{font:600 var(--fs-h3)/1.15 var(--display);letter-spacing:-.015em;margin:0 0 10px;text-transform:none}
:where(body:not(.home-l)) .well p{color:var(--chalk-2);margin:0 0 10px;font-size:var(--fs-small)}
:where(body:not(.home-l)) .tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
:where(body:not(.home-l)) .tag label{font-weight:500;color:var(--chalk-2);font-size:var(--fs-small)}
.cost-field{display:inline-flex;align-items:center;gap:4px;padding:0 12px;font:400 var(--fs-body)/1 var(--mono);transition:outline-color .2s}
.cost-field:focus-within{outline-offset:2px}
.cost-field input{width:84px;background:transparent;border:0;font:inherit;padding:11px 0;outline:none}
.cost-field input::placeholder{color:var(--chalk-3)}
:where(body:not(.home-l)) .verdict{min-height:1.5em}
:where(body:not(.home-l)) .verdict strong{margin-right:8px}
:where(body:not(.home-l)) .well pre{margin:0 0 10px;padding:12px 0;border-top:1px dashed var(--mat-line-2);border-bottom:1px dashed var(--mat-line-2);overflow-x:auto;overflow-y:hidden;max-height:none;
  font:400 var(--fs-small)/1.65 var(--mono);color:var(--chalk)}
:where(body:not(.home-l)) .well a:not(.btn),.related a,.devs a:not(.btn){color:var(--chalk);font-weight:600}
.answer .sheets-offer{max-width:44rem;margin-top:26px}
.sheets-offer .btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.sheets-offer .btns .btn{margin:0;max-width:100%;white-space:normal;line-height:1.35;text-align:left}
:where(body:not(.home-l)) .well code,.devs code{font:400 .86em/1 var(--mono);padding:.2em .42em;overflow-wrap:anywhere}
.related{border-top:1px solid var(--mat-line-2);padding-top:18px}
.related ul,.group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.related li a,.group li a{display:inline-block;font:400 var(--fs-small)/1 var(--mono);letter-spacing:.02em;text-decoration:none;color:var(--chalk);background:rgba(18,18,18,.55);border:1px solid rgba(242,240,235,.4);border-radius:0;padding:10px 12px;transition:background-color .2s,color .2s,border-color .2s}
.related li a:hover,.group li a:hover{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.related .lookup{margin-top:0}
:where(body:not(.home-l)) .how{border-top:1px solid var(--mat-line-2);padding:32px 0 64px;max-width:52rem}
:where(body:not(.home-l)) .how p{color:var(--chalk-2)}
:where(body:not(.home-l)) .how h2+h3,:where(body:not(.home-l)) .how h3{font:600 var(--fs-body)/1.35 var(--body);color:var(--chalk);margin:22px 0 4px}
:where(body:not(.home-l)) .how p+h2{margin-top:36px}

/* index: a count line and a labelled lookup on the mat, then the whole guide on one sheet:
   a filter bar, a brand grid, and each category as a columned list */
.head .tally{font:400 var(--fs-small)/1.5 var(--mono);margin:18px 0 0}
.head .tally b{font-weight:500;color:var(--chalk);font-variant-numeric:tabular-nums}
.head .lookup-label{font:500 var(--fs-small)/1.25 var(--mono);margin:30px 0 0}
.head .lookup-label+.lookup{margin-top:10px}
:where(body:not(.home-l)) .sheet.guide{max-width:none;margin-bottom:56px;padding-top:clamp(24px,4vw,48px)}
:where(body:not(.home-l)) .sheet.guide [hidden]{display:none!important}
.guide-top{margin-bottom:14px}
.guide-top h2{margin:0 0 8px}
.guide-top p{margin:0}
.guide-label{display:block;font:500 var(--fs-small)/1.25 var(--mono);margin:10px 0 0}
.guide-bar{position:sticky;top:0;z-index:2;background:var(--sheet);margin:0;padding:10px 0 10px;border-bottom:1px solid var(--ink)}
.guide-filter input{width:100%;max-width:30rem;min-width:0;padding:11px 12px;font:500 var(--fs-body)/1.35 var(--body);caret-color:var(--ink)}
.guide-filter input::placeholder{font-weight:400}
.guide-filter input:focus{outline-offset:1px}
.guide-filter input::-webkit-search-cancel-button{filter:grayscale(1)}
:where(body:not(.home-l)) .sheet .guide-status{font:400 var(--fs-small)/1.4 var(--mono)}
:where(body:not(.home-l)) .sheet .guide-status:empty{margin:0}
.guide-jump{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;padding-bottom:2px;font:400 var(--fs-small)/1.4 var(--mono)}
:where(body:not(.home-l)) .sheet .guide-jump a{flex:none;font-weight:400;color:var(--ink-2);text-decoration:none;white-space:nowrap}
:where(body:not(.home-l)) .sheet .guide-jump a:hover{color:var(--ink);text-decoration:underline}
@media (pointer:coarse){
  .guide-jump{row-gap:0}:where(body:not(.home-l)) .sheet .guide-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0}}
:where(body:not(.home-l)) .sheet .guide-empty{margin:24px 0 0}
:where(body:not(.home-l)) .sheet.guide .gsec{margin:0;padding:34px 0 0;border:0;scroll-margin-top:120px}
:where(body:not(.home-l)) .sheet.guide .gsec h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 var(--fs-h2)/1.15 var(--display);letter-spacing:-.025em;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.gsec .gn{font:400 var(--fs-small)/1 var(--mono);color:var(--ink-2);white-space:nowrap}
/* the brand grid and the item lists: ruled rows, not tiles. Name left, count right, a paper rule under each row. */
:where(body:not(.home-l)) .sheet .bgrid,:where(body:not(.home-l)) .sheet .icols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(20px,3vw,36px)}
:where(body:not(.home-l)) .sheet .icols{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(body:not(.home-l)) .sheet .bgrid li,:where(body:not(.home-l)) .sheet .icols li{margin:0;max-width:none;min-width:0;border-bottom:1px solid var(--rule)}
:where(body:not(.home-l)) .sheet a.bchip,:where(body:not(.home-l)) .sheet .icols a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 0;
  font:500 var(--fs-small)/1.25 var(--body);color:var(--ink);text-decoration:none}
:where(body:not(.home-l)) .sheet .icols a{font-weight:500}
.bchip .bn{min-width:0;overflow-wrap:anywhere}
.bchip .bc{flex:none;font:400 var(--fs-small)/1 var(--mono);color:var(--ink-2)}
:where(body:not(.home-l)) .sheet a.bchip:hover .bn,:where(body:not(.home-l)) .sheet .icols a:hover{text-decoration:underline;text-underline-offset:3px}
.bchip:hover .bc{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  :where(body:not(.home-l)) .sheet a.bchip,:where(body:not(.home-l)) .sheet .icols a{min-height:38px;padding:7px 0}}
@container (min-width:340px){
  :where(body:not(.home-l)) .sheet .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:760px){
  :where(body:not(.home-l)) .sheet .bgrid,:where(body:not(.home-l)) .sheet .icols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:960px){
  :where(body:not(.home-l)) .sheet .bgrid,:where(body:not(.home-l)) .sheet .icols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.devs{padding:8px 0 80px;max-width:44rem}
.devs p{color:var(--chalk-2)}
.devs .btn{margin:6px 8px 0 0}

/* fee calculator */
.calc-forms{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;min-width:0}
.calc-form{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 16px}
.calc-form label{font-weight:500;color:var(--chalk-2);font-size:var(--fs-small)}
.calc-form label em{display:block;font:400 var(--fs-small)/1.3 var(--body);font-style:normal;color:var(--chalk-3)}
.calc-form label.main{grid-column:1/-1;color:var(--chalk)}
.calc-form .cost-field{justify-self:start}
.calc-form .cost-field input{width:120px}
.calc-form .cost-field.main{grid-column:1/-1;justify-self:stretch;font:500 var(--fs-h2)/1 var(--display);padding:0 16px;margin-bottom:6px}
.calc-form .cost-field.main input{width:100%;padding:12px 0}
.calc-answer{min-height:1.5em}
.calc-msg{font-weight:500}
.calc-msg:empty{display:none}
.calc-answer strong{font:600 var(--fs-h2)/1 var(--display);letter-spacing:-.02em;color:var(--chalk)}
.calc .receipt{position:sticky;top:96px}
.calc-lines{margin:0}
.calc-lines div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.calc-lines div:last-child{border-bottom:0}
.calc-lines dt{font-size:var(--fs-small)}
.calc-lines dd{margin:0;font:500 var(--fs-small)/1.4 var(--mono)}
.calc-lines .sum{font-weight:600}
.calc-lines.total dt{font:600 var(--fs-h2)/1 var(--display);letter-spacing:-.02em}
.calc-lines.total dd{font:600 var(--fs-h2)/1 var(--display)}
.calc-lines.total.loss dt,.calc-lines.total.loss dd{color:var(--pass)}
:where(body:not(.home-l)) .sheet.fees{margin-bottom:56px}
.fee-table{width:100%;max-width:36rem;border-collapse:collapse;font:400 var(--fs-small)/1.4 var(--mono);margin:8px 0 6px}
/* tabular figures on number cells only: comparison tables hold sentences ("size 8, good condition"), and tabular
   figures make their "." and "," digit-wide */
.fee-table:not(.compare) td,.fee-table .num{font-variant-numeric:tabular-nums}
.fee-table th{text-align:right;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.fee-table td{text-align:right;padding:9px 0;border-bottom:1px solid var(--rule)}
.fee-table th:first-child,.fee-table td:first-child{text-align:left}
.fee-table td:last-child{font-weight:500}
/* Wide comparison tables scroll inside their own box on phones instead of being cut off by the sheet. */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* comparison tables keep readable columns on phones and scroll sideways inside their box */
.table-scroll>.fee-table.compare{min-width:34rem}
.fee-table.compare th+th,.fee-table.compare td+td{padding-left:12px}
@media (max-width:480px){
  .fee-table.compare{font-size:var(--fs-small)}}
.guide-bar{box-shadow:0 8px 0 var(--sheet)}
.fee-table td+td,.fee-table th+th{padding-left:22px}

/* developer landing pages */
.head .cta{margin-top:26px}
.head .cta .btn{margin:0 8px 8px 0}
.head .cta-note{font-size:var(--fs-small);margin-top:4px}

.layout .sheet.landing{margin-bottom:0}
:where(body:not(.home-l)) .sheet.landing .fee-table{max-width:none;display:block;overflow-x:auto;overflow-y:hidden}
:where(body:not(.home-l)) .sheet.landing .compare td,:where(body:not(.home-l)) .sheet.landing .compare th{text-align:left;padding-right:14px;vertical-align:top;font-family:var(--body)}
:where(body:not(.home-l)) .sheet.landing .compare td:first-child{color:var(--ink-2)}
:where(body:not(.home-l)) .sheet.landing .compare td:nth-child(2){font-weight:600}
:where(body:not(.home-l)) .sheet.landing .compare td:last-child{font-weight:400}
:where(body:not(.home-l)) .sheet.landing .fine{font-size:var(--fs-small);color:var(--ink-2)}
:where(body:not(.home-l)) .sheet.landing .acc-table{max-width:30rem}
:where(body:not(.home-l)) .sheet.landing .acc-table td:last-child{white-space:nowrap}

@media (max-width:880px){
  .price-layout{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc .receipt{position:static}
  .calc .calc-forms{display:contents}
  .calc .receipt{order:2}
  .calc-forms .well{order:3}
  .calc-forms .well:first-child{order:1}
}
@media (max-width:420px){
  .calc-form{grid-template-columns:minmax(0,1fr);gap:6px}.calc-form .cost-field{margin-bottom:8px}}
:where(body:not(.home-l)) .well .fine{font-size:var(--fs-small);color:var(--chalk-2)}
.strip dd.sub{margin-top:6px;font:500 var(--fs-small)/1.3 var(--mono);color:var(--chalk-2)}
.brand-table th[scope=row]{font-weight:500;text-align:left}
.brand-table th[scope=row] a{color:var(--ink)}
.brand-table .num{white-space:nowrap}
:where(body:not(.home-l)) .sheet.landing .brands ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}
@media (max-width:640px){
  .brand-table thead th:nth-child(3),.brand-table td:nth-child(3),.brand-table thead th:nth-child(6),.brand-table td:nth-child(6){display:none}}

/* "Price my list": the request form on /thrift-store-pricing (white sheet) and the one-line prompt on price and brand pages */
.listreq-wrap{scroll-margin-top:24px}
.listreq{display:grid;gap:14px;max-width:36rem;margin-top:14px}
.lr-row label{display:block;font:500 var(--fs-small)/1.3 var(--mono);margin-bottom:6px}
.lr-req,.lr-opt{text-transform:none;letter-spacing:0;font-style:italic}
.lr-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.listreq input,.listreq select,.listreq textarea{width:100%;min-width:0;padding:11px 12px;font:500 var(--fs-body)/1.35 var(--body)}
.listreq textarea{font:400 var(--fs-small)/1.45 var(--mono);resize:vertical;min-height:7.5rem}
.listreq input:focus,.listreq select:focus,.listreq textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.listreq .btn{justify-self:start}
:where(body:not(.home-l)) .sheet.landing .lr-hint{font-size:var(--fs-small);color:var(--ink-2);margin:6px 0 0}
.lr-msg{font-size:var(--fs-small);line-height:1.45;min-height:1.4em}
.lr-msg:empty{display:none}
.lr-ok{color:var(--buy);font-weight:600}
.lr-err{color:var(--pass);font-weight:500}
.listmini p{margin:0}
.listmini .btn{margin:6px 0 0 10px}

:where(body:not(.home-l)) .well.listmini{margin-top:8px}
@media (max-width:560px){
  .lr-two{grid-template-columns:1fr}.listmini .btn{margin:10px 0 0;display:flex}}

/* worth pages: the plain-English answer on the mat, the brand's numbers on a sheet. Brand pages share .xlinks */
.head .worth-lead{font-size:var(--fs-h3);line-height:1.55;max-width:42rem}
.head .xlinks{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--fs-body);margin-top:20px}
.head .xlinks a{color:var(--chalk);font-weight:600}
.worth .strip dd{overflow-wrap:anywhere}
:where(body:not(.home-l)) .sheet.landing .worth-table{max-width:40rem}
.worth-table th[scope=row]{font:500 var(--fs-small)/1.35 var(--body);letter-spacing:0;text-transform:none;padding:9px 12px 9px 0}
.worth-table tbody th,.worth-table tbody td{vertical-align:baseline}
@media (max-width:640px){
  .worth-table thead th:nth-child(3),.worth-table td:nth-child(3){display:table-cell}}

/* category pricing guides: brand table and the guide link lists (guides, /price, worth pages) */
:where(body:not(.home-l)) .sheet.landing .guide-table{max-width:44rem}
.guide-table th,.guide-table td{text-align:left;vertical-align:top}
.guide-table th+td,.guide-table td+td,.guide-table th+th{padding-left:16px}
.guide-table th[scope=row]{font:500 var(--fs-small)/1.35 var(--body);letter-spacing:0;text-transform:none;padding:9px 0;border-bottom:1px solid var(--rule)}
.guide-table th[scope=row] a{color:var(--ink)}

.guide-table td:nth-child(2){white-space:nowrap}
.guide-table td:nth-child(3) a{font-family:var(--body);font-weight:500}
.guide-table td:last-child{font-weight:400}
.guide-table .gd{display:block;font-size:var(--fs-small);color:var(--ink-2)}
.guide-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px}
:where(body:not(.home-l)) .sheet .guide-links{padding-left:0}
.devs .guide-links a{color:var(--chalk);font-weight:600}
:where(body:not(.home-l)) .sheet.landing p code,:where(body:not(.home-l)) .sheet.landing li code{white-space:normal;overflow-wrap:anywhere}
@media (max-width:640px){
  .guide-table th+td,.guide-table td+td,.guide-table th+th{padding-left:8px}
  .guide-table th[scope=row]{font-size:var(--fs-small)}
  .guide-table td{font-size:var(--fs-small)}
  .guide-table .gd{font-size:var(--fs-small)}
}

/* breadcrumbs above the item headline */
.crumbs{margin:0 0 14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 8px;list-style:none;margin:0;padding:0;font:500 var(--fs-small)/1.4 var(--mono)}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--chalk-3)}
.crumbs a{display:inline-block;padding:4px 0;color:var(--chalk-2);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--chalk);text-decoration:underline}
.crumbs li[aria-current="page"]{padding:4px 0;color:var(--chalk-2)}

/* "Try your own item": the keyless lookup near the top of /donation-value and /thrift-store-pricing (white sheet) */
.head .proof{font-size:var(--fs-small);margin-top:14px}
.tryit{max-width:36rem}
.tryit>p{margin:0 0 4px}
.try-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end;margin-top:14px}
.try-form .try-item{grid-column:1/-1}
.try-form label{display:block;font:500 var(--fs-small)/1.3 var(--mono);margin-bottom:6px}
.try-form input,.try-form select{width:100%;min-width:0;padding:10px 12px;font:500 var(--fs-body)/1.35 var(--body)}

.try-result{margin-top:16px}
.try-result:empty{display:none}
.try-result .try-msg{margin:0;font-size:var(--fs-body);line-height:1.5}
.try-result .try-err{color:var(--pass);font-weight:500}
.try-result .try-label{font:500 var(--fs-small)/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:0}
.try-result .try-label+.try-sales,.try-result * + .try-label{margin-top:16px}
.try-result .try-price{font:500 var(--fs-display)/1 var(--display);letter-spacing:-.03em;font-feature-settings:"tnum" 1;margin:4px 0 6px}
.try-result .try-note{margin:0 0 6px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.try-result .try-note.try-warn{color:var(--maybe);font-weight:500;margin-bottom:14px}
:where(body:not(.home-l)) .sheet .try-sales,.try-sales{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--rule)}
.try-sales li{display:flex;justify-content:space-between;align-items:flex-start;gap:6px 14px;padding:4px 0;border-bottom:1px solid var(--rule)}
.try-sales li>div{min-width:0}
.try-sales a{display:inline-block;padding:10px 0 2px;color:var(--ink);overflow-wrap:anywhere}
.try-sales .try-meta{display:block;font-size:var(--fs-small);color:var(--ink-2);padding-bottom:8px}
.try-sales b{font-variant-numeric:tabular-nums;padding-top:12px;white-space:nowrap}
.try-next{margin:14px 0 0}
.try-next[hidden]{display:none}
.try-next p{margin:0}
.try-next a{display:inline-block;min-height:44px;padding:10px 0;margin-right:18px;font-weight:600}
@media (max-width:560px){
  .try-form{grid-template-columns:minmax(0,1fr)}
  .try-form .btn{width:100%}
}

/* error pages (404, the hourly lookup limit): the price-page head with a way back */
.error-page .err-code{font:500 var(--fs-small)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-2);margin:0 0 14px}
.error-page h1{max-width:20ch}
.error-page p a:not(.btn){color:var(--chalk);font-weight:600}
.err-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);max-width:52rem;margin-top:28px}
.err-offers .btn{margin-top:4px}
@media (max-width:640px){
  .err-offers{grid-template-columns:minmax(0,1fr)}}

/* ===== "Run your first lookup" box (static/firstlookup.js) ===== */
/* "Run your first lookup" box: a paper slip that sits on the dark page (home, account) or on a white page (/sheets). */
.fl{background:#F2F0EB;color:#121212;border-radius:0;padding:18px 18px 16px;text-align:left;box-shadow:none}
.fl *{box-sizing:border-box}
/* paper surface: charcoal selection, ink caret, dark thin scrollbar (the host page may not load site.css) */
.fl::selection,.fl ::selection{background:#121212;color:#F2F0EB}
.fl input{caret-color:#121212}
.fl{scrollbar-color:rgba(18,18,18,.3) transparent}
.fl-title{font:600 var(--fs-body)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 12px;color:#121212}
.fl-form{display:flex;gap:8px}
.fl-form input{flex:1;min-width:0;background:#fff;color:#121212;border:1px solid #121212;border-radius:0;padding:11px 12px;font:500 var(--fs-small)/1.2 "Fragment Mono",ui-monospace,monospace}
.fl-form input:focus{outline:2px solid #121212;outline-offset:1px}
.fl-go{appearance:none;cursor:pointer;border-radius:980px;padding:11px 18px;font:500 var(--fs-small)/1.2 var(--body);white-space:nowrap}
.fl-go:disabled{opacity:.6;cursor:progress}
.fl-note{margin:8px 0 0;font-size:var(--fs-small);line-height:1.4;color:#4F4C46}
.fl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fl-out:not(:empty){margin-top:14px;padding-top:14px;border-top:1px dashed #D6D2C6}
.fl-wait{margin:0;font-size:var(--fs-small);color:#4F4C46}
.fl-err{margin:0;font-size:var(--fs-small);line-height:1.45;color:#A83A28;font-weight:500}
.fl-err a{color:#121212;font-weight:600}
.fl-empty{margin:0;font-size:var(--fs-small);color:#4F4C46}
.fl-k{display:block;font:500 var(--fs-small)/1.25 "Fragment Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#4F4C46}
.fl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.fl-price{display:block;font:600 var(--fs-h2)/1.05 var(--display);letter-spacing:-.04em;margin-top:2px}
.fl-q{margin:0;font:400 var(--fs-small)/1.4 "Fragment Mono",ui-monospace,monospace;color:#4F4C46;text-align:right;overflow-wrap:anywhere}
.fl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;margin:14px 0 0;padding:10px 0;border-top:1px solid #D6D2C6;border-bottom:1px solid #D6D2C6}
.fl-stats dt{font:500 var(--fs-small)/1.25 "Fragment Mono",ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:#4F4C46}
.fl-stats dd{margin:3px 0 0;font:500 var(--fs-small)/1.3 "Fragment Mono",ui-monospace,monospace}
.fl-conds,.fl-sales{list-style:none;margin:10px 0 0;padding:0}
.fl-conds li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:var(--fs-small)}
.fl-n{font-family:"Fragment Mono",ui-monospace,monospace;font-size:var(--fs-small);white-space:nowrap}
.fl-sub{margin-top:14px}
.fl-sales li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-top:1px solid #D6D2C6;font-size:var(--fs-small);line-height:1.35}
.fl-sales li:first-child{border-top:0}
.fl-sales a{color:#121212;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-underline-offset:.2em}
.fl-sales a:hover{color:#121212}
.fl-meta{grid-column:1/-1;font-size:var(--fs-small);color:#4F4C46}
.fl-left{margin:12px 0 0;font:400 var(--fs-small)/1.4 "Fragment Mono",ui-monospace,monospace;color:#121212}
@media (max-width:480px){
  .fl-form{flex-direction:column}
  .fl-go{width:100%}
  .fl-q{text-align:left}
  .fl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .fl-go{transition:none}}
/* last, because the font shorthand resets font-variant-numeric */
.fl-price,.fl-stats dd,.fl-n,.fl-sales li,.fl-conds li{font-variant-numeric:tabular-nums}

/* ===== Light components: what light.css used to restyle, now the only version ===== */
/* Light theme for every page (the homepage adds home-light.css on top). White page, near-black type, system text
   with Familjen for headlines, soft gray rules, pill buttons, rounded cards. It re-themes site.css, page.css and
   price.css by swapping the palette tokens on body.light and restyling the shared components.
   Contrast on white: ink #1D1D1F 16.8:1, ink-2 #424245 10.4:1, muted #6E6E73 5.0:1 (4.6:1 on the #F5F5F7 wash). */

body{background:#FFFFFF;color:var(--ink);font:400 var(--fs-body)/1.5 var(--body);caret-color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* clip (not hidden) keeps sideways overflow off without making the body its own scroll box, which breaks sticky */
::selection{background:#D2E3FC;color:#1D1D1F}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}  /* keyboard focus: the accent, 2px, 2px out */
main code{background:#F5F5F7;color:var(--ink);border-radius:6px}

/* nav: a thin translucent bar, the one floating layer on the page */
.navbar{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 1px 0 rgba(0,0,0,.08)}
.navbar.scrolled{background:rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(0,0,0,.1)}
.nav{height:56px}
.mark{color:var(--ink);font:600 var(--fs-body)/1 var(--display);letter-spacing:-.01em;text-transform:none}
.mark svg{width:20px;height:20px}
.nav nav a{font:400 var(--fs-small)/1 var(--body);letter-spacing:0;text-transform:none;color:#424245}
.nav nav a:hover{color:var(--ink)}
.nav-sub{border-bottom:1px solid #E5E5EA}
.nav-sub a{font:400 var(--fs-small)/1 var(--body);color:#424245}

/* buttons: pills, sentence case, 44px+ tall. Black is the one action color. */
/* buttons: exactly two styles. Primary (the accent) is a section's one call to action; secondary is white with a 1px
   border. The older class names stay as aliases: btn-key, btn-chalk, btn-ink and the first-lookup button are primary;
   btn-line, btn-deep and the small chrome buttons (chips, copy buttons, votes) are secondary. */
.btn{border:1px solid transparent;border-radius:980px;font:500 var(--fs-body)/1.2 var(--body);letter-spacing:0;text-transform:none;padding:12px 24px;min-height:48px}
.btn-sm,.nav .btn{min-height:36px;padding:8px 16px;font-size:var(--fs-small)}
:is(.btn-primary,.btn-key,.btn-chalk,.btn-ink,.fl-go){background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);box-shadow:none}
:is(.btn-primary,.btn-key,.btn-chalk,.btn-ink,.fl-go):hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
:is(.btn-secondary,.btn-line,.btn-deep,.chip,.copy,.cp-btn,.tab-copy,.cbtn,.vote){background:#FFFFFF;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
:is(.btn-secondary,.btn-line,.btn-deep,.chip,.copy,.cp-btn,.tab-copy,.cbtn,.vote):hover,.vote[aria-pressed="true"]{background:var(--wash);color:var(--ink);border-color:var(--ink)}
/* touch: every button is at least 44px tall */
@media (pointer:coarse){:is(.btn,.btn-sm,.nav .btn,.chip,.copy,.cp-btn,.tab-copy,.cbtn,.vote,.fl-go){min-height:44px}}
.measure-row{grid-template-columns:minmax(0,1fr) 12rem auto;background:#FFFFFF;color:var(--ink);border-radius:18px;
  box-shadow:0 0 0 1px #D2D2D7,0 12px 36px -18px rgba(0,0,0,.25);padding:6px;overflow:hidden}
.measure-row:focus-within{box-shadow:0 0 0 1px #1D1D1F,0 0 0 4px rgba(0,0,0,.08),0 12px 36px -18px rgba(0,0,0,.25);outline:0}
/* inside the search bar the bar itself shows focus; the field being typed in gets a soft fill, never a second box */
.measure-row input:focus,.measure-row input:focus-visible{outline:none;box-shadow:none}
.measure-row .field{border-radius:12px;transition:background-color .2s}
.measure-row .field:focus-within{background:#F5F5F7}
/* every other text box: one soft ring, matching its rounded corners */
 :is(.keyform,.hold,.free20 .listreq,.alform) :is(input,textarea):focus,:is(.keyform,.hold,.free20 .listreq,.alform) :is(input,textarea):focus-visible{outline:none;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.field{border-right:1px solid #E5E5EA;padding:8px 14px}
.field>span{font:500 var(--fs-small)/1.3 var(--body)}
.field i{color:#6E6E73}
.field input{font:500 var(--fs-body)/1.3 var(--body);color:var(--ink)}
.field input::placeholder{color:#86868B;font-style:normal;font-weight:400}
.measure-row .btn{margin-left:6px;border-radius:12px;padding:0 26px;min-height:54px}
.chip{font:400 var(--fs-small)/1 var(--body);border-radius:980px;padding:10px 16px;min-height:36px}
/* US / Canada switch under the example searches: a two-option segmented pill, the pressed one filled */
.market{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:var(--fs-small);color:#6E6E73}
.market>span{margin-right:4px}
.mkt{cursor:pointer;font:500 var(--fs-small)/1 var(--body);border-radius:980px;padding:8px 14px;min-height:32px;background:#FFFFFF;color:var(--ink);border:1px solid var(--line-2);transition:background-color .2s,color .2s,border-color .2s}
.mkt:hover{border-color:var(--ink)}
.mkt[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
@media (pointer:coarse){.mkt{min-height:44px}}
@media (max-width:640px){.home-l .market{justify-content:flex-start}}

.sheet-meta{font-size:var(--fs-small)}
/* the card speaks the page's language: system type with tabular figures, sentence-case labels, soft gray rules,
   and a quiet gray tape (track, the p10-p90 band, one dot per sale, a black needle at the median) */
.sheet .label,.sheet-pom dt,.conds caption{font:500 var(--fs-small)/1.3 var(--body);letter-spacing:0;text-transform:none;color:#6E6E73}
.sheet-head{border-bottom:1px solid #E5E5EA}

.tape{height:36px;margin-top:26px;border-radius:12px;overflow:hidden;box-shadow:none;background-color:#F2F2F5;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 10px);background-size:100% 7px;background-repeat:repeat-x}
.tape-band{top:9px;bottom:9px;background:rgba(0,0,0,.09);border-radius:8px}
.tape-dot{top:50%;margin-top:-3.5px;background:#1D1D1F;opacity:.55}
.tape-needle{top:0;bottom:0;background:#1D1D1F;transition:left 1s var(--ease)}
.tape-needle::before{display:none}
.tape.draw{animation:tape-in .9s cubic-bezier(.65,0,.35,1) both}
@keyframes tape-in{from{clip-path:inset(0 100% 0 0 round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
.tape-ticks{font:400 var(--fs-small)/1 var(--body);color:#6E6E73;margin-top:10px}
.sheet-pom{border-top:0;margin-top:22px;column-gap:24px}
.sheet-pom>div{border-bottom:1px solid #E5E5EA;padding:14px 0}
.sheet-pom dd{font:500 var(--fs-body)/1.25 var(--body);margin-top:4px}
.verdict{align-items:center;border-bottom:1px solid #E5E5EA;padding:16px 0}
.verdict strong{font:600 var(--fs-small)/1 var(--body);letter-spacing:0;text-transform:capitalize;border-radius:980px;padding:7px 12px}
.verdict.v-buy strong{background:#E6F4EC;color:#1B6B43}
.verdict.v-pass strong{background:#FCEBEA;color:#B3261E}
.verdict.v-maybe strong{background:#FFF3D6;color:#6F560F}
.verdict p{font-size:var(--fs-small)}
.conds{margin-top:22px}
.conds th,.conds td{border-top:1px solid #E5E5EA;padding:11px 0}
.conds td{font:400 var(--fs-small) var(--body);color:#6E6E73}
.conds .conds-m{font:500 var(--fs-small) var(--body);color:#1D1D1F}
.sales li{border-top:1px solid #E5E5EA;padding:11px 0}
.sales b{font:500 var(--fs-small) var(--body)}
.sales-label{margin:22px 0 4px}
.sheet-next{border-radius:12px;background:#F5F5F7}
.sheet-foot{border-top:1px solid #E5E5EA;font:400 var(--fs-small)/1.3 var(--body);color:#6E6E73}
.snip{border-radius:12px;background:#F5F5F7}
.skel{border-radius:8px;background:linear-gradient(90deg,#F2F2F5 0%,#E8E8ED 50%,#F2F2F5 100%);background-size:200% 100%}
/* loading placeholders: light gray rows where a result is about to land (homepage search, paste-your-list demo).
   Decorative and aria-hidden; the status text says what is happening. No shimmer under reduced motion. */
.skel-rows{display:grid;gap:14px;padding:4px 0}
.skel-rows .skel{margin:0}
.skel-rows .skel.tall{height:44px;width:min(40%,180px);margin-bottom:10px}
.skel-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:4px 0}
.skel-row .skel{flex:1;min-width:0}
.skel-row .skel.short{flex:none;width:18%;min-width:44px}
.vd-skel{padding:8px 0}
.sheet.busy .sheet-body:has(>.skel-rows){opacity:1}  /* the placeholders are already light; don't fade them further */
@media (prefers-reduced-motion:reduce){.skel{animation:none;background:#EDEDF0}}
.free20{max-width:960px;margin:0 auto}
.free20 .f20-h{color:#1D1D1F;font-weight:600}
.free20 .f20-copy p{color:#424245}
.free20 .lr-row label{font:500 var(--fs-small)/1.3 var(--body)}
.free20 .listreq input,.free20 .listreq textarea{background:#FFFFFF;color:#1D1D1F;border:1px solid #D2D2D7;border-radius:12px}

.free20 .listreq :is(input,textarea)::placeholder{color:#86868B}
.free20 .lr-ok{color:#1B6B43}
.free20 .lr-err{color:#B3261E}
.chart{gap:16px;border:0}
.size{background:#FFFFFF;border-radius:20px;padding:28px;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.05);position:relative}
.size-name{font-weight:600}
.size-for,.size-rows dt{color:#6E6E73}

.size-rows>div{border-color:#E5E5EA}
/* the recommended plan (Starter): a small green text pill sitting on the card's top edge, out of the flow so every
   card keeps the same height and the narrow 4-column cards never crowd the plan name. Same colors as the .sold pill:
   accent on accent-wash, 4.8:1. */
.size-tag{position:absolute;top:0;left:28px;transform:translateY(-50%);margin:0;font:600 var(--fs-small)/1 var(--body);
  color:var(--accent);background:var(--accent-wash);border-radius:980px;padding:6px 10px;white-space:nowrap}
@media (max-width:560px){.size-rec{margin-top:8px}}  /* one column: keep the pill clear of the card above */
/* a plan's email form opens as a panel over the bottom of its own card, so no card changes size */
.size .hold:empty{display:none}
.size .hold:not(:empty){position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;background:#FFFFFF;
  border-radius:inherit;padding:28px;animation:hold-in .3s var(--ease) both}
@keyframes hold-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.size .hold p{margin:0 0 12px;font-size:var(--fs-small);line-height:1.45;color:#424245}
.size .hold form{gap:8px}
.size .hold .btn{width:100%;min-height:44px}
.size .hold .form-msg{margin:8px 0 0;font-size:var(--fs-small)}
.size .hold .form-msg:empty{display:none}
.size .hold .hold-plan{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #E5E5EA}
.hold-plan strong{font:600 var(--fs-h3)/1.1 var(--display);letter-spacing:-.015em;color:#1D1D1F}
.hold-plan span{font-size:var(--fs-small);color:#6E6E73;font-variant-numeric:tabular-nums}
.hold-cancel{display:block;margin:10px auto 0;background:none;border:0;padding:6px 10px;font:500 var(--fs-small)/1 var(--body);color:#6E6E73;cursor:pointer}
.hold-cancel:hover{color:#1D1D1F;text-decoration:underline}
div.pass .hold-cancel{margin:10px 0 0;padding-left:0}
div.pass{border-radius:20px;background:#FFFFFF;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.hold input,.keyform input{border-radius:12px;border:1px solid #D2D2D7;background:#FFFFFF;color:#1D1D1F}
.keycard{border-radius:20px;background:#F5F5F7;border:0;color:#1D1D1F;padding:28px}
.keyline{border-radius:10px;border-color:#D2D2D7;color:#1D1D1F}
.form-msg.err{color:#B3261E}
.faq details{border-color:#D2D2D7}
.faq summary{font-weight:600}

/* footer */
.footer{background:#F5F5F7;color:#6E6E73;border-top:1px solid #E5E5EA}
.footer .mark{color:#1D1D1F}
.footer a{color:#424245}
:is(h1,h2,.h2){font-family:var(--display);font-weight:600;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.sheet{background:#FFFFFF;border-radius:24px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 48px -28px rgba(0,0,0,.18)}
.sheet-flat{color:#1D1D1F;opacity:.85}
.free20{background:#F5F5F7;color:#1D1D1F;border-top:0;box-shadow:none;border-radius:24px}

/* ---------- the rest of the site (page.css, price.css): same voice as the homepage ---------- */
/* micro-labels: sentence case in the system face, small and gray (they were mono capitals) */
:is(.label,.field>span,.examples>span,.sees span,.run em,.scroll-hint,.toc p,.code-head,.al-field label,.strip dt,.answer .conds caption,.head .lookup-label,.guide-label,.fee-table th,.lr-row label,.try-form label,.try-result .try-label, .error-page .err-code){font-family:var(--body);font-size:var(--fs-small);font-weight:500;letter-spacing:0;text-transform:none;color:#6E6E73}
/* figures and links that were set in mono: system face with even-width digits (code stays mono) */
:is(.chip,.sheet-meta,.tape-ticks,.sheet-pom dd,.conds td,.sales b,.sheet-foot,.struck li,.measures,.use .sees,.size-rows dd, .nav-sub a,.toc,.rchart .v,.rchart .ax,.lookup input,.r-sub,.r-n,.r-price,.r-foot,.cost-field,.related li a,.group li a,.head .tally, .sheet .guide-status,.guide-jump,.gsec .gn,.bchip .bc,.calc-lines dd,.fee-table,.strip dd.sub,.crumbs ol,.listreq textarea,.tabs button){font-family:var(--body);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.crumbs ol{font-size:var(--fs-small);color:#6E6E73}

/* nav on the inner pages (same bar as the homepage) */
body>.wrap>.nav{height:56px}
.nav-right ul a{font:400 var(--fs-small)/1 var(--body);letter-spacing:0;text-transform:none;color:#424245}
.nav-right ul a:hover,.nav-right ul a[aria-current="page"]{color:#1D1D1F}

/* page heads */
.head h1{font-weight:600;letter-spacing:-.035em;line-height:1.02}
.head p{color:#424245}
.head-flat{color:#1D1D1F;opacity:.12}

/* search boxes: the homepage's rounded bar */
.lookup{background:#FFFFFF;border:0;border-radius:16px;padding:5px;box-shadow:0 0 0 1px #D2D2D7,0 10px 30px -18px rgba(0,0,0,.25)}
.lookup:focus-within{outline:0;box-shadow:0 0 0 1px #1D1D1F,0 0 0 4px rgba(0,0,0,.08)}
.lookup input{color:#1D1D1F;font-size:var(--fs-body);caret-color:#1D1D1F;padding:12px 14px}
.lookup input::placeholder{color:#86868B;font-style:normal}
.lookup .btn{border-radius:12px;min-height:48px}
.sheet .lookup{background:#FFFFFF}
.cost-field{background:#FFFFFF;border:1px solid #D2D2D7;border-radius:12px;color:#1D1D1F}
.cost-field:focus-within{outline:0;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.cost-field input{color:#1D1D1F;caret-color:#1D1D1F}
.guide-filter input{border-radius:12px;border:1px solid #D2D2D7;background:#FFFFFF;color:#1D1D1F}
.guide-filter input:focus{outline:0;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.guide-filter input::placeholder{color:#86868B;font-style:normal}
:is(.al-field input,.try-form input,.lr-row input,.listreq textarea){background:#FFFFFF;color:#1D1D1F;border:1px solid #D2D2D7;border-radius:12px;caret-color:#1D1D1F}
:is(.al-field input,.try-form input,.lr-row input,.listreq textarea):focus{outline:0;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
:is(.al-field input,.try-form input,.lr-row input)::placeholder{color:#86868B}
:is(.al-err,.al-status,.head .al-err,.head .al-status){color:#B3261E}

/* chips and link pills */
:is(.related li a,.group li a){border:0;border-radius:980px;background:#F5F5F7;color:#1D1D1F;padding:9px 14px;font-size:var(--fs-small)}
:is(.related li a,.group li a):hover{background:#E8E8ED;color:#1D1D1F}
.bchip{border-radius:980px}

/* buttons that used the lime */
.calc-msg{color:#1B6B43}

/* document pages: contents list, paper, code, spec rows */
.toc{font-size:var(--fs-small)}
.toc ol{border-left-color:#E5E5EA}
.toc a{color:#6E6E73}
.toc a:hover,.toc a[aria-current="true"]{color:#1D1D1F}
.toc a[aria-current="true"]{border-left-color:#1D1D1F}
.sheet p,.sheet li,.row dd{color:#424245}
.sheet section+section{border-top-color:#E5E5EA}
.sheet code{background:#F5F5F7;border-radius:6px}
.code{background:#F5F5F7;border-top:0;border-radius:14px;overflow:hidden}
.code-head{border-bottom:1px solid #E5E5EA}
.copy{font:500 var(--fs-small)/1 var(--body);letter-spacing:0;text-transform:none;border-radius:980px;border-color:#D2D2D7;padding:6px 12px}
.fields{border-top-color:#E5E5EA}
.row{border-bottom-color:#E5E5EA}
.callout{border-color:#E5E5EA}
.rchart .bar{fill:#1D1D1F}
.rchart .track{fill:#F2F2F5}

/* price pages: the answer block and stat strip */

.strip>div,.strip dl>div{border-color:#E5E5EA}
.fee-table{border-color:#E5E5EA}
.fee-table :is(th,td){border-color:#E5E5EA}

/* footer on inner pages */
body>footer{background:#F5F5F7;border-top:1px solid #E5E5EA;color:#6E6E73}
body>footer a{color:#424245}
body>footer a:hover{color:#1D1D1F}

/* touch: tappable contents pills on narrow screens */
@media (max-width:960px){
  .toc a{border:1px solid #E5E5EA;border-radius:980px}
  .toc a[aria-current="true"]{border-color:#1D1D1F}
}
.well{border-top-color:#D2D2D7;border-bottom-color:#E5E5EA}
.receipt{border-color:#E5E5EA}
/* link-buttons: older rules color links on paper and wells with the ink color, which made dark buttons' text vanish */
/* copy buttons added by copy.js on code blocks: the same small pill as the docs' Copy */
.cp-btn{position:absolute;top:8px;right:8px;z-index:2;cursor:pointer;transition:opacity .2s;border-radius:980px;border:1px solid #D2D2D7;font:500 var(--fs-small)/1 var(--body);letter-spacing:0;text-transform:none;padding:6px 12px;opacity:1}
.cp-btn:hover,.cp-btn:focus-visible{opacity:1}
.cp-wrap{position:relative}
.cp-wrap>pre{padding-top:40px}
/* the alerts form sat under a hard black rule (a dark-theme token used as a border) */
.al-signup{border-top-color:#E5E5EA}

/* QA pass (Oct 18): dividers that older rules drew in the ink color become the site's soft gray */
:is(.steps,.pom,.uses,.runs,.faq,.strip,.guide-bar,.fee-table th,.sheet-head,.sheet-foot,.verdict){border-color:#E5E5EA}

/* item pages: the sales list lines up with the text around it, with one rule under its header */
.receipt{padding-left:0;padding-right:0}
.r-head{border-bottom:0}
/* item pages: the side panels are soft cards, not boxes made of stacked rules */
aside .well{border:0;background:#F5F5F7;border-radius:20px;padding:22px 22px 20px;margin-bottom:14px}
aside .well h2{margin-top:0}
aside .well .cost-field{background:#FFFFFF}
p.verdict:empty{display:none}
/* code snippets wrap instead of hiding the end of the line */
:is(.devs-mini,.well) pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* footer links never split across lines */
body>footer a,.footer a{white-space:nowrap}
/* the maker line under every footer's links: one quiet line of small gray text (#6E6E73 on #F5F5F7, 4.7:1) */
body>footer .wrap.foot-by,.footer .wrap.foot-by{display:block;margin:12px auto 0;color:#6E6E73;font-size:var(--fs-small);line-height:1.5}
.foot-by>span{white-space:nowrap}  /* on a phone it breaks after "Built by Aaron.", never inside the contact bit */
.footer .foot-by a{text-decoration:none}
.footer .foot-by a:hover{color:var(--ink);text-decoration:underline}
/* docs and Sheets code blocks wrap long lines instead of cutting them off (copying still gives the exact text) */
.code pre,.code pre code{white-space:pre-wrap;overflow-wrap:anywhere}
/* "Try it" lookups on the donation and thrift pages: room before the free-20 card; dropdowns match the inputs */
.try-form + .free20,.try-result + .free20{margin-top:32px}
.sheet .free20{margin-top:32px}
:is(.try-form,.listreq) select{appearance:none;-webkit-appearance:none;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid #D2D2D7;border-radius:12px;color:#1D1D1F;padding:0 38px 0 14px;min-height:48px;font:400 var(--fs-body)/1.2 var(--body)}
:is(.try-form,.listreq) select:focus{outline:0;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.try-form :is(input,select,.btn){min-height:48px}
/* the fee calculator's receipt keeps one soft rule under its header */
.calc .r-head{border-bottom:1px solid #E5E5EA}
/* wide tables on phones: a soft edge shows they scroll sideways */
@media (max-width:640px){
  .table-scroll{background:linear-gradient(90deg,#FFF 30%,rgba(255,255,255,0)) left/24px 100% no-repeat local,
    linear-gradient(270deg,#FFF 30%,rgba(255,255,255,0)) right/24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right/12px 100% no-repeat scroll}
}

/* "Value a whole list" demo on /donation-value (static/valuedemo.js). One column of cards on phones, a table from 760px. */
.vdemo label{display:block;margin:14px 0 6px}
.vd-form textarea{display:block;width:100%;min-height:9.5rem;resize:vertical;padding:12px 14px;font:400 var(--fs-body)/1.5 var(--body);
  background:#FFFFFF;color:#1D1D1F;border:1px solid #D2D2D7;border-radius:12px;caret-color:#1D1D1F}
.vd-form textarea::placeholder{color:#86868B}
.vd-form textarea:focus,.vd-form textarea:focus-visible{outline:none;border-color:#1D1D1F;box-shadow:0 0 0 3px rgba(0,0,0,.1)}
.vd-form textarea[aria-invalid]{border-color:#B3261E}
.sheet .vd-hint{margin:8px 0 0;font-size:var(--fs-small);line-height:1.5;color:#6E6E73}
.vd-msg{margin:10px 0 0;min-height:1.4em;font-size:var(--fs-small);line-height:1.45}
.vd-msg:empty{display:none}
.vd-msg.vd-err{color:#B3261E;font-weight:500}
.vd-form .btn{margin-top:14px}
.vd-form .btn:disabled{opacity:.6;cursor:progress}
.vd-out:empty{display:none}
.vd-out{margin-top:24px}
.vd-summary{font:600 var(--fs-body)/1.35 var(--body)}
.sheet .vd-method{font-size:var(--fs-small);line-height:1.55;color:#6E6E73}
.vd-table{width:100%}
.vd-table :is(th,td){text-align:left;vertical-align:top;font-family:var(--body);padding:12px 12px 12px 0}
.vd-table td+td,.vd-table th+th{padding-left:0}
.vd-table :is(td:first-child,th:first-child){padding-left:0}
.vd-table td:last-child{font-weight:400}
.vd-table .vd-sub{display:block;margin-top:2px;font-size:var(--fs-small);color:#6E6E73}
.vd-table td b{font-weight:600;font-size:var(--fs-body)}
.vd-nil,.vd-why{color:#6E6E73}
.vd-total :is(th,td){border-bottom:0;border-top:2px solid #1D1D1F;font:600 var(--fs-body)/1.3 var(--body)}
.vd-sales summary{display:inline-block;min-height:44px;padding:11px 0;cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.vd-sales summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.vd-sales-body{padding:0 0 8px}
.sheet .vd-reason{margin:0 0 6px;font-size:var(--fs-small);line-height:1.5;color:#424245}
.vd-sales .try-sales{margin-top:6px}
.sheet .vd-share{margin:14px 0 0}
.vd-share-btn{min-height:44px;padding:11px 0;border:0;background:none;font:500 var(--fs-small)/1.3 var(--body);color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.vd-share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.vd-cta{margin-top:28px;padding:22px 24px;border-radius:20px;background:#F5F5F7}
.vd-cta h3{margin:0 0 6px;font:600 var(--fs-h3)/1.25 var(--display);letter-spacing:-.015em;text-wrap:balance}
.sheet .vd-cta p{margin:0 0 12px}
.vd-cta p:last-child{margin:4px 0 0}
.vd-cta .btn{margin:0 8px 8px 0}
@media (max-width:759px){
  .vd-table,.vd-table :is(tbody,tfoot,tr,td,th){display:block;width:100%}
  .vd-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vd-table tbody tr{padding:14px 0;border-top:1px solid #E5E5EA}
  .vd-table tbody tr:first-child{border-top:0}
  .vd-table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0;border:0;text-align:right;overflow-wrap:anywhere}
  .vd-table td::before{content:attr(data-label);flex:none;font:500 var(--fs-small)/1.4 var(--body);color:#6E6E73;text-align:left}
  .vd-table td:first-child{display:block;text-align:left;padding-bottom:6px}
  .vd-table td:first-child::before,.vd-table td.vd-why::before{display:none}
  .vd-table td.vd-why{display:block;text-align:left}
  .vd-table td:last-child:not(.vd-why){display:block;text-align:left}
  .vd-table td:last-child:not(.vd-why)::before{display:none}
  .vd-table td .vd-v{min-width:0}
  .vd-table td:not(:first-child) .vd-sub{text-align:right}
  .vd-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 0;border-top:2px solid #1D1D1F}
  .vd-table tfoot :is(th,td){display:block;width:auto;border:0;padding:0}

  .vd-cta{padding:18px}
}

/* ===== Account page (static/account.html, body.account) ===== */
html:has(body.account){scrollbar-color:rgba(0,0,0,.25) #F5F5F7}
.account{--max:1240px;font:400 var(--fs-body)/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.account main{flex:1}
.account [hidden]{display:none!important}
.account .paper ::selection{background:#D2E3FC;color:#1D1D1F}
.account .display{font:600 var(--fs-display)/.95 var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
.account .lede{font-size:var(--fs-h3);line-height:1.55;color:#424245;max-width:34rem;margin:22px 0 0}
.account .lede strong{color:#1D1D1F}
.account .nav{justify-content:space-between;gap:24px;height:56px}
.account .nav-right{gap:28px;margin-left:0}
.account .nav-right ul{gap:28px;font-size:var(--fs-small);line-height:1.55;align-items:normal}
.account .nav-sub{border-bottom:0}
.account .nav-sub a{color:inherit;font:inherit}
.account .btn{appearance:none;border:0;white-space:normal;transition:background-color .2s var(--ease),color .2s var(--ease),translate .25s var(--ease)}
.account .btn:hover,.account .btn:active{translate:0 0}
.account .btn[disabled]{opacity:.55;cursor:progress}
.account .linkish{background:none;border:0;padding:0;cursor:pointer;font:600 var(--fs-small)/1.4 var(--body);color:#424245;text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px}
.account .linkish:hover{color:#1D1D1F}
.account .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start;
  padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(56px,8vw,112px)}
/* notice line after checkout or a billing change */
.account .notice{display:flex;gap:12px;align-items:baseline;margin:0 0 28px;padding:14px 0;border-top:1px solid #1D1D1F;
  border-bottom:1px solid #E5E5EA;font-weight:600;max-width:34rem}
.account .notice .dot{width:8px;height:8px;border-radius:50%;background:#1B6B43;flex:none;transform:translateY(-1px)}
.account .notice.warn .dot{background:#FFC53D}
.account .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.account .upgrades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:32px;max-width:34rem}
.account .upgrades .btn{flex-direction:column;gap:6px;padding:16px 12px}
.account .upgrades .btn small{font:500 var(--fs-small)/1 var(--body);opacity:.8}
/* the key well */
.account .fl-slot{max-width:34rem;margin-top:36px}
.account .fl-slot .fl{margin:0}
.account .well{padding:0;border-top:1px solid #D2D2D7;border-bottom:1px solid #E5E5EA;margin-top:44px;max-width:34rem}
.account .well-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #E5E5EA}
.account .well-head span{font:500 var(--fs-small)/1 var(--body);color:#6E6E73}
.account .well-tools{display:flex;gap:8px}
.account .chip{min-height:auto;font:500 var(--fs-small)/1 var(--body);border-radius:980px;padding:8px 14px}
.account .keyval{padding:16px 0;font:600 var(--fs-small)/1.5 var(--mono);word-break:break-all;color:#1D1D1F;font-variant-numeric:tabular-nums}
.account .well pre{margin:0;padding:14px 5.2rem 16px 0;border-top:1px solid #E5E5EA;overflow:auto;font:400 var(--fs-small)/1.7 var(--mono);
  color:#424245;white-space:pre-wrap;overflow-wrap:normal;word-break:break-all;font-variant-numeric:tabular-nums;border-bottom:0;
  scrollbar-width:auto}
.account .well-note{margin:12px 0 0;font-size:var(--fs-small);color:#424245}
.account .well-note a{color:inherit;font-weight:inherit}
.account .cp-wrap>pre{padding-top:40px}
body.account :is(.chip,.r-sub,.r-foot){font-variant-numeric:normal}
body.account .r-sub{letter-spacing:.02em}
/* sign in */
.account .keyform{gap:8px;margin-top:32px;max-width:34rem}
.account .keyform input{padding:14px;font:500 var(--fs-body)/1.2 var(--mono)}
.account .keyform input::placeholder{color:#86868B}
.account .form-msg{margin:12px 0 1em;font-size:inherit;font-weight:600;min-height:1.5em}
.account .help{color:#424245;font-size:var(--fs-small);margin-top:22px;max-width:34rem}
/* the account card */
.account .slip{max-width:440px;width:100%;justify-self:end}
.account .paper{scrollbar-color:rgba(18,18,18,.3) transparent;background:#FFFFFF;color:#1D1D1F;border-radius:24px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 48px -28px rgba(0,0,0,.18)}
.account .receipt{padding:28px;font:400 var(--fs-small)/1.5 var(--body)}
.account .r-head{text-align:left;padding-bottom:14px;border-bottom:1px solid #E5E5EA}
.account .r-store{font:600 var(--fs-h3)/1.1 var(--display);letter-spacing:-.015em;margin-bottom:6px}
.account .r-sub{font:400 var(--fs-small)/1.4 var(--body);color:#6E6E73;overflow-wrap:anywhere;letter-spacing:.02em;margin-top:0}
.account .r-cut{border:0;border-top:1px solid #E5E5EA;margin:12px 0}
.account .r-stats{display:grid;grid-template-columns:1fr auto;row-gap:5px;column-gap:12px;margin:0;font-variant-numeric:tabular-nums}
.account .r-stats dt{color:#6E6E73}
.account .r-stats dd{margin:0;text-align:right;font-weight:500}
.account .meter{margin:12px 0 4px}
.account .meter-row{display:flex;justify-content:space-between;margin-bottom:6px;font-variant-numeric:tabular-nums}
.account .meter-row span:first-child{color:#6E6E73}
.account .meter-row span:last-child{font-weight:600}
.account .meter-track{background:#F2F2F5;border-radius:980px;height:8px}
.account .meter-fill{height:100%;background:#1D1D1F;border-radius:980px;width:0;transition:width .9s var(--ease)}
.account .r-total{display:flex;justify-content:space-between;align-items:baseline;color:#1D1D1F;border-top:1px solid #E5E5EA;
  border-bottom:1px solid #E5E5EA;padding:8px 0;margin-top:14px;font-variant-numeric:tabular-nums}
.account .r-total span{font-weight:600}
.account .r-total strong{font:600 var(--fs-h2)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.account .r-bar{display:none}
.account .r-foot{text-align:left;color:#6E6E73;font:400 var(--fs-small)/1.5 var(--body);margin:0}
.account .stub{color:#6E6E73;text-align:center;padding:28px 0}
.account .skeleton{height:10px;background:#F2F2F5;border-radius:8px;margin:10px 0}
.account>footer{padding:32px 0 48px;font-size:var(--fs-small)}
.account>footer .wrap{gap:20px}
.account>footer a{white-space:normal}
@media (max-width:880px){
  .account .split{grid-template-columns:minmax(0,1fr)}
  .account .slip{justify-self:center}
  .account .nav-sub a{font:400 var(--fs-small)/1 var(--body);color:#424245}
  .account .nav-sub a:hover{color:#1D1D1F}
}
@media (max-width:560px){
  .account .upgrades{grid-template-columns:minmax(0,1fr)}
  .account .upgrades .btn{flex-direction:row;justify-content:space-between}
  .account .actions .btn{flex:1 1 100%}
}
@media (max-width:400px){
  .account .nav .btn{white-space:nowrap}}

/* ===== The price tag: the site's signature, used wherever a page shows THE price ===== */
/* A hang tag like the logo: a rounded card with a pointed left end and a punched hole, a thin border, the price in mono
   with even-width figures, in the accent. Optional small label above the price. Pure CSS: ::before draws the border,
   ::after the white face with the hole. Sizes: default --fs-h2 (headline prices), .tag-sm --fs-h3 (tables, photos). */
.tag-price{--tag-point:.8em;--tag-line:#C7C7CC;--tag-hole:#FFFFFF;position:relative;isolation:isolate;display:inline-grid;align-content:center;
  gap:4px;padding:.42em .9em .42em calc(var(--tag-point) + .95em);font-size:var(--fs-h2);line-height:1;color:var(--ink);text-align:left;
  vertical-align:middle}
.tag-price::before,.tag-price::after{content:"";position:absolute;z-index:-1;border-radius:0 .3em .3em 0;
  clip-path:polygon(var(--tag-point) 0,100% 0,100% 100%,var(--tag-point) 100%,0 50%)}
.tag-price::before{inset:0;background:var(--tag-line)}
.tag-price::after{inset:1px;border-radius:0 calc(.3em - 1px) calc(.3em - 1px) 0;
  clip-path:polygon(calc(var(--tag-point) - .5px) 0,100% 0,100% 100%,calc(var(--tag-point) - .5px) 100%,0 50%);
  background:radial-gradient(circle at calc(var(--tag-point) + .1em) 50%,var(--tag-hole) .11em,#AEAEB2 calc(.11em + .5px),
    #AEAEB2 calc(.11em + 1px),#FFFFFF calc(.11em + 1.5px))}
.tag-price small{display:block;font:500 var(--fs-small)/1.2 var(--body);letter-spacing:0;color:#6E6E73;white-space:nowrap}
.tag-price b{display:block;font:400 1em/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--accent);white-space:nowrap}
.tag-price.tag-sm{font-size:var(--fs-h3)}

/* The headline price on a result or price page: the number big in the display face (it is the page's moment), the
   label above it drawn as a small hang tag with a punched hole. */
.tag-price.tag-hero{font-size:clamp(3.5rem,10vw,6.25rem);padding:0;gap:12px;justify-items:start}
.tag-price.tag-hero::before,.tag-price.tag-hero::after{content:none}
.tag-price.tag-hero b{font:600 1em/.95 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.tag-price.tag-hero small{position:relative;display:inline-block;padding:4px 10px 4px 20px;border:1px solid #C7C7CC;
  border-radius:3px 7px 7px 3px;background:#FFFFFF}
.tag-price.tag-hero small::before{content:"";position:absolute;left:7px;top:50%;width:5px;height:5px;margin-top:-3px;border-radius:50%;
  border:1px solid #AEAEB2}

/* where the tags sit */
.answer .big{margin:26px 0 0}
.median-fig .tag-price{margin-top:10px}

/* ===== Accent, item 3 of 3: "sold" labels and badges ===== */
.sold{display:inline-block;padding:2px 8px;border-radius:980px;background:var(--accent-wash);color:var(--accent);font:600 var(--fs-small)/1.3 var(--body);
  letter-spacing:0;text-transform:none}

/* ===== Prices and numbers in tables and results: mono, even-width figures ===== */
:is(.conds td,.conds .conds-m,.sales b,.r-price,.fee-table .num,.fee-table:not(.compare,.vd-table) td:not(:first-child),.vd-total td,
  .calc-lines:not(.total) dd,.vd-table td:is(:nth-child(3),:nth-child(4)) .vd-v,.gp-scroll td:nth-child(n+4),.tape-ticks){font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:0}
/* headline stats stay in the text face, with even-width figures */
:is(.strip dd,.sheet-pom dd,.size-price strong,.try-price,.fl-price,.fl-stats dd,.r-stats dd,.calc-answer strong){font-family:var(--body);
  font-variant-numeric:tabular-nums}
/* inside data tables the tag steps down to body size, so a row of tags fits */
.gp-scroll .tag-price,.vd-table .tag-price{font-size:var(--fs-body)}
.free20 .listreq textarea{font-family:var(--body)}

/* ===== Item pages (Oct 21): calculation note, condition chart, labelled sale fields, "price your whole inventory" ===== */
.answer .calc-note{font-size:var(--fs-small);line-height:1.5;color:#424245;margin:14px 0 0;max-width:44rem}
.answer .calc-note a{color:#1D1D1F;font-weight:600;white-space:nowrap}
/* the condition table and its dot plot side by side; stacked on narrow screens */
.conds-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:clamp(24px,4vw,56px);align-items:start;max-width:none}
.answer .conds-wrap .conds{max-width:none}
.cond-chart{margin:22px 0 0;min-width:0}
.cond-chart svg{display:block;width:100%;height:auto;overflow:visible}
.cond-chart text{font:500 14px/1 var(--body);fill:#1D1D1F}
.cond-chart .cc-n{font-weight:400;fill:#6E6E73}
/* a white halo so the dashed typical-price line never runs through a label */
.cond-chart :is(.cc-label,.cc-val){paint-order:stroke;stroke:#FFFFFF;stroke-width:5px;stroke-linejoin:round}
.cond-chart .cc-val{font:400 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.cond-chart .cc-ax,.cond-chart .cc-typ-l{font:400 13px/1 var(--mono);fill:#6E6E73}
.cond-chart .cc-track{stroke:#E5E5EA;stroke-width:1}
.cond-chart .cc-range{stroke:#6E6E73;stroke-width:2;fill:none;stroke-linecap:round}
.cond-chart .cc-med{fill:#1D1D1F;stroke:#FFFFFF;stroke-width:2}
.cond-chart .cc-typ{stroke:#8E8E93;stroke-width:1;stroke-dasharray:3 3}
.cond-chart .cc-label,.cond-chart .cc-val,.cond-chart .cc-typ-l{paint-order:stroke;stroke:#FFFFFF;stroke-width:5px;stroke-linejoin:round}
.cond-chart figcaption{margin-top:10px;font-size:var(--fs-small);color:#6E6E73}
@media (max-width:880px){.conds-wrap{grid-template-columns:minmax(0,1fr)}.cond-chart{max-width:400px}}
/* each sale: title up to two lines, then size, condition, days to sell and date as separate fields */
.r-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:4px;color:#6E6E73}
.r-meta .r-cond{padding:1px 8px;border:1px solid #D2D2D7;border-radius:980px;color:#1D1D1F;line-height:1.4}
.r-meta .r-days{color:#1D1D1F}
/* after the sales: two quiet cards and the one primary button */
.inventory{border-top:1px solid #E5E5EA;padding:clamp(28px,4vw,40px) 0 clamp(32px,5vw,52px)}
.inventory h2{font:600 var(--fs-h3)/1.15 var(--display);letter-spacing:-.015em;margin:0 0 8px}
.inventory .inv-lead{font-size:var(--fs-small);color:#424245;margin:0 0 18px;max-width:44rem}
.inv-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inv-card{display:flex;flex-direction:column;min-width:0;background:#F5F5F7;border-radius:20px;padding:22px 22px 20px}
.inv-card h3{font:600 var(--fs-h3)/1.15 var(--display);letter-spacing:-.015em;margin:0 0 10px}
.inv-card p{font-size:var(--fs-small);line-height:1.5;color:#424245;margin:0 0 12px}
.inv-card a:not(.btn){color:#1D1D1F;font-weight:600}
.inv-card code{font:400 .86em/1 var(--mono);overflow-wrap:anywhere}
.inv-card pre{margin:0 0 14px;padding:12px 14px;background:#FFFFFF;border-radius:12px;font:400 var(--fs-small)/1.6 var(--mono);color:#1D1D1F;white-space:pre-wrap;overflow-wrap:anywhere}
.inv-card pre code{font:inherit;background:none;padding:0;border:0}
.inv-card .inv-act{margin:auto 0 0}
.inv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:20px 0 0;font-size:var(--fs-small);color:#424245}
@media (max-width:720px){.inv-cards{grid-template-columns:minmax(0,1fr)}}