/* disctester.org — the one stylesheet every page links.
   Until 2026-10-08 each page carried its own inline copy and seven of the ten copies
   had drifted. Page-level accent comes from <body data-dim="d|i|s|c">; pages without
   one use the site accent. */

/* ------------------------------------------------------------------ tokens */
:root{
  --bg:#fbfaf8; --surface:#ffffff; --surface-2:#f4f2ee;
  --text:#1b1a17; --body:#3d3c38; --muted:#686762;
  --border:#e6e3dd; --border-strong:#d3d0c9; --track:#eeebe5;
  --accent:#2557d6; --accent-hover:#1d48b8; --accent-soft:#e7eefc; --accent-ink:#ffffff;
  /* DISC: solid fills carry white text; soft/ink pairs are for inline badges */
  --d:#BE185D; --i:#A16207; --s:#0B7D53; --c:#2563EB;
  --d-soft:#fce8f0; --i-soft:#fbf1dc; --s-soft:#dcf3e9; --c-soft:#e4ecfd;
  --d-ink:#9d174d; --i-ink:#7c4a03; --s-ink:#05603f; --c-ink:#1d4ed8;
  --dim:var(--accent); --dim-soft:var(--accent-soft); --dim-ink:var(--accent);
  --shadow-sm:0 1px 2px rgba(20,18,12,.05);
  --shadow:0 1px 2px rgba(20,18,12,.04),0 6px 20px rgba(20,18,12,.06);
  --shadow-lg:0 2px 4px rgba(20,18,12,.04),0 16px 40px rgba(20,18,12,.08);
  --radius:14px; --radius-sm:10px;
  --w-page:1080px; --w-text:720px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171716; --surface:#201f1e; --surface-2:#262523;
    --text:#efeeea; --body:#d2d0ca; --muted:#a4a29d;
    --border:#34332f; --border-strong:#46443f; --track:#2c2b28;
    --accent:#6ea1f8; --accent-hover:#8ab3fa; --accent-soft:#1f2a3d; --accent-ink:#0b1730;
    --d:#C2275F; --i:#9A6206; --s:#0B7D53; --c:#2E6BDB;
    --d-soft:#44212c; --i-soft:#3b2e19; --s-soft:#1b342a; --c-soft:#233048;
    --d-ink:#f58ab2; --i-ink:#e8b04f; --s-ink:#4fd39f; --c-ink:#8db4fa;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --shadow-lg:0 2px 4px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
[data-dim="d"]{--dim:var(--d);--dim-soft:var(--d-soft);--dim-ink:var(--d-ink)}
[data-dim="i"]{--dim:var(--i);--dim-soft:var(--i-soft);--dim-ink:var(--i-ink)}
[data-dim="s"]{--dim:var(--s);--dim-soft:var(--s-soft);--dim-ink:var(--s-ink)}
[data-dim="c"]{--dim:var(--c);--dim-soft:var(--c-soft);--dim-ink:var(--c-ink)}

/* -------------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;overflow-wrap:break-word;
  display:flex;flex-direction:column;
}
body>main{flex:1 0 auto}
/* body is a flex column (footer at the bottom of short pages), and main.wrap centres
   itself with auto margins. Auto margins switch off stretching, so without a width the
   element sizes to its widest content, and the comparison table pushed the page wide. */
body>main.wrap{width:100%}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent-soft)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 20px}
noscript p{margin:18px auto 0;color:var(--d-ink);font-weight:600;max-width:520px}

/* ----------------------------------------------------------- DISC letters */
/* Inline, not inline-block: an atomic inline is a line-break opportunity, so a
   badge followed by a plural "s" ("High Ds") used to split across two lines. */
