:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --paper-deep: #e8e4d9;
  --ink: #17221d;
  --muted: #68706a;
  --line: #d4d6cc;
  --forest: #b84d16;
  --forest-dark: #903b10;
  --forest-fill: #b84d16;
  --forest-fill-hover: #903b10;
  --mint: #f5d8c6;
  --tomato: #e96f4b;
  --mustard: #e9bc53;
  --white: #fffdf8;
  --surface: #fffdf8;
  --body-copy: #3f4942;
  --callout-bg: #fbf4e6;
  --callout-border: #ead6ad;
  --callout-text: #634e2c;
  --line-strong: #23362c;
  --shadow: 0 16px 50px rgba(23, 34, 29, .08);
  --radius: 18px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151a18;
  --paper-deep: #1d2421;
  --ink: #f1eee8;
  --muted: #aeb7b1;
  --line: #39443e;
  --forest: #ffad79;
  --forest-dark: #e58b50;
  --forest-fill: #a94414;
  --forest-fill-hover: #88370f;
  --mint: #352820;
  --tomato: #ff9c72;
  --mustard: #edc16d;
  --surface: #202724;
  --body-copy: #d6ddd8;
  --callout-bg: #30281f;
  --callout-border: #6f5537;
  --callout-text: #efd9b0;
  --line-strong: #6a746e;
  --shadow: 0 16px 50px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 16px;
}
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--white); border-radius: 6px; }
.skip-link:focus { top: 16px; }

.site-shell { min-height: 100vh; }
.site-header { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .6rem; color: var(--ink); font: 800 1rem "DM Sans", sans-serif; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: .42rem; color: #fff; background: var(--forest-fill); font: 800 1rem "DM Sans", sans-serif; }
.brand img { display: block; width: 164px; height: auto; filter: hue-rotate(196deg) saturate(.8); }
.nav { display: flex; align-items: center; gap: 22px; font-size: .88rem; font-weight: 600; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--forest); }
.nav .nav-cta { color: var(--white); background: var(--forest-fill); padding: 9px 13px; border-radius: 999px; transition: background-color .18s ease; }
.nav .nav-cta:hover { color: var(--white); background: var(--forest-fill-hover); }
.menu-button { display: none; border: 1px solid var(--line); background: transparent; padding: 8px 11px; border-radius: 999px; }
.theme-toggle { flex: 0 0 auto; width: 2.45rem; height: 2.45rem; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.theme-toggle:hover { color: var(--forest); border-color: var(--forest); background: var(--mint); }
.theme-toggle:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.theme-icon { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

.page { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.utility { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; font-weight: 700; }
.utility::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); }
.eyebrow { color: var(--forest); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: .99; }
.display em { color: var(--forest); font-style: normal; }
.muted { color: var(--muted); }
.kicker { color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; font-weight: 700; }

.hero { padding: 84px 0 66px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr); gap: 70px; align-items: end; }
.hero h1 { max-width: 720px; margin: 16px 0 24px; font-size: clamp(3.5rem, 7vw, 7.1rem); }
.hero-copy { max-width: 565px; font-size: 1.12rem; color: var(--muted); }
.hero-copy strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; padding: 12px 17px; font-size: .9rem; font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, color .18s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--forest-fill); color: var(--white); }
.button-primary:hover { background: var(--forest-fill-hover); }
.button-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.button-quiet:hover { border-color: var(--forest); color: var(--forest); }

