:root{

  --ink-0:#0C0F14;   /* page                                        1.00  */
  --ink-1:#1D2126;   /* .alt band, Pro card fill, row hover   1.186 vs ink-0 */
  --ink-2:#25292E;   /* card fill where a card must stay bounded    1.312 */
  --ink-3:#31353A;   /* hover / raised                             1.560 */
  --well :#080B0F;   /* code, pre, .sums — a well BELOW the page    1.01  */


  --rule  :#43474C;  /* 2.05:1 on ink-0 — decorative                       */
  --rule-2:#5C6065;  /* 3.03:1 on ink-0 — controls on the page             */
  --rule-3:#71757B;  /* 3.10:1 on ink-2 — controls on a raised surface     */


  --paper:#F5F2EB;   /* 17.17:1 on ink-0 */
  --text :#E8EBF0;   /* 16.06:1 */
  --body :#C0C8D4;   /* 11.38:1 — body copy */
  --soft :#98A2B0;   /*  7.43:1 — captions, meta, thead, .tiny */


  --accent     :#7CB8EC;  /*  9.07:1 — links, eyebrow rule            */
  --accent-2   :#8FC3EE;  /* 10.24:1 — focus ring                     */
  --accent-deep:#14487A;  /*  9.38:1 under #ffffff                    */
  --pro        :#E3C27D;  /* 11.22:1 — PRO badge, Pro rails, Pro card */
  --good       :#4ADE80;  /* 11.02:1 — ✓ marks                        */

  --warn       :#E8B339;  /* 10.00:1 — "Partially Supports"           */
  --bad        :#F0837B;  /*  7.53:1 — "Does Not Support", form error */
  --mono-a     :#A9DCF2;  /* 13.34:1 on --well — code / kbd           */
  --mono-b     :#8FD6AE;  /* 11.64:1 on --well — pre / .sums          */


  --surface  :var(--ink-0);
  --surface-2:var(--ink-2);
  --surface-3:var(--ink-3);
  --on  :var(--paper);
  --on-2:var(--body);
  --on-3:var(--soft);
  --block:var(--paper);      /* filled control ground */
  --on-block:var(--ink-0);   /* 17.17:1 — the highest-contrast control here */
  --focus:var(--accent-2);


  --nav-bg     :rgba(12,15,20,.92); /* opaque fallback — no backdrop-filter */
  --nav-bg-blur:rgba(12,15,20,.78); /* the value that actually renders today */
  --block-hi   :#fff;               /* filled control, hover — brighter still */
  --pro-edge   :rgba(227,194,125,.35); /* Pro rail: .cmp, price card, dl card */
  --pro-edge-hi:rgba(227,194,125,.45); /* PRO badge outline — 3.11:1 on ink-0 */


  color-scheme:dark;


  --ff-display:Georgia,"Iowan Old Style","Palatino Linotype","Source Serif 4","Noto Serif","Liberation Serif",serif;
  --ff-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-mono:ui-monospace,Consolas,monospace;


  --t-meta:.8125rem;   /* 13px — eyebrows, thead, .tiny, badges, code   */
  --t-ui:.9375rem;     /* 15px — nav, footer, .btn, .refund, captions   */
  --t-body:1.0625rem;  /* 17px — all body copy (was 16px)               */
  --t-h3:1.3125rem;    /* 21px — h3, summary, .tier                     */
  --t-h2s:1.6875rem;   /* 27px — lead items, phone h2                   */


  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:20px;
  --s-5:32px; --s-6:52px; --s-7:84px; --s-8:136px;

  /* Three widths, replacing eight (1120/900/880/820/720/660/640/544). */
  --w-text:34rem;   /* 544px prose measure                              */
  --w-col :52rem;   /* 832px — media plates, tables, single-column runs  */
  --w-page:1120px;  /* outer shell; unchanged so the nav/footer wrap
                       plateaus measured in the checklist do not move    */


  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-pill:999px;

  /* One shadow, and it is a plate shadow rather than a glow. The four
     60-70px blue blooms are gone: elevation was binary, nothing or a bloom. */
  --shadow:0 30px 60px -30px rgba(0,0,0,.85);


  --nav-h:66px;
}

/* Searchable, crawlable topic directory. All result cards are present in the
   HTML; JavaScript only filters them for people, so crawlers and no-script
   visitors still receive the complete set of descriptive internal links. */
.site-search{max-width:var(--w-col);margin-top:var(--s-5)}
.site-search label{display:block;font:600 var(--t-h3)/1.3 var(--ff-display);color:var(--on);margin-bottom:var(--s-2)}
.site-search-row{display:flex;gap:var(--s-3);align-items:stretch;flex-wrap:wrap}
.site-search-row input{flex:1 1 28rem;min-width:0;padding:15px 18px;border:1px solid var(--rule-2);border-radius:var(--r-md);background:var(--well);color:var(--on);font:500 var(--t-ui)/1.4 var(--ff-ui)}
.site-search-row input::placeholder{color:var(--on-3)}
.search-status{min-height:1.5em;margin:var(--s-2) 0 0;color:var(--on-3);font-size:var(--t-meta)}
.search-results{max-width:var(--w-page);padding-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:var(--s-4)}
.search-results .card{margin:0}
.search-results .card h2{font-size:var(--t-h3);margin:0 0 var(--s-2);padding:0;border:0}
.search-results .card[hidden]{display:none}
[hidden]{display:none!important}
.release-notice{max-width:var(--w-text);margin:var(--s-4) auto;padding:var(--s-3) var(--s-4);
  border:1px solid var(--rule-2);border-left:3px solid var(--warn);background:var(--surface-2);
  color:var(--on-2);font-size:var(--t-ui);text-align:left}
.release-notice strong{color:var(--on)}

.video-watch{padding:0 0 var(--s-7);margin:0 0 var(--s-7);border-bottom:1px solid var(--rule)}
.video-watch h2{margin-top:var(--s-2)}
.video-watch > p{max-width:var(--w-text)}
.video-watch video{display:block;width:100%;height:auto;margin-top:var(--s-4);border:1px solid var(--rule);border-radius:var(--r-md);background:#000;box-shadow:var(--shadow)}
.video-next{padding:0 0 var(--s-5)}

@media(max-width:640px){
  .site-search-row .btn{width:100%;text-align:center}
}
@media(max-width:640px){:root{--nav-h:64px}}
@media(max-width:615px){:root{--nav-h:94px}}   /* links wrap under the brand */
@media(max-width:487px){:root{--nav-h:118px}}  /* pill drops to its own row  */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}


body{background:var(--surface);color:var(--on-2);
  font:var(--t-body)/1.62 var(--ff-ui);-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body > footer{margin-top:auto}

body > :not(.skip){width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}


img,video{max-width:100%;height:auto;display:block}
.live-demo video{background:#05080d}
.live-proof{max-width:var(--w-text);margin:12px 0 0;color:var(--soft);font-size:var(--t-meta)}
.live-proof strong{color:var(--good)}


.grad{font-style:italic;color:inherit;background:none;-webkit-text-fill-color:currentColor}

.center{text-align:center}
.wrap{max-width:var(--w-page);margin:0 auto}

/* ── accessibility: one visible focus ring everywhere ── */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px}

.skip{position:fixed;left:-9999px}
.skip:focus{left:16px;top:10px;z-index:100;background:var(--surface-2);padding:8px 14px;
  border-radius:2px;border:1px solid var(--rule-3);color:var(--on)}

/* ── nav (reachable on mobile — links wrap, never hidden) ── */

nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);
  border-bottom:1px solid var(--rule)}
/* The opaque value is declared first so a browser without backdrop-filter
   never renders nav text over whatever is scrolling beneath it. */
@supports (backdrop-filter:blur(1px)){
  nav{background:var(--nav-bg-blur);backdrop-filter:blur(14px) saturate(140%)}
}
.nav-in{max-width:var(--w-page);margin:0 auto;display:flex;align-items:center;
  gap:14px 26px;padding:12px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:500 1.0625rem/1 var(--ff-display);
  letter-spacing:.01em;color:var(--on)}
.brand:hover{text-decoration:none}
.brand img{width:28px;height:28px;border-radius:2px}
.nav-links{display:flex;gap:8px 22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--on-2);font-weight:500;font-size:var(--t-ui)}
.nav-links a:hover{color:var(--on);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}
.nav-links a[aria-current="page"]{color:var(--on);text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px}
.nav-links a.cta{background:var(--block);color:var(--on-block);font-weight:600;
  padding:8px 18px;border-radius:2px}
.nav-links a.cta:hover{color:var(--on-block);background:var(--block-hi);text-decoration:none}

@media(max-width:640px){
  .nav-in{justify-content:center;padding:7px 16px;gap:2px 12px}
  .nav-links{margin:0 auto;justify-content:center;gap:2px 4px;font-size:.9rem}
  .nav-links a{padding:10px 9px;margin:0;display:inline-flex;align-items:center;min-height:44px}
  /* The pill already has a 41px target; it only needs the row-gap back so it
     does not collide with the links above it once they carry padding. */
  .nav-links a.cta{padding:10px 16px;margin:0}
}


.btn{display:inline-block;padding:14px 26px;border-radius:2px;font-weight:600;
  font-size:var(--t-ui);letter-spacing:.01em;font-family:var(--ff-ui);
  border:1px solid transparent;color:var(--on);text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.btn:hover{text-decoration:none}

.btn.primary{background:var(--block);color:var(--on-block)}

.btn.primary:hover{background:var(--block-hi);color:var(--on-block)}
/* The border IS the affordance on a ghost button, so it takes --rule-2
   (3.03:1) and clears WCAG 1.4.11. --rule at 2.05:1 would not. */
.btn.ghost{background:transparent;border-color:var(--rule-2);color:var(--on)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--on)}
.btn.lg{padding:16px 30px;font-size:var(--t-body)}
.refund{color:var(--on-3);font-size:var(--t-ui);margin-top:10px}
.refund::before{content:"✓ ";color:var(--good);font-weight:800}


h1,h2,h3,h4,.lead,summary,.tier,.amount,.big{font-family:var(--ff-display)}
h1{font-size:clamp(2.125rem,1.60rem + 1.35vw,2.75rem);line-height:1.10;
   letter-spacing:-.015em;font-weight:500;color:var(--on)}
h2{font-size:clamp(1.6875rem,1.05rem + 1.00vw,2.125rem);line-height:1.16;
   letter-spacing:-.012em;font-weight:500;color:var(--on)}
h3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.005em;font-weight:600;color:var(--on)}
h1,h2,h3,.lead,summary{text-wrap:balance;overflow-wrap:anywhere}
p,li,td{text-wrap:pretty}
/* Prices and comparison columns did not align on the decimal anywhere on the
   site; grep found zero uses of either of these two properties. */
table,.amount,.sums,.value .row .price,.dl .meta,code,kbd,pre{font-variant-numeric:tabular-nums}

.eyebrow{color:var(--accent);font-family:var(--ff-ui);font-weight:600;font-size:var(--t-meta);
  letter-spacing:.10em;text-transform:uppercase;display:flex;align-items:center;gap:10px;
  margin-bottom:var(--s-3)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.center .eyebrow{justify-content:center}

/* ── document pages (guide/legal/etc.) ── */
main{max-width:820px;margin:0 auto;padding:var(--s-6) 24px var(--s-7)}
main.wide{max-width:var(--w-page)}

main > :last-child{margin-bottom:0}
main h1{margin-bottom:var(--s-3)}
main h2{margin:var(--s-6) 0 var(--s-3);font-size:clamp(1.5rem,1.05rem + .7vw,1.875rem)}
main h3{margin:var(--s-5) 0 var(--s-2)}
.lead,.sub{color:var(--on-2);font-size:var(--t-h3);line-height:1.5;
  margin-bottom:var(--s-5);max-width:var(--w-text)}
.center .lead,.center .sub{margin-left:auto;margin-right:auto}
main p{color:var(--on-2);margin:var(--s-3) 0}
ul,ol{color:var(--on-2);margin:var(--s-3) 0 var(--s-3) 24px;display:grid;gap:var(--s-2)}
li strong,p strong{color:var(--on)}
.steps{counter-reset:s;list-style:none;margin-left:0}
.steps li{counter-increment:s;position:relative;padding-left:52px;padding-bottom:var(--s-3)}

.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;
  font:500 var(--t-h2s)/1.2 var(--ff-display);color:var(--on-3);font-variant-numeric:lining-nums}
code,kbd{background:var(--well);border:1px solid var(--rule);border-radius:2px;padding:2px 7px;
  font:var(--t-meta) var(--ff-mono);color:var(--mono-a)}
code{overflow-wrap:anywhere}
pre{background:var(--well);border:1px solid var(--rule);border-radius:2px;padding:16px 18px;
  overflow-x:auto;margin:var(--s-4) 0}

@media(max-width:640px){pre{padding:12px}}
pre code{background:none;border:none;padding:0;color:var(--mono-b)}
/* No fill and no radius: a rule in the margin says "aside" as clearly as a
   tinted slab and does not compete with the cards beside it. */
.note{border-left:2px solid var(--accent);background:none;border-radius:0;
  padding:2px 0 2px var(--s-4);margin:var(--s-5) 0;color:var(--on-2);max-width:var(--w-text)}


main:not(.wide):not(:has(> .grid, > .dl, > .strip, > .card, > form, > section))
  > :is(p,ul,ol,dl,article,blockquote,details,.lead,.sub,.note){
  max-width:var(--w-text);margin-right:auto}

main:not(.wide):not(:has(> .grid, > .dl, > .strip, > .card, > form, > section))
  > h2{border-bottom:1px solid var(--rule);padding-bottom:var(--s-3)}


.pageindex{display:none}
@media screen and (min-width:1440px){
  main.has-pageindex{position:relative}
  .pageindex{display:block;position:absolute;left:100%;top:var(--s-6);bottom:var(--s-7);
    width:14rem;margin-left:var(--s-6)}

  .pageindex > ol{position:sticky;top:calc(var(--nav-h) + var(--s-5));
    list-style:none;margin:0;display:block;border-top:1px solid var(--rule)}
  .pageindex a{display:flex;align-items:center;min-height:44px;padding:11px 0;
    border-bottom:1px solid var(--rule);color:var(--on-3);
    font-size:var(--t-ui);line-height:1.35;
    transition:color .16s ease}
  .pageindex a:hover{color:var(--on);text-decoration:none}
}


main.wide > h2{margin-top:var(--s-7);border-bottom:1px solid var(--rule);
  padding-bottom:var(--s-3)}
main.wide > h2:first-child{margin-top:0}

main.wide > :is(p,ul,ol,dl){max-width:var(--w-text)}

/* ── sections (marketing pages) ── */

section{padding:var(--s-6) 24px var(--s-7);counter-increment:sec}
section.alt{background:var(--ink-1)}
.sec-head{max-width:var(--w-col);margin:0 auto var(--s-5)}
.center .sec-head,.sec-head.center{text-align:center}
.sec-head .lead{margin:var(--s-3) 0 0}
.center .sec-head .lead{margin-left:auto;margin-right:auto}


.dept{max-width:var(--w-page);margin:0 auto;display:grid;gap:var(--s-4)}

.dept > *{min-width:0}
.dept-rail{font:500 var(--t-h2s)/1 var(--ff-display);color:var(--rule-2);
  font-variant-numeric:lining-nums}
.dept-rail::before{content:counter(sec,decimal-leading-zero) / ""}
@media(min-width:960px){
  .dept{grid-template-columns:8rem minmax(0,1fr);gap:0 var(--s-6);align-items:start}
  .dept > .dept-rail{position:sticky;top:calc(var(--nav-h) + 32px);
    border-top:1px solid var(--rule);padding-top:var(--s-3)}
}




.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.grid > *,.calls > *,.looks-grid > *{min-width:0}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
  padding:var(--s-4) 0 var(--s-2)}

.card h3{margin:0 0 var(--s-2)}
.card p{color:var(--on-2);font-size:var(--t-body);margin:0;max-width:40ch}
.card .ico{display:none}
.card.boxed{background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:var(--s-5)}

@media(min-width:760px){
  .grid.c3:has(> :nth-child(6)) > :first-child{grid-column:span 2}
  .grid.c3:has(> :nth-child(6)) > :first-child h3{font-size:var(--t-h2s);line-height:1.22}
}


@media(min-width:900px){
  .grid:has(> :nth-child(4)):not(:has(> :nth-child(5))){
    grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr))}
  .grid:has(> :nth-child(7)):not(:has(> :nth-child(8))){grid-template-columns:repeat(12,1fr)}
  .grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(-n+3){grid-column:span 4}
  .grid:has(> :nth-child(7)):not(:has(> :nth-child(8))) > :nth-child(n+4){grid-column:span 3}
  .grid:has(> :nth-child(5)):not(:has(> :nth-child(6))){grid-template-columns:repeat(6,1fr)}
  .grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(-n+3){grid-column:span 2}
  .grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(n+4){grid-column:span 3}
}


.calls{counter-reset:call;display:grid;gap:var(--s-4);max-width:var(--w-col)}
.call{border-top:1px solid var(--rule);padding:var(--s-3) 0 0;
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:0 var(--s-3)}
.call::before{counter-increment:call;content:counter(call,decimal-leading-zero) / "";
  font:500 var(--t-h3)/1.28 var(--ff-display);color:var(--accent);font-variant-numeric:lining-nums}
.call h3{margin:0 0 var(--s-2)}
.call p{color:var(--on-2);margin:0}


table{width:100%;border-collapse:collapse;margin:var(--s-4) 0;font-size:.95rem}
th,td{padding:12px 15px;border-bottom:1px solid var(--rule);text-align:left;color:var(--on-2)}
thead th{color:var(--on-3);font-size:var(--t-meta);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;border-bottom:1px solid var(--rule-2)}
th[scope=row]{font-family:var(--ff-display);font-weight:600;font-size:var(--t-body);color:var(--on)}
tbody tr:hover td{background:var(--ink-1)}

td.y,.y{color:var(--good);font-weight:600}
td.n,.n{color:var(--on-3)}
.cmp td:nth-child(2),.cmp td:nth-child(3),.cmp th:nth-child(2),.cmp th:nth-child(3){text-align:center}

.cmp thead th:nth-child(3){color:var(--pro)}
.cmp td:nth-child(3),.cmp th:nth-child(3){
  box-shadow:inset 1px 0 0 var(--pro-edge),inset -1px 0 0 var(--pro-edge)}
.tablewrap{overflow-x:auto}


.phero{padding:var(--s-7) 24px var(--s-6);max-width:var(--w-page);margin:0 auto}

main.wide > .phero{padding:0 0 var(--s-5)}
.phero h1{font-size:clamp(2.5rem,0.40rem + 6.40vw,4.75rem);line-height:1.02;
  letter-spacing:-.02em;max-width:16ch;margin:0 0 var(--s-4)}
.phero .lead{font-size:clamp(var(--t-h3),1.05rem + .75vw,var(--t-h2s));
  margin:0 0 var(--s-5);max-width:var(--w-text)}
.phero .btns{display:flex;gap:14px;flex-wrap:wrap}
.phero .tiny{color:var(--on-3);font-size:var(--t-meta);margin-top:var(--s-4);
  letter-spacing:.04em}
.phero .refund{margin-top:var(--s-3)}
@media(min-width:960px){
  .phero.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:var(--s-6);align-items:center}
}


.shot,.strip{max-width:var(--w-col);margin:var(--s-6) 0 0;border-radius:2px;overflow:hidden;
  border:1px solid var(--rule);box-shadow:var(--shadow);background:var(--well)}
.shot img,.strip img{width:100%;display:block}


p:has(> .btn + .btn){display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:640px){.shot,.strip{margin-top:var(--s-5)}}

/* ── Dagric Looks card (one component, used on / and /pro) ── */
.looks-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
  margin-top:var(--s-5)}
.look{background:none;border:0;border-radius:0;display:flex;flex-direction:column}
.look img{aspect-ratio:16/10;object-fit:cover;width:100%;border:1px solid var(--rule);
  border-radius:2px;transition:border-color .16s ease}
.look:hover img{border-color:var(--rule-3)}
.look .pad{padding:var(--s-3) 0 0}
.look h3{margin-bottom:var(--s-1)}
.look p{color:var(--on-3);font-size:var(--t-ui);margin:0}

.look:has(.badge) img{border-top:3px solid var(--pro)}

/* ── badges ── */
.badge{display:inline-block;font-family:var(--ff-ui);font-size:var(--t-meta);font-weight:600;
  letter-spacing:.08em;padding:1px 7px;border-radius:2px;background:none;
  border:1px solid var(--pro-edge-hi);color:var(--pro);margin-left:8px;vertical-align:2px}


.badge.also-free{border-color:var(--rule-2);color:var(--on-2)}


.sums{background:var(--well);border:1px solid var(--rule);border-radius:2px;padding:16px 18px;
  font:var(--t-meta)/1.8 var(--ff-mono);color:var(--mono-b);overflow-x:auto;
  white-space:nowrap;margin:var(--s-4) 0}


details{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
  padding:0;margin:0}
details summary{cursor:pointer;font:600 var(--t-h3)/1.28 var(--ff-display);color:var(--on);
  list-style:none;padding:var(--s-4) 0;display:flex;justify-content:space-between;gap:var(--s-4)}
details summary:hover{color:var(--accent)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--on-3);font-weight:400;font-family:var(--ff-ui)}
details[open] summary::after{content:"–"}
details p{color:var(--on-2);margin:0 0 var(--s-4);font-size:var(--t-body);max-width:var(--w-text)}

/* ── footer ── */
footer{border-top:1px solid var(--rule-2);padding:var(--s-6) 24px;color:var(--on-3);
  font-size:var(--t-ui)}
.foot{max-width:var(--w-page);margin:0 auto;display:flex;gap:14px 26px;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start}
.foot > span:first-child{font-size:var(--t-meta);max-width:34ch}
.foot .links{display:flex;gap:0;flex-wrap:wrap;max-width:36rem;justify-content:flex-end}
.foot .links a{color:var(--on-2)}
.foot .links a:hover{color:var(--on)}
.foot .links a:not(:last-child)::after{content:"·";margin:0 12px;color:var(--rule-2)}
.social-footer{flex:1 0 100%;display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;padding-top:var(--s-3);border-top:1px solid var(--rule)}
.social-footer strong{margin-right:auto;color:var(--on);font-size:var(--t-meta);
  letter-spacing:.06em;text-transform:uppercase}
.social-footer a{display:inline-flex;align-items:center;min-height:38px;padding:7px 11px;
  border:1px solid var(--rule-2);border-radius:999px;color:var(--on-2);font-size:var(--t-meta);
  font-weight:650;text-decoration:none;transition:background .16s ease,color .16s ease,border-color .16s ease}
.social-footer a:hover{background:var(--ink-2);border-color:var(--rule-3);color:var(--on)}
.social-grid{max-width:var(--w-col)}
.social-grid > a{color:inherit;text-decoration:none;transition:border-color .16s ease,transform .16s ease}
.social-grid > a:hover{border-color:var(--rule-3);transform:translateY(-2px)}
.social-grid > a span{display:block;margin-top:var(--s-3);color:var(--accent-2);
  font-family:var(--ff-ui);font-size:var(--t-ui);font-weight:700}