.dl{
  display:inline;padding:.06em .34em;border-radius:.32em;font-style:normal;
  font-weight:750;font-size:.86em;line-height:1;letter-spacing:.01em;white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.dl-d{background:var(--d-soft);color:var(--d-ink)}
.dl-i{background:var(--i-soft);color:var(--i-ink)}
.dl-s{background:var(--s-soft);color:var(--s-ink)}
.dl-c{background:var(--c-soft);color:var(--c-ink)}
.dim-letter{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:28px;height:28px;padding:0 6px;border-radius:8px;
  background:var(--dim);color:#fff;font-size:.86rem;font-weight:800;letter-spacing:.02em;
}
.dim-D .dim-letter,.dim-letter.dim-D{background:var(--d)}
.dim-I .dim-letter,.dim-letter.dim-I{background:var(--i)}
.dim-S .dim-letter,.dim-letter.dim-S{background:var(--s)}
.dim-C .dim-letter,.dim-letter.dim-C{background:var(--c)}

/* ------------------------------------------------------------------ header */
header{background:var(--bg);border-bottom:1px solid var(--border)}
header>.wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand langs" "nav nav";align-items:center}
.hd{display:contents}
.brand{grid-area:brand;display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:14px 0;
  font-weight:750;font-size:1.06rem;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.brand svg{flex:none}
nav.langs{grid-area:langs;display:flex;gap:2px}
nav.langs a{
  display:inline-block;padding:5px 9px;border-radius:7px;font-size:.78rem;font-weight:700;
  color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;
}
nav.langs a:hover{color:var(--text);background:var(--track)}
nav.langs a[aria-current="true"]{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong)}
nav.site{grid-area:nav;display:flex;gap:2px;flex-wrap:wrap;margin:0 -10px}
nav.site a{
  position:relative;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;
  padding:11px 10px 13px;white-space:nowrap;
}
nav.site a:hover{color:var(--text)}
nav.site a[aria-current="page"]{color:var(--text)}
nav.site a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.menu-btn{display:none}

@media (min-width:1001px) and (max-width:1100px){
  nav.site{margin:0 -8px}
  nav.site a{padding-left:8px;padding-right:8px;font-size:.84rem}
  nav.site a[aria-current="page"]::after{left:8px;right:8px}
}
/* Phones and tablets: nine links do not fit one row below ~1000px in English or German.
   Without JavaScript the nav stays a sideways-scrolling strip; site.js adds .js to
   <html> and a Menu button, and the links fold into a panel. */
@media (max-width:1000px){
  nav.site{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 10px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{flex:none}
  .js header>.wrap{grid-template-columns:1fr auto;grid-template-areas:"brand btn" "nav nav" "langs langs"}
  .js .menu-btn{
    grid-area:btn;display:inline-flex;align-items:center;gap:8px;justify-self:end;
    font:inherit;font-size:.9rem;font-weight:650;color:var(--text);background:var(--surface);
    border:1px solid var(--border-strong);border-radius:10px;padding:7px 12px;cursor:pointer;
  }
  .js .menu-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .js .menu-btn .x{display:none}
  .js header.menu-open .menu-btn .bars{display:none}
  .js header.menu-open .menu-btn .x{display:block}
  .js header nav.site,.js header nav.langs{display:none}
  .js header.menu-open nav.site{display:flex;flex-direction:column;overflow:visible;-webkit-mask-image:none;mask-image:none;
    margin:0;padding:6px 0;border-top:1px solid var(--border)}
  .js header.menu-open nav.site a{padding:12px 4px;font-size:1rem;border-bottom:1px solid var(--border)}
  .js header.menu-open nav.site a:last-child{border-bottom:0}
  .js header.menu-open nav.site a[aria-current="page"]::after{left:-20px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .js header.menu-open nav.langs{display:flex;padding:10px 0 16px;gap:6px}
  .js header.menu-open nav.langs a{padding:8px 12px;font-size:.85rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
  .js header.menu-open nav.langs a[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:1.02rem;line-height:1.2;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);border-radius:12px;padding:15px 30px;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -6px var(--accent);
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;color:inherit}

/* pills: hero facts, trait chips, related-page rows */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.84rem;font-weight:600;color:var(--body);border:1px solid var(--border);border-radius:999px;padding:5px 13px;background:var(--surface)}
.more-row,.next-row,.blend-grid{display:flex;gap:10px;flex-wrap:wrap}
.more-row a,.next-row a,.blend-grid a{
  display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;text-decoration:none;
  color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px;
  box-shadow:var(--shadow-sm);transition:border-color .15s ease,color .15s ease;
}
.more-row a::after,.next-row a::after{content:"\2192";color:var(--muted);transition:transform .15s ease}
.more-row a:hover,.next-row a:hover,.blend-grid a:hover{border-color:var(--accent);color:var(--text)}
.more-row a:hover::after,.next-row a:hover::after{transform:translateX(2px);color:var(--accent)}

/* ------------------------------------------------------------ article page */
main.wrap{padding-top:36px;padding-bottom:24px}
main.wrap>article{max-width:var(--w-text);margin:0 auto}
@media (min-width:1100px){
  main.has-toc{display:grid;grid-template-columns:minmax(0,var(--w-text)) 220px;gap:64px;justify-content:center;align-items:start}
  main.has-toc>article{margin:0}
}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.style-tag{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-ink);margin-bottom:12px}
.style-tag .dim-letter{min-width:26px;height:26px;font-size:.82rem;text-transform:none;letter-spacing:0}
article h1,.page-h1{font-size:clamp(1.85rem,4.2vw,2.6rem);line-height:1.12;letter-spacing:-.025em;font-weight:780;margin-bottom:18px;text-wrap:balance}
article h1 .dl,article h2 .dl{font-size:.8em;vertical-align:.08em}
article>h1+p,article>.style-tag+h1+p,.lede{font-size:1.15rem;line-height:1.65;color:var(--text)}
article h1,article h2,section.info h2{-webkit-hyphens:auto;hyphens:auto}
article h2{font-size:1.45rem;line-height:1.25;letter-spacing:-.015em;font-weight:720;margin:46px 0 14px;scroll-margin-top:20px;text-wrap:balance}
article h3{font-size:1.1rem;line-height:1.35;font-weight:700;margin:28px 0 8px;scroll-margin-top:20px}
article p{color:var(--body);font-size:1.0625rem;line-height:1.72;margin-bottom:14px}
article p strong,article li strong{color:var(--text)}
article ul,article ol{margin:10px 0 18px;padding:0}
article ul{list-style:none}
article ol{padding-left:1.4em;color:var(--body)}
article ol li{padding:4px 0 4px 4px;font-size:1.0625rem;line-height:1.65}
article ul li{position:relative;padding:5px 0 5px 26px;color:var(--body);font-size:1.0625rem;line-height:1.65}
article ul li::before{content:"";position:absolute;left:7px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--dim)}
article .chips{margin:16px 0 8px}
article .next-row{margin:16px 0 8px}
.rel-links{font-size:.95rem;line-height:1.6;color:var(--body);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--dim);border-radius:var(--radius-sm);padding:14px 18px;margin:22px 0}
.rel-links strong{color:var(--text)}
.reviewed{font-size:.85rem;line-height:1.6;color:var(--muted);border-top:1px solid var(--border);padding-top:16px;margin-top:36px}
.reviewed a{color:inherit}
.byline{margin-top:10px;font-size:.82rem;color:var(--muted)}

/* in-article call to action */
.cta-box{
  position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 30px;margin:44px 0 12px;
}
.cta-box::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--d) 0 25%,var(--i) 25% 50%,var(--s) 50% 75%,var(--c) 75% 100%)}
.cta-box h3{font-size:1.3rem;letter-spacing:-.01em;margin:0 0 6px}
.cta-box p{margin-bottom:18px;color:var(--body)}
@media (min-width:640px){
  .cta-box{display:grid;grid-template-columns:1fr auto;column-gap:28px;align-items:center}
  .cta-box h3,.cta-box p{grid-column:1}
  .cta-box p{margin-bottom:0}
  .cta-box .btn{grid-column:2;grid-row:1 / span 2;white-space:nowrap}
}

/* tables */
.tbl-wrap{overflow-x:auto;margin:18px 0 22px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
table.cmp{border-collapse:separate;border-spacing:0;min-width:560px;width:100%;font-size:.93rem;line-height:1.5}
table.cmp th,table.cmp td{border-bottom:1px solid var(--border);padding:11px 14px;text-align:left;vertical-align:top;color:var(--body);font-weight:400}
table.cmp tbody tr:last-child>*{border-bottom:0}
table.cmp thead>tr>*{background:var(--surface-2);color:var(--text);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
table.cmp tr>:first-child{position:sticky;left:0;background:var(--surface);color:var(--text);font-weight:650;white-space:nowrap;border-right:1px solid var(--border)}
table.cmp thead tr>:first-child{background:var(--surface-2)}

/* the 12-types hub */
.blend-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:20px 0 10px}
.blend-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px 16px;box-shadow:var(--shadow-sm)}
.blend-card h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.04rem}
.blend-card p{font-size:.97rem;line-height:1.62;margin-bottom:12px}
.blend-card .blend-more{margin:auto 0 0}
.blend-more a{font-size:.9rem;font-weight:650;text-decoration:none}
.blend-more a:hover{text-decoration:underline}
article h3[id]{scroll-margin-top:24px}

/* table of contents, built by site.js from the article's h2s */
.toc{font-size:.875rem;line-height:1.4}
.toc-title{display:block;font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--border)}
.toc li{margin:0}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text)}
.toc a[aria-current="true"]{color:var(--text);font-weight:600;border-left-color:var(--dim)}
.toc-side{display:none}
@media (min-width:1100px){
  .toc-side{display:block;position:sticky;top:28px;max-height:calc(100vh - 56px);overflow:auto;padding-top:6px}
  .toc-inline{display:none}
}
.toc-inline{margin:22px 0 6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.toc-inline summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:650;font-size:.92rem;display:flex;justify-content:space-between;align-items:center}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.toc-inline[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc-inline ol{margin:0 16px 14px}

/* --------------------------------------------------------------- homepage */
.hero{padding-top:64px;padding-bottom:56px}
.hero-grid{display:grid;gap:44px;align-items:center}
.hero-copy{text-align:center}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin-bottom:16px;text-wrap:balance}
.hero .sub{font-size:1.15rem;line-height:1.6;color:var(--body);max-width:560px;margin:0 auto 22px}
.hero .chips{justify-content:center;margin-bottom:28px}
.hero .btn{padding:17px 36px;font-size:1.08rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:560px;margin:0 auto}
.hero-visual{display:flex;justify-content:center}
.sample{
  width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:22px 24px 20px;transform:rotate(-1.2deg);
}
.sample-k{font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sample-row{display:grid;grid-template-columns:30px 1fr 40px;gap:12px;align-items:center;padding:7px 0}
.sample-row .dim-letter{min-width:28px}
.sample-bar{height:12px;border-radius:6px;background:var(--track);overflow:hidden}
.sample-bar i{display:block;height:100%;border-radius:6px}
.sample-row b:last-child{font-size:.88rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero-copy{text-align:left}
  .hero .sub{margin-left:0}
  .hero .chips{justify-content:flex-start}
  .hero-actions{justify-content:flex-start;margin-left:0}
}
@media (max-width:899px){.hero-visual{display:none} .hero-actions .btn{flex:1 1 auto}}
.dim-D>i,i.dim-D{background:var(--d)} .dim-I>i,i.dim-I{background:var(--i)}
.dim-S>i,i.dim-S{background:var(--s)} .dim-C>i,i.dim-C{background:var(--c)}

section.info{padding-top:44px;padding-bottom:44px}
section.info h2{font-size:clamp(1.45rem,3vw,1.85rem);line-height:1.2;letter-spacing:-.02em;font-weight:760;margin-bottom:16px;text-wrap:balance}
section.info h3{font-size:1.12rem;margin:30px 0 8px}
section.info p{color:var(--body);font-size:1.0625rem;line-height:1.72;max-width:680px;margin-bottom:14px}
section.info p strong{color:var(--text)}
#about{padding-top:20px}

.dims,.blend-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
@media (min-width:700px) and (max-width:959px){.dims,.blend-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.dims,.blend-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the twelve blends, one column per lead style so each sits under its style card */
.blend-list{margin-top:16px}
.blend-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* shared rows across the columns, so a one-line name gets as tall a box as its two-line neighbour */
@supports (grid-template-rows:subgrid){.blend-list ul{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}}
.blend-list a{display:flex;align-items:center;gap:10px;height:100%;font-size:.92rem;font-weight:600;line-height:1.35;color:var(--text);text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;box-shadow:var(--shadow-sm);transition:border-color .15s ease}
.blend-list a:hover{border-color:var(--accent)}
.blend-list .dim-letter{min-width:40px;height:26px;font-size:.8rem}
.dim-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 20px 18px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}
.dim-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--border)}
.dim-card.dim-D::before{background:var(--d)} .dim-card.dim-I::before{background:var(--i)}
.dim-card.dim-S::before{background:var(--s)} .dim-card.dim-C::before{background:var(--c)}
.dim-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.dim-card h3{display:flex;align-items:center;gap:10px;font-size:1.06rem;margin:0 0 8px;min-width:0;hyphens:auto;overflow-wrap:break-word}
section.info .dim-card p{font-size:.95rem;line-height:1.6;margin:0 0 14px}
.dim-link{margin-top:auto;font-size:.9rem;font-weight:650;text-decoration:none}
.dim-link:hover{text-decoration:underline}
section.info .more-row{margin-top:22px}