.hero-note { background: var(--forest-fill); color: var(--white); padding: 28px; border-radius: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hero-note::before { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; right: -35px; top: -35px; }
.hero-note::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; right: 17px; top: 22px; }
.hero-note .kicker { color: var(--mint); position: relative; z-index: 1; }
:root[data-theme="dark"] .hero-note .kicker { color: #ffe7d7; }
.hero-note h2 { font-family: var(--serif); font-size: 2.25rem; line-height: 1.05; font-weight: 500; letter-spacing: -.04em; margin: 19px 0 18px; max-width: 310px; position: relative; z-index: 1; }
.hero-note p { color: #fae4d6; font-size: .95rem; max-width: 300px; position: relative; z-index: 1; }
.note-link { display: inline-flex; margin-top: 20px; color: var(--white); font-size: .85rem; font-weight: 700; position: relative; z-index: 1; }

.section { padding: 2px 0 80px; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 28px; }
.section-header h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.65rem); letter-spacing: -.055em; line-height: 1; margin: 10px 0 0; }
.section-header p { max-width: 370px; color: var(--muted); margin: 0; }
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.task-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; min-height: 190px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.task-card:hover { transform: translateY(-3px); border-color: var(--forest); box-shadow: var(--shadow); }
.task-number { color: var(--tomato); font-weight: 700; font-size: .75rem; }
.task-card h3 { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 38px 0 9px; }
.task-card p { color: var(--muted); font-size: .9rem; margin: 0; }

.editorial-band { display: grid; grid-template-columns: 1fr 1.45fr; gap: 14px; align-items: stretch; }
.editorial-intro { padding: 28px 2px; }
.editorial-intro h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1; letter-spacing: -.06em; margin: 14px 0 18px; }
.editorial-intro p { color: var(--muted); max-width: 330px; }
.ad-card { background: var(--paper-deep); border: 1px dashed #b6bdb2; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; min-height: 245px; }
.ad-label { color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: .66rem; font-weight: 700; }
.ad-card h3 { font-family: var(--serif); font-size: 2rem; font-weight: 500; letter-spacing: -.04em; margin: 18px 0 8px; max-width: 360px; }
.ad-card p { color: var(--muted); max-width: 420px; margin: 0 0 22px; font-size: .9rem; }
.ad-card a { color: var(--forest); font-weight: 700; font-size: .85rem; }

.page-intro { padding: 70px 0 24px; max-width: 890px; }
.page-intro h1 { font-size: clamp(3.2rem, 6vw, 6.4rem); max-width: 900px; margin: 16px 0 22px; }
.page-intro p { color: var(--muted); font-size: 1.1rem; max-width: 640px; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--forest); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr); gap: 56px; align-items: start; padding-bottom: 84px; }
.article { max-width: 760px; }
.article h2 { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; margin: 42px 0 16px; }
.article h3 { font-size: 1.12rem; margin: 32px 0 8px; }
.article p { font-size: 1.05rem; color: var(--body-copy); }
.answer { background: var(--mint); padding: 24px 26px; border-radius: var(--radius); margin: 0 0 34px; }
.answer p { color: var(--ink); font-size: 1.1rem; margin: 9px 0 0; }
.rec-list { display: grid; gap: 12px; margin: 22px 0; }
.rec-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 19px 20px; background: var(--surface); display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: start; }
.rec-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--forest-fill); color: var(--white); font-weight: 700; }
.rec-card h3 { margin: 0 0 3px; font-family: var(--serif); font-size: 1.55rem; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.rec-card p { margin: 0; font-size: .87rem; color: var(--muted); }
.rec-fit { text-align: right; font-size: .69rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--forest); }
.source-link { display: inline-flex; margin-top: 9px; color: var(--forest); font-size: .75rem; font-weight: 700; }
.evidence { margin: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evidence summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .86rem; font-weight: 700; }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::after { content: "+"; color: var(--tomato); font-size: 1.3rem; }
.evidence[open] summary::after { content: "–"; }
.evidence-body { padding: 0 0 16px; color: var(--muted); font-size: .86rem; }
.evidence-body a { color: var(--forest); font-weight: 700; }
.side-stack { display: grid; gap: 13px; position: sticky; top: 20px; }
.side-card { border-top: 2px solid var(--ink); padding: 17px 0; }
.side-card h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; margin: 9px 0; }
.side-card p { color: var(--muted); font-size: .84rem; margin: 0; }
.side-card a { color: var(--forest); font-weight: 700; font-size: .82rem; }

.criteria-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.comparison { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); margin: 0 0 84px; }
.comparison-scroll-note { display: none; color: var(--forest); font-size: .75rem; font-weight: 700; margin: -10px 0 12px; }
.comparison-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.comparison-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.comparison-table th, .comparison-table td { padding: 16px 15px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .84rem; }
.comparison-table thead th { background: var(--forest-fill); color: var(--white); border-top: 0; border-color: rgba(255,255,255,.15); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; }
.comparison-table tbody th { color: var(--ink); font-weight: 700; }
.comparison-table tbody td { color: var(--muted); }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-head, .comparison-row { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); }
.comparison-head { background: var(--forest-fill); color: var(--white); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.comparison-head > div, .comparison-row > div { padding: 16px 15px; border-right: 1px solid var(--line); }
.comparison-head > div { border-color: rgba(255,255,255,.15); }
.comparison-row { border-top: 1px solid var(--line); font-size: .84rem; }
.comparison-row > div:first-child { font-weight: 700; color: var(--ink); }
.comparison-row > div:not(:first-child) { color: var(--muted); }
.comparison-row:last-child > div:last-child, .comparison-row > div:last-child, .comparison-head > div:last-child { border-right: 0; }
.example-flag { display: inline-flex; margin-top: 7px; color: var(--tomato); font-size: .63rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

.profile-shell { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; padding-bottom: 84px; }
.profile-card { background: var(--forest-fill); color: var(--white); border-radius: 22px; padding: 30px; min-height: 360px; position: relative; overflow: hidden; }
.profile-card::before { content: ""; position: absolute; width: 280px; height: 280px; right: -110px; bottom: -120px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.profile-card .app-symbol { width: 58px; height: 58px; background: var(--tomato); border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; position: relative; z-index: 1; }
.profile-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5vw, 5rem); letter-spacing: -.06em; line-height: .95; margin: 54px 0 16px; position: relative; z-index: 1; }
.profile-card p { color: #fae4d6; max-width: 410px; position: relative; z-index: 1; }
.profile-card .button { margin-top: 16px; background: var(--surface); color: var(--forest); position: relative; z-index: 1; }
.profile-meta { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.meta-cell { padding: 17px 0; border-bottom: 1px solid var(--line); }
.meta-cell:nth-child(odd) { margin-right: 18px; }
.meta-cell:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.meta-cell dt { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.meta-cell dd { margin: 5px 0 0; font-size: .9rem; font-weight: 600; }
.fit-limit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.fit-box { border-radius: 15px; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.fit-box strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--forest); margin-bottom: 8px; }
.fit-box p { color: var(--muted); font-size: .85rem; margin: 0; }

.site-footer { border-top: 1px solid var(--line); padding: 24px 0 35px; width: min(1240px, calc(100% - 48px)); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .78rem; }
.site-footer a { color: var(--forest); font-weight: 700; }
.footer-links { display: flex; gap: 18px; }

@media (max-width: 850px) {
  .site-header, .page, .site-footer { width: min(100% - 32px, 720px); }
  .site-header { padding-top: 18px; }
  .brand img { width: 138px; }
  .brand-mark { width: 1.75rem; height: 1.75rem; }
  .menu-button { display: block; }
  .nav { display: none; position: absolute; z-index: 10; top: 70px; left: 16px; right: 16px; background: var(--surface); padding: 18px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 13px; }
  .nav .nav-cta { text-align: center; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding: 56px 0 46px; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .task-grid { grid-template-columns: 1fr; }
  .task-card { min-height: unset; }
  .task-card h3 { margin-top: 24px; }
  .editorial-band, .content-grid, .profile-shell { grid-template-columns: 1fr; gap: 30px; }
  .side-stack { position: static; }
  .comparison { overflow-x: auto; }
  .comparison-scroll-note { display: block; }
  .comparison-table { min-width: 700px; }
  .page-intro { padding: 50px 0 34px; }
  .page-intro h1 { font-size: clamp(3rem, 13vw, 5.2rem); }
  .site-footer { flex-direction: column; }
}

@media (max-width: 520px) {
  .site-header, .page, .site-footer { width: calc(100% - 28px); }
  .brand img { width: 118px; }
  .brand { gap: .55rem; font-size: .95rem; }
  .hero h1 { font-size: 3.55rem; }
  .hero-note { padding: 23px; }
  .section { padding-bottom: 60px; }
  .section-header { display: block; }
  .section-header p { margin-top: 15px; }
  .rec-card { grid-template-columns: auto 1fr; }
  .rec-fit { grid-column: 2; text-align: left; }
  .fit-limit { grid-template-columns: 1fr; }
  .profile-card { padding: 24px; }
  .profile-card h2 { margin-top: 44px; }
}

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

:root[data-primary="blue"] { --forest: #1d68ab; --forest-dark: #104f88; --forest-fill: #1d68ab; --forest-fill-hover: #104f88; }
:root[data-primary="green"] { --forest: #196b42; --forest-dark: #105333; --forest-fill: #196b42; --forest-fill-hover: #105333; }
:root[data-primary="red"] { --forest: #b83333; --forest-dark: #922727; --forest-fill: #b83333; --forest-fill-hover: #922727; }
:root[data-primary="cyan"] { --forest: #087481; --forest-dark: #065965; --forest-fill: #087481; --forest-fill-hover: #065965; }
:root[data-primary="pink"] { --forest: #ad2e68; --forest-dark: #872250; --forest-fill: #ad2e68; --forest-fill-hover: #872250; }
:root[data-primary="violet"] { --forest: #654099; --forest-dark: #4d2d79; --forest-fill: #654099; --forest-fill-hover: #4d2d79; }
:root[data-theme="dark"][data-primary="blue"] { --forest: #9bc7ff; --forest-dark: #b5d5ff; --forest-fill: #154f85; --forest-fill-hover: #0e3d69; }
:root[data-theme="dark"][data-primary="green"] { --forest: #9be0b5; --forest-dark: #b6edca; --forest-fill: #165936; --forest-fill-hover: #10472b; }
:root[data-theme="dark"][data-primary="red"] { --forest: #ff9999; --forest-dark: #ffb3b3; --forest-fill: #932b2b; --forest-fill-hover: #762222; }
:root[data-theme="dark"][data-primary="cyan"] { --forest: #80d9e5; --forest-dark: #a1e8f0; --forest-fill: #08616b; --forest-fill-hover: #064d56; }
:root[data-theme="dark"][data-primary="pink"] { --forest: #ffa0c6; --forest-dark: #ffbdd7; --forest-fill: #8d2452; --forest-fill-hover: #701c41; }
:root[data-theme="dark"][data-primary="violet"] { --forest: #c5a4ff; --forest-dark: #d6bdff; --forest-fill: #50317d; --forest-fill-hover: #3f2663; }
.appearance-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .55rem; }
.accent-picker { position: relative; flex: 0 0 auto; }
.accent-toggle { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.accent-current { width: 1.15rem; height: 1.15rem; display: block; border: 1px solid rgba(110,120,114,.38); border-radius: 50%; background: var(--forest-fill); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.accent-toggle:hover { border-color: var(--muted); }
.accent-menu { position: absolute; z-index: 30; top: calc(100% + .55rem); right: 0; width: 7.75rem; padding: .6rem; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); box-shadow: var(--shadow); }
.accent-menu[hidden] { display: none; }
.accent-menu button { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; padding: 0; border: 1px solid rgba(110,120,114,.32); border-radius: 50%; background: transparent; cursor: pointer; }
.accent-menu button span { width: 1.12rem; height: 1.12rem; border-radius: 50%; background: var(--swatch); }
.accent-menu button[data-primary="orange"] { --swatch: #c65f29; }
.accent-menu button[data-primary="blue"] { --swatch: #2675c9; }
.accent-menu button[data-primary="green"] { --swatch: #258a58; }
.accent-menu button[data-primary="red"] { --swatch: #d74646; }
.accent-menu button[data-primary="cyan"] { --swatch: #13a7b8; }
.accent-menu button[data-primary="pink"] { --swatch: #df5592; }
.accent-menu button[data-primary="violet"] { --swatch: #8756c7; }
.accent-menu button:hover, .accent-menu button[aria-pressed="true"] { border-color: var(--muted); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--muted); }
.accent-toggle:focus-visible, .accent-menu button:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }