/* Practice Pages — sales site */
:root {
  --paper: #F8F6F1; --surface: #FFFFFF; --tint: #EFEBE2; --ink: #161B26; --muted: #565D6B; --line: #E2DDD2;
  --accent: #B8432A; --accent-dark: #943420; --accent-soft: #F6DFD6; --accent-on-dark: #F0A48E; --sage: #DDE8E0;
  --display: "Fraunces", Georgia, serif; --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 16px; --max: 1200px; color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); }
h1 em { font-style: italic; color: var(--accent); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 58ch; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; }
.sec { padding-block: clamp(4rem, 9vw, 7rem); }
.sec--tight { padding-top: clamp(1rem, 3vw, 2rem); }
.sec--tint { background: var(--tint); }
.head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 62ch; align-content: start; }
.head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; max-width: none; }
.head--row > div { display: grid; gap: .9rem; max-width: 40ch; }
.link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }
.note { margin-top: 2rem; color: var(--muted); text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px;
  border: 1.5px solid var(--accent); background: var(--accent); color: #fff; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--sm { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .93rem; }
.btn--lg { min-height: 3.4rem; padding: .85rem 1.7rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(248,246,241,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font: 600 1.3rem/1 var(--display); letter-spacing: -0.01em; }
.logo:hover { color: var(--ink); }
.logo--light { color: #fff; } .logo--light:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.nav ul a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--accent); }
.menu-btn { display: none; min-height: 2.6rem; padding: .4rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font: 700 .95rem var(--body); color: var(--ink); cursor: pointer; }
@media (max-width: 880px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem max(20px, env(safe-area-inset-left, 0px)) 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
}
@media (min-width: 881px) { .nav[hidden] { display: flex !important; } }

/* Hero */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-copy { display: grid; gap: 1.5rem; }
.hero-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-weight: 700; font-size: .95rem; }
.hero-ticks li { display: inline-flex; align-items: center; gap: .35rem; }
.hero-ticks svg { color: var(--accent); }
.hero-art { position: relative; padding: 0 2.5rem 3rem 0; }
.browser { background: var(--surface); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(22,27,38,.28), 0 0 0 1px rgba(22,27,38,.06); overflow: hidden; transform: rotate(-1.2deg); }
.browser-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; background: #F1EEE8; border-bottom: 1px solid var(--line); }
.browser-bar span { width: .62rem; height: .62rem; border-radius: 50%; background: #D9D3C7; }
.browser-bar em { margin-left: .8rem; font-style: normal; font-size: .75rem; color: var(--muted); background: #fff; padding: .15rem .8rem; border-radius: 999px; }
.phone { position: absolute; right: 0; bottom: 0; width: 30%; border-radius: 22px; overflow: hidden; border: 7px solid var(--ink); box-shadow: 0 24px 50px -16px rgba(22,27,38,.4); background: var(--ink); transform: rotate(2deg); }
.phone img { aspect-ratio: 390 / 700; object-fit: cover; object-position: top; }
.chip { position: absolute; display: flex; gap: .65rem; align-items: center; background: var(--surface); border-radius: 14px; padding: .7rem 1rem; box-shadow: 0 16px 36px -12px rgba(22,27,38,.3); font-size: .86rem; line-height: 1.3; }
.chip svg { color: var(--accent); flex: none; }
.chip strong { display: block; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.chip--a { left: -1.5rem; bottom: 1.5rem; }
.chip--b { right: 1rem; top: -1.2rem; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 640px; } .chip--a { left: .5rem; } }
@media (max-width: 520px) { .hero-art { padding: 0 1.25rem 2.5rem 0; } .chip--b { display: none; } .chip--a { bottom: .5rem; } }

/* Profession strip */
.profs { border-block: 1px solid var(--line); background: var(--surface); }
.profs .wrap { display: flex; align-items: center; gap: 1rem 2rem; padding-block: 1.25rem; flex-wrap: wrap; }
.profs-label { font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.prof-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; flex: 1; }
.prof-list a { display: inline-flex; flex-direction: column; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--paper); line-height: 1.3; transition: border-color .15s, transform .15s; }
.prof-list a:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.prof-list strong { font-size: .95rem; }
.prof-list span { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--accent); font-weight: 700; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps li { counter-increment: s; position: relative; padding: 1.75rem 1.5rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: .55rem; align-content: start; }
.steps li::before { content: "0" counter(s); font: 500 2.4rem/1 var(--display); color: var(--accent); margin-bottom: .4rem; }
.steps p { color: var(--muted); }

/* Design cards */
.dgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .2s, box-shadow .2s; }
.dcard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(22,27,38,.35); }
.dcard[hidden] { display: none; }
.dcard-shot { position: relative; background: var(--tint); padding: 1.1rem 1.1rem 0; overflow: hidden; aspect-ratio: 16 / 10.5; }
.dcard-desk { border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(22,27,38,.08); }
.dcard-mob { position: absolute; right: .9rem; bottom: -1.2rem; width: 24%; border-radius: 12px; border: 4px solid var(--ink); box-shadow: 0 12px 24px -8px rgba(22,27,38,.35); }
.dcard-body { padding: 1.25rem 1.35rem 1.4rem; display: grid; gap: .5rem; align-content: start; }
.dcard-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.dcard-body > p { font-size: .93rem; font-weight: 600; }
.dcard-body .muted { font-weight: 500; }
.swatch { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.swatch::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.dcard-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.dcard-actions .btn { flex: 1 1 auto; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.tabs button { font: 700 .93rem var(--body); padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 2.75rem; }
.tabs button:hover { border-color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Included */
.inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.inc li { background: var(--surface); padding: 1.6rem 1.5rem; display: grid; gap: .5rem; align-content: start; }
.inc p { color: var(--muted); font-size: .97rem; }
.inc h3 { font-size: 1.2rem; }
.inc-ic { width: 2.8rem; height: 2.8rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); margin-bottom: .3rem; }
.inc--list { grid-template-columns: minmax(0, 1fr); background: none; border: 0; gap: 1.1rem; }
.inc--list li { background: none; padding: 0; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
.inc--list li div { display: grid; gap: .25rem; }
.inc--list .inc-ic { margin: 0; }

/* Table */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tbl tbody th { font-weight: 700; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--muted); }
.tbl .us { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.tbl thead .us { color: var(--accent-dark); }

/* Pricing */
.price-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .price-split { grid-template-columns: minmax(0, 1fr); } }
.price-card { background: var(--ink); color: #fff; border-radius: calc(var(--r) + 8px); padding: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; box-shadow: 0 30px 60px -30px rgba(22,27,38,.6); }
.toggle { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: .3rem; justify-self: start; flex-wrap: wrap; }
.toggle button { font: 700 .92rem var(--body); color: #CBD0DA; background: none; border: 0; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; min-height: 2.5rem; }
.toggle button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.save { font-size: .75rem; color: var(--accent-on-dark); margin-left: .25rem; }
.toggle button[aria-pressed="true"] .save { color: var(--accent); }
.price { display: flex; align-items: baseline; gap: .5rem; }
.amt { font: 500 clamp(3.2rem, 6vw, 4.2rem)/1 var(--display); letter-spacing: -0.02em; }
.per { color: #CBD0DA; font-weight: 600; }
.price-sub { color: #CBD0DA; font-weight: 600; margin-top: -.6rem; }
.price-card .ticks { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.2rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .65rem; }
.ticks svg { color: var(--accent-on-dark); margin-top: .2rem; }
.ticks--plain svg { color: var(--accent); }
.ticks--plain { font-weight: 600; margin-top: .5rem; }
.tiny { font-size: .85rem; color: inherit; opacity: .8; display: inline-flex; gap: .35rem; align-items: center; justify-content: center; }
.price-card .btn { background: var(--accent); border-color: var(--accent); }
.price-card .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* FAQ */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .faq-split { grid-template-columns: minmax(0, 1fr); } }
.faq { display: grid; gap: .7rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 1.35rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--body); color: var(--accent); flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 1.35rem 1.25rem; color: var(--muted); }

/* CTA + footer */
.cta { background: var(--accent); color: #fff; }
.cta-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.75rem; padding-block: clamp(3rem, 7vw, 4.5rem); }
.cta-in > div:first-child { display: grid; gap: .7rem; max-width: 40rem; }
.cta p { color: #FBE6DF; font-size: 1.1rem; }
.cta .btn--light { color: var(--accent-dark); }
.ftr { background: var(--ink); color: #C9CED8; padding-block: 3.5rem 2rem; font-size: .95rem; }
.ftr a { color: #E6E9EF; text-decoration: none; } .ftr a:hover { color: #fff; text-decoration: underline; }
.ftr-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr-grid > div:first-child { grid-column: 1 / -1; } }
.ftr-note { margin-top: .9rem; max-width: 32ch; }
.ftr-h { color: #fff; font-weight: 800; margin-bottom: .7rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ftr-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #2B3242; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .85rem; }

/* Inner pages */
.phead { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.phead .wrap { display: grid; gap: 1rem; }
.prose { display: grid; gap: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 1rem; }
.prose p { color: var(--muted); }
.draft { background: var(--accent-soft); border-radius: 12px; padding: 1rem 1.2rem; color: var(--ink) !important; }

/* Forms */
.start-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .start-grid { grid-template-columns: minmax(0, 1fr); } .side { order: -1; } }
.form { display: grid; gap: 1.5rem; min-width: 0; }
.form-steps { list-style: none; margin: 0; padding: 0; counter-reset: fs; display: grid; gap: 1.25rem; }
.form-steps > li { counter-increment: fs; }
fieldset { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: clamp(1.25rem, 3vw, 1.75rem); margin: 0; display: grid; gap: 1.1rem; min-width: 0; }
legend { font: 500 1.35rem var(--display); padding: 0 .4rem; display: inline-flex; align-items: center; gap: .6rem; }
legend::before { content: counter(fs); width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: #fff; display: inline-grid; place-items: center; font: 700 .9rem var(--body); }
.field { display: grid; gap: .4rem; min-width: 0; }
.field label, .label { font-weight: 700; font-size: .95rem; }
.opt { font-weight: 500; color: var(--muted); }
.two { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); font: 400 1rem var(--body); color: var(--ink); }
textarea { resize: vertical; min-height: 5.5rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.check, .radio { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; cursor: pointer; }
.check input, .radio input, .plan input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--accent); flex: none; }
.plan { display: flex; gap: .8rem; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer; }
.plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan span { display: grid; color: var(--muted); } .plan strong { color: var(--ink); }
.hint { color: var(--muted); font-size: .92rem; }
.hp { display: none !important; }
.form-msg { padding: 1rem 1.2rem; border-radius: 12px; background: var(--sage); font-weight: 700; }
.chosen { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .75rem; border-radius: 12px; background: var(--tint); }
.chosen[hidden] { display: none; }
.chosen img { border-radius: 8px; }
.chosen-name { font: 500 1.25rem var(--display); }
.side { display: grid; gap: 1rem; position: sticky; top: 6rem; }
@media (max-width: 900px) { .side { position: static; } }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; display: grid; gap: .7rem; }
.mini-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; font-weight: 600; }
.mini-steps li::marker { color: var(--accent); font-weight: 800; }
.side-price { font: 500 2.4rem/1 var(--display); } .side-price span { font: 600 1rem var(--body); color: var(--muted); margin-left: .3rem; }
.pay-step { background: var(--surface); border: 1.5px solid var(--accent); border-radius: calc(var(--r) + 4px); padding: clamp(1.75rem, 5vw, 3rem); display: grid; gap: 1.1rem; justify-items: start; }
.pay-step[hidden] { display: none; }
.pay-ic { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--sage); color: #2E5B4F; display: grid; place-items: center; }
.pay-step .tiny { justify-content: flex-start; opacity: 1; color: var(--muted); }
@media (max-width: 760px) { .profs .wrap { flex-direction: column; align-items: flex-start; } .prof-list { flex: 0 1 auto; } }

/* ---- v2: colour dots, social kit ---- */
.dstyle { font-family: var(--body); font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-left: .35rem; }
.dots { display: flex; align-items: center; gap: .5rem; }
.dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0; cursor: pointer; border: 0;
  background: linear-gradient(135deg, var(--sb) 0 45%, var(--sw) 45% 100%); box-shadow: 0 0 0 1px rgba(22,27,38,.18); }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.dot:focus-visible { outline-offset: 4px; }
.dot-name { font-size: .88rem; font-weight: 700; color: var(--muted); margin-left: .25rem; }
.kit-toggle { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .3rem 0; font: 700 .9rem var(--body); color: var(--accent); cursor: pointer; }
.kit-toggle:hover { text-decoration: underline; }
.kit-strip { display: grid; grid-template-columns: 1fr 1fr .62fr; gap: .45rem; align-items: start; }
.kit-strip[hidden] { display: none; }
.kit-strip img { border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.kit-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .kit-split { grid-template-columns: minmax(0, 1fr); } }
.kit-collage { display: grid; grid-template-columns: 1fr .72fr 1fr; gap: .9rem; align-items: center; }
.kit-collage img { border-radius: 10px; box-shadow: 0 18px 36px -18px rgba(22,27,38,.35); }
.kit-collage img:nth-child(1) { transform: rotate(-2deg); } .kit-collage img:nth-child(3) { transform: rotate(2deg); }
.kit-collage img:nth-child(4) { grid-column: 1 / -1; }
.kit-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.kit-controls .tabs { margin: 0; }
.kit-dots[hidden], .kit-set[hidden] { display: none; }
.kit-dots { display: flex; align-items: center; gap: .5rem; }
.kit-set { display: grid; gap: 1.25rem; }
.kit-row { display: grid; gap: 1.25rem; align-items: start; }
.kit-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .kit-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit-set figure { margin: 0; display: grid; gap: .5rem; }
.kit-set img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(22,27,38,.35); width: 100%; }
.kit-set figcaption { font-size: .88rem; font-weight: 700; color: var(--muted); }
.kit-row--3 figure:has(img[height="533"]) img { max-width: 70%; }