.themebox{max-width:var(--w-page);margin:var(--s-4) auto 0;display:flex;justify-content:flex-end}
.themetog{min-height:44px;padding:10px 16px;background:none;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:2px;color:var(--on-2);
  font:500 var(--t-ui)/1 var(--ff-ui);letter-spacing:.01em;
  transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.themetog:hover{color:var(--on);border-color:var(--on);background:var(--surface-2)}
@media(max-width:640px){.themebox{justify-content:center;margin-top:var(--s-3)}}


.themebox-nav{margin:0;max-width:none;display:flex;align-items:center}
.themebox-nav .themetog{min-height:34px;padding:7px 12px;font-size:var(--t-meta);
  border-color:var(--rule);color:var(--on-3)}
.themebox-nav .themetog:hover{color:var(--on);border-color:var(--on-3);background:none}
/* Below 641px the element is in the footer, so the nav rules must not apply
   even for the instant before matchMedia fires on a resize. */
@media(max-width:640px){.themebox-nav{justify-content:center;margin-top:var(--s-3)}}

/* ── responsive: tablet ── */
@media(max-width:900px){
  section{padding:var(--s-6) 22px}
  .phero{padding:var(--s-6) 22px var(--s-5)}
  .grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
  .looks-grid{grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))}
}

/* ── responsive: phone ── */
@media(max-width:640px){
  section{padding:var(--s-6) 18px}
  .phero{padding:var(--s-5) 18px var(--s-4)}
  .lead,.sub{font-size:var(--t-h3)}
  main{max-width:100%;padding:var(--s-5) 20px var(--s-6)}
  main h2{margin:var(--s-5) 0 var(--s-3)}
  .btn{padding:13px 22px}
  .btn.lg{padding:15px 26px;font-size:var(--t-ui)}
  .phero .btns{gap:10px;width:100%}
  .phero .btns .btn{flex:1 1 auto;min-width:0;max-width:360px;text-align:center}
  .looks-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .grid{gap:var(--s-4)}
  .card.boxed{padding:var(--s-4)}
  pre,.sums{font-size:12px}
  .call{grid-template-columns:2rem minmax(0,1fr)}


  th,td{padding:11px 9px}
  .cmp th,.cmp td{padding:11px 6px}
  th[scope=row]{font-size:var(--t-ui)}

  .foot{justify-content:center;text-align:center;gap:12px}
  .foot > span:first-child,.foot .links{max-width:100%}
  .foot .links{justify-content:center;gap:2px 0}

  .foot .links a{padding:10px 9px;display:inline-block;font-size:.875rem}
  .foot .links a:not(:last-child)::after{display:none}
  .social-footer{justify-content:center}
  .social-footer strong{flex:1 0 100%;margin:0;text-align:center}
  .social-footer a{min-height:42px}

  footer{padding:var(--s-5) 24px}
}


@keyframes reveal{from{opacity:0;transform:translateY(6px)}}
details[open] > p{animation:reveal .16s ease-out}

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


:root[data-theme="light"]{
  --ink-0:#F3EFE4;   /* page — warm stock, not grey UI                      */
  --ink-1:#E8E1CE;   /* .alt band, Pro card fill, row hover — tints DOWN    */
  --ink-2:#FFFDF7;   /* .card.boxed — lifts toward white                    */
  --ink-3:#FFFFFF;   /* hover / raised — the ceiling                        */
  --well :#E4DCC6;   /* code, pre, inputs, and the screenshot mount board   */

  --rule  :#C3BBA5;
  --rule-2:#7C7666;
  --rule-3:#6B6656;

  --paper:#241F17;   /* DISPLAY ink — warm, as it is warm in dark           */
  --text :#1B1F26;   /* UI ink — cool, as it is cool in dark                */
  --body :#3D444E;
  --soft :#555C66;


  --accent     :#15588E;
  --accent-2   :#1B4F7D;
  --accent-deep:#14487A;  /* unchanged — a fixed dark fill under #fff       */
  --pro        :#755614;
  --good       :#116632;
  --warn       :#7A4E05;  /* 6.26 page / 5.51 .alt / 7.07 card */
  --bad        :#A32118;  /* 6.56 page / 5.77 .alt / 7.40 card */
  --mono-a     :#124E76;
  --mono-b     :#14603A;

  --focus:#1B4F7D;

  /* .85 black is a smudge on paper; this is a plate shadow, not a glow. */
  --shadow:0 30px 60px -30px rgba(31,35,45,.22);

  --nav-bg     :rgba(243,239,228,.94);
  --nav-bg-blur:rgba(243,239,228,.78);
  --block-hi   :#0D0A06;   /* --block is near-black here, so hover goes DOWN */
  --pro-edge   :#A8862B;   /* 2.99:1 on the page — decorative, as in dark    */
  --pro-edge-hi:#8A6E1F;   /* 4.22:1 — the PRO badge outline                 */

  color-scheme:light;
}


@media print{

  :root,:root[data-theme]{
    --ink-0:#fff;--ink-1:#fff;--ink-2:#fff;--ink-3:#fff;--well:#fff;
    --rule:#bbb;--rule-2:#999;--rule-3:#999;
    --paper:#000;--text:#000;--body:#1c1c1c;--soft:#444;
    --accent:#0b4f8a;--accent-2:#0b4f8a;--accent-deep:#fff;
    --pro:#000;--good:#000;--warn:#000;--bad:#000;--mono-a:#000;--mono-b:#000;
    --block:#fff;--on-block:#000;--shadow:none;

    --nav-bg:#fff;--nav-bg-blur:#fff;--block-hi:#fff;
    --pro-edge:#999;--pro-edge-hi:#666;
    color-scheme:light}
  @page{margin:16mm}
  html,body{background:#fff!important;color:#000!important}

  body{font-size:11pt;line-height:1.5;display:block;min-height:0}
  /* .themebox joins the furniture that does not print: it is a control, and a
     printed page has no theme to switch. */
  nav,.skip,video,.foot .links,.social-footer,.themebox,.dept-rail::before{display:none!important}
  main{max-width:100%!important;margin:0!important;padding:0!important}
  section{padding:0 0 14px!important}
  .wrap,.sec-head,.dept,.phero{max-width:100%!important}
  .phero{padding:0 0 14px!important;background:none!important}
  .dept{display:block!important}
  h1,h2,h3{color:#000;break-after:avoid;page-break-after:avoid}
  h1{font-size:20pt}
  h2{font-size:14pt;margin:22px 0 8px!important}
  h3{font-size:12pt}
  p,li,pre,tr,.note,.card,.price{break-inside:avoid;page-break-inside:avoid}
  main p,.lead,.sub,ul,ol,li,td{color:#1c1c1c}
  .grad{font-style:italic;color:#000!important;-webkit-text-fill-color:#000!important}
  a{color:#0b4f8a;text-decoration:underline}
  main a[href^="http"]::after{content:" <" attr(href) ">";font-size:8.5pt;color:#444;word-break:break-all}
  .btn{display:inline;padding:0!important;border:none!important;background:none!important;
    box-shadow:none!important;color:#0b4f8a!important;font-size:inherit;text-decoration:underline}
  code,kbd,pre,pre code,.sums{background:#fff!important;color:#000!important;border-color:#999!important}
  .note{border-left:3px solid #000;border-radius:0}
  .card,.card.boxed,.price,details,.shot,.strip{background:#fff;box-shadow:none!important;border-color:#999}
  .steps li::before{color:#000!important}
  .tablewrap,pre,.sums,table{overflow:visible!important}
  th,td{border-bottom:1px solid #bbb}
  .cmp td:nth-child(3),.cmp th:nth-child(3){box-shadow:none!important}

  thead th,td.y,td.n,.y,.n,.s-yes,.s-part,.s-no,.refund::before{color:#000}

  #status.err{color:#000!important}
  form button{color:#000!important;background:none!important;border:1px solid #555!important}
  footer{border-top:1px solid #bbb;padding:10px 0 0;font-size:9pt;color:#444}
}


:root{
  --bg:var(--ink-0); --bg2:var(--ink-1);
  --panel:var(--ink-2); --panel-hi:var(--ink-3);
  --line:var(--rule); --line2:var(--rule-2);
  --muted:var(--body); --faint:var(--soft);
  --accent2:var(--accent-2);
  --grad:var(--paper); --grad-fill:var(--accent-deep);
  --maxw:var(--w-page); --measure:var(--w-text);
}