/* autoswitchkvm.com: warm, rounded, a little playful. No external requests (CSP: 'self'). */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/assets/fonts/nunito-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+25B8, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/assets/fonts/nunito-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #fff7ec;
  --bg-tint: #fdecd6;
  --card: #ffffff;
  --ink: #2b2540;
  --ink-soft: #5f5873;
  --line: #2b25401f;
  --blue: #2f73e6;
  --blue-soft: #dbe8ff;
  --coral: #ff6b57;
  --coral-soft: #ffe1db;
  --mint: #22b27f;
  --mint-soft: #d4f5e7;
  --lemon: #ffcf4a;
  --lilac: #b9a6ff;
  --shadow: 0 6px 0 #2b254014, 0 18px 40px -18px #2b25403d;
  --radius: 22px;
  --outline: #2b2540;   /* chunky borders */
  --drop: #2b2540;      /* solid offset shadows */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* demo */
  --screen-off: #3b3752;
  --body: #e9e4f2;
  --body-edge: #cbc3dc;
  --mac-screen: #c9b8ff;
  --pc-screen: #a9cbff;
  --window: #ffffffd9;
  --pad: #f2f0f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a2e;
    --bg-tint: #232139;
    --card: #2a2843;
    --ink: #f5f0e8;
    --ink-soft: #c2bccf;
    --line: #f5f0e81f;
    --blue: #6ea2ff;
    --blue-soft: #2a3b66;
    --coral: #ff8a78;
    --coral-soft: #4a2c35;
    --mint: #4fd6a3;
    --mint-soft: #1f4239;
    --shadow: 0 6px 0 #00000033, 0 18px 40px -18px #00000080;
    --outline: #ffffff30;
    --drop: #0c0b16;
    --screen-off: #14131f;
    --body: #3a3756;
    --body-edge: #4c4870;
    --mac-screen: #7e68d9;
    --pc-screen: #4f7fd1;
    --window: #ffffffcc;
    --pad: #d9d6e2;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.1rem); font-weight: 900; }
@media (min-width: 600px) { .nowrap { white-space: nowrap; } }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 900; }
h3 { font-size: 1.15rem; font-weight: 800; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 32px); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 8px; }
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.topnav a:hover { color: var(--blue); }
@media (max-width: 680px) {
  .topnav a:not(.btn) { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 800; font-size: 1.02rem; text-decoration: none;
  border: 2px solid var(--outline); color: var(--ink); background: var(--card);
  box-shadow: 0 4px 0 var(--drop);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--drop); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--ghost { background: var(--card); }
.btn--small { padding: 8px 16px; font-size: .95rem; box-shadow: 0 3px 0 var(--drop); }
.btn--big { padding: 18px 30px; font-size: 1.15rem; }
.topnav .btn--small { color: #fff; background: var(--blue); }

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 90px) 0 clamp(50px, 7vw, 100px); }
.hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }
.eyebrow { display: inline-block; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
.hl { background: linear-gradient(transparent 62%, var(--lemon) 62%, var(--lemon) 92%, transparent 92%); padding: 0 .08em; }
@media (prefers-color-scheme: dark) { .hl { background: none; color: var(--lemon); } }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.25rem); color: var(--ink-soft); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 14px; }
.fineprint { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }

/* ---------- Demo ---------- */
.demo { margin: 0; background: var(--card); border: 2px solid var(--outline); border-radius: 28px; box-shadow: 0 8px 0 var(--drop); padding: 18px 18px 14px; }
.desk { position: relative; aspect-ratio: 400 / 330; }
.computer { position: absolute; top: 0; width: 40%; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; }
.computer--mac { left: 2%; }
.computer--pc { right: 2%; }
.computer svg { width: 100%; height: auto; overflow: visible; }
.computer__body { fill: var(--body); stroke: var(--body-edge); stroke-width: 3; }
.computer__screen { fill: var(--screen-off); transition: fill .4s ease; }
.computer__window { fill: var(--window); }
.computer__window--alt { opacity: .75; }
.computer__cursor { fill: #1d1a2b; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.computer__stand, .computer__foot { fill: var(--body-edge); }
.computer__asleep text { fill: #ffffff66; font: 800 18px var(--font); text-anchor: middle; letter-spacing: 2px; }
.computer__awake, .computer__asleep { transition: opacity .4s ease; }
.computer__label { display: inline-block; font-weight: 900; font-size: .95rem; padding: 2px 12px; border-radius: 999px; background: var(--bg-tint); color: var(--ink-soft); transition: background .3s, color .3s; }

.demo[data-active="mac"] .computer--mac .computer__screen { fill: var(--mac-screen); }
.demo[data-active="pc"] .computer--pc .computer__screen { fill: var(--pc-screen); }
.demo[data-active="mac"] .computer--pc .computer__awake,
.demo[data-active="pc"] .computer--mac .computer__awake { opacity: 0; }
.demo[data-active="mac"] .computer--mac .computer__asleep,
.demo[data-active="pc"] .computer--pc .computer__asleep { opacity: 0; }
.demo[data-active="mac"] .computer--mac .computer__label,
.demo[data-active="pc"] .computer--pc .computer__label { background: var(--mint); color: #fff; }

.computer__cursor { animation: wiggle 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes wiggle {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-14px, -6px); }
  60% { transform: translate(8px, -12px); }
}

.cables { position: absolute; inset: 0; width: 100%; height: 100%; }
.cable { fill: none; stroke: var(--body-edge); stroke-width: 5; stroke-linecap: round; transition: stroke .4s; }
.demo[data-active="mac"] .cable--mac,
.demo[data-active="pc"] .cable--pc { stroke: var(--mint); }

/* The buddies sit in front of the active computer and hop across when it changes. */
.buddy { position: absolute; bottom: 26%; z-index: 2; text-align: center; transition: left 1s cubic-bezier(.5, 0, .3, 1); }
.buddy--trackpad { width: 16%; }
.buddy--keyboard { width: 22%; transition-delay: .18s; }
.demo[data-active="mac"] .buddy--trackpad { left: 3%; }
.demo[data-active="mac"] .buddy--keyboard { left: 21%; }
.demo[data-active="pc"] .buddy--trackpad { left: 57%; }
.demo[data-active="pc"] .buddy--keyboard { left: 75%; }
.buddy svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 0 #2b254026); }
.buddy__shape { fill: var(--pad); stroke: #2b2540; stroke-width: 3; }
.buddy__eyes circle { fill: #2b2540; }
.buddy__eyes { animation: blink 4s infinite; transform-box: fill-box; transform-origin: center; }
.buddy--keyboard .buddy__eyes { animation-delay: 1.3s; }
.buddy__smile { fill: none; stroke: #2b2540; stroke-width: 3; stroke-linecap: round; }
.buddy__blush { fill: var(--coral); opacity: .35; }
.buddy__keys rect { fill: #c9c4d6; }
.buddy__name { display: block; font-size: .72rem; font-weight: 800; color: var(--ink-soft); margin-top: 2px; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.buddy.is-hopping .buddy__hop { animation: hop 1s ease-in-out; }
.buddy--keyboard.is-hopping .buddy__hop { animation-delay: .18s; }
@keyframes hop {
  0%, 33%, 66%, 100% { transform: translateY(0); }
  16%, 50%, 83% { transform: translateY(-22px) rotate(-3deg); }
}

.bubble {
  position: absolute; top: 45%; z-index: 3; padding: 4px 12px; border-radius: 999px;
  background: var(--mint); color: #fff; font-weight: 900; font-size: .85rem;
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .25s, transform .25s; pointer-events: none;
}
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -6px; border: 6px solid transparent; border-top-color: var(--mint); border-bottom: 0; }
.demo[data-active="mac"] .bubble { left: 5%; }
.demo[data-active="pc"] .bubble { left: 59%; }
.demo.is-paired .bubble { opacity: 1; transform: none; }

.kvm {
  position: absolute; left: 50%; bottom: 9%; z-index: 2; transform: translateX(-50%);
  width: 28%; aspect-ratio: 3 / 1.1; display: flex; align-items: center; justify-content: space-around;
  padding: 0 6%; border-radius: 16px; border: 3px solid #2b2540; background: #3b3752;
  box-shadow: 0 5px 0 var(--drop); cursor: pointer; font: inherit;
}
.kvm__button {
  width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--coral);
  border: 3px solid #2b2540; box-shadow: 0 4px 0 #8f2f22; transition: transform .1s, box-shadow .1s;
}
.kvm:hover .kvm__button { transform: translateY(-1px); }
.kvm.is-pressed .kvm__button, .kvm:active .kvm__button { transform: translateY(3px); box-shadow: 0 1px 0 #8f2f22; }
.kvm__led { width: 12%; aspect-ratio: 1; border-radius: 50%; background: #6c6888; transition: background .3s, box-shadow .3s; }
.demo[data-active="mac"] .kvm__led--mac,
.demo[data-active="pc"] .kvm__led--pc { background: #5dffb8; box-shadow: 0 0 10px #5dffb8; }
.kvm__label { position: absolute; bottom: -2.1em; left: 0; right: 0; font-size: .7rem; font-weight: 900; letter-spacing: .15em; color: var(--ink-soft); }

.demo figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; text-align: center; }
.demo__hint { font-weight: 900; color: var(--coral); }
.demo__status { color: var(--ink-soft); font-weight: 600; font-size: .95rem; min-height: 1.6em; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint { background: var(--bg-tint); }
.section__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 46em; }

.shuffle { list-style: none; padding: 0; margin: 36px 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
@media (max-width: 900px) { .shuffle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shuffle { grid-template-columns: 1fr; } }
.shuffle li { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: relative; }
.shuffle li:nth-child(odd) { transform: rotate(-1.2deg); }
.shuffle li:nth-child(even) { transform: rotate(1deg); }
.shuffle p { color: var(--ink-soft); margin: 0; }
.shuffle__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-weight: 900; font-size: 1.2rem; margin-bottom: 12px; }
.punchline { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 900; margin: 0; }
.punchline::before { content: "→ "; color: var(--mint); }

.steps { list-style: none; padding: 0; margin: 36px 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.steps li { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 26px; }
.steps p { color: var(--ink-soft); margin: 0; }
.steps__badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--blue); color: #fff; font-weight: 900; font-size: 1.4rem; margin-bottom: 14px; box-shadow: 0 4px 0 var(--drop); }
.steps li:nth-child(2) .steps__badge { background: var(--coral); }
.steps li:nth-child(3) .steps__badge { background: var(--mint); }

.shots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(20px, 5vw, 64px); }
.shot { margin: 0; text-align: center; }
.shot img { width: 300px; height: auto; border-radius: 18px; box-shadow: var(--shadow); }
.shot:first-child img { transform: rotate(-2deg); }
.shot:last-child img { transform: rotate(2deg); }
.shot figcaption { margin-top: 16px; font-weight: 800; color: var(--ink-soft); }

.features { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.features li { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.features svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--blue-soft); fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.features li:nth-child(4n+2) svg { background: var(--coral-soft); stroke: var(--coral); }
.features li:nth-child(4n+3) svg { background: var(--mint-soft); stroke: var(--mint); }
.features li:nth-child(4n+4) svg { background: #f1e9ff; stroke: #7c5ce0; }
@media (prefers-color-scheme: dark) { .features li:nth-child(4n+4) svg { background: #3a3160; stroke: var(--lilac); } }
.features p { color: var(--ink-soft); margin: 0; font-size: 1rem; }

.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
@media (max-width: 760px) { .downloads { grid-template-columns: 1fr; } }
.dl { background: var(--card); border: 2px solid var(--outline); border-radius: var(--radius); padding: 28px; box-shadow: 0 6px 0 var(--drop); }
.dl h3 { font-size: 1.6rem; font-weight: 900; }
.dl__req { color: var(--ink-soft); font-weight: 700; }
.dl .btn { margin: 6px 0 18px; }
.dl__note { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.downloads__more { margin-top: 26px; color: var(--ink-soft); }

.faq { margin-top: 28px; display: grid; gap: 12px; }
.faq details { background: var(--card); border-radius: 18px; padding: 4px 22px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; font-weight: 800; font-size: 1.08rem; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--coral); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin: 0 0 16px; }

.finale { padding: clamp(60px, 9vw, 120px) 0; text-align: center; background: var(--blue); color: #fff; }
.finale h2 { color: #fff; }
.finale p { font-size: 1.2rem; opacity: .9; }
.finale .btn { background: var(--lemon); color: #2b2540; margin-top: 12px; border-color: #2b2540; box-shadow: 0 5px 0 #2b2540; }
@media (prefers-color-scheme: dark) { .finale { background: #24407a; } }

.footer { padding: 40px 0 50px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.footer__inner p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 12px; }
.footer__inner img { border-radius: 6px; }
.footer__small { font-size: .82rem; opacity: .8; }

/* ---------- 404 ---------- */
.lost { padding: clamp(60px, 10vw, 140px) 0; text-align: center; }
.lost p { color: var(--ink-soft); font-size: 1.15rem; }

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

/* ---------- Device guide (/devices/) ---------- */
.hero--page { padding-bottom: clamp(24px, 4vw, 40px); }
.glance-section { padding-top: clamp(36px, 5vw, 64px); }

/* At-a-glance table */
.glance { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.glance__row { display: grid; grid-template-columns: 1.3fr 1.6fr 110px 110px; gap: 12px; align-items: center; padding: 16px 24px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); transition: background .15s; }
a.glance__row:hover { background: var(--bg-tint); }
.glance__row--head { border-top: 0; font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: 14px; padding-bottom: 12px; }
.glance__kind { font-weight: 800; }
.glance__eg { color: var(--ink-soft); font-size: .95rem; }
.glance__os { text-align: center; }
.mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; font-weight: 900; font-size: 1.15rem; line-height: 1; }
.mark small { font-size: .62rem; font-weight: 800; letter-spacing: .02em; margin-top: 2px; }
.mark--yes { background: var(--mint-soft); color: var(--mint); }
.mark--no { background: var(--coral-soft); color: var(--coral); }
.mark--test { background: #fff3c4; color: #8a6400; }
@media (prefers-color-scheme: dark) { .mark--test { background: #4a3d12; color: var(--lemon); } }
.glance__note { margin-top: 18px; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 720px) {
  .glance__row { grid-template-columns: 1fr 64px 64px; padding: 14px 16px; }
  .glance__eg { grid-column: 1; grid-row: 2; font-size: .88rem; }
  .glance__row--head span:nth-child(2) { display: none; }
  .glance__row .glance__os:nth-of-type(3) { grid-column: 2; grid-row: 1 / span 2; }
  .glance__row .glance__os:nth-of-type(4) { grid-column: 3; grid-row: 1 / span 2; }
}

/* Kind cards */
.kinds { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kinds--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .kinds { grid-template-columns: 1fr; } .kinds--two { grid-template-columns: 1fr; } }
.kind { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border-top: 6px solid var(--line); display: flex; flex-direction: column; scroll-margin-top: 90px; }
.kind--yes { border-top-color: var(--mint); }
.kind--no { border-top-color: var(--coral); }
.kind--partly { border-top-color: var(--lemon); }
.kind__icon { width: 52px; height: 52px; padding: 10px; border-radius: 16px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.kind--yes .kind__icon { background: var(--mint-soft); stroke: var(--mint); }
.kind--no .kind__icon { background: var(--coral-soft); stroke: var(--coral); }
.kind--partly .kind__icon { background: #fff3c4; stroke: #8a6400; }
@media (prefers-color-scheme: dark) { .kind--partly .kind__icon { background: #4a3d12; stroke: var(--lemon); } }
.kind h3 { font-size: 1.25rem; margin-bottom: .35em; }
.kind__one { color: var(--ink-soft); margin: 0 0 14px; }
.tags { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: .82rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-tint); color: var(--ink); }
.kind__do { font-size: .95rem; margin: auto 0 0; padding-top: 4px; }
.kind__why { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.kind__why summary { cursor: pointer; font-weight: 800; font-size: .9rem; color: var(--blue); list-style: none; }
.kind__why summary::-webkit-details-marker { display: none; }
.kind__why summary::after { content: " +"; }
.kind__why[open] summary::after { content: " −"; }
.kind__why p { color: var(--ink-soft); font-size: .93rem; margin: 8px 0 0; }

/* Tips */
.tips { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .tips { grid-template-columns: 1fr; } }
.tip { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.tip__icon { flex: none; width: 48px; height: 48px; padding: 9px; border-radius: 14px; background: var(--blue-soft); fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tip h3 { font-size: 1.1rem; margin-bottom: .3em; }
.tip p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

/* Test: steps in a row + outcomes */
.steps--row { list-style: none; padding: 0; margin: 28px 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .steps--row { grid-template-columns: 1fr; } }
.steps--row li { padding: 22px; }
.steps--row h3 { font-size: 1.05rem; margin: 0 0 .2em; }
.outcomes { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.outcome { padding: 12px 16px; border-radius: 14px; color: var(--ink-soft); }
.outcome strong { color: var(--ink); margin-right: 8px; }
.outcome--yes { background: var(--mint-soft); }
.outcome--no { background: var(--coral-soft); }

/* ---------- Works with (home) ---------- */
.works { padding-top: clamp(20px, 3vw, 40px); }
.works__list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .works__list { grid-template-columns: 1fr; } }
.works__item { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border-top: 6px solid var(--mint); }
.works__item--other { border-top-color: var(--lilac); }
.works__item h3 { font-size: 1.2rem; }
.works__item p { color: var(--ink-soft); margin: 0 0 .8em; }
.works__how { font-weight: 800; font-size: .92rem; color: var(--ink) !important; margin: 0 !important; }