.steps{list-style:none;counter-reset:step;margin-top:22px;display:grid;gap:14px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{
  counter-increment:step;position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:56px 20px 20px;color:var(--body);font-size:.97rem;line-height:1.6;box-shadow:var(--shadow-sm);
}
.steps li strong{color:var(--text)}
.steps li::before{
  content:counter(step);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}

#method{border-top:1px solid var(--border)}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;max-width:760px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:650;padding:16px 50px 16px 20px;list-style:none;position:relative;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{background:var(--surface-2)}
section.info.faq details p{padding:0 20px 18px;margin:0;font-size:1rem}

.cta-end{padding-top:12px;padding-bottom:44px}
.cta-band{
  position:relative;overflow:hidden;text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--shadow);padding:44px 24px;
}
.cta-band::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--d) 0 25%,var(--i) 25% 50%,var(--s) 50% 75%,var(--c) 75% 100%)}
.cta-band h2{font-size:clamp(1.4rem,3vw,1.8rem);letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance}
.cta-band p{color:var(--body);max-width:520px;margin:0 auto 22px;font-size:1.05rem}
#privacy{border-top:1px solid var(--border)}
#privacy p:last-child{font-size:.9rem}

/* ------------------------------------------------------------------- quiz */
#quiz{padding-top:40px;padding-bottom:64px}
.q-card{max-width:660px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:28px 28px 22px}
.q-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.84rem;color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
.q-bar{height:6px;border-radius:3px;background:var(--track);overflow:hidden;margin-bottom:26px}
.q-bar>div{height:100%;border-radius:3px;background:var(--accent);transition:width .25s ease}
.q-instruction{font-size:1.2rem;line-height:1.35;letter-spacing:-.01em;margin-bottom:18px}
.q-instruction:focus{outline:none}
.q-instruction:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.q-head{display:grid;grid-template-columns:1fr 92px 92px;gap:10px;align-items:end;margin-bottom:8px}
.q-head span{font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:center;line-height:1.25}
.q-head span:nth-child(2){color:var(--s-ink)}
.q-head span:nth-child(3){color:var(--d-ink)}
.q-row{display:grid;grid-template-columns:1fr 92px 92px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}
.q-word{font-weight:650;font-size:1.06rem}
.q-word::first-letter{text-transform:uppercase}
.q-pick{
  height:46px;border-radius:11px;border:1.5px solid var(--border-strong);background:var(--surface);
  cursor:pointer;font:inherit;font-size:1.1rem;font-weight:800;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.q-pick:empty::before{font-weight:700;opacity:.35}
.q-pick.pick-most:empty::before{content:"\2713"}
.q-pick.pick-least:empty::before{content:"\2715"}
.q-pick.pick-most:hover{border-color:var(--s);background:var(--s-soft);color:var(--s-ink)}
.q-pick.pick-least:hover{border-color:var(--d);background:var(--d-soft);color:var(--d-ink)}
.q-pick:hover:empty::before{opacity:.8}
.q-pick[aria-pressed="true"].pick-most{background:var(--s);border-color:var(--s);color:#fff}
.q-pick[aria-pressed="true"].pick-least{background:var(--d);border-color:var(--d);color:#fff}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
.q-nav .btn{padding:11px 22px;font-size:.95rem}
.q-hint{font-size:.84rem;color:var(--muted);text-align:center}

/* ----------------------------------------------------------------- results */
#results{padding-top:48px;padding-bottom:34px}
.r-head{text-align:center;margin-bottom:28px}
.r-head h2{font-size:clamp(1.8rem,4.4vw,2.5rem);letter-spacing:-.025em;line-height:1.1;margin-bottom:12px}
.r-style{font-size:1.18rem;color:var(--body)}
.r-style b{color:var(--text)}
.r-sub{margin-top:6px;font-size:1rem;color:var(--muted)}
.r-blend{display:inline-block;margin-top:16px;padding:10px 18px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.95rem;text-decoration:none}
.r-blend:hover{color:var(--accent-hover);text-decoration:underline}
.r-chart{max-width:680px;margin:0 auto 14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 26px 16px;box-shadow:var(--shadow)}
.bar-row{display:grid;grid-template-columns:minmax(130px,190px) 1fr 52px;gap:14px;align-items:center;padding:10px 0}
.bar-name{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:650;line-height:1.3}
.bar-name .primary-tag{font-size:.6rem;color:var(--accent);margin-left:2px}
.bar-track{height:14px;border-radius:7px;background:var(--track);overflow:hidden}
.bar-fill{height:100%;border-radius:7px;min-width:4px;transition:width .6s ease}
.bar-fill.dim-D{background:var(--d)} .bar-fill.dim-I{background:var(--i)}
.bar-fill.dim-S{background:var(--s)} .bar-fill.dim-C{background:var(--c)}
.bar-val{font-size:.95rem;font-weight:750;text-align:right;font-variant-numeric:tabular-nums}
.r-note{max-width:620px;margin:0 auto 36px;font-size:.86rem;color:var(--muted);text-align:center}
.r-profile{max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.r-profile h3{font-size:1.45rem;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:center;gap:12px}
.r-tagline{color:var(--muted);font-weight:650;font-size:.98rem;margin-bottom:14px}
.r-overview{color:var(--body);font-size:1.03rem;line-height:1.7;margin-bottom:8px}
.r-cols h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:20px 0 6px}
.r-cols ul{list-style:none}
.r-cols li{padding:5px 0 5px 24px;position:relative;font-size:.98rem;color:var(--body)}
.r-cols li::before{content:"";position:absolute;left:5px;top:.9em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.r-next{max-width:680px;margin:26px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 26px}
.r-next h3{font-size:1.05rem;margin-bottom:8px}
.r-next ul{list-style:none}
.r-next li{border-top:1px solid var(--border)}
.r-next li:first-child{border-top:0}
.r-next a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;font-weight:650;text-decoration:none;color:var(--text)}
.r-next a::after{content:"\2192";color:var(--muted);transition:transform .15s ease}
.r-next a:hover{color:var(--accent)}
.r-next a:hover::after{transform:translateX(3px);color:var(--accent)}
.r-actions{text-align:center;margin:30px 0 10px}
.r-shared-banner{display:inline-block;font-size:.85rem;font-weight:650;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:4px 14px;background:var(--surface);margin-bottom:14px}
.share-box{max-width:680px;margin:34px auto 0;text-align:center}
.share-box h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.share-row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;font:inherit;box-shadow:var(--shadow-sm)}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.share-pill{width:auto;border-radius:999px;padding:0 16px;gap:8px;font-weight:650;font-size:.92rem}
.share-native{background:var(--accent);color:var(--accent-ink);border:0}
.share-native:hover{background:var(--accent-hover);color:var(--accent-ink)}

/* --------------------------------------------------------------------- ads */
.ad-slot{margin:34px auto;text-align:center}
.ad-slot .ad-label{display:block;font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad-slot ins.adsbygoogle{display:block;min-height:280px}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}
/* Collapsed until AdSense reports a fill. While the account is unapproved no status is
   ever set, so an empty labelled box would otherwise sit on the page. Do not replace
   this with a timeout. */
.ad-slot{display:none}
.ad-slot.ad-filled{display:block}
.ad-slot:has(ins:not([data-ad-slot])){display:none}
body>main>.ad-slot{max-width:var(--w-page);padding:0 20px}
#results .ad-slot{max-width:680px;padding:0;margin:26px auto}

/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--border);background:var(--surface-2);margin-top:48px;padding:36px 0 44px}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border)}
@media (min-width:640px){.foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
.foot-nav a{font-size:.9rem;font-weight:550;color:var(--body);text-decoration:none;padding:5px 0}
.foot-nav a:hover{color:var(--accent);text-decoration:underline}
footer p{font-size:.82rem;line-height:1.6;color:var(--muted);max-width:760px}
footer .byline{margin-top:10px}
footer .byline a{color:inherit}
.foot-links{display:flex;gap:6px 20px;flex-wrap:wrap;margin-top:14px;font-size:.86rem}
.foot-links a,.foot-links .linkbtn{color:var(--muted)}
.foot-links a:hover,.foot-links .linkbtn:hover{color:var(--text)}

/* ------------------------------------------------------------ small screens */
@media (max-width:560px){
  .hero{padding-top:40px;padding-bottom:40px}
  main.wrap{padding-top:24px}
  article h2{margin-top:38px;font-size:1.32rem}
  article p,article ul li,article ol li{font-size:1.02rem}
  section.info{padding-top:34px;padding-bottom:34px}
  .q-card{padding:20px 16px 18px;border-radius:16px}
  .q-head,.q-row{grid-template-columns:1fr 68px 68px;gap:8px}
  .q-pick{height:48px}
  .q-hint{display:none}
  .bar-row{grid-template-columns:minmax(96px,130px) 1fr 44px;gap:10px}
  .r-profile{padding:22px 18px}
  .r-chart{padding:16px 16px 10px}
  .cta-box{padding:24px 20px}
  .cta-band{padding:34px 18px}
}

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

/* ------------------------------------------------------------------- print */
@media print{
  header,footer,.ad-slot,.share-box,.r-actions,.toc,.cta-box,.cta-band,nav.site,#hero{display:none !important}
  body{background:#fff;color:#000}
  .r-chart,.r-profile,.r-next{box-shadow:none;border-color:#ccc}
  a{color:inherit}
}