:root {
  --c-background: #1C1C1E;
  --c-surface: #242426;
  --c-surface-soft: #2C2C2F;
  --c-border: #3A3A3E;
  --c-border-strong: #4A4A50;
  --c-text-primary: #F5F0E8;
  --c-text-secondary: #A8A29A;
  --c-accent: #E85D4E;
  --c-accent-strong: #FF8A73;
  --c-accent-on-accent: #1C1C1E;
  --c-focus: #FF8A73;
  --c-success: #7BD3A8;
  --c-danger: #FF9A8B;
  --c-scrim: rgba(12, 12, 14, 0.66);
  --c-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.35);
  --c-shadow-lifted: 0 26px 70px rgba(0, 0, 0, 0.45);
  --space-grid: 8px;
  --radius-button: 8px;
  --radius-card: 12px;
  --font-heading: "Space Grotesk", "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --shell: 1200px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
  --c-background: #F5F0E8;
  --c-surface: #FFFFFF;
  --c-surface-soft: #EFE9DF;
  --c-border: #DED6CA;
  --c-border-strong: #C9BFB0;
  --c-text-primary: #1C1C1E;
  --c-text-secondary: #5C564F;
  --c-accent: #C2452F;
  --c-accent-strong: #9E3320;
  --c-accent-on-accent: #FFFFFF;
  --c-focus: #9E3320;
  --c-success: #2A6E51;
  --c-danger: #B3261E;
  --c-scrim: rgba(28, 28, 30, 0.55);
  --c-shadow-soft: 0 18px 60px rgba(28, 28, 30, 0.06);
  --c-shadow-lifted: 0 26px 70px rgba(28, 28, 30, 0.12);
    color-scheme: light;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--c-background);
  color:var(--c-text-primary);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--c-accent-strong);text-underline-offset:3px}
a:hover{color:var(--c-accent)}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.15;letter-spacing:-0.015em;margin:0 0 12px}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:600}
h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:48px}
h3{font-size:1.15rem;margin-top:24px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:1.25em}
li{margin-bottom:8px}
hr{border:0;border-top:1px solid var(--c-border);margin:32px 0}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}
.prose{max-width:68ch}
.muted{color:var(--c-text-secondary)}
.small{font-size:0.9rem}
.center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--c-surface);padding:12px 16px;z-index:10}
.skip-link:focus{left:12px;top:12px}

.site-header{border-bottom:1px solid var(--c-border);background:var(--c-background)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:600;text-decoration:none;color:var(--c-text-primary)}
.brand__dot{width:10px;height:10px;border-radius:50%;background:var(--c-accent);display:inline-block}
.nav{display:flex;gap:16px;flex-wrap:wrap;font-size:0.95rem}
.nav a{color:var(--c-text-secondary);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--c-text-primary);text-decoration:underline}
.lang-switch{display:flex;gap:8px;flex-wrap:wrap;font-size:0.85rem}
.lang-switch a{color:var(--c-text-secondary);text-decoration:none;padding:2px 6px;border:1px solid transparent;border-radius:4px}
.lang-switch a[aria-current="true"]{border-color:var(--c-border-strong);color:var(--c-text-primary)}

main{display:block;padding-bottom:72px}
.hero{padding:48px 0 32px}
.hero h1{max-width:24ch}
.hero__lede{font-size:1.15rem;color:var(--c-text-secondary);max-width:60ch}

.finder{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:24px;box-shadow:var(--c-shadow-soft);max-width:640px}
.finder__row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.finder__field{display:flex;flex-direction:column;gap:4px;flex:1 1 160px}
.finder__field label{font-size:0.9rem;color:var(--c-text-secondary)}
select,input[type="email"],input[type="text"]{
  font:inherit;color:var(--c-text-primary);background:var(--c-surface-soft);
  border:1px solid var(--c-border-strong);border-radius:var(--radius-button);padding:10px 12px;width:100%;min-height:44px;
}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  background:var(--c-accent);color:var(--c-accent-on-accent);
  border:1px solid transparent;border-radius:var(--radius-button);
  padding:12px 20px;min-height:44px;transition:transform .08s ease,filter .15s ease;
}
.button:hover{filter:brightness(1.06)}
.button:active{transform:translateY(1px)}
.button--ghost{background:transparent;color:var(--c-text-primary);border-color:var(--c-border-strong)}
.button--small{padding:8px 14px;min-height:36px;font-size:0.9rem}
.button[disabled]{opacity:.55;cursor:not-allowed}
.form-error{color:var(--c-danger);margin:12px 0 0;font-size:0.95rem}
.hint{color:var(--c-text-secondary);font-size:0.9rem;margin-top:8px}

.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:24px}
.card--flat{background:transparent}
.grid{display:grid;gap:16px}
.grid--months{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid--days{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid--two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:12px;border:1px solid var(--c-border);border-radius:var(--radius-card);background:var(--c-surface)}
.tile:hover{border-color:var(--c-border-strong)}
.tile__dot{width:36px;height:36px;border-radius:10px;flex:0 0 auto;border:1px solid rgba(0,0,0,.18)}
.tile__name{font-weight:600;line-height:1.25}
.tile__meta{font-size:0.85rem;color:var(--c-text-secondary)}

.swatch{border-radius:var(--radius-card);border:1px solid var(--c-border);padding:24px;box-shadow:var(--c-shadow-lifted)}
.swatch__name{font-family:var(--font-heading);font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;margin:0}
.swatch__hex{font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.04em}
.swatch__word{text-transform:uppercase;letter-spacing:.16em;font-size:0.85rem;font-weight:600}
.swatch--md{min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}

.values{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.value-chip{display:inline-flex;align-items:center;gap:8px;background:var(--c-surface-soft);border:1px solid var(--c-border);border-radius:var(--radius-pill);padding:6px 12px;font-size:0.9rem;font-family:var(--font-mono)}
.copy-button{background:none;border:1px solid var(--c-border-strong);color:var(--c-text-secondary);border-radius:var(--radius-pill);padding:4px 10px;font:inherit;font-size:0.8rem;cursor:pointer}
.copy-button:hover{color:var(--c-text-primary)}

.palette-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.palette-chip{border-radius:10px;height:64px;border:1px solid var(--c-border);position:relative}
.palette-chip span{position:absolute;left:6px;bottom:4px;font-family:var(--font-mono);font-size:0.7rem}

.faq details{border-bottom:1px solid var(--c-border);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--font-heading)}
.faq summary::marker{color:var(--c-accent)}
.faq p{margin-top:8px;color:var(--c-text-secondary)}

.breadcrumbs{font-size:0.85rem;color:var(--c-text-secondary);padding-top:16px}
.breadcrumbs a{color:var(--c-text-secondary)}
.pill{display:inline-block;border:1px solid var(--c-border-strong);border-radius:var(--radius-pill);padding:4px 12px;font-size:0.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-secondary)}

.vote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0}
.vote .button--ghost{font-weight:500}
.vote__thanks{color:var(--c-success);font-size:0.9rem}

.pricing-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.plan{display:flex;flex-direction:column;gap:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:24px;height:100%}
.plan--featured{border-color:var(--c-accent);box-shadow:var(--c-shadow-lifted)}
.plan__price{font-family:var(--font-heading);font-size:2rem;font-weight:600}
.plan ul{padding-left:1.1em;color:var(--c-text-secondary);font-size:0.95rem}
.plan .button{margin-top:auto}

.vendor-note{background:var(--c-surface-soft);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:16px;color:var(--c-text-secondary);font-size:0.95rem}

.site-footer{border-top:1px solid var(--c-border);padding:32px 0;color:var(--c-text-secondary);font-size:0.9rem}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.site-footer a{color:var(--c-text-secondary)}
.site-footer h2{font-size:1rem;margin:0 0 8px;font-family:var(--font-heading)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .shell{padding:0 16px}
  h2{margin-top:32px}
}
@media print{
  .site-header,.site-footer,.finder,.vote,.button{display:none !important}
  body{background:#fff;color:#000}
  .swatch{box-shadow:none}
}