:root {
  color-scheme: light;
  --bg: #f7f2ea;
  --ink: #231b18;
  --ink-2: #5d534c;
  --rule: #e0d6c8;
  --rule-dot: #bfb1a0;
  --radius: 16px;
  --gutter: clamp(16px, 2.2vw, 36px);
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.08; margin: 0; }
img { max-width: 100%; }

/* Small mono uppercase labels */
.eyebrow { font: 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; display: block; opacity: .9; }
.eyebrow-dark { color: var(--ink-2); padding-top: 14px; border-top: 1px dotted var(--rule-dot); }

/* Pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; padding: 0 24px; border-radius: 999px; font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .2s ease, background-color .2s ease; }
.pill:hover { transform: translateY(-1px); }
.pill-light { background: #fff; color: var(--ink); }
.pill-dark { background: var(--ink); color: #fff; }
.pill-dark:hover { background: #000; }
.pill-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.pill-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; gap: .5em; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link::after { content: '→'; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 14px var(--gutter); background: rgba(247, 242, 234, .88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.wordmark { font: 600 26px/1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.site-header nav { flex: 1; min-width: 0; }
.site-header nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 15px; overflow-x: auto; scrollbar-width: none; }
.site-header nav ul::-webkit-scrollbar { display: none; }
.site-header nav a { text-decoration: none; white-space: nowrap; color: var(--ink); opacity: .85; }
.site-header nav a:hover, .site-header nav a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.header-cta { min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; gap: 10px 16px; padding-bottom: 10px; }
  .site-header nav { order: 3; flex-basis: 100%; }
  .site-header nav ul { gap: 18px; font-size: 14px; }
  .header-cta { margin-left: auto; }
}

/* Blurred-gradient scenes standing in for photography */
.scene { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); color: #fff; background: var(--scene-base); }
.scene::before { content: ''; position: absolute; inset: -25%; z-index: -2; background: var(--scene); filter: blur(42px) saturate(1.05); animation: drift 38s ease-in-out infinite alternate; }
.scene::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grain), linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)); mix-blend-mode: soft-light; opacity: .9; pointer-events: none; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .scene::before { animation: none; } html { scroll-behavior: auto; } }

.scene-amber {
  --scene-base: #3a2414;
  --scene:
    radial-gradient(26% 32% at 30% 60%, #e8a944 0%, transparent 68%),
    radial-gradient(14% 18% at 36% 54%, #ffe2a8 0%, transparent 70%),
    radial-gradient(30% 34% at 74% 28%, #8a4a1c 0%, transparent 72%),
    radial-gradient(26% 30% at 84% 80%, #c07a32 0%, transparent 70%),
    radial-gradient(40% 46% at 10% 16%, #4a2c16 0%, transparent 72%),
    radial-gradient(30% 34% at 56% 90%, #9a7350 0%, transparent 70%),
    #3a2414;
}
.scene-rose {
  --scene-base: #6e3f45;
  --scene:
    radial-gradient(30% 36% at 26% 30%, #e6b3ad 0%, transparent 70%),
    radial-gradient(28% 34% at 74% 22%, #8c4a55 0%, transparent 72%),
    radial-gradient(34% 40% at 62% 78%, #c98a7d 0%, transparent 72%),
    radial-gradient(26% 32% at 18% 82%, #57303a 0%, transparent 70%),
    radial-gradient(22% 28% at 90% 60%, #f1d4c4 0%, transparent 70%),
    #6e3f45;
}
.scene-plum {
  --scene-base: #2e2034;
  --scene:
    radial-gradient(28% 34% at 24% 30%, #7d5a86 0%, transparent 70%),
    radial-gradient(22% 30% at 62% 20%, #1d1424 0%, transparent 70%),
    radial-gradient(30% 36% at 80% 64%, #b49ab3 0%, transparent 70%),
    radial-gradient(34% 40% at 36% 80%, #4a3058 0%, transparent 72%),
    radial-gradient(20% 26% at 50% 50%, #d9b77a 0%, transparent 70%),
    #2e2034;
}
.scene-pearl {
  --scene-base: #6d6459;
  --scene:
    radial-gradient(30% 36% at 30% 70%, #d8cbb6 0%, transparent 70%),
    radial-gradient(32% 40% at 78% 26%, #9a8f86 0%, transparent 72%),
    radial-gradient(26% 30% at 62% 74%, #4f4740 0%, transparent 70%),
    radial-gradient(34% 40% at 12% 22%, #a69a8a 0%, transparent 72%),
    radial-gradient(22% 26% at 90% 82%, #efe6d6 0%, transparent 70%),
    #6d6459;
}
.scene-sea {
  --scene-base: #2f4a48;
  --scene:
    radial-gradient(30% 36% at 24% 26%, #8fb5ad 0%, transparent 70%),
    radial-gradient(30% 36% at 72% 20%, #3e6a70 0%, transparent 72%),
    radial-gradient(34% 40% at 60% 76%, #1f3634 0%, transparent 72%),
    radial-gradient(26% 32% at 20% 80%, #6f9a86 0%, transparent 70%),
    radial-gradient(22% 28% at 88% 64%, #c9ddd3 0%, transparent 70%),
    #2f4a48;
}
.scene-night {
  --scene-base: #221a1c;
  --scene:
    radial-gradient(30% 36% at 20% 30%, #4a3036 0%, transparent 70%),
    radial-gradient(28% 34% at 74% 24%, #2f2a3a 0%, transparent 72%),
    radial-gradient(26% 30% at 58% 82%, #6b4e32 0%, transparent 70%),
    radial-gradient(34% 40% at 90% 80%, #160f12 0%, transparent 72%),
    #221a1c;
}

main > section, main > .article-grid { margin-left: var(--gutter); margin-right: var(--gutter); }

/* Home hero */
.hero { min-height: min(78vh, 720px); display: flex; align-items: center; margin-top: 4px; }
.hero-inner { padding: 72px clamp(24px, 4vw, 64px) 72px clamp(24px, 10vw, 200px); max-width: 1240px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 84px); margin-bottom: 26px; }
.hero-sub { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; margin: 0 0 34px; opacity: .92; }

/* Split section (heading left, content right) */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 120px); padding: clamp(64px, 9vw, 128px) clamp(0px, 4vw, 64px); }
.split-head h2 { font-size: clamp(36px, 4.4vw, 60px); }
.split-body { padding-top: 14px; font-size: 19px; line-height: 1.6; color: var(--ink); }
.split-body p { margin: 0 0 1.1em; max-width: 36em; }
.fine { font-size: 14px !important; color: var(--ink-2); margin-top: 28px !important; }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.link-list a { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 18px; }
.link-list a span:last-child { font: 13px/1.8 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.link-list a span:last-child::after { content: ' →'; }
.link-list a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .link-list a { flex-direction: column; gap: 4px; } }

/* Tiles */
.tiles { display: grid; gap: clamp(12px, 1.6vw, 32px); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 96px); }
.tile { display: flex; flex-direction: column; align-items: flex-start; min-height: 440px; padding: clamp(24px, 3vw, 40px); text-decoration: none; }
.tile h3 { font-size: clamp(28px, 2.6vw, 40px); margin: auto 0 14px; }
.tile p { margin: 0 0 26px; font-size: 16px; line-height: 1.55; opacity: .9; max-width: 28em; }
.tile-center { align-items: center; justify-content: center; text-align: center; min-height: 520px; }
.tile-center h3 { margin: 0 0 16px; }
.tile-center p { font-size: 18px; max-width: 24em; margin-bottom: 34px; }
a.tile:hover .pill { transform: translateY(-1px); }
@media (max-width: 900px) { .tiles-3, .tiles-2 { grid-template-columns: 1fr; } .tile { min-height: 340px; } .tile-center { min-height: 400px; } }

/* Comparison panel */
.compare-panel { margin-top: clamp(48px, 6vw, 96px); padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 64px); }
.compare-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 64px); }
.compare-head h2 { font-size: clamp(40px, 5vw, 68px); margin-bottom: 18px; }
.compare-head p { font-size: clamp(17px, 1.6vw, 21px); opacity: .82; margin: 0; }
.compare { position: relative; max-width: 1040px; margin: 0 auto; }
.compare-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-bottom: 1px dotted rgba(255, 255, 255, .5); }
.compare-row > span { padding: 22px 16px; font-size: 17px; }
.compare-row > span:not(:first-child) { text-align: center; }
.compare-cols { border-bottom-style: dotted; }
.compare-cols span { padding-top: 30px; padding-bottom: 26px; }
.compare-cols strong { display: block; font-weight: 500; font-size: 19px; }
.compare-cols small { display: block; font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: 6px; }
.compare .col-feature { background: rgba(255, 255, 255, .1); border-left: 1px solid rgba(255, 255, 255, .28); border-right: 1px solid rgba(255, 255, 255, .28); align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.compare-cols .col-feature { border-top: 1px solid rgba(255, 255, 255, .28); border-radius: 14px 14px 0 0; }
.compare-foot { border-bottom: 0; }
.compare-foot .col-feature { border-bottom: 1px solid rgba(255, 255, 255, .28); border-radius: 0 0 14px 14px; }
.compare-foot a { color: #fff; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 2px; }
.compare .yes, .compare .no { font-size: 0; }
.compare .yes::before { content: '✓'; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #56653f; font-size: 13px; font-weight: 700; margin: 0 auto; }
.compare .no::before { content: '×'; font-size: 20px; opacity: .85; }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr 1fr; }
  .compare-row > span:first-child { grid-column: 1 / -1; padding: 18px 4px 6px; font-weight: 500; }
  .compare-row > span { padding: 10px 8px 16px; font-size: 15px; }
  .compare-cols > span:first-child, .compare-foot > span:first-child { display: none; }
  .compare .col-feature { border-radius: 0 !important; }
}

/* Guide hero */
.page-hero { margin-top: 4px; min-height: 420px; display: flex; align-items: flex-end; }
.page-hero-short { min-height: 300px; }
.page-hero-inner { padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px); max-width: 1000px; }
.page-hero h1 { font-size: clamp(38px, 5vw, 68px); margin-bottom: 20px; }
.page-hero .hero-sub { margin-bottom: 22px; }
.hero-meta { font: 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 0; }
.hero-meta a { color: #fff; }

/* Article */
.article-grid { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); padding: clamp(48px, 7vw, 96px) clamp(0px, 4vw, 64px) 0; }
.article-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
.toc-inner { position: sticky; top: 100px; }
.toc ol { list-style: none; margin: 0 0 28px; padding: 0; }
.toc li a { display: block; padding: 7px 0; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.toc li a:hover { color: var(--ink); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } .toc { display: none; } }

.prose { max-width: 720px; font-size: 18px; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(30px, 3vw, 42px); margin: 1.7em 0 .6em; padding-top: 22px; border-top: 1px dotted var(--rule-dot); scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 26px; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.15em; }
.prose a:not(.pill) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { font-weight: 500; }
.prose ul { padding-left: 1.2em; }
.prose ul li { margin: .45em 0; }
.prose ul li::marker { color: var(--ink-2); }
.prose .lede { font-size: 21px; }
.prose ol.steps, .prose ol.checklist { list-style: none; counter-reset: n; margin: 1.4em 0; padding: 0; border-top: 1px solid var(--rule); }
.prose ol.steps li, .prose ol.checklist li { counter-increment: n; position: relative; padding: 18px 0 18px 56px; border-bottom: 1px solid var(--rule); margin: 0; }
.prose ol.steps li::before, .prose ol.checklist li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 21px; font: 13px/1.6 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.cta { margin: 1.6em 0; }
.cta .btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font: 500 15px/1.2 var(--sans); transition: transform .2s ease; }
.cta .btn:hover { transform: translateY(-1px); background: #000; }
.cta .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.cta .btn-secondary:hover { background: var(--ink); color: #fff; }
.cta + .cta { margin-top: -.6em; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 40px clamp(32px, 6vw, 120px); padding: clamp(64px, 9vw, 128px) clamp(0px, 4vw, 64px) 0; }
.faq-head h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 32px; }
.faq-head { align-self: start; position: sticky; top: 100px; }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 28px 0; font-size: 20px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 26px/1 var(--sans); flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: -10px 0 28px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 46em; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* Related */
.related { padding-top: clamp(64px, 9vw, 128px); }
.related .eyebrow { margin-bottom: 24px; }
.related .tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.related .tile { min-height: 320px; }
.related .tile h3 { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 24px; }

/* Footer */
.site-footer { margin: clamp(64px, 9vw, 128px) var(--gutter) var(--gutter); padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px) 32px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-mark { font: 400 clamp(48px, 7vw, 96px)/1 var(--serif); letter-spacing: -.03em; margin: 0 0 12px; }
.footer-tag { margin: 0; opacity: .8; max-width: 26em; }
.footer-cols { display: flex; gap: clamp(32px, 6vw, 96px); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin: 0 0 10px; }
.footer-cols a { text-decoration: none; opacity: .88; }
.footer-cols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { margin: 56px 0 0; padding-top: 18px; border-top: 1px dotted rgba(255, 255, 255, .4); font: 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }