:root {
  /* ------------------------------------------------------------------
     Design tokens extracted from "D'Kenang Mockups.dc.html".
     Each value notes its source. Type and spacing carry a x1.2 uplift:
     the mockup's desktop artboard is 1120px against a real 1440px
     viewport, and its 360px phone artboard sets body copy at 8-13px,
     which is diagram scale rather than production scale.
     ------------------------------------------------------------------ */

  /* --- surfaces (mockup, verbatim) --- */
  --bg:     #fffaed;   /* warm ivory, the dominant tone */
  --panel:  #ffffff;   /* raised cards and the nav band */
  --band:   #f7efd5;   /* pale butter, the tinted section band */
  --paper:  #fdf7e6;   /* polaroid stock */

  /* --- ink --- */
  --ink:        #6b0b27;  /* deep burgundy, 10.7:1 worst case */
  --paper-ink:  #5a3a42;  /* ink on --paper */
  /* The mockup sets body copy in rgba(51,42,32,.62-.65), which flattens to
     4.0-4.5:1 and misses AA on the band. These are the same hue taken to the
     alpha that clears 4.5:1 on all three light surfaces. */
  --muted:        #6b5560;  /* body copy, 5.9:1 worst case */
  --muted-strong: #56414c;  /* emphasis */
  --ink-faint:    #9c8891;  /* DECORATIVE ONLY, ~3:1 */

  /* --- rules --- */
  --line:        rgba(107, 11, 39, .15);  /* hairline, tinted with the ink */
  --line-strong: rgba(107, 11, 39, .3);   /* ghost button edge */

  /* --- accent --- */
  --accent:      #ebb61a;  /* marigold. 1.6:1 on cream, so it cannot carry
                              numerals, dots, fills, ribbons, borders. */
  /* Two darker steps carry type on light; the bright tone stays for fills,
     rules and dots, and for text on the dark wall where it reaches 10.4:1. */
  --accent-display: #a97c11;  /* large type (24px+) on light, 3.3:1 */
  --accent-ink:  #7d5f0e;  /* small type on light, 5.2:1 */
  --accent-lift: #f0c94f;  /* accent on dark ink */
  --accent-soft: rgba(235, 182, 26, .18);

  /* --- signal --- */
  --ink-hover: #560820;   /* pressed state of an ink surface */
  /* The mockup reverses to the page colour on dark and on accent, not to
     white: background:#332a20;color:#f8f3ea (16x), and the same on accent. */
  --on-dark:   var(--bg);
  --field:     #ffffff;  /* input fill, a step above --panel so a field still
                            reads as a field when it sits on a card */

  /* Confirmation, warmed so it sits in the stationery palette rather than
     reading as a stock browser alert. 4.9:1 on --ok-bg. */
  --ok-ink:   #2f6b41;
  --ok-bg:    #e8f0e2;
  --warn-bg:  #f9e6df;

  --live:     #d4574e;   /* the pulsing dot, decorative */
  --live-ink: #a33a33;   /* the word beside it, 5.7:1 */

  /* --- projector surfaces (the live wall) --- */
  --wall-bg:    #1a0710;
  --wall-deep:  #12040a;
  --wall-mosaic: #150610;  /* the mosaic frame */
  --wall-panel: #2a0f1a;
  --wall-tile:  #240c16;
  --wall-tile-edge: #3d1a26;   /* border on a wall panel */
  --wall-ink:   #fffaed;
  --wall-dim:   rgba(255, 250, 237, .62);

  /* --- type ------------------------------------------------------- */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* 86 uses */
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Work Sans', system-ui, 'Helvetica Neue', sans-serif;

  /* mockup px -> shipped px */
  --fs-eyebrow: 11px;    /* 10   */
  --fs-meta:    13px;    /* 11   */
  --fs-xs:      14px;    /* off the mockup's scale: fills the 13->15 gap where
                            13px would read as fine print */
  --fs-sm:      15px;    /* 12.5 - the mockup's most-used size, 68 uses */
  --fs-body:    16px;    /* 13.5 - also the input size: below 16px iOS Safari
                            zooms the page when a field is focused */
  --fs-lead:    18px;    /* 15   */
  --fs-lg:      20px;    /* 17   */

  --ds-xs:   25px;       /* 21   */
  --ds-sm:   30px;       /* 25   */
  --ds-md:   36px;       /* 30   */
  --ds-lg:   41px;       /* 34   */
  --ds-xl:   48px;       /* 40   - section headings */
  --ds-hero: 77px;       /* 64   - the one hero size */

  /* the mockup uses only these three weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  --track-tight:   -.015em;  /* display */
  --track-none:    0;
  --track-wide:    .06em;
  --track-label:   .16em;
  --track-eyebrow: .24em;

  --lh-display: 1.06;
  --lh-body:    1.65;

  /* --- radius (mockup, verbatim) --- */
  --r-xs:    4px;    /* image corners, thumbnails */
  --r-sm:    6px;
  --r-md:    8px;    /* inputs, small panels */
  --r-lg:    11px;   /* cards */
  --r-pill:  999px;  /* 27 uses - every button */
  --r-round: 50%;
  --radius:  var(--r-lg);   /* kept: existing rules reference this name */

  /* --- spacing --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  44px;   /* mockup section gutter */
  --s-9:  56px;
  --s-10: 80px;   /* section rhythm */

  /* --- layout --- */
  --measure:      1200px;  /* content column */
  --control-h:    48px;    /* mockup: min-height:48px on every primary button */
  --control-h-sm: 40px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The UA rule for [hidden] is a bare attribute selector, so any class that sets
   display beats it and the element stays on screen. Everything here that gets
   toggled with the hidden attribute is also a flex or inline-block, so make the
   attribute win outright. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Guard for the full-bleed bands: clip (not hidden) keeps position:sticky working. */
body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100dvh;
}

a { color: var(--accent-ink); }
a:hover { color: var(--ink); }

.display { font-family: var(--display); font-weight: var(--w-regular); }
.serif { font-family: var(--serif); }

/* Small gold label that opens a section. */
.kicker {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Headlines are set in the serif at its natural weight and sentence case.
   The old uppercase letterspacing belonged to the previous skin. */
h1.hero {
  font-family: var(--display);
  font-weight: var(--w-regular);
  font-size: clamp(40px, 8vw, var(--ds-hero));
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  text-transform: none;
}
h1.hero em { font-style: italic; color: var(--accent-ink); }

.lead { color: var(--muted); font-size: var(--fs-lead); line-height: 1.7; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--control-h);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-7);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-none);
  text-transform: none;
  cursor: pointer;
  text-decoration: none;
  /* Pills read badly when the label wraps inside them. */
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--ink); color: var(--on-dark); }
.btn-primary:hover { background: var(--ink-hover); color: var(--on-dark); }
.btn-rose { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.btn-rose:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-sm { min-height: var(--control-h-sm); padding: var(--s-2) var(--s-5); font-size: var(--fs-meta); }

.arrow::after { content: "→"; letter-spacing: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-family: var(--sans);
  font-weight: var(--w-regular);
  /* 16px keeps iOS from zooming the page when a field is focused. */
  font-size: var(--fs-body);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s-6) 0 var(--s-2);
}

.err { color: var(--live-ink); font-size: var(--fs-sm); min-height: 1.3em; margin-top: var(--s-3); }

.badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.badge-free { border: 1px solid var(--line-strong); color: var(--muted); }
/* The mockup pairs #f8f3ea on #a1815a, which is 3.6:1 and misses AA for a
   label this small. The deeper accent keeps the gold and reaches 5.1:1. */
.badge-premium { background: var(--accent-ink); color: var(--on-dark); }

.fade-in { animation: fadeUp .6s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* top nav */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s-5) var(--s-7);
  /* The bar spans the window while its contents stay in the 1200px column.
     Both the fill and the hairline are drawn by pseudo-elements sized to exactly
     100vw. This used to be a spread box-shadow with clip-path, but clip-path
     clips every descendant — including the language menu, which has to hang
     below the bar. */
}
.nav::before {
  content: "";
  position: absolute;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  top: 0; bottom: 0;
  background: var(--panel);
  z-index: -1;
}
.nav::after {
  content: "";
  position: absolute;
  /* Exactly viewport-wide, no further: unlike a box-shadow, an absolutely
     positioned pseudo-element still counts toward scroll width even when
     clip-path hides it, so -100vmax here would make the page scroll sideways. */
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.logo {
  font-family: var(--display);
  font-weight: var(--w-semibold);
  font-size: var(--ds-xs);
  letter-spacing: var(--track-none);
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
}
.logo:hover { color: var(--ink); }
.nav .links { display: flex; align-items: center; gap: var(--s-6); }
.nav .links a.plain {
  font-size: var(--fs-meta);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-none);
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
}
.nav .links a.plain:hover { color: var(--ink); }
/* The one nav item that is an action rather than a destination. */
.nav .links a.plain.cta {
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 600;
}
.nav .links a.plain.cta:hover { background: var(--ink-hover); color: var(--on-dark); }

/* language switch: a pill showing the current language, opening a small menu */
.langsw { position: relative; display: inline-block; }
.langsw-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-wide);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.langsw-btn:hover { border-color: var(--accent); }
.langsw-btn svg { transition: transform .2s ease; }
.langsw.open .langsw-btn svg { transform: rotate(180deg); }

.langsw-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 28px rgba(51, 42, 32, .14);
  padding: var(--s-1);
  display: none;
  z-index: 60;
}
.langsw.open .langsw-menu { display: block; }
.langsw-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
.langsw-menu button:hover { background: var(--bg); }
.langsw-menu button.on { background: var(--accent-ink); color: var(--on-dark); }