/*
 * Arturi public site (CPG-2011). Carried over from the Lovable project
 * "Arturi Launchpad" (src/styles.css at commit 6816ebc), keeping only the
 * rules the teaser, the privacy notice and the not-found page use, in their
 * original order so the cascade is unchanged.
 *
 * The Lovable build ran Tailwind v4, whose base reset sat underneath every
 * rule below. That reset is reproduced first, inside the same base layer,
 * because the pages were designed on top of it.
 */

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-tap-highlight-color: transparent;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  small {
    font-size: 80%;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }

  ::placeholder {
    opacity: 1;
  }

  textarea {
    resize: vertical;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

/* Isolated home placeholder tokens and presentation. */
.ph-page {
  --ph-bg: #0D0D0D;
  --ph-text: #F2F2F2;
  --ph-text2: #C8C1BA;
  --ph-muted: #8C837B;
  --ph-champagne: #E8C27A;
  --ph-gold: #FFC857;
  --ph-gold-light: #F5D89A;
  --ph-ink: #1B1615;
  --ph-field: #1B1B1D;
  --ph-field-border: #736D67;
  --ph-error: #F07A72;
  --ph-success: #5FD08A;
  --ph-focus-ring: rgba(245,216,154,.15);
  --ph-cue-border: rgba(232,194,122,.5);
  --ph-cue-bg: rgba(20,20,20,.5);
  --ph-glow: var(--page-glow);
  --ph-gold-gradient: linear-gradient(110deg, #F5D89A 0%, #E8C27A 58%, #FFC857 100%);
  min-height: 100vh;
  background: var(--ph-glow) top center / 100% 1000px no-repeat, var(--ph-bg);
  color: var(--ph-text);
  font-family: var(--font-body);
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
}
.ph-main { position: relative; }
.ph-art { position: absolute; left: 50%; width: 100vw; margin-left: -50vw; aspect-ratio: 1586 / 992; z-index: 0; pointer-events: none; background: url('/arturi-page-desktop.webp') top center / 100% auto no-repeat; mix-blend-mode: lighten; bottom: calc(var(--ph-scene-h) - 44.75vw); }
.ph-hero { --ph-scene-h: 15vw; position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px 120px; text-align: center; }
.ph-stack { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.ph-scene { height: var(--ph-scene-h); width: 100%; }
.ph-page .ph-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; z-index: 2; }
.ph-cue-label { font: 400 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ph-champagne); }
.ph-cue-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ph-cue-border); background: var(--ph-cue-bg); color: var(--ph-champagne); display: flex; align-items: center; justify-content: center; animation: ph-bob 2.4s ease-in-out infinite; }
@keyframes ph-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ph-page .ph-cue:focus-visible { outline: 2px solid var(--ph-gold-light); outline-offset: 4px; border-radius: 8px; }
html:has(.ph-page) { scroll-behavior: smooth; }
.ph-hero-copy { position: relative; }
.ph-hero-copy { text-align: center; width: min(900px, 100%); }
.ph-wordmark { margin: 0 auto 18px; padding-left: .18em; font: 200 48px/1.2 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ph-text); }
.ph-eyebrow { font: 400 12px/1.5 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ph-champagne); margin: 0; }
.ph-intro h2 { font: 300 clamp(36px, 5vw, 64px)/1.08 var(--font-display); letter-spacing: -.01em; color: var(--ph-text); margin: 16px 0 22px; }
.ph-lead { font: 400 clamp(17px, 1.5vw, 20px)/1.5 var(--font-body); color: var(--ph-text2); max-width: 34ch; margin: 0 auto 10px; }
.ph-support { font: 400 15px/1.55 var(--font-body); color: var(--ph-muted); margin: 0; }
.ph-contact { position: relative; padding: 96px 20px 96px; }
.ph-contact-inner { width: min(100%, 880px); margin: 0 auto; }
.ph-contact-heading { text-align: center; margin-bottom: 32px; }
.ph-contact-heading h2 { font: 300 clamp(34px, 4vw, 46px)/1.16 var(--font-display); letter-spacing: -.015em; margin: 10px 0; color: var(--ph-text); }
.ph-contact-description { font: 400 16px/1.6 var(--font-body); color: var(--ph-text2); margin: 0; }
/* No backdrop blur (CPG-2268): behind the card is the flat page colour, so the blur
   changed nothing visible but made the browser show a grey box while it drew it.
   #121212 is the colour the old translucent fill produced over #0D0D0D. */
.ph-card { width: min(100%, 880px); margin: 0 auto; padding: 42px 46px 36px; border-radius: 18px; background: #121212; border: 1px solid rgba(232,194,122,.28); box-shadow: 0 20px 68px rgba(0,0,0,.26); }
.ph-form { display: flex; flex-direction: column; gap: 22px; }
.ph-name-email { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.ph-field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ph-label { display: block; font: 500 14px/1.5 var(--font-body); color: var(--ph-text); margin: 0 0 8px; }
.ph-required { color: var(--ph-champagne); }
.ph-optional { color: var(--ph-muted); font-size: 13px; font-weight: 400; }
.ph-input { display: block; width: 100%; min-height: 50px; padding: 13px 15px; background: var(--ph-field); border: 1px solid var(--ph-field-border); border-radius: 9px; color: var(--ph-text); font: 400 15px/1.5 var(--font-body); outline: none; transition: border-color .15s, box-shadow .15s; }
.ph-input::placeholder { color: var(--ph-muted); opacity: 1; }
.ph-input:hover:not(:disabled) { border-color: var(--ph-champagne); }
.ph-input:focus-visible { outline: 2px solid var(--ph-gold-light); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ph-focus-ring); }
.ph-input[aria-invalid="true"] { border-color: var(--ph-error); }
.ph-textarea { min-height: 138px; resize: vertical; padding-bottom: 32px; }
.ph-textarea-wrap { position: relative; }
.ph-counter { position: absolute; right: 14px; bottom: 10px; font: 400 12px/1.5 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ph-text2); margin: 0; pointer-events: none; }
.ph-input:disabled, .ph-roles:disabled { opacity: .52; cursor: not-allowed; }
.ph-roles { border: 0; padding: 0; margin: 0; min-width: 0; }
.ph-roles legend { margin-bottom: 10px; padding: 0; }
.ph-role-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-role { position: relative; cursor: pointer; }
.ph-role input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ph-role span { display: block; padding: 10px 17px; border: 1px solid var(--ph-field-border); border-radius: 999px; background: rgba(27,27,29,.85); font: 500 14px/1.5 var(--font-body); color: var(--ph-text); transition: border-color .15s, background .15s, color .15s; }
.ph-role:hover input:not(:checked):not(:disabled) + span { border-color: var(--ph-champagne); background: rgba(232,194,122,.10); }
.ph-role input:checked + span { border-color: var(--ph-champagne); background: var(--ph-champagne); color: var(--ph-ink); }
.ph-role input:focus-visible + span { outline: 2px solid var(--ph-gold-light); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ph-focus-ring); }
.ph-role:has(input:disabled) { cursor: not-allowed; }
.ph-optin { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 500 14px/1.5 var(--font-body); color: var(--ph-text); }
.ph-optin input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid var(--ph-field-border); border-radius: 4px; background: var(--ph-field); display: grid; place-content: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ph-optin:hover input:not(:disabled) { border-color: var(--ph-champagne); }
.ph-optin input:checked { border-color: var(--ph-champagne); background: var(--ph-champagne); }
.ph-optin input:checked::after { content: ""; width: 4px; height: 8px; border: solid var(--ph-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.ph-optin input:focus-visible { outline: 2px solid var(--ph-gold-light); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ph-focus-ring); }
.ph-optin:has(input:disabled) { cursor: not-allowed; opacity: .52; }

.ph-turnstile:empty { display: none; }
.ph-turnstile { max-width: 100%; }
.ph-actions { text-align: center; }
.ph-page .ph-send { width: 100%; min-height: 52px; padding: 14px 20px; border: 0; border-radius: 9px; background: var(--ph-gold-gradient); color: var(--ph-ink); font: 700 15px/1.5 var(--font-body); box-shadow: none; transition: filter .15s, box-shadow .15s; }
.ph-page .ph-send:hover:not(:disabled) { background: var(--ph-gold-gradient); filter: brightness(1.07); box-shadow: 0 5px 22px rgba(232,194,122,.14); transform: none; }
.ph-page .ph-send:active:not(:disabled) { transform: translateY(1px); }
.ph-page .ph-send:disabled { opacity: .48; cursor: not-allowed; }
.ph-page .ph-send:focus-visible { outline: 2px solid var(--ph-gold-light); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ph-focus-ring); }
.ph-founder { font: 400 14px/1.5 var(--font-body); color: var(--ph-champagne); margin: 14px 0 0; }
.ph-note { font: 400 12px/1.6 var(--font-body); color: var(--ph-muted); margin: 12px 0 0; text-align: center; }
.ph-page a { color: var(--ph-champagne); text-decoration: underline; }
.ph-page a:hover { color: var(--ph-gold-light); }
.ph-page a:focus-visible { outline: 2px solid var(--ph-champagne); outline-offset: 3px; }
.ph-notice { font: 400 14px/1.5 var(--font-body); color: var(--ph-error); min-height: 20px; margin-top: 12px; text-align: center; }
.ph-notice p { margin: 0; }
.ph-page .field-error { margin: 6px 0 0; color: var(--ph-error); font-size: 13px; align-items: flex-start; }
.ph-page .field-error .warn-icon { margin-top: 2px; }
.ph-success { text-align: center; }
.ph-success h2 { font: 300 28px/1.3 var(--font-display); margin: 0; color: var(--ph-success); }
.ph-success h2:focus { outline: none; box-shadow: none; }
@media (max-width: 700px) {
  .ph-contact { padding-left: 16px; padding-right: 16px; }
  .ph-card { border-radius: 16px; padding: 26px 20px 24px; }
  .ph-form { gap: 18px; }
  .ph-name-email { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-height: 700px) {
  .ph-hero { padding-top: 28px; padding-bottom: 84px; }
  .ph-page .ph-cue { bottom: 14px; }
}
@media (max-width: 640px) {
  .ph-page { background: var(--ph-glow) top center / 100% 700px no-repeat, var(--ph-bg); }
  .ph-art { aspect-ratio: 887 / 1774; background-image: url('/arturi-page-mobile.webp'); bottom: calc(var(--ph-scene-h) - 146vw); }
  .ph-hero { --ph-scene-h: 68vw; padding: 40px 20px 112px; }
  .ph-wordmark { font-size: 36px; }
  .ph-eyebrow { font-size: 11px; }
  .ph-contact { padding: 72px 16px 80px; }
  .ph-input { font-size: 16px; }
}
@media (max-width: 640px) and (max-height: 700px) { .ph-hero { --ph-scene-h: 50vw; } }
@media (prefers-reduced-motion: reduce) {
  html:has(.ph-page) { scroll-behavior: auto; }
  .ph-cue-btn { animation: none; }
  .ph-page .ph-input, .ph-page .ph-role span, .ph-page .ph-send { transition: none; }
}

/*
 * Arturi teaser design system. Dark by default, with a light theme a visitor
 * can switch to (see the end of this file, CPG-2225).
 * Every colour and size is a token on :root; components read the tokens.
 */

:root {
  /* The homepage's soft glow at the top, shared by every page (CPG-2223).
     share/assets/page.css carries the same value; a test keeps them equal. */
  --page-glow: radial-gradient(ellipse 50% 34% at 50% 0%, #191319 0%, #171217 20%, #151115 40%, #121013 65%, #100F10 85%, #0D0D0D 100%);
  --bg: #0d0d0d;
  --bg-alt: #111111;
  --bg-deep: #080808;
  --surface: #141414;
  --surface-raised: #1b1b1d;
  --surface-featured: #201c1b;
  --text: #f2f2f2;
  --text-2: #c8c1ba;
  --text-muted: #8c837b;
  --text-fine: #7d7d7d;
  --champagne: #e8c27a;
  --gold-light: #f5d89a;
  --gold: #ffc857;
  --ink-on-gold: #1b1615;
  --gold-band-body: #312927;
  --gold-band-eyebrow: #4E413D;
  --success: #5fd08a;
  --error-text: #f07a72;
  --glow-plum: #613863;
  --glow-mauve: #8f567c;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.12);
  --control-border: #736d67;
  --gold-button: linear-gradient(90deg, #e8c27a, #ffc857);
  --button-hover-glow: 0 6px 20px rgba(255, 200, 87, 0.35);
  --input-focus: 0 0 0 3px rgba(232, 194, 122, 0.25);
  --font-display: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --side-margin: 96px;
  --hero-pad: 120px;
  --header-h: 72px;
}

@media (max-width: 1024px) {
  :root {
    --side-margin: 40px;
    --hero-pad: 88px;
  }
}

@media (max-width: 640px) {
  :root {
    --side-margin: 20px;
    --hero-pad: 64px;
    --header-h: 64px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Keep the scrollbar's space on every page (CPG-2266). The homepage is long
   enough to scroll and the privacy and not-found pages usually are not, so
   without this the page width changed between them and centred or
   right-aligned content moved sideways when a visitor switched pages. */
html {
  scrollbar-gutter: stable;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type scale ---------- */

.t-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

@media (max-width: 1024px) {
  .t-h2 {
    font-size: 44px;
  }
  .t-eyebrow {
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .t-h2 {
    font-size: 32px;
  }
  .t-body {
    font-size: 15px;
  }
  .t-eyebrow {
    font-size: 11px;
  }
}

/* ---------- Layout ---------- */

/* The header and footer use the Decree's margins (CPG-2262, CPG-2266): the
   content sits in a centred block no wider than 1200px, with at least 56px
   each side, 36px at tablet width and 20px on phones. */
.container {
  width: 100%;
  margin: 0 auto;
  padding-left: max(56px, calc((100% - 1200px) / 2), env(safe-area-inset-left, 0px));
  padding-right: max(56px, calc((100% - 1200px) / 2), env(safe-area-inset-right, 0px));
}
@media (max-width: 1039px) {
  .container {
    padding-left: max(36px, env(safe-area-inset-left, 0px));
    padding-right: max(36px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 599px) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

.page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--page-glow) top center / 100% 1000px no-repeat, var(--bg);
}
@media (max-width: 640px) {
  .page { background: var(--page-glow) top center / 100% 700px no-repeat, var(--bg); }
}

.site-header {
  position: relative;
  z-index: 2;
  width: 100%;
  background: transparent;
}

.header-inner {
  display: flex;
  height: var(--header-h);
  align-items: center;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.wordmark:focus-visible,
.footer-link:focus-visible,
.inline-link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.site-footer {
  position: relative;
  z-index: 2;
  background-color: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding-top: 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-fine);
}

.footer-link {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--champagne);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--gold-light);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.eyebrow {
  color: var(--champagne);
  margin: 0;
}

/* ---------- Form ---------- */

.btn-primary {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gold-button);
  color: var(--ink-on-gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: box-shadow 150ms ease;
}

.btn-primary:hover:not(:disabled) {
  box-shadow: var(--button-hover-glow);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.inline-link {
  color: var(--champagne);
  text-decoration: underline;
}

.inline-link:hover,
.inline-link:focus {
  color: var(--gold-light);
}

.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--error-text);
  margin: 0;
}

.warn-icon {
  flex: 0 0 14px;
}

/* ---------- Privacy / 404 ---------- */

.privacy-main,
.notfound-main {
  flex: 1;
  padding-top: var(--hero-pad);
  padding-bottom: var(--hero-pad);
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
}

.privacy-inner {
  max-width: 720px;
  margin: 0 auto;
}

.privacy-title {
  color: var(--text);
  margin: 20px 0 0;
}

.privacy-para {
  color: var(--text-2);
  margin: 24px 0 0;
}

.fine-print {
  color: var(--text-fine);
  margin: 48px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Shared form fields ---------- */

.field-error {
  margin-top: 8px;
  align-items: flex-start;
}

.btn-primary {
  text-decoration: none;
}

/* ---------- Light theme (CPG-2225) ----------
 * Dark is the default. theme.js sets data-theme="light" on <html> when a
 * visitor chooses it. The colours are the Decree's light set: brand Web v1's
 * doc tokens, with small text deepened to 7:1 (R546). The homepage hero stays
 * dark in light mode (Don, 2026-11-04): its art is a photo on black.
 */

/* the switch: the Decree's sun/moon button */
/* Quiet beside the wordmark (Don, 2026-11-05): an 18px icon with no ring,
   level with the header wordmark's 17px capitals, in the page's muted grey
   rather than gold, so it never draws
   the eye from the logo. The tap area stays 44px. */
.theme-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--toggle-icon, #8c837b);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; /* the icon's right edge sits on the page margin, in line with the footer link */
  cursor: pointer;
}
.theme-toggle:hover { color: var(--toggle-hover, #f2f2f2); }
.theme-toggle:focus-visible { outline: 2px solid var(--toggle-icon, #8c837b); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-moon { display: none; }
html[data-theme="light"] .theme-toggle .theme-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-moon { display: inline; }
.header-inner { justify-content: space-between; }
/* On the homepage the button sits where the header's does on the other pages:
   on the Decree margin (CPG-2266), centred in a header-height band. */
.ph-page > .theme-toggle {
  position: absolute;
  z-index: 3;
  top: calc((var(--header-h) - 44px) / 2 + env(safe-area-inset-top, 0px));
  right: max(56px, calc((100% - 1200px) / 2), env(safe-area-inset-right, 0px));
}
@media (max-width: 1039px) {
  .ph-page > .theme-toggle { right: max(36px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 599px) {
  .ph-page > .theme-toggle { right: max(20px, env(safe-area-inset-right, 0px)); }
}

/* privacy and not-found pages */
html[data-theme="light"] {
  --page-glow: none;
  --bg: #ffffff;
  --bg-alt: #fbf9f6;
  --bg-deep: #fbf9f6;
  --surface: #ffffff;
  --surface-raised: #fbf9f6;
  --text: #141414;
  --text-2: #544e48;
  --text-muted: #544e48;
  --text-fine: #544e48;
  --champagne: #634b20;
  --gold-light: #634b20;
  --error-text: #b42318;
  --success: #1e7a46;
  --border: #ece7df;
  --border-hover: rgba(20, 20, 20, 0.18);
  --control-border: #7d756c;
  --toggle-icon: #544e48;
  --toggle-hover: #141414;
}

/* the homepage below the hero */
html[data-theme="light"] .ph-page {
  --ph-bg: #ffffff;
  --ph-text: #141414;
  --ph-text2: #544e48;
  --ph-muted: #544e48;
  --ph-champagne: #634b20;
  --ph-gold-light: #634b20;
  --ph-field: #ffffff;
  --ph-field-border: #7d756c;
  --ph-error: #b42318;
  --ph-success: #1e7a46;
  --ph-focus-ring: rgba(138, 106, 46, 0.18);
  --ph-glow: none;
}
html[data-theme="light"] .ph-card { background: #ffffff; border-color: rgba(138, 106, 46, 0.28); box-shadow: 0 20px 60px rgba(20, 20, 20, 0.07); }
html[data-theme="light"] .ph-role span { background: #ffffff; }
html[data-theme="light"] .ph-role:hover input:not(:checked):not(:disabled) + span { background: rgba(138, 106, 46, 0.06); }
html[data-theme="light"] .ph-role input:checked + span { background: rgba(138, 106, 46, 0.1); border-color: rgba(138, 106, 46, 0.6); color: #634b20; }
html[data-theme="light"] .ph-optin input:checked { background: #8a6a2e; border-color: #8a6a2e; }
html[data-theme="light"] .ph-optin input:checked::after { border-color: #ffffff; }

/* the homepage hero keeps its dark design in both themes, and so does the
   switch that sits on it */
html[data-theme="light"] .ph-hero {
  --ph-text: #f2f2f2;
  --ph-text2: #c8c1ba;
  --ph-muted: #8c837b;
  --ph-champagne: #e8c27a;
  --ph-gold-light: #f5d89a;
  --ph-focus-ring: rgba(245, 216, 154, 0.15);
  background: radial-gradient(ellipse 50% 34% at 50% 0%, #191319 0%, #171217 20%, #151115 40%, #121013 65%, #100F10 85%, #0D0D0D 100%) top center / 100% 1000px no-repeat, #0d0d0d;
}
@media (max-width: 640px) {
  html[data-theme="light"] .ph-hero { background-size: 100% 700px, auto; }
}
html[data-theme="light"] .ph-page > .theme-toggle { --toggle-icon: #8c837b; --toggle-hover: #f2f2f2; }