@font-face{font-family:'Bai Jamjuree';font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@fontsource/bai-jamjuree@5.3.0/files/bai-jamjuree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/npm/@fontsource/bai-jamjuree@5.3.0/files/bai-jamjuree-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@fontsource/bai-jamjuree@5.3.0/files/bai-jamjuree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-thai@5.3.0/files/noto-sans-thai-thai-400-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-display:swap;font-weight:500;src:url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-thai@5.3.0/files/noto-sans-thai-thai-500-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-display:swap;font-weight:600;src:url(https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-thai@5.3.0/files/noto-sans-thai-thai-600-normal.woff2) format('woff2')}

  /* Registered so the rim colours can cross-fade instead of snapping. */
  @property --rim-hi { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.6); }
  @property --rim-ac { syntax: '<color>'; inherits: true; initial-value: rgba(201, 169, 97, 0.22); }
  @property --rim-lo { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.05); }
  @property --rim-in { syntax: '<color>'; inherits: true; initial-value: rgba(201, 169, 97, 0.3); }
  @property --sheen { syntax: '<number>'; inherits: true; initial-value: 0.85; }
  @property --tp { syntax: '<number>'; inherits: true; initial-value: 0; }
  @property --sp { syntax: '<number>'; inherits: true; initial-value: 0; }
  @property --rwt { syntax: '<number>'; inherits: true; initial-value: 0; }
  @property --rct { syntax: '<number>'; inherits: true; initial-value: 0; }
  @property --rwb { syntax: '<number>'; inherits: true; initial-value: 0; }
  @property --rcb { syntax: '<number>'; inherits: true; initial-value: 0; }

  :root {
    --deep-navy: #070E18;   /* working value: Deep Navy hex not locked yet */
    --void-black: #000000;  /* working value: Void Black hex not locked yet */
    --citadel-gold: #C9A961;
    --foam: #ECE9E2;
    --mist: #A3AEBF;
    --dim: rgba(163, 174, 191, 0.3);
    --line: rgba(236, 233, 226, 0.1);
    --pane: #0A1422;
    --sheet: #FFFFFF;
    --ink: #515A69;
    --rule: #E5E7EB;
    --bull: #089981;
    --bear: #F23645;
    --flat: #787B86;
    --max: 1120px;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--deep-navy);
    overscroll-behavior-y: none;
  }

  body {
    margin: 0;
    background: transparent;
    --bgp: 0;
    color: var(--foam);
    font-family: "Bai Jamjuree", "Noto Sans Thai", "Sukhumvit Set", "Leelawadee UI", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; }

  :focus-visible { outline: 2px solid var(--citadel-gold); outline-offset: 3px; }

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

  /* ---------- Background: drifting gold field that reacts to scroll ---------- */
  .bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--deep-navy);
  }

  @supports (height: 100lvh) {
    .bg { height: 100lvh; }
  }

  .bg span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(10px);
    will-change: transform;
  }

  .bg .b1 {
    top: -22%;
    left: 12%;
    width: 68vmax;
    height: 68vmax;
    background: radial-gradient(closest-side, rgba(201, 169, 97, 0.15), rgba(201, 169, 97, 0) 70%);
    transform: translate3d(calc(var(--bgp) * 8vw), calc(var(--bgp) * -26vh), 0);
    animation: drift1 26s ease-in-out infinite alternate;
  }

  .bg .b2 {
    top: 34%;
    right: -18%;
    width: 58vmax;
    height: 58vmax;
    background: radial-gradient(closest-side, rgba(78, 106, 148, 0.14), rgba(78, 106, 148, 0) 70%);
    transform: translate3d(calc(var(--bgp) * -12vw), calc(var(--bgp) * -40vh), 0);
    animation: drift2 32s ease-in-out infinite alternate;
  }

  .bg .b3 {
    bottom: -26%;
    left: -12%;
    width: 62vmax;
    height: 62vmax;
    background: radial-gradient(closest-side, rgba(201, 169, 97, 0.1), rgba(201, 169, 97, 0) 70%);
    transform: translate3d(calc(var(--bgp) * 14vw), calc(var(--bgp) * -30vh), 0);
    animation: drift1 38s ease-in-out infinite alternate-reverse;
  }

  /* Contour lines: depth under the surface, the way Black Tide Map draws
     levels under price. They flex as you scroll, so the whole field breathes. */
  .bg .contours {
    position: absolute;
    inset: -6% -4%;
    border-radius: 0;
    filter: none;
    width: auto;
    height: auto;
    overflow: visible;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }

  .bg .contours svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bg .contours path {
    fill: none;
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
  }

  /* Each band rides the scroll at its own rate, so the set never moves as a
     block. --wv is driven from JS. */
  .bg .contours .warm path { stroke: rgba(201, 169, 97, 0.42); }
  .bg .contours .cool path { stroke: rgba(122, 158, 214, 0.3); }

  /* Every line carries its own phase of the same wave, so the crest travels
     through the set instead of the whole block sliding. */
  /* Each line drifts on its own clock, so the set never repeats as a block
     and the motion continues whether or not you scroll. */
  .bg .contours path,
  .refract .field path {
    animation: wave var(--d, 20s) ease-in-out infinite alternate;
    animation-delay: var(--dl, 0s);
    translate: calc(var(--sp, 0) * var(--px, 0) * 1px) calc(var(--sp, 0) * var(--py, 0) * 1px);
  }

  @keyframes wave {
    from { transform: translate3d(calc(var(--ax, 18) * -1px), calc(var(--ay, 26) * 1px), 0); }
    to   { transform: translate3d(calc(var(--ax, 18) * 1px), calc(var(--ay, 26) * -1px), 0); }
  }

  .bg .contours .warm path:nth-child(1), .refract .warm path:nth-child(1) { --ax: 11; --ay: 26; --d: 17.0s; --dl: -0.0s; --px: -14; --py: -120; }
  .bg .contours .warm path:nth-child(2), .refract .warm path:nth-child(2) { --ax: 15; --ay: 22; --d: 21.5s; --dl: -3.4s; --px: 10; --py: -96; }
  .bg .contours .warm path:nth-child(3), .refract .warm path:nth-child(3) { --ax: 19; --ay: 19; --d: 19.0s; --dl: -7.1s; --px: -22; --py: -150; }
  .bg .contours .warm path:nth-child(4), .refract .warm path:nth-child(4) { --ax: 23; --ay: 16; --d: 24.5s; --dl: -11.8s; --px: 16; --py: -74; }
  .bg .contours .warm path:nth-child(5), .refract .warm path:nth-child(5) { --ax: 27; --ay: 14; --d: 22.0s; --dl: -15.2s; --px: -9; --py: -132; }
  .bg .contours .warm path:nth-child(6), .refract .warm path:nth-child(6) { --ax: 21; --ay: 18; --d: 27.5s; --dl: -5.6s; --px: 20; --py: -104; }
  .bg .contours .warm path:nth-child(7), .refract .warm path:nth-child(7) { --ax: 17; --ay: 21; --d: 18.5s; --dl: -9.3s; --px: -17; --py: -86; }
  .bg .contours .cool path:nth-child(1), .refract .cool path:nth-child(1) { --ax: -16; --ay: -20; --d: 23.0s; --dl: -2.7s; --px: 12; --py: 92; }
  .bg .contours .cool path:nth-child(2), .refract .cool path:nth-child(2) { --ax: -20; --ay: -17; --d: 26.5s; --dl: -13.1s; --px: -19; --py: 124; }
  .bg .contours .cool path:nth-child(3), .refract .cool path:nth-child(3) { --ax: -24; --ay: -14; --d: 20.5s; --dl: -6.4s; --px: 8; --py: 70; }
  .bg .contours .warm path:nth-child(2), .refract .warm path:nth-child(2) { --w: var(--w1); --ax: 14; --ay: 35; }
  .bg .contours .warm path:nth-child(3), .refract .warm path:nth-child(3) { --w: var(--w2); --ax: 18; --ay: 32; }
  .bg .contours .warm path:nth-child(4), .refract .warm path:nth-child(4) { --w: var(--w3); --ax: 22; --ay: 29; }
  .bg .contours .warm path:nth-child(5), .refract .warm path:nth-child(5) { --w: var(--w4); --ax: 26; --ay: 26; }
  .bg .contours .warm path:nth-child(6), .refract .warm path:nth-child(6) { --w: var(--w5); --ax: 30; --ay: 23; }
  .bg .contours .warm path:nth-child(7), .refract .warm path:nth-child(7) { --w: var(--w6); --ax: 34; --ay: 20; }
  .bg .contours .cool path:nth-child(1), .refract .cool path:nth-child(1) { --w: var(--w7); --ax: -20; --ay: -26; }
  .bg .contours .cool path:nth-child(2), .refract .cool path:nth-child(2) { --w: var(--w8); --ax: -26; --ay: -22; }
  .bg .contours .cool path:nth-child(3), .refract .cool path:nth-child(3) { --w: var(--w9); --ax: -32; --ay: -18; }

  @keyframes swell1 { to { margin-left: 18px; } }
  @keyframes swell2 { to { margin-left: -14px; } }

  @keyframes drift1 { to { margin-left: 5vw; margin-top: 4vh; } }
  @keyframes drift2 { to { margin-left: -6vw; margin-top: -5vh; } }

  /* ---------- Liquid glass ---------- */
  /* Same recipe as the menu bar: clear body, blur does the work,
     one hairline along the top edge. */
  .glass {
    position: relative;
    isolation: isolate;
    background-color: rgba(7, 14, 24, 0.16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 0;
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.5),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.14),
      0 12px 34px rgba(0, 0, 0, 0.32);
  }

  /* Rim: a gradient hairline, bright where the light hits, gone where it doesn't. */
  .glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      calc(145deg + var(--bgp, 0) * 70deg),
      var(--rim-hi),
      var(--rim-in) 24%,
      var(--rim-lo) 44%,
      transparent 56%,
      var(--rim-ac) 78%,
      var(--rim-hi));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: --rim-hi 0.5s ease, --rim-ac 0.5s ease, --rim-lo 0.5s ease, --rim-in 0.5s ease;
  }

  .glass::after { display: none; }

  /* Each section declares the light it throws; glass sitting over it picks that up. */
  [data-tone="gold"] {
    --rim-hi: rgba(255, 246, 224, 0.72);
    --rim-ac: rgba(201, 169, 97, 0.75);
    --rim-lo: rgba(201, 169, 97, 0.1);
    --sheen: 0.9;
  }

  [data-tone="steel"] {
    --rim-hi: rgba(226, 238, 255, 0.5);
    --rim-ac: rgba(122, 158, 214, 0.6);
    --rim-lo: rgba(226, 238, 255, 0.05);
    --sheen: 0.7;
  }

  [data-tone="deep"] {
    --rim-hi: rgba(255, 255, 255, 0.42);
    --rim-ac: rgba(201, 169, 97, 0.4);
    --rim-lo: rgba(255, 255, 255, 0.04);
    --sheen: 0.6;
  }

  /* The support section is on the same dark base as everything else now. */
  [data-tone="light"] {
    --rim-hi: rgba(255, 246, 224, 0.7);
    --rim-ac: rgba(201, 169, 97, 0.6);
    --rim-lo: rgba(201, 169, 97, 0.1);
    --sheen: 0.8;
  }

  /* Chromium can filter the backdrop itself, which bends whatever is really
     behind — text, logo, cards — not a copy. Only applied when the engine is
     confirmed, so no other browser ever sees these declarations. */
  .real-lens .masthead.is-scrolled .masthead-inner {
    backdrop-filter: url(#edge-lens) blur(3px);
  }

  .real-lens .pillars {
    backdrop-filter: url(#edge-lens) blur(3px);
  }

  .real-lens .tool {
    backdrop-filter: url(#edge-lens-sm) blur(3px);
  }

  .real-lens .icon-btn {
    backdrop-filter: url(#edge-lens-sm) blur(3px);
  }

  /* The two pill buttons get the bar's own lens, not the gentler one, so their
     glass reads the same as the menu bar rather than as a faint edge. */
  .real-lens .btn-ghost,
  .real-lens .portal-link {
    backdrop-filter: url(#edge-lens) blur(3px);
  }

  /* the copied contours would double up once the real backdrop is bending */
  .real-lens .refract { display: none; }

  /* The bar and the strip reflect their own gold content on the top arc and
     whichever contour is crossing on the bottom, exactly as the cards do. */
  .masthead-inner,
  .pillars {
    --own: rgba(201, 169, 97, 0.7);
    --rim-in: var(--own);
    --rim-ac: rgba(201, 169, 97, 0.35);
  }

  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .masthead-inner,
    .pillars {
      --rim-in: color-mix(in srgb,
        var(--own) calc((0.35 + 0.65 * var(--rwt, 0)) * 100%), rgba(201, 169, 97, 0.22));
      --rim-ac: color-mix(in srgb,
        color-mix(in srgb, rgba(122, 158, 214, 0.85) calc(var(--rcb, 0) * 100%), rgba(201, 169, 97, 0.85))
        calc(max(var(--rwt, 0), var(--rwb, 0)) * 100%), rgba(201, 169, 97, 0.22));
    }
  }

  /* Each tool card borrows the accent of the chart printed on it. */
  .tool-btp { --own: rgba(201, 169, 97, 0.8); --rim-hi: rgba(255, 246, 224, 0.7); }
  .tool-bttpo { --own: rgba(94, 200, 229, 0.75); --rim-hi: rgba(224, 248, 255, 0.58); }
  .tool-btv { --own: rgba(230, 126, 34, 0.75); --rim-hi: rgba(255, 240, 224, 0.58); }
  .tool-btk2 { --own: rgba(95, 214, 176, 0.78); --rim-hi: rgba(226, 255, 245, 0.58); }
  .tool-btvwap { --own: rgba(224, 112, 156, 0.75); --rim-hi: rgba(255, 232, 242, 0.58); }
  .tool-btsvwap { --own: rgba(88, 148, 240, 0.78); --rim-hi: rgba(226, 238, 255, 0.58); }
  .tool-btsib { --own: rgba(22, 160, 133, 0.8); --rim-hi: rgba(226, 255, 246, 0.56); }
  .tool-btw { --own: rgba(201, 169, 97, 0.75); --rim-hi: rgba(255, 246, 224, 0.66); }
  .tool-btm { --own: rgba(201, 169, 97, 0.65); --rim-hi: rgba(255, 246, 224, 0.6); }
  .tool-obv { --own: rgba(8, 153, 129, 0.8); --rim-hi: rgba(224, 255, 248, 0.55); }
  .tool-mfi { --own: rgba(242, 54, 69, 0.72); --rim-hi: rgba(255, 232, 234, 0.55); }
  .tool-stoch { --own: rgba(47, 111, 237, 0.75); --rim-hi: rgba(226, 238, 255, 0.58); }
  .tool-rsi { --own: rgba(155, 122, 214, 0.75); --rim-hi: rgba(240, 232, 255, 0.55); }

  /* ---------- Masthead ---------- */
  .masthead {
    position: fixed;
    inset: calc(10px + env(safe-area-inset-top)) 0 auto;
    z-index: 20;
    padding: 0 14px;
  }

  .masthead-inner {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    max-width: calc(var(--max) - 40px);
    margin: 0 auto;
    padding: 8px 10px 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
  }

  .masthead.is-scrolled .masthead-inner {
    background-color: rgba(7, 14, 24, 0.14);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.14),
      0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .masthead.on-light .masthead-inner {
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
      inset 0 -0.5px 0 rgba(7, 14, 24, 0.07),
      0 10px 30px rgba(7, 14, 24, 0.14);
  }

  .masthead.is-scrolled .masthead-inner::before { opacity: 1; }
  .masthead.is-scrolled .masthead-inner::after { opacity: 0.4; }

  .masthead-inner::before,
  .masthead-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .masthead-inner::before {
    padding: 1px;
    background: linear-gradient(
      calc(145deg + var(--bgp, 0) * 70deg),
      rgba(255, 255, 255, 0.5),
      var(--rim-in) 26%,
      rgba(255, 255, 255, 0.14) 52%,
      var(--rim-ac) 80%,
      rgba(255, 255, 255, 0.45));
    transition: --rim-ac 0.5s ease, opacity 0.4s ease;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .masthead-inner::after { display: none; }

  .masthead.on-light .masthead-inner {
    background-color: rgba(255, 255, 255, 0.38);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(7, 14, 24, 0.06),
      inset 10px 0 20px -12px rgba(255, 255, 255, 0.7),
      inset -10px 0 20px -12px rgba(255, 255, 255, 0.7),
      0 10px 30px rgba(7, 14, 24, 0.14);
  }

  .masthead.on-light .masthead-inner::after { opacity: 0.4; }


  .masthead.on-light .wordmark { color: var(--deep-navy); }
  .masthead.on-light .nav-link { color: rgba(7, 14, 24, 0.66); }
  .masthead.on-light .nav-link:hover { color: var(--deep-navy); }
  .masthead.on-light .icon-btn { color: var(--deep-navy); }

  .wordmark,
  .nav-link,
  .icon-btn { transition: color 0.35s ease; }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  .wordmark-mark {
    width: 26px;
    height: 26px;
    color: var(--citadel-gold);
    flex: none;
  }

  .nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-link {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--mist);
    font-size: 0.9375rem;
    text-decoration: none;
  }

  .nav-link:hover { color: var(--foam); }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    border-radius: 50%;
    color: var(--foam);
  }

  .icon-btn { background-color: rgba(7, 14, 24, 0.16); }
  .icon-btn svg { display: block; }

  @media (max-width: 520px) {
    .nav-link { display: none; }
  }

  /* ---------- Hero (pinned while the eclipse completes) ---------- */
  .hero-wrap {
    position: relative;
    height: 160vh;
    height: 160svh;
  }

  .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(84px + env(safe-area-inset-top)) 20px 104px;
    text-align: center;
    overflow: hidden;
  }

  /* Signature moment: the four petals of the mark close in on the empty centre,
     leaving the X in the negative space. The spread narrows; the mark resolves. */
  .mark {
    --size: clamp(150px, min(50vw, 30vh), 360px);
    --open: 1;     /* 1 = petals apart, 0 = mark closed */
    --glow: 0.28;
    position: relative;
    flex: none;
    width: var(--size);
    height: var(--size);
    margin-bottom: 36px;
  }

  .mark .halo {
    position: absolute;
    inset: -46%;
    pointer-events: none;
    opacity: var(--glow);
    background: radial-gradient(closest-side,
      rgba(201, 169, 97, 0) 22%, rgba(201, 169, 97, 0.16) 34%, rgba(201, 169, 97, 0.34) 40%,
      rgba(201, 169, 97, 0.18) 50%, rgba(201, 169, 97, 0.08) 62%, rgba(201, 169, 97, 0.03) 76%,
      rgba(201, 169, 97, 0) 100%);
  }

  .mark svg {
    position: relative;
    z-index: 1;
    will-change: transform;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .petal {
    fill: var(--citadel-gold);
    transform-box: view-box;
    transform-origin: 500px 500px;
    transform:
      translate(calc(var(--dx) * var(--open) * 1px), calc(var(--dy) * var(--open) * 1px))
      rotate(calc(var(--open) * -5deg));
  }

  .petal-n { --dx: 0; --dy: -108; }
  .petal-w { --dx: -108; --dy: 0; }
  .petal-e { --dx: 108; --dy: 0; }
  .petal-s { --dx: 0; --dy: 108; }

  /* Crosshair hairlines that retract as the mark closes. */

  .eyebrow {
    margin: 0 0 14px;
    color: var(--citadel-gold);
    font-size: clamp(0.7rem, 2.2vw, 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0;
    animation: fade 0.8s ease-out 0.45s forwards;
  }

  .hero h1 {
    margin: 0;
    font-weight: 600;
    font-size: clamp(2.4rem, min(10vw, 8.6vh), 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .hero h1 .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
  }

  .hero h1 .line > span {
    display: inline-block;
    transform: translateY(105%);
    animation: rise 0.95s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s forwards;
  }

  .hero h1 .line + .line > span { animation-delay: 0.22s; }

  @keyframes rise { to { transform: none; } }

  .hero .lead {
    margin: 18px auto 0;
    max-width: 38rem;
    color: var(--mist);
    font-size: 1.1875rem;
    text-wrap: balance;
    opacity: 0;
    animation: fade 0.8s ease-out 0.55s forwards;
  }

  .hero .lead [lang="th"] {
    display: block;
    margin-top: 6px;
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    opacity: 0;
    animation: fade 0.8s ease-out 0.7s forwards;
  }

  @keyframes fade { to { opacity: 1; } }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }

  .btn-gold {
    background: var(--citadel-gold);
    color: var(--deep-navy);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .btn-gold:hover {
    background: #D7BB7A;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(201, 169, 97, 0.35);
  }

  .btn-gold:active { transform: translateY(0); }
  .btn-ghost,
  .icon-btn {
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.14),
      0 6px 18px rgba(0, 0, 0, 0.3);
  }

  /* Same body as the bar: a touch less tint, the same hairline, and 3px blur to
     match every other surface. */
  .btn-ghost,
  .icon-btn,
  .portal-link {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .btn-ghost,
  .portal-link {
    background-color: rgba(7, 14, 24, 0.14);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.14),
      0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .btn-ghost::after,
  .icon-btn::after { opacity: 0.35; }

  .btn-ghost { color: var(--foam); background-color: rgba(7, 14, 24, 0.14); }

  .btn-ghost,
  .icon-btn {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  /* Hover: the glass lights up at the rim and lifts slightly, as if tilted to the light. */
  .btn-ghost:hover,
  .icon-btn:hover {
    background-color: rgba(236, 233, 226, 0.12);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      inset 0 5px 8px -5px rgba(255, 255, 255, 0.6),
      inset 6px 0 10px -7px rgba(201, 169, 97, 0.55),
      inset -6px 0 10px -7px rgba(201, 169, 97, 0.55),
      0 8px 22px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(201, 169, 97, 0.35);
  }

  .btn-ghost:active,
  .icon-btn:active { transform: translateY(0); }

  .btn-ghost:hover::after,
  .icon-btn:hover::after { opacity: 0.6; }

  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--mist);
    font-size: 0.8125rem;
    text-decoration: none;
    opacity: var(--cue, 1);
  }

  .scroll-cue i {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--citadel-gold), rgba(201, 169, 97, 0));
    transform-origin: top;
    animation: cue 1.9s ease-in-out infinite;
  }

  @keyframes cue {
    0% { transform: scaleY(0); opacity: 1; }
    60% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
  }

  @media (max-height: 740px) {
    .scroll-cue { display: none; }
    .hero { padding-bottom: 40px; }
  }

  /* ---------- Statement: words light up as you scroll ---------- */
  .statement {
    max-width: var(--max);
    margin: 0 auto;
    padding: 112px 20px 104px;
  }

  .statement p {
    margin: 0;
    max-width: 22em;
    font-weight: 500;
    font-size: clamp(1.75rem, 5.4vw, 3.4rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
  }

  .statement p[lang="th"] {
    margin-top: 28px;
    max-width: 30em;
    font-size: clamp(1.2rem, 3.2vw, 1.9rem);
    line-height: 1.65;
    letter-spacing: 0;
  }

  .js .statement .w { color: var(--dim); transition: color 0.35s ease; }
  .js .statement .w.on { color: var(--foam); }

  /* ---------- Brand pillars marquee ---------- */
  .pillars {
    /* thinner glass than the bar — 3px, both engines */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    overflow: hidden;
    padding: 26px 0;
    border-radius: 0;
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.42),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.16),
      0 12px 34px rgba(0, 0, 0, 0.28);
  }

  .pillars::before { display: none; }

  .marquee {
    display: flex;
    width: max-content;
    animation: marquee 32s linear infinite;
  }

  .marquee-group {
    display: flex;
    align-items: center;
    gap: 44px;
    padding-right: 44px;
  }

  .marquee-group span {
    font-weight: 600;
    font-size: clamp(2rem, 6.5vw, 4.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(236, 233, 226, 0.4);
  }

  .marquee-group .ring {
    flex: none;
    width: clamp(22px, 4vw, 34px);
    height: clamp(22px, 4vw, 34px);
    color: var(--citadel-gold);
    opacity: 0.9;
  }

  @keyframes marquee { to { transform: translateX(-50%); } }

  /* The one genuinely optical surface on the page: a clipped copy of the
     background, displaced so the grid actually bends at the strip's edges.
     Uses filter (not backdrop-filter), so Safari runs it. One instance only —
     the cost climbs steeply past a couple of these. */
  .refract {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }

  /* The filter sits on the strip-sized container, so only that band is
     processed. Inside it, a copy of the real contours is held in place
     against the ones behind, then displaced at the edges. */
  .refract {
    filter: url(#edge-lens) blur(5px);
    border-radius: inherit;
  }

  /* On a 48px pill the full displacement would swallow the surface. */
  .btn-ghost .refract,
  .icon-btn .refract,
  .portal-link .refract {
    filter: url(#edge-lens-sm) blur(3px);
  }

  .refract .field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(7, 14, 24, 0.42);
    will-change: transform;
  }

  .refract .field svg {
    position: absolute;
    inset: -6% -4%;
    width: 108%;
    height: 112%;
  }

  .refract .field path {
    fill: none;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
  }

  .refract .field .warm path { stroke: rgba(201, 169, 97, 0.55); }
  .refract .field .cool path { stroke: rgba(122, 158, 214, 0.4); }

  .lite .refract { display: none; }

  /* ---------- Tools ---------- */
  .tools {
    max-width: var(--max);
    margin: 0 auto;
    padding: 112px 20px 24px;
  }

  .section-head { max-width: 40rem; }

  .section-head h2 {
    margin: 0;
    font-weight: 600;
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
  }

  .section-head p {
    margin: 14px 0 0;
    color: var(--mist);
    font-size: 1.1875rem;
    line-height: 1.6;
    text-wrap: balance;
  }

  .section-head p[lang="th"] {
    margin-top: 6px;
    font-size: 1.125rem;
    line-height: 1.75;
  }

  .tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }

  @media (min-width: 600px) {
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 960px) {
    .tool-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .tool {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 22px;
    border-radius: 18px;
    transition: border-color 0.3s ease, transform 0.3s ease;
  }

  .tool {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    /* fallback where color-mix is missing: the card's own colour, held static */
    --rim-in: var(--own, rgba(201, 169, 97, 0.6));
    --rim-ac: rgba(201, 169, 97, 0.35);
  }

  /* Top arc reflects the card's own chart, coming up as it draws itself in.
     Bottom arc reflects whichever contour is crossing behind. */
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .tool {
      --rim-in: color-mix(in srgb,
        var(--own, rgba(201, 169, 97, 0.7)) calc((0.3 + 0.7 * var(--tp, 0)) * 100%),
        rgba(201, 169, 97, 0.2));
      --rim-ac: color-mix(in srgb,
        color-mix(in srgb, rgba(122, 158, 214, 0.85) calc(var(--rcb, 0) * 100%), rgba(201, 169, 97, 0.85))
        calc(max(var(--rwt, 0), var(--rwb, 0)) * 100%), rgba(201, 169, 97, 0.22));
    }
  }

  .tool:hover {
    border-color: rgba(201, 169, 97, 0.45);
    transform: translateY(-3px);
  }

  .tool-art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 150;
    border-radius: 10px;
    background: var(--pane);
  }

  .tool-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 10px 0;
  }

  /* NEW badge — takes the card's own accent, so each new card reads as part
     of its own family rather than carrying a fixed brand colour. */
  .tool-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  .badge-new {
    display: inline-block;
    padding: 3px 9px 4px;
    border-radius: 999px;
    background-color: rgba(201, 169, 97, 0.2);
    box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.45);
    color: var(--foam);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }

  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .badge-new {
      background-color: color-mix(in srgb, var(--own, rgba(201,169,97,0.8)) 24%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--own, rgba(201,169,97,0.8)) 55%, transparent);
    }
  }

  .tool h3 {
    margin: 0;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.2;
  }

  .tool p {
    margin: 10px 0 0;
    color: var(--mist);
    font-size: 1rem;
    line-height: 1.65;
  }

  .tool p[lang="th"] { margin-top: 6px; line-height: 1.75; }

  .spec {
    display: grid;
    gap: 8px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(236, 233, 226, 0.08);
    font-size: 0.9375rem;
  }

  .spec div { display: flex; justify-content: space-between; gap: 16px; }
  .spec dt { color: var(--mist); }
  .spec dd { margin: 0; }

  .tool-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 20px;
  }

  .tool-links .tool-link { margin-top: 0; padding-top: 0; }

  .manuals {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mist);
    font-size: 0.9375rem;
  }

  /* Signals these open a PDF rather than another page. */
  .manuals svg {
    flex: none;
    width: 15px;
    height: 15px;
    opacity: 0.75;
  }

  .manuals a { margin-left: 2px; }

  .manuals a {
    color: var(--mist);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(163, 174, 191, 0.35);
  }

  .manuals a:hover { color: var(--foam); border-bottom-color: var(--citadel-gold); }

  .tool-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 20px;
    color: var(--citadel-gold);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
  }

  .tool-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  /* Trailing arrow: this link leaves the site. */
  .tool-link svg {
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
  }

  .tool-link:hover svg { transform: translate(2px, -2px); }

  .tool-link:hover { text-decoration: underline; text-underline-offset: 4px; }

  .grid-line { stroke: rgba(236, 233, 226, 0.05); stroke-width: 1; }

  /* Each card's art is scrubbed by its own position on screen.
     --s is when that element starts, --w how long it takes. */
  .tool { --tp: 1; }

  .js .tool { --tp: 0; }

  .js .tool svg * {
    --e: max(0, min(1, calc((var(--tp) - var(--s, 0)) / var(--w, 0.5))));
  }

  .js .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--e));
  }

  .js .fadein { opacity: var(--e); }

  .js .rise { transform: translateY(calc((1 - var(--e)) * 14px)); opacity: var(--e); }

  .js .grow {
    transform: scaleX(var(--e));
    transform-origin: left center;
    transform-box: fill-box;
  }

  .js .pop {
    transform: scale(var(--e));
    transform-origin: center;
    transform-box: fill-box;
    opacity: var(--e);
  }

  /* A marker that rides along the drawn line as it advances. */
  .js .ride { offset-path: var(--path); offset-distance: calc(var(--e) * 100%); offset-rotate: 0deg; opacity: var(--e); }

  /* ---------- Support ---------- */
  .support { padding-top: 112px; }

  .support .section-head {
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .sheet {
    position: relative;
    width: calc(100% - 24px);
    max-width: var(--max);
    margin: 32px auto 0;
    padding: 0;
  }

  stripe-pricing-table { display: block; min-height: 420px; }

  .supporters {
    max-width: 44rem;
    margin: 56px auto 0;
    padding: 0 20px;
    text-align: center;
  }

  .supporters h3 {
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--foam);
  }

  .supporters p {
    margin: 10px 0 0;
    color: var(--mist);
    font-size: 1.0625rem;
    line-height: 1.65;
    text-wrap: balance;
  }

  .supporters p[lang="th"] { margin-top: 4px; line-height: 1.75; }

  .portal-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(7, 14, 24, 0.14);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.55),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.14),
      0 10px 30px rgba(0, 0, 0, 0.3);
    color: var(--foam);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  .portal-link:hover {
    background-color: rgba(236, 233, 226, 0.12);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(255, 255, 255, 0.2),
      0 8px 22px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(201, 169, 97, 0.35);
  }

  .portal-link:active { transform: translateY(0); }

  .no-js { margin: 0; padding: 48px 0; text-align: center; }

  .fine-print {
    max-width: var(--max);
    margin: 0 auto;
    padding: 30px 20px calc(40px + env(safe-area-inset-bottom));
    color: rgba(163, 174, 191, 0.66);
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
    text-wrap: nowrap;
  }

  .fine-print .copyright {
    margin-top: 14px;
    text-wrap: pretty;
  }

  /* No phone is wide enough to hold these on one line — let them wrap there. */
  @media (max-width: 900px) {
    .fine-print { max-width: 62ch; font-size: 0.875rem; text-wrap: pretty; }
  }

  .fine-print p { margin: 0; }
  .fine-print p + p { margin-top: 6px; line-height: 1.75; }

  @media (min-width: 760px) {
    .masthead-inner { padding-left: 32px; padding-right: 32px; }
    .statement, .tools { padding-left: 32px; padding-right: 32px; }
    .sheet {
      width: calc(100% - 48px);
    }
  }

  /* Lite mode — for devices that can't hold 60fps with the full stack.
     The layout and the logo animation stay; the costly compositing goes. */
  .lite .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(19, 33, 54, 0.88);
  }

  .lite .masthead.is-scrolled .masthead-inner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(16, 29, 48, 0.97);
  }

  .lite .bg .contours { display: none; }

  .lite .masthead.on-light .masthead-inner { background-color: rgba(255, 255, 255, 0.97); }

  .lite .glass::after,
  .lite .masthead-inner::after { display: none; }

  .lite .glass::before,
  .lite .masthead-inner::before { background: linear-gradient(150deg, var(--rim-hi), transparent 52%, var(--rim-ac)); }

  .lite .bg .b3,
  .lite .bg .contours { display: none; }

  .lite .bg span { filter: none; animation: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-wrap { height: auto; }
    .hero { position: relative; }
    .hero h1 .line > span, .hero .lead, .cta-row, .eyebrow { animation: none; transform: none; opacity: 1; }
    .scroll-cue i, .marquee { animation: none; }
    .bg span { animation: none; transform: none; }
    .js .statement .w { color: var(--foam); }
    .js .draw { stroke-dashoffset: 0; transition: none; }
    .js .fadein { opacity: 1; transition: none; }
  }

  /* =====================================================================
     Added for the multi-page, two-language site (2026-10). Everything above
     this line is the original support page, unchanged.
     ===================================================================== */

  .nav-link[aria-current="page"] { color: var(--foam); }
  /* The original page hid every nav link on phones; with real pages to reach,
     keep Rituals, Help and the language switch, and drop only Tools. */
  @media (max-width: 520px) {
    .nav-link { display: inline-block; padding: 10px 7px; font-size: 0.875rem; }
    .nav-link.tools-link { display: none; }
    .nav { gap: 0; }
  }
  .nav-link, .wordmark { white-space: nowrap; }
  /* Narrow phones: the mark alone carries the brand, so the links fit on one row. */
  @media (max-width: 430px) {
    .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  }

  /* Thai pages: the same font stack (Bai Jamjuree is Latin-only, so Thai falls
     through to Noto Sans Thai), but taller lines for tone marks, no tracking,
     no uppercase. */
  html[lang="th"] .eyebrow { letter-spacing: 0.04em; text-transform: none; font-size: clamp(0.85rem, 2.6vw, 1rem); }
  html[lang="th"] .hero h1 { font-size: clamp(2.2rem, min(9vw, 7.8vh), 4.6rem); line-height: 1.2; letter-spacing: 0; }
  html[lang="th"] .hero h1 .line { padding-bottom: 0.14em; }
  html[lang="th"] .hero .lead { line-height: 1.75; }
  html[lang="th"] .statement p { max-width: 24em; font-size: clamp(1.5rem, 4.4vw, 2.7rem); line-height: 1.5; letter-spacing: 0; }
  html[lang="th"] .section-head h2,
  html[lang="th"] .page-head h1 { line-height: 1.25; letter-spacing: 0; }
  html[lang="th"] .section-head p,
  html[lang="th"] .tool p,
  html[lang="th"] .card p,
  html[lang="th"] .supporters p,
  html[lang="th"] .faq details p,
  html[lang="th"] .risk p { line-height: 1.8; }
  html[lang="th"] .marquee-group span { font-size: clamp(1.7rem, 5.4vw, 3.4rem); line-height: 1.35; }

  /* ---------- Inner pages ---------- */
  .page-head {
    max-width: var(--max);
    margin: 0 auto;
    padding: calc(150px + env(safe-area-inset-top)) 20px 24px;
  }
  .page-head .eyebrow { opacity: 1; animation: none; }
  .page-head h1 {
    margin: 0;
    font-weight: 600;
    font-size: clamp(2.4rem, 7vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
  }
  .page-head .lead {
    margin: 18px 0 0;
    max-width: 38rem;
    color: var(--mist);
    font-size: 1.1875rem;
    line-height: 1.6;
    text-wrap: balance;
  }

  .block {
    max-width: var(--max);
    margin: 0 auto;
    padding: 88px 20px 24px;
  }

  .cards-3 { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

  .card {
    padding: 26px 24px 28px;
    border-radius: 18px;
    --own: rgba(201, 169, 97, 0.7);
    --rim-in: var(--own);
  }
  .card h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
  .card p { margin: 10px 0 0; color: var(--mist); line-height: 1.65; }
  .step-no { display: block; margin-bottom: 12px; color: var(--citadel-gold); font-weight: 600; font-size: 0.9375rem; }

  /* Black Tide Rituals feature: the σ bands drawn as contour lines. */
  .feature { display: grid; gap: 28px; margin-top: 36px; align-items: center; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .feature { grid-template-columns: 1.15fr 1fr; } }
  .feature-panel { padding: 14px; border-radius: 18px; --own: rgba(201, 169, 97, 0.8); --rim-in: var(--own); }
  .feature-art { display: block; width: 100%; height: auto; aspect-ratio: 640 / 400; border-radius: 10px; background: var(--pane); }
  .feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
  .feature-list h3 { margin: 0; font-size: 1.1875rem; font-weight: 600; color: var(--citadel-gold); }
  .feature-list p { margin: 6px 0 0; color: var(--mist); line-height: 1.65; }
  html[lang="th"] .feature-list p { line-height: 1.8; }
  .feature-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

  .plans { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .plans { grid-template-columns: repeat(2, 1fr); } }
  .plan { display: flex; flex-direction: column; padding: 28px 26px 30px; border-radius: 18px; --own: rgba(201, 169, 97, 0.75); --rim-in: var(--own); }
  .plan h3 { margin: 0; font-size: 1.25rem; font-weight: 600; }
  .plan .price { margin-top: 10px; font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--citadel-gold); }
  .plan p { margin: 8px 0 0; color: var(--mist); }
  .plan .btn { margin-top: 24px; align-self: flex-start; }

  .note { margin: 22px 0 0; max-width: 46rem; color: var(--mist); font-size: 0.9375rem; line-height: 1.7; }
  html[lang="th"] .note { line-height: 1.8; }
  .note a, .inline-link { color: var(--citadel-gold); text-underline-offset: 4px; }

  .faq { margin-top: 32px; padding: 6px 24px; border-radius: 18px; }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq details:last-child { border-bottom: 0; }
  .faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 16px 0;
    font-weight: 600;
    font-size: 1.0625rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; color: var(--citadel-gold); font-size: 1.4rem; font-weight: 400; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq details p { margin: 0 0 20px; max-width: 44rem; color: var(--mist); line-height: 1.7; }

  .contact { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .contact { grid-template-columns: repeat(2, 1fr); } }
  .contact .card a { display: inline-block; margin-top: 8px; color: var(--citadel-gold); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
  .contact .card a:hover { text-decoration: underline; text-underline-offset: 4px; }

  .risk p { margin: 14px 0 0; max-width: 46rem; color: var(--mist); line-height: 1.75; }

  @media (min-width: 760px) {
    .page-head, .block { padding-left: 32px; padding-right: 32px; }
  }

  /* ---------- Grouped Tools menu (pattern from LuxAlgo's mega menu) ---------- */
  .menu { position: relative; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; cursor: pointer; font: inherit;
  }
  .menu-btn svg { transition: transform 0.25s ease; }
  .menu.open .menu-btn svg { transform: rotate(180deg); }
  .menu-btn[aria-expanded="true"] { color: var(--foam); }
  .menu-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: -120px;
    width: min(860px, calc(100vw - 40px));
    padding: 24px 24px 18px;
    border-radius: 18px;
    background-color: rgba(7, 14, 24, 0.82);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    --own: rgba(201, 169, 97, 0.7); --rim-in: var(--own);
  }
  .menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-title { margin: 0 0 10px; color: var(--citadel-gold); font-size: 0.8125rem; font-weight: 600; }
  .menu-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .menu-col a { display: block; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; }
  .menu-col a:hover, .menu-col a:focus-visible { background-color: rgba(236, 233, 226, 0.06); }
  .mi-name { display: block; color: var(--foam); font-size: 0.9375rem; font-weight: 600; }
  .mi-desc { display: block; margin-top: 2px; color: var(--mist); font-size: 0.8125rem; line-height: 1.45; }
  .menu-all { display: inline-block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); width: 100%;
    color: var(--citadel-gold); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
  .menu-all:hover { text-decoration: underline; text-underline-offset: 4px; }
  .lite .menu-panel { background-color: rgba(16, 29, 48, 0.98); }
  @media (max-width: 900px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menu-panel { right: -80px; } }
  /* tool cards are jump targets from the menu: clear the fixed bar */
  .tool { scroll-margin-top: 96px; }

  /* ---------- Home: questions and the closing band ---------- */
  #questions .faq { max-width: 52rem; }
  .closing { max-width: var(--max); margin: 0 auto; padding: 88px 20px 24px; }
  .closing-inner { padding: 56px 28px 60px; border-radius: 24px; text-align: center; --own: rgba(201, 169, 97, 0.8); --rim-in: var(--own); }
  .closing h2 { margin: 0; font-weight: 600; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; }
  html[lang="th"] .closing h2 { line-height: 1.3; letter-spacing: 0; }
  .closing p { margin: 14px auto 0; max-width: 36rem; color: var(--mist); font-size: 1.125rem; line-height: 1.65; text-wrap: balance; }
  .closing-cta { opacity: 1; animation: none; }

  /* ---------- Footer (columns and legal notices, pattern from LuxAlgo) ---------- */
  .site-foot {
    max-width: var(--max);
    margin: 96px auto 0;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }
  .foot-top { display: grid; gap: 32px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .foot-top { grid-template-columns: 1.1fr 2fr; } }
  .foot-brand p { margin: 12px 0 0; color: var(--mist); font-size: 0.9375rem; }
  .foot-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .foot-title { margin: 0 0 10px; color: var(--foam); font-size: 0.9375rem; font-weight: 600; }
  .foot-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .foot-cols a { color: var(--mist); font-size: 0.9375rem; text-decoration: none; }
  .foot-cols a:hover { color: var(--foam); }
  .foot-legal { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); color: rgba(163, 174, 191, 0.7); font-size: 0.8125rem; line-height: 1.7; }
  html[lang="th"] .foot-legal { line-height: 1.85; }
  .foot-legal p { margin: 0 0 10px; max-width: 64rem; }
  .foot-legal .copyright { margin-top: 16px; }
  @media (min-width: 760px) { .site-foot, .closing { padding-left: 32px; padding-right: 32px; } }

  /* ---------- Black Tide Rituals panel: animated like the tool cards ---------- */
  .feature-panel { --tp: 1; }
  .js .feature-panel { --tp: 0; }
  .js .feature-panel svg * {
    --e: max(0, min(1, calc((var(--tp) - var(--s, 0)) / var(--w, 0.5))));
  }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .feature-panel {
      --rim-in: color-mix(in srgb, var(--own) calc((0.3 + 0.7 * var(--tp, 0)) * 100%), rgba(201, 169, 97, 0.2));
      --rim-ac: color-mix(in srgb,
        color-mix(in srgb, rgba(122, 158, 214, 0.85) calc(var(--rcb, 0) * 100%), rgba(201, 169, 97, 0.85))
        calc(max(var(--rwt, 0), var(--rwb, 0)) * 100%), rgba(201, 169, 97, 0.22));
    }
  }

  /* ---------- Tool detail pages (tools/*.html) ---------- */
  /* Every glass surface on a detail page takes the tool's own accent from its home card. */
  .detail .card, .detail .feature-panel, .detail .glance, .detail .faq,
  .detail .read-list, .detail .notes { --own: var(--tool-own); --rim-in: var(--own); }

  .detail .page-head .eyebrow a { color: inherit; text-decoration: none; }
  .detail .page-head .eyebrow a:hover { color: var(--foam); }

  .detail-top .feature { margin-top: 8px; }
  .detail-top .feature-panel .detail-art { aspect-ratio: 320 / 150; }
  .detail-intro p { margin: 0 0 14px; color: var(--mist); font-size: 1.0625rem; line-height: 1.7; }
  html[lang="th"] .detail-intro p { line-height: 1.85; }
  .detail-intro .feature-cta { margin-top: 26px; }
  .detail-intro .btn svg { width: 16px; height: 16px; flex: none; }
  .detail-intro .btn { display: inline-flex; align-items: center; gap: 8px; }

  .glance { margin-top: 28px; padding: 22px 24px 24px; border-radius: 18px; }
  .glance-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--citadel-gold); }
  .glance .spec {
    margin-top: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 32px;
  }
  .glance .spec div { flex-direction: column; justify-content: flex-start; gap: 3px; }
  .glance .spec dd { color: var(--foam); line-height: 1.45; }

  .parts { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .parts { grid-template-columns: repeat(2, 1fr); } }
  .part { position: relative; }
  .part-no { display: block; margin-bottom: 12px; color: var(--citadel-gold); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; }
  .part p + p { margin-top: 10px; }

  .points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .points li { position: relative; padding-left: 18px; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; }
  .points li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 7px; height: 7px; border-radius: 2px; background: var(--tool-own, var(--citadel-gold));
  }
  html[lang="th"] .points li { line-height: 1.75; }

  .read-list {
    counter-reset: r; margin: 32px 0 0; padding: 10px 26px; border-radius: 18px; list-style: none;
  }
  .read-list li {
    counter-increment: r; position: relative; padding: 18px 0 18px 48px;
    border-bottom: 1px solid var(--line); color: var(--mist); line-height: 1.7; max-width: 52rem;
  }
  .read-list li:last-child { border-bottom: 0; }
  .read-list li::before {
    content: counter(r); position: absolute; left: 0; top: 16px;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.875rem; font-weight: 600; color: var(--foam);
    box-shadow: inset 0 0 0 1px var(--tool-own, var(--citadel-gold));
  }
  html[lang="th"] .read-list li { line-height: 1.85; }

  .cards-2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .cards-2.two { grid-template-columns: 1.25fr 1fr; } }
  .settings { margin: 16px 0 0; display: grid; gap: 0; }
  .settings div { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .settings div:last-child { border-bottom: 0; }
  .settings dt { font-weight: 600; font-size: 0.9375rem; color: var(--foam); }
  .settings dd { margin: 4px 0 0; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; }
  html[lang="th"] .settings dd { line-height: 1.75; }

  .notes { margin: 28px 0 0; padding: 18px 26px; border-radius: 18px; list-style: none; display: grid; gap: 0; }
  .notes li { position: relative; padding: 12px 0 12px 22px; color: var(--mist); line-height: 1.7; border-bottom: 1px solid var(--line); }
  .notes li:last-child { border-bottom: 0; }
  .notes li::before { content: "!"; position: absolute; left: 0; top: 12px; color: var(--citadel-gold); font-weight: 700; }
  html[lang="th"] .notes li { line-height: 1.85; }

  .tool-nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  }
  .tool-nav a { color: var(--foam); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
  .tool-nav a:hover span { text-decoration: underline; text-underline-offset: 4px; }
  .tool-nav svg { width: 18px; height: 18px; flex: none; color: var(--citadel-gold); }
  .tool-nav small { display: block; color: var(--mist); font-size: 0.8125rem; }
  .tool-nav span { font-weight: 600; line-height: 1.35; }
  .tn-next { justify-self: end; text-align: right; }
  .tn-all { color: var(--citadel-gold) !important; font-weight: 600; font-size: 0.9375rem; }
  @media (max-width: 620px) {
    .tool-nav { grid-template-columns: 1fr 1fr; }
    .tn-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  }

  /* Home cards: title and a details link lead to the tool's own page. */
  .tool-title { color: inherit; text-decoration: none; }
  .tool-title:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .tool-more {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--foam); font-size: 1rem; font-weight: 600; text-decoration: none;
  }
  .tool-more svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s ease; }
  .tool-more:hover svg { transform: translateX(3px); }
  .tool-more:hover { text-decoration: underline; text-underline-offset: 4px; }
  @media (min-width: 860px) { .parts .part:last-child:nth-child(odd) { grid-column: 1 / -1; } }

  /* ---------- ?edit mode: key tags on every text block ---------- */
  .edit-keys [data-key] { outline: 1px dashed rgba(201, 169, 97, 0.45); outline-offset: 3px; }
  .k-tag {
    position: absolute; left: -2px; top: -1.35em; z-index: 30;
    padding: 1px 6px; border-radius: 4px;
    background: #C9A961; color: #070E18;
    font: 600 10.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0; text-transform: none; white-space: nowrap;
    pointer-events: none; user-select: all;
  }
  .edit-keys .marquee .k-tag { top: 0; }

  /* ---------- Tool pages: animated hero art and one picture per part ---------- */
  .art-panel { padding: 14px; border-radius: 18px; }
  .detail .art-panel { --own: var(--tool-own); --rim-in: var(--own); }
  .art-panel, .part-art { --tp: 1; }
  .js .art-panel, .js .part-art { --tp: 0; }
  .js .art-panel svg *, .js .part-art svg * { --e: max(0, min(1, calc((var(--tp) - var(--s, 0)) / var(--w, 0.5)))); }
  .part-art { margin: -8px -6px 18px; }
  .part-svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 150; border-radius: 10px; background: var(--pane); }
  .needle { transform-box: view-box; transform: rotate(calc(-90deg + var(--e, 1) * 130deg)); }
  .part .points { margin-top: 12px; }
  /* a lone last part spans the row: picture left, words right, so the picture stays card-sized */
  @media (min-width: 860px) {
    .parts .part:last-child:nth-child(odd) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-content: start; }
    .parts .part:last-child:nth-child(odd) > * { grid-column: 2; }
    .parts .part:last-child:nth-child(odd) > .part-art { grid-column: 1; grid-row: 1 / span 12; margin: 0; align-self: start; }
  }

  /* Ichimoku Kinko Hyo: vermilion */
  .tool-ichi { --own: rgba(236, 104, 64, 0.8); --rim-hi: rgba(255, 234, 226, 0.58); }
  .tool-chikou { --own: rgba(79, 179, 232, 0.8); --rim-hi: rgba(226, 244, 255, 0.58); }

  /* ---------- Product pages of blocks (admin panel › Site content › Pages, 23 Oct 2026; cms/render.js: page) ---------- */
  /* The blocks sit in an element of their own (the region the panel draws, carrying the page's colour); it adds no box. */
  .page-body { display: contents; }
  .detail .cms-text.glass { --own: var(--tool-own); --rim-in: var(--own); }
  /* an introduction without a picture: the words take the row */
  .feature.solo { grid-template-columns: 1fr; }
  .feature.solo .detail-intro { max-width: 46rem; }
  /* text: Markdown words, in a glass box or not */
  .cms-text { margin-top: 28px; max-width: 52rem; }
  .cms-text.glass { max-width: none; padding: 26px 28px; border-radius: 18px; }
  .cms-text :is(p, li) { color: var(--mist); font-size: 1.0625rem; line-height: 1.7; }
  html[lang="th"] .cms-text :is(p, li) { line-height: 1.85; }
  .cms-text p { margin: 0 0 14px; }
  .cms-text :is(ul, ol) { margin: 0 0 14px; padding-left: 1.3em; display: grid; gap: 6px; }
  .cms-text a:not(.btn) { color: var(--citadel-gold); text-underline-offset: 4px; }
  .cms-text strong { color: var(--foam); font-weight: 600; }
  .cms-text > :last-child, .cms-text p:last-child { margin-bottom: 0; }
  .cms-text .feature-cta { margin-top: 22px; }
  /* picture: in its panel (it draws itself in, as the tool pictures do), a line under it */
  .cms-figure { margin: 32px 0 0; }
  .cms-art { display: block; width: 100%; height: auto; aspect-ratio: 640 / 400; border-radius: 10px; background: var(--pane); }
  .cms-figure figcaption { margin-top: 12px; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; text-align: center; }
  /* code: the owner's own page in a sandboxed frame, as tall as what it shows (flow.js: Code frames). Its scheme stays
     dark on both themes, as its document's does, so the frame keeps its see-through background; the frame is told the
     theme and colours its words for it. */
  .cms-code { margin-top: 28px; }
  .cms-frame { display: block; width: 100%; border: 0; border-radius: 14px; background: transparent; color-scheme: dark; }

  /* ---------- Checkout, order, account (mockups) and policy pages ---------- */
  .flow .page-head { padding-bottom: 8px; }
  .flow-block { padding-top: 40px; }
  button.btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
  .btn-wide { width: 100%; }
  .btn-danger { color: #F2A3AA; background: rgba(242, 54, 69, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 54, 69, 0.45); }
  .btn-danger:hover { background: rgba(242, 54, 69, 0.16); }
  .muted, .muted-p { color: var(--mist); }
  .muted-p { margin: 8px 0 0; line-height: 1.7; }
  .muted-p a, .note a, .check a, .sum-note a { color: var(--citadel-gold); text-underline-offset: 3px; }
  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9375em; }

  .form-card {
    margin: 0 0 16px; padding: 24px 24px 26px; border-radius: 18px; border: 0; min-width: 0;
    --own: rgba(201, 169, 97, 0.6); --rim-in: var(--own);
  }
  .form-card.narrow { max-width: 560px; }
  .form-card h2, .form-card legend { margin: 0 0 16px; padding: 0; font-size: 1.125rem; font-weight: 600; color: var(--foam); }
  fieldset.form-card legend { float: left; width: 100%; }
  fieldset.form-card legend + * { clear: both; }
  html[lang="th"] .form-card h2, html[lang="th"] .form-card legend { line-height: 1.45; }

  .field { margin: 0 0 18px; }
  .field label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; }
  .field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px;
    border: 1px solid rgba(236, 233, 226, 0.16); background: rgba(7, 14, 24, 0.55);
    color: var(--foam); font: inherit; font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--citadel-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18); }
  .input-prefix { display: flex; align-items: stretch; border-radius: 12px; border: 1px solid rgba(236, 233, 226, 0.16); background: rgba(7, 14, 24, 0.55); }
  .input-prefix:focus-within { border-color: var(--citadel-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18); }
  .input-prefix span { display: flex; align-items: center; padding: 0 2px 0 14px; color: var(--mist); font-size: 0.9375rem; white-space: nowrap; }
  .input-prefix input { border: 0; background: none; box-shadow: none !important; padding-left: 2px; min-width: 0; }
  .hint { margin: 8px 0 0; color: var(--mist); font-size: 0.875rem; line-height: 1.6; }
  .hint-link { display: inline-block; margin-top: 6px; color: var(--citadel-gold); font-size: 0.875rem; }
  .err { display: none; margin: 8px 0 0; color: #F2A3AA; font-size: 0.875rem; }
  .invalid .err, .err.show { display: block; }
  .invalid input, .invalid .input-prefix { border-color: rgba(242, 54, 69, 0.7); }
  .ok-msg { margin: 14px 0 0; color: #8FE3C6; line-height: 1.6; }

  .choices { display: grid; gap: 10px; }
  @media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }
  .choice {
    position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; cursor: pointer;
    border: 1px solid rgba(236, 233, 226, 0.14); background: rgba(7, 14, 24, 0.35); transition: border-color 0.2s ease, background-color 0.2s ease;
  }
  .choice:hover { border-color: rgba(201, 169, 97, 0.5); }
  .choice:has(input:checked) { border-color: var(--citadel-gold); background: rgba(201, 169, 97, 0.08); }
  .choice input { margin: 3px 0 0; accent-color: var(--citadel-gold); width: 18px; height: 18px; flex: none; }
  .choice-body { display: grid; gap: 3px; flex: 1; }
  .choice-name { font-weight: 600; }
  .choice-note { color: var(--mist); font-size: 0.875rem; line-height: 1.55; }
  .choice-price { color: var(--citadel-gold); font-weight: 600; white-space: nowrap; }

  .agree { display: grid; gap: 12px; margin: 6px 0 22px; }
  .check { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; color: var(--mist); cursor: pointer; }
  .check input { margin: 4px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--citadel-gold); }
  .secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--mist); font-size: 0.875rem; }
  .secure svg { width: 15px; height: 15px; flex: none; }

  .checkout, .order-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 960px) {
    .checkout, .order-grid { grid-template-columns: minmax(0, 1fr) 360px; }
    .summary { position: sticky; top: 104px; }
  }
  .summary { padding: 24px; border-radius: 18px; --own: rgba(201, 169, 97, 0.75); --rim-in: var(--own); }
  .summary h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
  .summary h3 { margin: 22px 0 10px; font-size: 1rem; font-weight: 600; }
  .sum-item { margin: 6px 0 0; color: var(--citadel-gold); font-weight: 600; }
  .sum-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mist); font-size: 0.875rem; line-height: 1.65; }

  .kv { margin: 14px 0 0; display: grid; gap: 0; }
  .kv div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .kv div:last-child { border-bottom: 0; }
  .kv dt { color: var(--mist); font-size: 0.9375rem; }
  .kv dd { margin: 0; text-align: right; font-size: 0.9375rem; }
  .kv.big div { padding: 14px 0; }
  .kv.big dd { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }

  .mini-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; }
  .mini-steps li::marker { color: var(--citadel-gold); font-weight: 600; }

  .track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .track-step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .track-step:last-child { border-bottom: 0; }
  .track-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.875rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.25); color: var(--mist); }
  .track-dot svg { width: 16px; height: 16px; }
  .track-step.done .track-dot { background: var(--citadel-gold); color: #070E18; box-shadow: none; }
  .track-step.now .track-dot { box-shadow: inset 0 0 0 1.5px var(--citadel-gold); color: var(--citadel-gold); }
  .track-step h3 { margin: 4px 0 0; font-size: 1.0625rem; font-weight: 600; }
  .track-step p { margin: 4px 0 0; color: var(--mist); line-height: 1.65; }

  .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pill.ok { color: #8FE3C6; background: rgba(95, 214, 176, 0.12); }
  .pill.wait { color: var(--citadel-gold); background: rgba(201, 169, 97, 0.12); }
  .sample-pill { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: none;
    color: var(--mist); box-shadow: inset 0 0 0 1px rgba(163, 174, 191, 0.35); }

  .acct { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 900px) { .acct { grid-template-columns: 240px minmax(0, 1fr); } .acct-nav { position: sticky; top: 104px; } }
  .acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 18px; --own: rgba(201, 169, 97, 0.55); --rim-in: var(--own); }
  .acct-nav a { padding: 11px 14px; border-radius: 10px; color: var(--mist); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
  .acct-nav a:hover { color: var(--foam); background: rgba(236, 233, 226, 0.05); }
  .acct-nav a[aria-current] { color: var(--foam); background: rgba(201, 169, 97, 0.12); box-shadow: inset 2px 0 0 var(--citadel-gold); }
  .acct-nav .signout { margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 14px; }
  @media (max-width: 899px) {
    .acct-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .acct-nav a { white-space: nowrap; }
    .acct-nav .signout { margin: 0; border: 0; padding-top: 11px; }
  }

  .tiles { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; }
  @media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
  .tile { display: flex; flex-direction: column; padding: 22px; border-radius: 18px; --own: rgba(201, 169, 97, 0.6); --rim-in: var(--own); }
  .tile-h { margin: 0; color: var(--mist); font-size: 0.875rem; }
  .tile-v { margin: 8px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile-meta { margin: 14px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--mist); font-size: 0.875rem; }
  .tile-meta p { margin: 0; }
  .tile-link { margin-top: auto; padding-top: 18px; color: var(--citadel-gold); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
  .tile-link:hover { text-decoration: underline; text-underline-offset: 4px; }

  .table-card { padding: 8px 8px 4px; }
  .table-wrap { overflow-x: auto; }
  .orders { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
  .orders th { text-align: left; padding: 14px 16px; color: var(--mist); font-weight: 500; font-size: 0.8125rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .orders td { padding: 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .orders tr:last-child td { border-bottom: 0; }
  .orders a { color: var(--citadel-gold); }

  /* Policies */
  .updated { margin: 14px 0 0; color: var(--mist); font-size: 0.875rem; }
  .legal-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 980px) { .legal-grid { grid-template-columns: 260px minmax(0, 1fr); } .toc { position: sticky; top: 104px; } }
  .toc { padding: 18px 18px 14px; border-radius: 18px; --own: rgba(201, 169, 97, 0.5); --rim-in: var(--own); }
  .toc-h { margin: 0 0 10px; color: var(--citadel-gold); font-size: 0.8125rem; font-weight: 600; }
  .toc ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 0.875rem; color: var(--mist); }
  .toc a { color: var(--mist); text-decoration: none; line-height: 1.45; }
  .toc a:hover { color: var(--foam); }
  @media (max-width: 979px) { .toc ol { columns: 2; column-gap: 28px; display: block; } .toc li { margin-bottom: 6px; break-inside: avoid; } }
  @media (max-width: 560px) { .toc ol { columns: 1; } }
  .legal-body { max-width: 46rem; }
  .legal-sec { padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
  .legal-sec h2 { margin: 0 0 12px; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; }
  .legal-sec p { margin: 0 0 12px; color: var(--mist); line-height: 1.75; }
  html[lang="th"] .legal-sec p { line-height: 1.9; }
  .legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .legal-links a { color: var(--citadel-gold); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
  .legal-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* Your tools (account) and the access prompt on tool pages */
  .lib { list-style: none; margin: 8px 0 0; padding: 0; }
  .lib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .lib-row:last-child { border-bottom: 0; }
  @media (min-width: 760px) { .lib-row { grid-template-columns: minmax(0, 1fr) 130px 300px; } }
  .lib-name { color: var(--foam); font-weight: 600; text-decoration: none; }
  .lib-name:hover { text-decoration: underline; text-underline-offset: 4px; }
  .lib-tag { margin: 4px 0 0; color: var(--mist); font-size: 0.875rem; line-height: 1.55; }
  .lib-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; grid-column: 1 / -1; }
  @media (min-width: 760px) { .lib-links { grid-column: auto; justify-content: flex-end; } }
  .lib-links .tool-link { padding-top: 0; margin-top: 0; font-size: 0.9375rem; }
  .mlink { color: var(--mist); font-size: 0.9375rem; text-decoration: none; border-bottom: 1px solid rgba(163, 174, 191, 0.35); }
  .mlink:hover { color: var(--foam); border-bottom-color: var(--citadel-gold); }
  .btn-sm { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }
  .pill.off { color: var(--mist); background: rgba(163, 174, 191, 0.1); }
  .access-note { margin: 14px 0 0; color: var(--mist); font-size: 0.9375rem; line-height: 1.6; }
  /* the account grid must never be widened by a table */
  .acct { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .acct { grid-template-columns: 240px minmax(0, 1fr); } }
  .acct-main { min-width: 0; }
  .acct-nav { max-width: 100%; }

  /* ---------- Black Tide Rituals page ---------- */
  .ritual-grid { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
  @media (min-width: 820px) { .ritual-grid { grid-template-columns: 1fr 1fr; } }
  .ritual { display: flex; flex-direction: column; }
  .r-tag { margin: 0 0 10px !important; color: var(--citadel-gold) !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
  .r-marks { margin-top: auto !important; padding-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--foam) !important; font-size: 0.875rem; font-weight: 600; }
  .tri { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; flex: none; }
  .tri.up { border-bottom: 11px solid var(--c); }
  .tri.dn { border-top: 11px solid var(--c); }
  .diamond { width: 11px; height: 11px; background: var(--citadel-gold); transform: rotate(45deg); flex: none; margin: 0 3px; }
  .a-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 0.75rem; font-weight: 700;
    color: var(--foam); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.35); flex: none; }

  .timeline { margin-top: 32px; padding: 28px 24px 22px; border-radius: 18px; --own: rgba(201, 169, 97, 0.6); --rim-in: var(--own); }
  .tl-bar { position: relative; height: 18px; margin: 0 12px 34px; border-radius: 9px; background: rgba(236, 233, 226, 0.06); }
  .tl-seg { position: absolute; top: 0; bottom: 0; border-radius: 9px; }
  .tl-seg.ny, .sw.ny { background: linear-gradient(90deg, rgba(201, 169, 97, 0.55), rgba(201, 169, 97, 0.9)); }
  .tl-seg.a, .sw.a { background: linear-gradient(90deg, rgba(122, 158, 214, 0.55), rgba(122, 158, 214, 0.85)); }
  .tl-tick { position: absolute; top: 26px; transform: translateX(-50%); color: var(--mist); font-size: 0.75rem; white-space: nowrap; }
  .tl-tick::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 6px; background: rgba(236, 233, 226, 0.3); }
  .tl-legend { display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .tl-legend { grid-template-columns: 1fr 1fr; } }
  .tl-name { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; }
  .tl-legend p:not(.tl-name) { margin: 6px 0 0; color: var(--mist); line-height: 1.7; }
  .sw { width: 22px; height: 10px; border-radius: 5px; flex: none; }

  .checklist-sample { padding: 18px 20px 12px; border-radius: 18px; font-size: 0.9375rem; --own: rgba(201, 169, 97, 0.7); --rim-in: var(--own); }
  .ck-title { margin: 0 0 8px; display: flex; justify-content: space-between; gap: 12px; color: var(--mist); font-size: 0.8125rem; font-weight: 600; }
  .ck-score { color: var(--citadel-gold); }
  .checklist-sample ul { list-style: none; margin: 0; padding: 0; }
  .checklist-sample li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 11px 0; border-top: 1px solid var(--line); }
  .ck-mark { grid-row: span 2; font-weight: 700; font-size: 1rem; }
  .ck-ok .ck-mark { color: #8FE3C6; } .ck-no .ck-mark { color: #F2A3AA; } .ck-na .ck-mark { color: var(--mist); }
  .ck-name { font-weight: 600; }
  .ck-note { color: var(--mist); font-size: 0.8125rem; }
  .ck-na .ck-name { color: var(--mist); }
  #checklist .section-head p + p { margin-top: 12px; }

  .marks { margin-top: 28px; padding: 22px 24px; border-radius: 18px; display: grid; gap: 14px; grid-template-columns: 1fr;
    --own: rgba(201, 169, 97, 0.6); --rim-in: var(--own); }
  @media (min-width: 760px) { .marks { grid-template-columns: 1fr 1fr; } }
  .marks p { margin: 0; display: flex; align-items: center; gap: 8px; }
  .marks p > span:last-child { margin-left: 6px; }

  /* ---------- Account dropdown (hover on desktop, tap on touch) ---------- */
  .acct-menu { position: relative; display: inline-flex; }
  .acct-panel {
    position: absolute; top: calc(100% + 12px); right: 0; width: 248px; padding: 8px; border-radius: 16px; z-index: 60;
    background-color: rgba(7, 14, 24, 0.86); --own: rgba(201, 169, 97, 0.7); --rim-in: var(--own);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .acct-menu::after { content: ""; position: absolute; right: 0; top: 100%; width: 248px; height: 14px; pointer-events: none; }
  .acct-menu:hover::after { pointer-events: auto; }  /* bridge: the pointer can cross the gap to the panel */
  .acct-menu.open .acct-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  @media (hover: hover) and (pointer: fine) {
    .acct-menu:hover .acct-panel, .acct-menu:focus-within .acct-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0.05s; }
  }
  .acct-panel-head { margin: 4px 10px 8px; display: grid; gap: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--citadel-gold); }
  .acct-panel-mail { color: var(--mist); font-weight: 400; }
  .acct-panel-links { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .acct-panel a { display: block; padding: 9px 10px; border-radius: 9px; color: var(--foam); font-size: 0.9375rem; text-decoration: none; }
  .acct-panel a:hover, .acct-panel a:focus-visible { background-color: rgba(236, 233, 226, 0.06); }
  .acct-panel .acct-panel-out { margin-top: 4px; color: var(--mist); }
  .lite .acct-panel { background-color: rgba(16, 29, 48, 0.98); }
  @media (hover: none) { .acct-panel { background-color: rgba(7, 14, 24, 0.95); } }
  .masthead.on-light .acct-panel a { color: var(--foam); }

  /* Help: contact cards (email, LINE, social) */
  .contact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .contact .card p { margin: 8px 0 0; }
  .soc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .contact .card .soc-row a.soc-pill { margin: 0; padding: 7px 14px; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
    color: var(--foam); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.22); text-decoration: none; }
  .contact .card .soc-row a.soc-pill:hover { box-shadow: inset 0 0 0 1px var(--citadel-gold); color: var(--citadel-gold); text-decoration: none; }
  .foot-cols { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .foot-brand .soc-row { margin-top: 18px; }
  .foot-brand .soc-pill { padding: 6px 13px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--mist);
    box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.2); text-decoration: none; }
  .foot-brand .soc-pill:hover { color: var(--citadel-gold); box-shadow: inset 0 0 0 1px var(--citadel-gold); }
  @media (min-width: 860px) { .foot-top { grid-template-columns: 0.9fr 2.6fr; } }
  @media (min-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr 1.15fr 1.3fr; } }
  .foot-cols a[href^="mailto:"] { white-space: nowrap; }

  /* ---------- Language: a bare globe; hover (or tap) shows English / ไทย ---------- */
  .lang-menu { position: relative; display: inline-flex; }
  .lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; color: var(--mist); transition: color 0.2s ease; }
  .lang-btn:hover, .lang-menu.open .lang-btn, .lang-btn:focus-visible { color: var(--foam); }
  .masthead.on-light .lang-btn { color: var(--deep-navy); }
  .lang-menu::after { content: ""; position: absolute; right: -20px; top: 100%; width: 150px; height: 14px; pointer-events: none; }
  .lang-menu:hover::after { pointer-events: auto; }
  .lang-panel {
    position: absolute; top: calc(100% + 12px); right: -20px; width: 150px; padding: 6px; border-radius: 14px; z-index: 60;
    background-color: rgba(7, 14, 24, 0.86); --own: rgba(201, 169, 97, 0.7); --rim-in: var(--own);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .lang-menu.open .lang-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  @media (hover: hover) and (pointer: fine) {
    .lang-menu:hover .lang-panel, .lang-menu:focus-within .lang-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0.05s; }
  }
  @media (hover: none) { .lang-panel { background-color: rgba(7, 14, 24, 0.95); } }
  .lite .lang-panel { background-color: rgba(16, 29, 48, 0.98); }
  .lang-panel a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 9px; color: var(--foam); font-size: 0.9375rem; text-decoration: none; }
  .lang-panel a:hover, .lang-panel a:focus-visible { background-color: rgba(236, 233, 226, 0.06); }
  .lang-panel a[aria-current] { color: var(--citadel-gold); }
  .lang-panel a[aria-current]::after { content: "✓"; font-size: 0.8125rem; }

  /* Social links as brand icons (Simple Icons, CC0, bundled in _source/assets/icons and inlined, tinted with the text colour) */
  .soc-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .soc-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--mist);
    box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.18); transition: color 0.2s ease, box-shadow 0.2s ease; }
  .soc-ico svg { display: block; width: 17px; height: 17px; }
  .soc-ico:hover, .soc-ico:focus-visible { color: var(--citadel-gold); box-shadow: inset 0 0 0 1px var(--citadel-gold); }
  .contact .card .soc-row a.soc-ico { margin: 0; display: inline-grid; place-items: center; }

  /* =====================================================================
     Header controls (theme switch, signed-out / signed-in), About page,
     and the light theme. Added 2026-10-07.
     ===================================================================== */

  /* ---------- Header: right-hand controls ---------- */
  .nav-end { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
  .theme-sw {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
    background: rgba(236, 233, 226, 0.05); box-shadow: inset 0 0 0 1px var(--line);
  }
  .theme-opt {
    display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: var(--mist); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease;
  }
  .theme-opt svg { display: block; }
  .theme-opt:hover { color: var(--foam); }
  .theme-opt[aria-checked="true"] { color: var(--foam); background: rgba(236, 233, 226, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .theme-opt:focus-visible { outline-offset: 1px; }

  .auth-out { display: inline-flex; align-items: center; gap: 4px; }
  .auth-in { display: none; }
  .signed-in .auth-out { display: none; }
  .signed-in .auth-in { display: inline-flex; }
  .signup-btn { min-height: 38px; padding: 0 18px; font-size: 0.875rem; white-space: nowrap; }
  .login-link { font-weight: 500; color: var(--foam); }

  /* Indicators tab lit on a tool page */
  .menu-btn[data-current] { color: var(--foam); }

  /* Narrower screens: the theme switch moves to the footer, then About, then the long labels go. */
  @media (max-width: 1040px) { .masthead .theme-sw { display: none; } }
  @media (max-width: 880px) { .nav-about { display: none; } }
  @media (max-width: 640px) {
    .signup-btn { display: none; }
    .login-link { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--citadel-gold); }
    .nav-end { margin-left: 2px; gap: 2px; }
  }
  @media (max-width: 520px) {
    .login-link { padding: 7px 11px; }
    .masthead .lang-btn { width: 34px; }
    .acct-menu .icon-btn { width: 40px; height: 40px; }
  }

  /* ---------- Footer bar: copyright and the theme switch ---------- */
  .foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
  .foot-bar .copyright { margin: 0; color: var(--mist); font-size: 0.8125rem; }

  /* ---------- Sign-up / sign-in mock ---------- */
  .preview-go { display: block; margin-top: 4px; font-size: 0.8125rem; opacity: 0.8; }
  #signup .field.invalid .err, #signup .err.show { display: block; }

  /* ---------- About ---------- */
  .about-head { text-align: center; }
  .about-head .eyebrow { justify-content: center; }
  .about-mark { display: block; width: clamp(72px, 12vw, 112px); height: auto; margin: 18px auto 8px; color: var(--citadel-gold); }
  .about-head h1 { margin-left: auto; margin-right: auto; }
  .about-role { margin: 10px 0 0; color: var(--mist); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
  .about-tag { margin: 14px auto 0; max-width: 30rem; font-size: clamp(1.4rem, 3.6vw, 2.1rem); line-height: 1.3; font-weight: 500; text-wrap: balance; }
  .about-two { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @media (min-width: 860px) { .about-two { grid-template-columns: 1fr 1fr; } }
  .about-two .card h2 { margin: 0 0 10px; font-size: 1.375rem; font-weight: 600; }
  .about-two .card p { margin: 0; color: var(--mist); line-height: 1.7; }
  .about-two .feature-cta { margin-top: 20px; }
  .about-rule { --own: rgba(201, 169, 97, 0.8); --rim-in: var(--own); }
  .about-rule h2 { color: var(--foam); }
  .mark-read h3 { margin: 6px 0 6px; }
  .mark-read p { margin: 0; color: var(--mist); }
  .pillar-row { list-style: none; margin: 28px 0 0; padding: 22px 18px; border-radius: 20px; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); text-align: center; }
  @media (min-width: 700px) { .pillar-row { grid-template-columns: repeat(4, 1fr); } }
  .pillar-row li { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; letter-spacing: 0.02em; }
  .pillar-row li + li { position: relative; }
  .about-gold { margin-top: 16px; }
  .about-contact { text-align: center; margin-left: auto; margin-right: auto; }
  .about-contact h2 { margin: 0 0 8px; }
  .about-contact .btn { margin-top: 14px; }

  /* =====================================================================
     Light theme. The brand's rule on light grounds: the gold never darkens
     to win contrast — small text goes neutral, gold stays for the mark,
     buttons, rules and large display type. Chart pictures switch to a light
     TradingView's dark chart.
     ===================================================================== */
  :root[data-theme="light"] {
    color-scheme: light;
    --foam: #141B27;
    --mist: #4C5666;
    --dim: rgba(76, 86, 102, 0.3);
    --line: rgba(7, 14, 24, 0.12);
    --paper: #F4F1EA;
    --ink-soft: #6A6A73;
    --rim-hi: rgba(255, 255, 255, 0.9);
    --rim-lo: rgba(7, 14, 24, 0.04);
  }
  :root[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="light"] { background: var(--paper); }
  [data-theme="light"] .bg { background: var(--paper); }
  [data-theme="light"] .bg .b1 { background: radial-gradient(closest-side, rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0) 70%); }
  [data-theme="light"] .bg .b2 { background: radial-gradient(closest-side, rgba(122, 158, 214, 0.16), rgba(122, 158, 214, 0) 70%); }
  [data-theme="light"] .bg .contours .warm path { stroke: rgba(201, 169, 97, 0.5); }
  [data-theme="light"] .bg .contours .cool path { stroke: rgba(122, 158, 214, 0.35); }
  [data-theme="light"] [data-tone] { --rim-hi: rgba(255, 255, 255, 0.95); --rim-lo: rgba(7, 14, 24, 0.05); }

  /* glass on paper */
  [data-theme="light"] .glass {
    background-color: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.06), 0 12px 30px rgba(7, 14, 24, 0.08);
  }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner {
    background-color: rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.06), 0 10px 28px rgba(7, 14, 24, 0.1);
  }
  [data-theme="light"].lite .masthead.is-scrolled .masthead-inner { background-color: rgba(255, 255, 255, 0.96); }
  [data-theme="light"] .btn-ghost,
  [data-theme="light"] .portal-link,
  [data-theme="light"] .icon-btn {
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.1), 0 6px 16px rgba(7, 14, 24, 0.08);
  }
  [data-theme="light"] .btn-ghost:hover,
  [data-theme="light"] .icon-btn:hover {
    background-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 169, 97, 0.7), 0 8px 20px rgba(7, 14, 24, 0.12);
  }
  [data-theme="light"] .btn-gold:hover { box-shadow: 0 8px 22px rgba(201, 169, 97, 0.4); }
  [data-theme="light"] .theme-sw { background: rgba(255, 255, 255, 0.6); }
  [data-theme="light"] .theme-opt[aria-checked="true"] { background: #fff; box-shadow: 0 1px 3px rgba(7, 14, 24, 0.18); }

  /* drop-downs */
  [data-theme="light"] .menu-panel,
  [data-theme="light"] .acct-panel,
  [data-theme="light"] .lang-panel,
  [data-theme="light"].lite .menu-panel,
  [data-theme="light"].lite .acct-panel,
  [data-theme="light"].lite .lang-panel { background-color: rgba(255, 255, 255, 0.97); }
  @media (hover: none) {
    [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.98); }
  }
  [data-theme="light"] .acct-panel a:hover, [data-theme="light"] .lang-panel a:hover,
  [data-theme="light"] .acct-panel a:focus-visible, [data-theme="light"] .lang-panel a:focus-visible { background-color: rgba(7, 14, 24, 0.05); }

  /* small gold text → neutral; links → ink with a gold underline */
  [data-theme="light"] .eyebrow,
  [data-theme="light"] .menu-title,
  [data-theme="light"] .glance-title,
  [data-theme="light"] .toc-h,
  [data-theme="light"] .acct-panel-head,
  [data-theme="light"] .sum-item,
  [data-theme="light"] .choice-price,
  [data-theme="light"] .r-tag,
  [data-theme="light"] .ck-score,
  [data-theme="light"] .lang-panel a[aria-current] { color: var(--ink-soft); }
  [data-theme="light"] .tool-link,
  [data-theme="light"] .menu-all,
  [data-theme="light"] .tn-all,
  [data-theme="light"] .note a,
  [data-theme="light"] .inline-link,
  [data-theme="light"] .contact .card a,
  [data-theme="light"] .muted-p a,
  [data-theme="light"] .check a,
  [data-theme="light"] .sum-note a,
  [data-theme="light"] .hint-link,
  [data-theme="light"] .tile-link,
  [data-theme="light"] .orders a,
  [data-theme="light"] .legal-links a,
  [data-theme="light"] .foot-legal a,
  [data-theme="light"] .legal-sec a {
    color: var(--foam); text-decoration-line: underline; text-decoration-color: var(--citadel-gold);
    text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  }
  [data-theme="light"] .contact .card .soc-row a.soc-ico { text-decoration: none; }
  [data-theme="light"] .soc-ico:hover, [data-theme="light"] .soc-ico:focus-visible { color: var(--foam); }
  [data-theme="light"] .pill.wait { color: #7A5B12; }

  /* status colours readable on paper */
  [data-theme="light"] .pill.ok, [data-theme="light"] .ok-msg { color: #0B7A60; }
  [data-theme="light"] .err, [data-theme="light"] .btn-danger { color: #B42335; }
  [data-theme="light"] .track-step.done .track-dot { color: #fff; }

  [data-theme="light"] .foot-legal,
  [data-theme="light"] .fine-print { color: var(--mist); }

  /* forms */
  [data-theme="light"] .field input,
  [data-theme="light"] .field textarea,
  [data-theme="light"] .field select,
  [data-theme="light"] .input-prefix,
  [data-theme="light"] .choice { background-color: #fff; }
  [data-theme="light"] .input-prefix input { background: transparent; }

  [data-theme="light"] .marquee-group span { -webkit-text-stroke: 1px rgba(20, 27, 39, 0.38); }
  [data-theme="light"] .pillars { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.05), 0 12px 30px rgba(7, 14, 24, 0.07); }
  [data-theme="light"] .feature-list h3 { color: var(--foam); }
  /* six social icons sit on one row in the footer brand column */
  .soc-row { gap: 6px; }
  .soc-ico { width: 36px; height: 36px; }
  [data-theme="light"] .soc-ico { box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.16); }
  [data-theme="light"] .soc-ico:hover, [data-theme="light"] .soc-ico:focus-visible { box-shadow: inset 0 0 0 1px var(--citadel-gold); }

  /* =====================================================================
     2026-10-08 — frosted-glass drop-downs, links beside the logo, and
     Support the work moved to its own page (button in every footer).
     ===================================================================== */

  /* The bar's own blur moves to a layer behind it. A blur on the bar itself
     would stop anything inside it (the drop-downs) from blurring the page. */
  .masthead.is-scrolled .masthead-inner,
  .real-lens .masthead.is-scrolled .masthead-inner,
  .lite .masthead.is-scrolled .masthead-inner,
  [data-theme="light"] .masthead.is-scrolled .masthead-inner,
  [data-theme="light"].lite .masthead.is-scrolled .masthead-inner {
    background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .masthead-inner::after {
    display: block; z-index: -2; padding: 0; opacity: 0;
    background-color: rgba(7, 14, 24, 0.14);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);   /* the menu bar: 5px (9 Oct 2026); cards stay 3px */
  }
  .masthead.is-scrolled .masthead-inner::after { opacity: 1; }
  .real-lens .masthead.is-scrolled .masthead-inner::after { backdrop-filter: url(#edge-lens) blur(5px); }
  .lite .masthead.is-scrolled .masthead-inner::after { background-color: rgba(7, 14, 24, 0.92); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(255, 255, 255, 0.66); }
  [data-theme="light"].lite .masthead.is-scrolled .masthead-inner::after { background-color: rgba(255, 255, 255, 0.96); }

  /* Every drop-down is frosted glass: the page shows through as colour, never as readable text. */
  .menu-panel, .acct-panel, .lang-panel {
    background-color: rgba(10, 18, 30, 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.45), inset 0 -0.5px 0 rgba(255, 255, 255, 0.12), 0 22px 50px rgba(0, 0, 0, 0.45);
  }
  @media (hover: none) { .acct-panel, .lang-panel { background-color: rgba(10, 18, 30, 0.7); } }
  [data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel {
    background-color: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.06), 0 22px 50px rgba(7, 14, 24, 0.16);
  }
  @media (hover: none) { [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.75); } }
  /* low-power mode keeps solid panels (no blur) */
  .lite .menu-panel, .lite .acct-panel, .lite .lang-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(16, 29, 48, 0.98); }
  [data-theme="light"].lite .menu-panel, [data-theme="light"].lite .acct-panel, [data-theme="light"].lite .lang-panel { background-color: rgba(255, 255, 255, 0.98); }

  /* Links sit beside the logo; theme, language and sign-in stay on the right. */
  .masthead .nav { flex: 1; margin-left: 28px; }
  .masthead .nav-end { margin-left: auto; }
  /* the Indicators panel centres under the whole bar */
  .masthead .menu { position: static; }
  .masthead .menu-panel { left: 0; right: 0; margin: 0 auto; top: calc(100% + 10px); }
  @media (max-width: 900px) { .masthead .menu-panel { right: 0; } }
  @media (max-width: 520px) { .masthead .nav { margin-left: 8px; } }

  /* ---------- Support the work ---------- */
  .donate-btn { min-height: 40px; margin-top: 16px; padding: 0 16px; gap: 8px; font-size: 0.875rem; }
  .donate-btn svg { color: var(--citadel-gold); flex: none; }
  .donate-page .support { padding-top: 8px; }
  .donate-head { text-align: center; }
  .donate-head .lead { margin-left: auto; margin-right: auto; }
  .lite .masthead-inner::after { display: block; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* =====================================================================
     2026-10-08 (2) — one glass level everywhere, and light chart pictures.
     Glass keeps the original recipe in both themes: a faint tint (0.14–0.16)
     and the rim. Drop-downs use the same tint; their blur is stronger so the
     menu stays readable over text.
     ===================================================================== */
  [data-theme="light"] .glass { background-color: rgba(255, 255, 255, 0.16); }
  [data-theme="light"] .btn-ghost,
  [data-theme="light"] .portal-link,
  [data-theme="light"] .icon-btn,
  [data-theme="light"] .theme-sw { background-color: rgba(255, 255, 255, 0.14); }
  [data-theme="light"] .btn-ghost:hover,
  [data-theme="light"] .icon-btn:hover { background-color: rgba(255, 255, 255, 0.3); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(255, 255, 255, 0.14); }

  .menu-panel, .acct-panel, .lang-panel { background-color: rgba(7, 14, 24, 0.16); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
  [data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.16); }
  @media (hover: none) {
    .acct-panel, .lang-panel { background-color: rgba(7, 14, 24, 0.16); }
    [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.16); }
  }

  /* Light chart pictures: the chart turns light, like TradingView's light chart. The build swaps the
     neutral colours inside every chart picture for these variables (see build.py, chart_vars). */
  [data-theme="light"] {
    --pane: #FBFAF6;
    --ch-up: #1E2633;
    --ch-mist: #5A6474;
    --ch-fg: 20, 27, 39;
    --ch-bg: 255, 255, 255;
  }
  [data-theme="light"] .grid-line { stroke: rgba(20, 27, 39, 0.07); }
  [data-theme="light"] .tool-art,
  [data-theme="light"] .feature-art,
  [data-theme="light"] .part-svg { box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.07); }

  /* ---------- About (structure after luxalgo.com/about) ---------- */
  .about-lead { margin: 22px auto 0; max-width: 40rem; }
  .about-cta { justify-content: center; margin-top: 26px; }
  .stats { display: grid; gap: 12px; margin: 40px auto 0; max-width: 56rem; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }
  .stat { padding: 18px 20px; border-radius: 18px; display: grid; gap: 4px; text-align: center; --own: rgba(201, 169, 97, 0.7); --rim-in: var(--own); }
  .stat b { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; color: var(--citadel-gold); }
  .stat span { color: var(--mist); font-size: 0.9375rem; }
  .what-grid { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .what-grid { grid-template-columns: repeat(2, 1fr); } }
  .what-card { display: block; text-decoration: none; color: inherit; transition: transform 0.25s ease; }
  .what-card:hover { transform: translateY(-2px); }
  .what-card h3 { margin: 0 0 8px; font-size: 1.25rem; }
  .what-card p { margin: 0; color: var(--mist); line-height: 1.65; }
  .what-more { display: inline-flex; margin-top: 14px; color: var(--citadel-gold); }
  .what-more svg { width: 20px; height: 20px; }
  .diff-grid { display: grid; gap: 28px 32px; margin-top: 32px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .diff-grid { grid-template-columns: repeat(3, 1fr); } }
  .diff-item { padding-top: 16px; border-top: 1px solid var(--line); }
  .diff-item h3 { margin: 6px 0 6px; font-size: 1.125rem; }
  .diff-item p { margin: 0; color: var(--mist); line-height: 1.65; }
  .about-two .card h2 { margin: 0 0 14px; }
  .who li { margin-bottom: 8px; }
  .path { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .path li { position: relative; padding: 0 0 18px 22px; border-left: 1px solid var(--line); margin-left: 6px; }
  .path li:last-child { padding-bottom: 0; }
  .path li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--citadel-gold); }
  .path .when { display: block; color: var(--foam); font-weight: 600; font-size: 0.9375rem; }
  .path p { margin: 2px 0 0; color: var(--mist); line-height: 1.6; }
  .team-grid { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
  .person { display: flex; gap: 18px; align-items: flex-start; }
  .person .avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--citadel-gold); }
  .person .avatar svg { width: 30px; height: 30px; }
  .person h3 { margin: 0; }
  .person .role { margin: 2px 0 8px; color: var(--citadel-gold); font-size: 0.875rem; font-weight: 600; }
  .person p { margin: 0; color: var(--mist); }
  .way .eyebrow { margin: 0 0 8px; }
  .way h3 { margin: 0 0 8px; font-size: 1.375rem; }
  .way p { color: var(--mist); line-height: 1.65; }
  .way .btn { margin-top: 10px; }
  [data-theme="light"] .person .role { color: var(--ink-soft); }
  .section-head + .about-two { margin-top: 32px; }

  /* =====================================================================
     2026-10-08 (3) — the menu bar's glass, exactly, on every drop-down and on
     every card, in both themes. Light mirrors dark: a faint tint, a 3px blur,
     the same hairline rim, and a shadow that only just lifts the surface.
     ===================================================================== */
  .menu-panel, .acct-panel, .lang-panel {
    background-color: rgba(7, 14, 24, 0.14);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);   /* drop-downs match the menu bar: 5px (9 Oct 2026) */
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.55), inset 0 -0.5px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.3);
  }
  .real-lens .menu-panel, .real-lens .acct-panel, .real-lens .lang-panel { backdrop-filter: url(#edge-lens) blur(5px); }
  @media (hover: none) { .acct-panel, .lang-panel { background-color: rgba(7, 14, 24, 0.14); } }

  [data-theme="light"] {
    --rim-hi: rgba(7, 14, 24, 0.16);
    --rim-lo: rgba(7, 14, 24, 0.03);
  }
  [data-theme="light"] [data-tone] { --rim-hi: rgba(7, 14, 24, 0.16); --rim-lo: rgba(7, 14, 24, 0.03); }
  [data-theme="light"] .glass,
  [data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel {
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.8), inset 0 -0.5px 0 rgba(7, 14, 24, 0.06), 0 10px 30px rgba(7, 14, 24, 0.07);
  }
  @media (hover: none) { [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.14); } }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(255, 255, 255, 0.14); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner,
  [data-theme="light"] .pillars {
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.8), inset 0 -0.5px 0 rgba(7, 14, 24, 0.06), 0 10px 30px rgba(7, 14, 24, 0.07);
  }
  [data-theme="light"] .masthead-inner::before {
    background: linear-gradient(calc(145deg + var(--bgp, 0) * 70deg), rgba(7, 14, 24, 0.16), var(--rim-in) 26%, rgba(7, 14, 24, 0.05) 52%, var(--rim-ac) 80%, rgba(7, 14, 24, 0.14));
  }
  /* Light rims read like the dark ones: the bright edge becomes an ink edge. Set on the glass itself so it
     beats each card's own (white) rim highlight. */
  [data-theme="light"] .glass,
  [data-theme="light"] .tool,
  [data-theme="light"] .masthead-inner { --rim-hi: rgba(7, 14, 24, 0.32); --rim-lo: rgba(7, 14, 24, 0.05); }
  [data-theme="light"] .glass,
  [data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(255, 255, 255, 0.1); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(255, 255, 255, 0.1); }
  /* light versions of the hairlines and hovers that were written in light ink for the dark theme */
  [data-theme="light"] .spec { border-top-color: rgba(7, 14, 24, 0.1); }
  [data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select,
  [data-theme="light"] .input-prefix, [data-theme="light"] .choice { border-color: rgba(7, 14, 24, 0.16); }
  [data-theme="light"] .menu-col a:hover, [data-theme="light"] .menu-col a:focus-visible,
  [data-theme="light"] .acct-nav a:hover { background-color: rgba(7, 14, 24, 0.05); }
  [data-theme="light"] .portal-link:hover { background-color: rgba(255, 255, 255, 0.3); }
  [data-theme="light"] .tl-bar { background: rgba(7, 14, 24, 0.06); }
  [data-theme="light"] .tl-tick::before { background: rgba(7, 14, 24, 0.3); }
  /* About: the intro paragraph centres under the tagline, with room above and below */
  .about-head .about-lead { margin: 28px auto 0; max-width: 38rem; text-align: center; text-wrap: balance; }
  .about-head .about-cta { margin-top: 30px; }

  /* =====================================================================
     2026-10-08 (4) — light glass tinted with the paper itself (as dark glass is
     tinted with the navy), so a card neither brightens nor greys the page; no
     visible drop shadow on paper, as none shows on navy.
     ===================================================================== */
  [data-theme="light"] .glass,
  [data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel {
    background-color: rgba(244, 241, 234, 0.16);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 10px 30px rgba(7, 14, 24, 0.025);
  }
  [data-theme="light"] .btn-ghost, [data-theme="light"] .portal-link,
  [data-theme="light"] .icon-btn, [data-theme="light"] .theme-sw { background-color: rgba(244, 241, 234, 0.14); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(7, 14, 24, 0.03); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(244, 241, 234, 0.14); }
  [data-theme="light"] .masthead.is-scrolled .masthead-inner,
  [data-theme="light"] .pillars { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 10px 30px rgba(7, 14, 24, 0.025); }
  [data-theme="light"] .theme-opt[aria-checked="true"] { background: rgba(7, 14, 24, 0.07); box-shadow: none; }
  @media (hover: none) { [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel { background-color: rgba(244, 241, 234, 0.16); } }

  /* The Indicators menu opens on hover too, like the language and account menus (desktop). */
  @media (hover: hover) and (pointer: fine) {
    .menu:hover .menu-panel, .menu:focus-within .menu-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0.05s; }
    .menu:hover .menu-btn svg { transform: rotate(180deg); }
    .menu:hover .menu-btn { color: var(--foam); }
    /* bridge across the gap between the bar and the panel */
    .menu-panel::after, .lite .menu-panel::after { content: ""; display: block; position: absolute; left: 0; right: 0; top: -34px; height: 34px; }
  }
  .pillar-grid { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }
  .pillar h3 { margin: 8px 0 8px; font-size: 1.375rem; }
  /* claim dialog (account › Your indicators) */
  .claim-dialog { width: min(460px, calc(100vw - 32px)); padding: 24px; border-radius: 20px; color: var(--foam);
    background-color: rgba(10, 18, 30, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  [data-theme="light"] .claim-dialog { background-color: rgba(250, 248, 243, 0.94); }
  .claim-dialog::backdrop { background: rgba(7, 14, 24, 0.45); }
  .claim-dialog h2 { margin: 0 0 6px; font-size: 1.25rem; }
  .claim-name { margin: 0 0 8px; color: var(--citadel-gold); font-weight: 600; }
  [data-theme="light"] .claim-name { color: var(--foam); }
  .claim-dialog .check { margin-top: 14px; }
  .claim-dialog .feature-cta { margin-top: 18px; }
  /* first name + surname side by side */
  .name-pair { display: grid; gap: 12px 14px; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .name-pair { grid-template-columns: 1fr 1fr; } }
  .name-pair > .hint, .name-pair > .err { grid-column: 1 / -1; margin-top: 0; }
  .name-pair label { display: block; margin-bottom: 8px; font-size: 0.9375rem; font-weight: 600; }
  /* Rituals: call to action at the top of its own page */
  .head-cta { margin-top: 26px; }
  .head-note { margin: 12px 0 0; color: var(--mist); font-size: 0.9375rem; }
  .trial-badge { display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.04em; color: var(--citadel-gold); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.6); }
  [data-theme="light"] .trial-badge { color: var(--foam); }
  /* checkout: trial rows and the discount code */
  .kv .kv-strong dt, .kv .kv-strong dd { color: var(--foam); font-weight: 600; }
  .code-box { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .code-box summary { cursor: pointer; color: var(--foam); font-size: 0.9375rem; font-weight: 600; list-style: none; }
  .code-box summary::-webkit-details-marker { display: none; }
  .code-box summary::after { content: " +"; color: var(--citadel-gold); }
  .code-box[open] summary::after { content: " −"; }
  .code-row { display: flex; gap: 8px; margin-top: 10px; }
  .code-row input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(236, 233, 226, 0.16);
    background: rgba(7, 14, 24, 0.55); color: var(--foam); font: inherit; letter-spacing: 0.06em; }
  [data-theme="light"] .code-row input { background: #fff; border-color: rgba(7, 14, 24, 0.16); }
  .code-row .btn { min-height: 40px; }
  #code-msg { margin-top: 8px; }
  #code-msg.ok { color: var(--foam); }
  /* sign in / sign up: Google, Apple, Discord, then email */
  .sso { display: grid; gap: 10px; }
  .sso-btn { width: 100%; gap: 10px; min-height: 46px; color: var(--foam); background-color: rgba(7, 14, 24, 0.14);
    box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.18); }
  .sso-btn:hover { box-shadow: inset 0 0 0 1px var(--citadel-gold); }
  .sso-btn svg { width: 18px; height: 18px; flex: none; }
  [data-theme="light"] .sso-btn { background-color: rgba(244, 241, 234, 0.14); box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.16); }
  .sso-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--mist); font-size: 0.875rem; }
  .sso-or::before, .sso-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  /* ---------- Sign in, sign up, reset: centred on the page ---------- */
  .auth-head { text-align: center; }
  .auth-head .eyebrow { justify-content: center; }
  .auth-head .lead { margin-left: auto; margin-right: auto; }
  .auth-card { margin-left: auto; margin-right: auto; max-width: 460px; }
  .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .label-row label { margin: 0; }
  .label-row .hint-link { margin: 0; font-size: 0.875rem; }
  .link-btn { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; color: var(--mist); font: inherit; font-size: 0.9375rem;
    text-decoration: underline; text-decoration-color: var(--citadel-gold); text-underline-offset: 3px; cursor: pointer; }
  .link-btn:hover { color: var(--foam); }
  .auth-card .note { text-align: center; }
  .si-2fa h2 { margin: 0 0 6px; font-size: 1.25rem; }
  .code-input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(236, 233, 226, 0.16);
    background: rgba(7, 14, 24, 0.55); color: var(--foam); font: inherit; font-size: 1.5rem; letter-spacing: 0.5em; text-align: center; }
  [data-theme="light"] .code-input { background: #fff; border-color: rgba(7, 14, 24, 0.16); }
  /* security page */
  .h-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .h-row h2 { margin: 0; }
  .pw-change { margin-top: 12px; }
  .pw-change summary { list-style: none; display: inline-flex; cursor: pointer; }
  .pw-change summary::-webkit-details-marker { display: none; }
  .pw-change[open] summary { display: none; }
  .pw-form { margin-top: 4px; }
  .tfa-setup .code-row { max-width: 420px; }
  .tfa-setup .code-input { font-size: 1.125rem; letter-spacing: 0.35em; min-height: 44px; }
  .qr { width: 148px; height: 148px; margin: 4px 0 14px; border-radius: 12px; background:
      conic-gradient(from 90deg at 18% 18%, #0A1422 25%, transparent 0) 0 0 / 28px 28px,
      repeating-linear-gradient(45deg, #0A1422 0 4px, transparent 4px 9px), #fff;
    box-shadow: inset 0 0 0 10px #fff, 0 0 0 1px var(--line); }
  [hidden] { display: none !important; }
  /* social sign-in: icons only, one row */
  .sso { display: flex; justify-content: center; gap: 14px; }
  .sso-btn { display: inline-grid; place-items: center; width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%;
    color: var(--foam); background-color: rgba(7, 14, 24, 0.14); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.18);
    transition: box-shadow 0.2s ease, transform 0.2s ease; }
  .sso-btn:hover, .sso-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--citadel-gold); transform: translateY(-1px); }
  .sso-btn svg { width: 22px; height: 22px; }
  [data-theme="light"] .sso-btn { background-color: rgba(244, 241, 234, 0.14); box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.16); }
  [data-theme="light"] .sso-btn:hover { box-shadow: inset 0 0 0 1px var(--citadel-gold); }
  /* password strength */
  .pw-meter { margin-top: 10px; }
  .pw-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .pw-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.25s ease, background-color 0.25s ease; }
  .pw-meter[data-score="0"] .pw-bar span { width: 8%; background: #E5484D; }
  .pw-meter[data-score="1"] .pw-bar span { width: 25%; background: #E5484D; }
  .pw-meter[data-score="2"] .pw-bar span { width: 50%; background: #E8A23A; }
  .pw-meter[data-score="3"] .pw-bar span { width: 75%; background: var(--citadel-gold); }
  .pw-meter[data-score="4"] .pw-bar span { width: 100%; background: #2FB386; }
  .pw-level { min-height: 1.2em; margin: 6px 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--foam); }
  .pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 16px; grid-template-columns: 1fr 1fr; font-size: 0.8125rem; color: var(--mist); }
  @media (max-width: 480px) { .pw-rules { grid-template-columns: 1fr; } }
  .pw-rules li { position: relative; padding-left: 22px; }
  .pw-rules li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mist); }
  .pw-rules li.ok { color: var(--foam); }
  .pw-rules li.ok::before { background: #2FB386 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
  .table-h { margin: 4px 0 14px; font-size: 1.25rem; }
  .table-card .table-h, .table-card > .note { padding: 0 16px; }
  .table-card .table-h { padding-top: 16px; }
  .orders td small { display: block; margin-top: 2px; color: var(--mist); font-size: 0.8125rem; }
  /* strength meter appears once typing starts, and slides away when the field is empty again */
  .pw-meter { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease; }
  .pw-meter > * { min-height: 0; }
  .pw-meter-inner { overflow: hidden; }
  .pw-meter.show { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
  /* password: eye toggle and the match check */
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 52px; }
  .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--mist); cursor: pointer; }
  .pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--foam); }
  .pw-eye svg { width: 20px; height: 20px; }
  .pw-match { min-height: 1.2em; margin: 6px 0 0; font-size: 0.8125rem; font-weight: 600; }
  .pw-match.ok { color: #2FB386; }
  .pw-match.no { color: #E8A23A; }
  .pw-match.ok::before { content: "✓ "; }
  /* confirm password: hidden until the password is being typed */
  .field.pw-reveal { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; margin-bottom: 0; padding: 0 2px;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease; }
  .field.pw-reveal.show { max-height: 180px; opacity: 1; margin-bottom: 18px; padding-top: 2px; }

  /* 2026-10-08 — light form fields mirror the dark ones: a see-through tint of the page, not solid white */
  [data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select, [data-theme="light"] .input-prefix,
  [data-theme="light"] .code-input, [data-theme="light"] .code-row input { background-color: rgba(255, 255, 255, 0.32); }
  [data-theme="light"] .input-prefix input { background: transparent; }
  [data-theme="light"] .choice { background-color: rgba(255, 255, 255, 0.18); }
  [data-theme="light"] .choice:has(input:checked) { background-color: rgba(201, 169, 97, 0.1); }
  .pp-alt { margin: 6px 0 0; text-align: center; color: var(--mist); font-size: 0.875rem; }
  .link-btn.inline { display: inline; margin: 0; padding: 0; font-size: inherit; }

/* ---------- Live mode (config.js filled in): real data replaces the sample, so hide sample labels and wait for data ---------- */
html.live .sample-pill, html.live .preview-go { display: none; }
html.live:not(.ae-ready) .acct-main, html.live:not(.ae-ready) .order-grid, html.live:not(.ae-ready) .auth-card, html.live:not(.ae-ready) .bo-main { visibility: hidden; }
.pill.bad { color: #F2A3AA; background: rgba(242, 163, 170, 0.12); }
[data-theme="light"] .pill.bad { color: #B42335; background: rgba(180, 35, 53, 0.08); }
.btn.is-busy, .btn:disabled { opacity: 0.6; pointer-events: none; }
.qr:has(img) { background: #fff; padding: 8px; }
.qr img { display: block; width: 100%; height: 100%; }
.tfa-secret code { word-break: break-all; }
.tfa-off { margin-top: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tfa-choose { margin-top: 4px; }
.sms-setup { margin-top: 8px; }
.sms-setup .field { margin-bottom: 12px; }
.sms-setup .code-row { max-width: 420px; }
.sms-setup .code-row input[type="tel"] { letter-spacing: 0.02em; }
.sms-setup .note { margin: 8px 0 0; }
.sms-code .code-input { font-size: 1.125rem; letter-spacing: 0.35em; min-height: 44px; }
.sms-sent { margin: 0; }
.sms-resend { display: inline-block; margin-top: 10px; }
.sms-resend:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
.sms-change-p { margin: 0 0 12px; }
.tfa-cancel { margin-top: 14px; }
.tfa-methods { margin: 0 0 8px; }
.tfa-methods .lib-row { padding: 12px 0; }
.tfa-done .ok-msg { margin-top: 4px; }
.si-2fa .link-btn + .link-btn { margin-top: 4px; }
.si-2fa-resend:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
.form-err:empty { display: none !important; }
.form-err a { color: inherit; text-decoration: underline; }

/* ---------- Interaction states: the same in both themes (design rule) ----------
   Hover = gold rim. Focus = gold rim + soft gold ring. Selected = solid gold rim + faint gold tint. Fills never change
   on hover/focus. Light-theme rest colours above have higher priority than the base hover/focus rules, so the states
   are restated here, last, for the light theme. */
[data-theme="light"] .choice:hover { border-color: rgba(201, 169, 97, 0.6); }
[data-theme="light"] .choice:has(input:checked) { border-color: var(--citadel-gold); }
[data-theme="light"] .field input:focus, [data-theme="light"] .field textarea:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .input-prefix:focus-within,
[data-theme="light"] .code-input:focus, [data-theme="light"] .code-row input:focus {
  outline: none; border-color: var(--citadel-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.code-input:focus, .code-row input:focus { outline: none; border-color: var(--citadel-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18); }
.input-prefix input:focus { box-shadow: none; }

/* Radio buttons and tick boxes: drawn by us, so they are glass like everything else (the browser's own controls are
   solid white in the light theme). Rim and fill follow the theme; checked is gold in both. */
.choice input[type="radio"], .check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; cursor: pointer;
  border: 1.5px solid rgba(236, 233, 226, 0.4); background-color: rgba(236, 233, 226, 0.06);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.choice input[type="radio"] { border-radius: 50%; margin: 3px 0 0; }
.check input[type="checkbox"] { border-radius: 5px; margin: 4px 0 0; }
.choice input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--citadel-gold); transform: scale(0); transition: transform 0.15s ease; }
.check input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; background: #0B1624; transform: scale(0); transition: transform 0.15s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.choice input[type="radio"]:checked { border-color: var(--citadel-gold); background-color: rgba(201, 169, 97, 0.14); }
.check input[type="checkbox"]:checked { border-color: var(--citadel-gold); background-color: var(--citadel-gold); }
.choice input[type="radio"]:checked::before, .check input[type="checkbox"]:checked::before { transform: scale(1); }
.choice:hover input:not(:checked), .check:hover input:not(:checked) { border-color: rgba(201, 169, 97, 0.7); }
.choice input:focus-visible, .check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.3); }
[data-theme="light"] .choice input[type="radio"], [data-theme="light"] .check input[type="checkbox"] { border-color: rgba(7, 14, 24, 0.3); background-color: rgba(255, 255, 255, 0.32); }
[data-theme="light"] .choice input[type="radio"]:checked { border-color: var(--citadel-gold); background-color: rgba(201, 169, 97, 0.14); }
[data-theme="light"] .check input[type="checkbox"]:checked { border-color: var(--citadel-gold); background-color: var(--citadel-gold); }
[data-theme="light"] .choice:hover input:not(:checked), [data-theme="light"] .check:hover input:not(:checked) { border-color: rgba(201, 169, 97, 0.7); }

/* ---------- Prices, save badge, account links (2026-10-08) ---------- */
.price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.price-row .price { margin-top: 0; }
.price-row .per { color: var(--mist); font-size: 0.9375rem; }
.save-badge { display: inline-block; margin: 8px 0 0 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  color: #8FE3C6; background: rgba(95, 214, 176, 0.12); box-shadow: inset 0 0 0 1px rgba(95, 214, 176, 0.35); }
[data-theme="light"] .save-badge { color: #0B7A60; background: rgba(11, 122, 96, 0.08); box-shadow: inset 0 0 0 1px rgba(11, 122, 96, 0.3); }
.choice-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.choice-side .save-badge { margin: 0; }
/* chart link on its own line, the manuals on the line below — right-aligned on wide screens */
.lib-links:has(.mlinks) { flex-direction: column; align-items: flex-start; gap: 8px; }
.mlinks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (min-width: 760px) { .lib-links:has(.mlinks) { align-items: flex-end; } .lib-links:has(.mlinks) .tool-link { align-self: flex-end; } .mlinks { justify-content: flex-end; } }
.plan .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan .badges .trial-badge, .plan .badges .save-badge { margin: 0; }

  /* 2026-10-08 — light theme: .portal-link ("Manage support") lost its gold rim on hover; same hover as .btn-ghost. */
  [data-theme="light"] .portal-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(201, 169, 97, 0.7), 0 8px 20px rgba(7, 14, 24, 0.12);
  }

/* ---------- Cancel plan (Plan & billing, 2026-10-08) ---------- */
.check input[type="radio"] {
  -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; cursor: pointer;
  margin: 4px 0 0; border-radius: 50%; border: 1.5px solid rgba(236, 233, 226, 0.4); background-color: rgba(236, 233, 226, 0.06);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.check input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--citadel-gold); transform: scale(0); transition: transform 0.15s ease; }
.check input[type="radio"]:checked { border-color: var(--citadel-gold); background-color: rgba(201, 169, 97, 0.14); }
.check input[type="radio"]:checked::before { transform: scale(1); }
[data-theme="light"] .check input[type="radio"] { border-color: rgba(7, 14, 24, 0.3); background-color: rgba(255, 255, 255, 0.32); }
[data-theme="light"] .check input[type="radio"]:checked { border-color: var(--citadel-gold); background-color: rgba(201, 169, 97, 0.14); }
[data-theme="light"] .check:hover input[type="radio"]:not(:checked) { border-color: rgba(201, 169, 97, 0.7); }
.cx-form { margin-top: 16px; }
.cx-reasons { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cx-reasons legend { padding: 0; margin-bottom: 10px; color: var(--foam); font-weight: 600; font-size: 0.9375rem; }
.cx-form textarea { width: 100%; resize: vertical; min-height: 92px; padding: 12px 14px; line-height: 1.55; font: inherit; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cx-pending-h { margin: 0 0 6px; font-weight: 600; color: var(--foam); }
.cx-pending .btn { margin-top: 12px; }
#cancel-box[hidden], #cancel-box [hidden] { display: none !important; }
/* eyebrow above a section heading (Premium page, home) — same gold label as the page heads, with room below */
.section-head .eyebrow { display: block; margin: 0 0 12px; color: var(--citadel-gold); }

/* ---------- Discount code on checkout (2026-10-08) ---------- */
.code-apply { display: flex; gap: 10px; }
.code-apply input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.code-apply .btn { flex: none; min-height: 48px; }
.code-ok { margin-top: 8px; }
.was { color: var(--mist); font-weight: 400; font-size: 0.85em; margin-left: 4px; text-decoration: line-through; }

/* ---------- Theme switch rim (2026-10-09) ----------
   The light theme's glass rule replaced the switch's rim with a highlight only, so on paper it had no edge. It keeps
   a 1px rim now, as on navy (same ink as the other light-theme rims). */
[data-theme="light"] .theme-sw {
  box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(7, 14, 24, 0.03);
}

/* ---------- One sign-in provider (v1: Google only, 2026-10-09) ----------
   A full-width labelled button in place of the icon row. Rest, hover and focus follow .sso-btn in both themes. */
.sso-solo { display: block; }
.sso-solo .sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: auto; min-height: 50px;
  padding: 0 20px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.sso-solo .sso-btn svg { width: 18px; height: 18px; }
.sso-btn:focus-visible,
[data-theme="light"] .sso-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--citadel-gold), 0 0 0 3px rgba(201, 169, 97, 0.18); }
/* the account email comes from Google: shown, not edited */
.field input[readonly] { color: var(--mist); cursor: default; }

/* ---------- Premium badge in the Indicators menu (2026-10-09) ----------
   Marks the paid indicator(s). Same gold pill as the plans' "7 days free" badge; static, so no hover / focus states. */
.mi-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap;
  color: var(--citadel-gold); background-color: rgba(201, 169, 97, 0.1); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.6); }
[data-theme="light"] .mi-badge { color: var(--foam); background-color: rgba(201, 169, 97, 0.14); }

/* ---------- Announcement banner (admin panel › Settings): one line floating at the bottom of public pages ---------- */
.site-banner { position: fixed; left: 50%; bottom: 18px; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(760px, calc(100vw - 24px)); padding: 10px 10px 10px 18px; border-radius: 999px;
  background: rgba(10, 20, 34, 0.86); color: var(--foam); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.55), 0 14px 40px rgba(0, 0, 0, 0.4); font-size: 0.9375rem; line-height: 1.45; }
.site-banner.is-warn { box-shadow: inset 0 0 0 1px rgba(242, 54, 69, 0.6), 0 14px 40px rgba(0, 0, 0, 0.4); }
.site-banner p { margin: 0; }
.site-banner a { margin-left: 4px; color: var(--citadel-gold); font-weight: 600; white-space: nowrap; }
.site-banner.is-warn a { color: #F2A3AA; }
.site-banner-x { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(163, 174, 191, 0.12);
  color: var(--mist); font-size: 1.125rem; line-height: 1; cursor: pointer; }
.site-banner-x:hover { color: var(--foam); box-shadow: inset 0 0 0 1px var(--citadel-gold); }
[data-theme="light"] .site-banner { background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1px rgba(162, 127, 47, 0.6), 0 12px 30px rgba(7, 14, 24, 0.12); }
[data-theme="light"] .site-banner a { color: #7A5B12; }
[data-theme="light"] .site-banner.is-warn a { color: #B42335; }
@media (max-width: 600px) { .site-banner { left: 12px; right: 12px; bottom: 12px; transform: none; width: auto; border-radius: 16px; font-size: 0.875rem; } }
@media (prefers-reduced-motion: no-preference) { .site-banner { animation: site-banner-in 0.4s ease-out both; } }
@keyframes site-banner-in { from { opacity: 0; translate: 0 12px; } }

/* ---------- Glass light (2026-10-09) ----------
   The admin panel's boxes felt alive (rim turning with the scroll, lift and gold rim on hover); the public pages now
   share that, plus a light that follows the pointer along the rim of whichever glass box it is over (flow.js).
   The light is a second rim layer (::after, unused on these boxes) masked to the 1px edge, with a faint glow inside. */
@media (hover: hover) and (pointer: fine) {
  .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner)::after {
    content: ""; display: block; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 200, 0.95), rgba(201, 169, 97, 0.6) 32%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity 0.35s ease;
  }
  .glass.is-lit::after { opacity: 1; }
  .glass.is-lit { background-image: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(201, 169, 97, 0.07), transparent 65%); }
  [data-theme="light"] .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner)::after {
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(140, 104, 28, 0.9), rgba(201, 169, 97, 0.5) 32%, transparent 72%);
  }
  [data-theme="light"] .glass.is-lit { background-image: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.5), transparent 65%); }
  .lite .glass::after { display: none; }
  .lite .glass.is-lit { background-image: none; }

  /* boxes you can choose or open lift a little on hover, as on the admin panel */
  .card.glass, .plan.glass, .tile.glass { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .card.glass:hover, .plan.glass:hover, .tile.glass:hover { transform: translateY(-3px);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), inset 0 -0.5px 0 rgba(255, 255, 255, 0.14), 0 18px 40px rgba(0, 0, 0, 0.38); }
  [data-theme="light"] .card.glass:hover, [data-theme="light"] .plan.glass:hover, [data-theme="light"] .tile.glass:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(7, 14, 24, 0.05), 0 18px 36px rgba(7, 14, 24, 0.12); }
  .lite .card.glass:hover, .lite .plan.glass:hover, .lite .tile.glass:hover { transform: none; }
}

/* ---------- Boxes: the menu bar's glass (2026-10-09) ----------
   Every glass box (cards, panels, tables, tiles — not buttons, drop-downs or the bars) has the bar's own clearness
   (same tint, 3px blur) and the bar's lens in Chromium (the gentler #edge-lens-sm, which suits content boxes). Rims turn with the scroll and with the pointer (--tilt, flow.js), the same on
   every page, and the pointer's own light runs along the rim of the box it is over. */
.glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner) {
  background-color: rgba(7, 14, 24, 0.14); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.real-lens .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner) { backdrop-filter: url(#edge-lens-sm) blur(3px); }
[data-theme="light"] .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner) { background-color: rgba(255, 255, 255, 0.1); }
.lite .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(16, 29, 48, 0.94); }
[data-theme="light"].lite .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner) { background-color: rgba(255, 255, 255, 0.94); }
.glass::before {
  background: linear-gradient(calc(145deg + var(--bgp, 0) * 70deg + var(--tilt, 0) * 1deg),
    var(--rim-hi), var(--rim-in) 24%, var(--rim-lo) 44%, transparent 56%, var(--rim-ac) 78%, var(--rim-hi)); }
.masthead-inner::before {
  background: linear-gradient(calc(145deg + var(--bgp, 0) * 70deg + var(--tilt, 0) * 1deg),
    rgba(255, 255, 255, 0.5), var(--rim-in) 26%, rgba(255, 255, 255, 0.14) 52%, var(--rim-ac) 80%, rgba(255, 255, 255, 0.45)); }
[data-theme="light"] .masthead-inner::before {
  background: linear-gradient(calc(145deg + var(--bgp, 0) * 70deg + var(--tilt, 0) * 1deg),
    rgba(7, 14, 24, 0.16), var(--rim-in) 26%, rgba(7, 14, 24, 0.05) 52%, var(--rim-ac) 80%, rgba(7, 14, 24, 0.14)); }
.lite .glass::before, .lite .masthead-inner::before { background: linear-gradient(150deg, var(--rim-hi), transparent 52%, var(--rim-ac)); }

/* ---------- Boxes rise in on the public pages (2026-10-09; flow.js adds .rv, .rise, .is-in) ----------
   The box fades up; then its rows, checklist marks and timeline bars follow. Each animation only fills
   backwards (holds the start while it waits), so hover lifts and other transforms work as before once it ends. */
@media (prefers-reduced-motion: no-preference) {
  .rv .rise:not(.is-in) { opacity: 0; }
  .rv .rise.is-in { animation: box-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: var(--d, 0ms); }
  .rv .rise.is-in :is(ul, ol, tbody) > *, .rv .rise.is-in.faq > details, .rv .rise.is-in .tl-legend > * {
    animation: row-rise 0.5s ease-out backwards; animation-delay: calc(var(--d, 0ms) + 220ms + var(--r, 0) * 70ms); }
  .rv .rise.is-in .ck-mark { animation: mark-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
    animation-delay: calc(var(--d, 0ms) + 380ms + var(--r, 0) * 70ms); }
  .rv .rise.is-in .tl-seg { transform-origin: left center; animation: seg-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--d, 0ms) + 200ms + var(--r, 0) * 120ms); }
}
@keyframes box-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes row-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes mark-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes seg-grow { from { transform: scaleX(0); } }

/* ---------- Skip what is not on screen yet (2026-10-09) ----------
   The home page's lower sections (Rituals, the 15 indicator cards, questions, closing) are not drawn until they are
   scrolled near; the reserved heights (content only, padding excluded) keep the scrollbar steady and are replaced by the real ones once drawn. */
.hero-wrap ~ :is(#rituals, #indicators, #questions, .closing) { content-visibility: auto; }   /* home page only */
.hero-wrap ~ #rituals { contain-intrinsic-size: auto 680px; }
.hero-wrap ~ #indicators { contain-intrinsic-size: auto 3222px; }
.hero-wrap ~ #questions { contain-intrinsic-size: auto 416px; }
.hero-wrap ~ .closing { contain-intrinsic-size: auto 318px; }
@media (max-width: 600px) {
  .hero-wrap ~ #rituals { contain-intrinsic-size: auto 1060px; }
  .hero-wrap ~ #indicators { contain-intrinsic-size: auto 8892px; }
  .hero-wrap ~ #questions { contain-intrinsic-size: auto 431px; }
  .hero-wrap ~ .closing { contain-intrinsic-size: auto 422px; }
}

/* ---------- Tool cards: the Platform / Type rows and the links sit at the same height in every card of a row,
   however long each description is (the description keeps at least the old 20px gap above the rows) ---------- */
.tool-body > .spec { margin-top: auto; }
.tool-body > p:has(+ .spec), .tool-body > p:has(+ p + .spec) { margin-bottom: 20px; }
.tool-body > .spec + .tool-links { margin-top: 0; }

/* ---------- Home page indicator rows (admin panel › Site content › Home graphs, 23 Oct 2026): each row under its own
   small heading with a hairline running out to the right (gold on dark, ink on light); the cards slide (Sliders,
   below). A row's card titles sit one level below its heading (h4), looking as they always have ---------- */
.tool-row { margin-top: 44px; }
.tool-row-h {
  display: flex; align-items: center; gap: 16px; margin: 0 0 16px;
  color: var(--citadel-gold); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4;
}
.tool-row-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 169, 97, 0.6), rgba(201, 169, 97, 0)); }
[data-theme="light"] .tool-row-h { color: var(--ink-soft); }
[data-theme="light"] .tool-row-h::after { background: linear-gradient(90deg, rgba(7, 14, 24, 0.24), rgba(7, 14, 24, 0)); }
html[lang="th"] .tool-row-h { font-size: 1rem; letter-spacing: 0.02em; text-transform: none; line-height: 1.5; }
.tool h4 { margin: 0; font-weight: 600; font-size: 1.375rem; line-height: 1.2; }

/* ---------- Sliders (admin panel › Site content, 23 Oct 2026): the hero slides and the indicator rows. The track
   scrolls sideways between snap points (it swipes; no scrollbar), padded so the cards' lift and shadow are not cut off.
   Three cards across from 960px, two from 600px, one and the edge of the next below that; a slide fills the width.
   The round glass arrows and the dots sit under the track; from 1240px the arrows move out beside it, into the margin.
   They show only when there is more than fits (flow.js: Sliders). Nothing moves by itself ---------- */
.slider { position: relative; display: grid; grid-template-columns: 1fr auto auto auto 1fr; grid-template-areas: "track track track track track" ". prev dots next ."; align-items: center; column-gap: 12px; }
.slider-track {
  grid-area: track; display: grid; grid-auto-flow: column; gap: 16px; min-width: 0;
  margin: -10px -14px -40px; padding: 10px 14px 40px; scroll-padding-inline: 14px;   /* 14px: less than the gap, so no edge of a card out of view shows */
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; }
.tool-track { grid-auto-columns: 86%; }
@media (min-width: 600px) { .tool-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 960px) { .tool-track { grid-auto-columns: calc((100% - 32px) / 3); } }
.hero-track { grid-auto-columns: 100%; gap: 40px; }
.slider-btn { position: relative; z-index: 1; margin: 14px 0 0; padding: 0; border: 0; cursor: pointer; }
.slider-btn[data-dir="-1"] { grid-area: prev; }
.slider-btn[data-dir="1"] { grid-area: next; }
.slider-btn:disabled { opacity: 0.35; cursor: default; }
.slider-btn:focus-visible, .slider-dot:focus-visible { outline: 2px solid var(--citadel-gold); outline-offset: 3px; }
.slider-dots { grid-area: dots; position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; margin-top: 14px; }
.slider-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(236, 233, 226, 0.3); transition: width 0.25s ease, background-color 0.25s ease; }
.slider-dot[aria-current="true"]::before { width: 22px; background: var(--citadel-gold); }
[data-theme="light"] .slider-dot::before { background: rgba(7, 14, 24, 0.22); }
[data-theme="light"] .slider-dot[aria-current="true"]::before { background: var(--citadel-gold); }
.slider:not([data-scrollable]) :is(.slider-btn, .slider-dots) { display: none; }
/* in the track's own grid area, so top: 50% is the middle of the cards or the slide (not of the row under them). Out
   there they are outside their section, which the home page skips drawing until it is near (content-visibility, which
   also cuts off what sticks out): a section with a slider is drawn as it is */
@media (min-width: 1240px) {
  .slider-btn[data-dir] { grid-area: track; position: absolute; top: 50%; margin: 0; transform: translateY(-50%); }
  .slider-btn[data-dir="-1"] { left: -76px; }
  .slider-btn[data-dir="1"] { right: -76px; }
  .hero-wrap ~ :is(#rituals, #indicators):has(.slider) { content-visibility: visible; }
}

/* ---------- Questions (.faq): one open at a time and eased (flow.js: Accordions). The + turns half a turn and its
   upright stroke lies down, so it becomes − ; it turns back as the answer closes ---------- */
.faq summary { position: relative; padding-right: 36px; }
.faq summary::before, .faq summary::after, .faq details[open] summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.6px; margin-top: -0.8px; border-radius: 2px;
  background: var(--citadel-gold); font-size: 0; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s; }
.faq summary::before { transform: rotate(90deg); }
.faq details[open]:not(.is-closing) summary::before, .faq details[open]:not(.is-closing) summary::after { transform: rotate(180deg); }
.faq summary:hover::before, .faq summary:hover::after, .faq summary:focus-visible::before, .faq summary:focus-visible::after { background-color: var(--foam); }
@media (prefers-reduced-motion: reduce) { .faq summary::before, .faq summary::after, .bo-how summary::after { transition: none; } }


/* ---------- Phone menu (14 Oct 2026). Up to 880px wide the Indicators list, the page links and the theme switch sit
   behind one button at the right of the bar (flow.js: Phone menu builds it from the desktop menu, so both always
   match). The panel is a .menu-panel, so it takes the same glass, tint and lite fallbacks as the other drop-downs in
   both themes; only its open state, layout and the hover / focus states are set here. ---------- */
.mnav { display: none; position: static; }
.mnav-btn { margin-left: 2px; cursor: pointer; border: 0; }
.mnav-btn .mnav-x { display: none; }
.mnav.open .mnav-btn .mnav-bars { display: none; }
.mnav.open .mnav-btn .mnav-x { display: inline; }
.mnav.open .mnav-btn { box-shadow: inset 0 0 0 1px var(--citadel-gold); }
@media (max-width: 880px) {
  .mnav { display: block; }
  .masthead .nav-items > :is(.menu, .nav-link) { display: none; }
}
/* The menu's links and drop-downs (admin panel › Site content › Menu, 23 Oct 2026) sit in .nav-items, which takes no box
   of its own: they are laid out in the bar as if they were the nav's own children. A drop-down's panel holds three
   columns unless it has one, two or four */
.nav-items, .mnav-items { display: contents; }
.masthead .menu-panel:not(.mnav-panel) .menu-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.masthead .menu-panel:not(.mnav-panel) .menu-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.masthead .menu-panel:not(.mnav-panel) .menu-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .masthead .menu-panel:not(.mnav-panel) .menu-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.masthead .menu-panel:not(.mnav-panel):has(.menu-grid.cols-1) { width: min(360px, calc(100vw - 40px)); }
.masthead .menu-panel:not(.mnav-panel):has(.menu-grid.cols-2) { width: min(600px, calc(100vw - 40px)); }
/* The frame grows with what it holds, up to the screen's height; past that its lists scroll inside it (.mnav-scroll), so
   the rim always runs round what shows (23 Oct 2026: it used to scroll away with the lists, as the panel itself scrolled
   and the rim is drawn on it). */
.masthead .mnav-panel { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.mnav-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 14px; }
.mnav.open .mnav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* glass set by P (14 Oct 2026): tint 14% dark / 10% light, blur 5px, like the menu bar */
.masthead .mnav-panel { background-color: rgba(7, 14, 24, 0.14); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.real-lens .masthead .mnav-panel { -webkit-backdrop-filter: blur(5px); backdrop-filter: url(#edge-lens) blur(5px); }
[data-theme="light"] .masthead .mnav-panel { background-color: rgba(255, 255, 255, 0.1); }
.lite .masthead .mnav-panel { background-color: rgba(16, 29, 48, 0.98); }
[data-theme="light"].lite .masthead .mnav-panel { background-color: rgba(255, 255, 255, 0.98); }
.mnav-panel .nav-link, .mnav-tools > summary {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; border-radius: 10px;
  color: var(--mist); font-size: 1rem; text-decoration: none; }
.masthead.on-light .mnav-panel .nav-link { color: var(--mist); }
.mnav-tools > summary { list-style: none; cursor: pointer; }
.mnav-tools > summary::-webkit-details-marker { display: none; }
.mnav-tools > summary svg { color: var(--citadel-gold); transition: transform 0.25s ease; }
.mnav-tools[open] > summary { color: var(--foam); }
.mnav-tools[open] > summary svg { transform: rotate(180deg); }
.mnav-panel .menu-grid { grid-template-columns: 1fr; gap: 14px; padding: 6px 10px 2px; }
@media (min-width: 561px) { .mnav-panel .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mnav-panel .menu-all { margin: 10px 10px 6px; width: calc(100% - 20px); }
.mnav-theme { display: flex; justify-content: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.masthead .mnav-panel .theme-sw { display: inline-flex; }
/* states, both themes */
.mnav-panel .nav-link:hover, .mnav-panel .nav-link:focus-visible, .masthead.on-light .mnav-panel .nav-link:hover,
.mnav-tools > summary:hover, .mnav-tools > summary:focus-visible { color: var(--foam); background-color: rgba(236, 233, 226, 0.06); }
[data-theme="light"] .mnav-panel .nav-link:hover, [data-theme="light"] .mnav-panel .nav-link:focus-visible,
[data-theme="light"] .mnav-tools > summary:hover, [data-theme="light"] .mnav-tools > summary:focus-visible { background-color: rgba(7, 14, 24, 0.05); }
.mnav-panel .nav-link[aria-current="page"] { color: var(--foam); box-shadow: inset 2px 0 0 var(--citadel-gold); }
.mnav-btn:hover { box-shadow: inset 0 0 0 1px var(--citadel-gold); }
.mnav-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--citadel-gold), 0 0 0 3px rgba(201, 169, 97, 0.3); }
@media (prefers-reduced-motion: reduce) { .mnav-tools > summary svg { transition: none; } }
/* with the page links behind the button there is room for the name again on phones */
@media (max-width: 430px) { .wordmark-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
@media (max-width: 340px) { .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Answers written on the admin panel (cms/render.js) may hold more than one paragraph, lists and links ---------- */
.faq details > :is(p, ul, ol):not(:last-child) { margin-bottom: 12px; }
.faq details > :is(ul, ol) { margin: 0 0 20px; padding-left: 1.3em; max-width: 44rem; color: var(--mist); line-height: 1.7; }
html[lang="th"] .faq details > :is(ul, ol) { line-height: 1.8; }
.faq details a { color: var(--citadel-gold); text-underline-offset: 3px; }

/* =====================================================================
   2026-10-23 — P's design note (แก้ดีไซน์.docx): in the light theme every glass surface is the paper's own cream at 10%,
   rgba(244, 241, 234, 0.1): the boxes and cards on the site and the admin panel (were white 10%), the ghost and icon
   buttons, the theme switch and the sign-in buttons (cream 14%), the drop-downs — Indicators, account, language — and the
   phone menu (cream 16%, white 10%), and the menu bar once the page scrolls (cream 14%). The dark theme, the hover colours
   and lite mode stay as they were (lite's buttons keep their 14%; its panels and boxes have rules of their own).
   ===================================================================== */
[data-theme="light"] .glass:not(.btn, .icon-btn, .menu-panel, .dd-panel, .bo-side, .theme-sw, .masthead-inner),
[data-theme="light"] .btn-ghost, [data-theme="light"] .portal-link, [data-theme="light"] .icon-btn,
[data-theme="light"] .theme-sw, [data-theme="light"] .sso-btn,
[data-theme="light"] .menu-panel, [data-theme="light"] .acct-panel, [data-theme="light"] .lang-panel,
[data-theme="light"] .masthead .mnav-panel,
[data-theme="light"] .masthead.is-scrolled .masthead-inner::after { background-color: rgba(244, 241, 234, 0.1); }
[data-theme="light"].lite .btn-ghost, [data-theme="light"].lite .portal-link, [data-theme="light"].lite .icon-btn,
[data-theme="light"].lite .theme-sw, [data-theme="light"].lite .sso-btn { background-color: rgba(244, 241, 234, 0.14); }

/* ---------- Menu bar light (from r3, 15 Oct 2026; live 27 Oct 2026) ----------
   The light that follows the pointer along a card's rim also runs along the menu bar and its drop-downs
   (Indicators, account, language, phone menu). Their ::before / ::after are taken (rim and blur), so the light is a span
   that flow.js puts inside them: the gold rim masked to the 1px edge, and a faint glow inside. Same colours as the cards. */
@media (hover: hover) and (pointer: fine) {
  .edge-light { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.35s ease;
    background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(201, 169, 97, 0.08), transparent 65%); }
  .edge-light::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 238, 200, 0.95), rgba(201, 169, 97, 0.6) 32%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .is-lit > .edge-light { opacity: 1; }
  /* the bar is see-through at the top of the page: there the light is a little softer */
  .masthead:not(.is-scrolled) .masthead-inner > .edge-light { opacity: 0; }
  .masthead:not(.is-scrolled) .masthead-inner.is-lit > .edge-light { opacity: 0.7; }
  [data-theme="light"] .edge-light { background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.5), transparent 65%); }
  [data-theme="light"] .edge-light::before {
    background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(140, 104, 28, 0.9), rgba(201, 169, 97, 0.5) 32%, transparent 72%); }
  .lite .edge-light { display: none; }
}

/* ---------- Badges (27 Oct 2026): Premium, Pro, Invite-only, Add to chart instantly, Coming soon ----------
   On a product card (.badge-new + .badge-<kind>) and on a menu entry (.mi-badge + .badge-<kind>), each in a colour of
   its own: the word in a light tint of it on the dark theme, a deep shade on the light one, over a soft fill and a rim.
   New on a card keeps the card's own colour; Premium in the menu keeps the gold pill it has had since 9 Oct. */
.badge-premium { --bdg: 201, 169, 97;  --bdg-hi: #E8D29A; --bdg-lo: #7A5C17; }
.badge-pro     { --bdg: 155, 122, 214; --bdg-hi: #D2C1F5; --bdg-lo: #55339A; }
.badge-invite  { --bdg: 94, 200, 229;  --bdg-hi: #AEEBF8; --bdg-lo: #0E6680; }
.badge-instant { --bdg: 47, 191, 113;  --bdg-hi: #9BEBC0; --bdg-lo: #0F7040; }
.badge-soon    { --bdg: 148, 163, 184; --bdg-hi: #D5DDE8; --bdg-lo: #3F4C5F; }
:is(.badge-new, .mi-badge):is(.badge-premium, .badge-pro, .badge-invite, .badge-instant, .badge-soon) {
  color: var(--bdg-hi); background-color: rgba(var(--bdg), 0.2); box-shadow: inset 0 0 0 1px rgba(var(--bdg), 0.75); }
[data-theme="light"] :is(.badge-new, .mi-badge):is(.badge-premium, .badge-pro, .badge-invite, .badge-instant, .badge-soon) {
  color: var(--bdg-lo); background-color: rgba(var(--bdg), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--bdg), 0.7); }
/* the longer words (Add to chart instantly) stay on one line and don't push the card's name; Thai words, which have no
   capitals, read better a little bigger and without the wide spacing */
.badge-new:is(.badge-instant, .badge-invite) { letter-spacing: 0.06em; }
.tool-head .badge-new { flex: none; }
.badge-new:lang(th) { font-size: 0.75rem; letter-spacing: 0.02em; padding: 4px 10px 4px; }
.mi-badge:lang(th) { letter-spacing: 0.01em; }
/* the shop's figures in a page's words (cms-render.js: planNums): part of the words around them, in a button too */
[data-plan-num] { display: contents; }

/* the Indicators menu (27 Oct 2026): a little wider, so a name and its badge share a line; never past the window: its own scroll; Coming soon in coral */
.menu-panel { width: min(900px, calc(100vw - 40px)); }
.masthead .menu-panel { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 169, 97, 0.45) transparent; }
.badge-soon { --bdg: 240, 120, 92; --bdg-hi: #FFC4B5; --bdg-lo: #A33A1F; }

/* ---------- Smoother motion (27 Oct 2026) ----------
   The background's gold fields drift by translate (moved by the graphics card), not by margin (a new layout every
   frame); the background keeps its work to itself. */
@keyframes drift1 { to { translate: 5vw 4vh; } }
@keyframes drift2 { to { translate: -6vw -5vh; } }
.bg { contain: strict; }
.bg span { will-change: transform, translate; }
/* the pointer's light: its position belongs to the box under the pointer alone, not to everything inside it, so moving
   the pointer redraws one rim instead of restyling a whole card */
@property --gx { syntax: '*'; inherits: false; }
@property --gy { syntax: '*'; inherits: false; }
.glass::after, .edge-light, .edge-light::before { --gx: inherit; --gy: inherit; }

/* ---------- Status dots breathe (27 Oct 2026) ----------
   A status dot (a pill's dot: on the site, live, waiting, a problem; a Site content tab's gold dot) sends a soft ring
   outward now and then, the colour of the dot fading as it spreads; then rests. Hidden / off stays still. The ring is
   moved by the graphics card (transform, opacity), so a page of them costs nothing. Not with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .pill:is(.ok, .wait, .bad) { position: relative; }
  .pill:is(.ok, .wait, .bad)::after { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: currentColor; pointer-events: none; opacity: 0; animation: ae-ripple 3.4s cubic-bezier(0.25, 0.6, 0.35, 1) infinite; }
  .pill.wait::after { animation-delay: -1.1s; }
  .pill.bad::after { animation-duration: 2.6s; }
  .bo-tab-dot { position: relative; }
  .bo-tab-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--citadel-gold); pointer-events: none; opacity: 0;
    animation: ae-ripple 3.4s cubic-bezier(0.25, 0.6, 0.35, 1) infinite; }
  @keyframes ae-ripple {
    0% { transform: scale(1); opacity: 0.55; }
    55% { transform: scale(3.6); opacity: 0; }
    100% { transform: scale(3.6); opacity: 0; }
  }
}

/* ---------- Journal standard on the public site (27 Oct 2026, P): fields on faint glass with a hairline, never white;
   tick boxes and choices round like the Journal's, gold when chosen ---------- */
:root { --j-inner: rgba(236, 233, 226, 0.035); --j-line: rgba(236, 233, 226, 0.14); --j-mark: #C9A961; --j-ring: rgba(201, 169, 97, 0.22); --j-on: #0B1220; }
[data-theme="light"] { --j-inner: rgba(7, 14, 24, 0.03); --j-line: rgba(7, 14, 24, 0.14); --j-mark: #B38B35; }
.field input, .field textarea, .field select, .input-prefix, .code-input, .code-row input,
[data-theme="light"] .field input, [data-theme="light"] .field textarea, [data-theme="light"] .field select, [data-theme="light"] .input-prefix,
[data-theme="light"] .code-input, [data-theme="light"] .code-row input {
  background-color: var(--j-inner); border-color: transparent; box-shadow: inset 0 0 0 1px var(--j-line); }
.input-prefix input, [data-theme="light"] .input-prefix input { background: transparent; box-shadow: none; }
.field input:hover, .field textarea:hover, .field select:hover, .input-prefix:hover, .code-input:hover, .code-row input:hover {
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.45); }
.field input:focus, .field textarea:focus, .field select:focus, .input-prefix:focus-within, .code-input:focus, .code-row input:focus,
[data-theme="light"] .field input:focus, [data-theme="light"] .field textarea:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .input-prefix:focus-within,
[data-theme="light"] .code-input:focus, [data-theme="light"] .code-row input:focus {
  outline: none; border-color: transparent; box-shadow: inset 0 0 0 1px var(--j-mark), 0 0 0 3px var(--j-ring); }
.input-prefix input:focus { box-shadow: none !important; }
.invalid input, .invalid .input-prefix { box-shadow: inset 0 0 0 1px rgba(242, 54, 69, 0.7); }
.choice, [data-theme="light"] .choice { background-color: var(--j-inner); }
.choice:has(input:checked), [data-theme="light"] .choice:has(input:checked) { background-color: rgba(201, 169, 97, 0.1); }
/* round marks */
.choice input[type="radio"], .check input[type="checkbox"],
[data-theme="light"] .choice input[type="radio"], [data-theme="light"] .check input[type="checkbox"] {
  width: 19px; height: 19px; border: 0; border-radius: 50%; background-color: var(--j-inner); box-shadow: inset 0 0 0 1px var(--j-line);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.choice:hover input:not(:checked), .check:hover input:not(:checked),
[data-theme="light"] .choice:hover input:not(:checked), [data-theme="light"] .check:hover input:not(:checked) { box-shadow: inset 0 0 0 1px var(--j-mark); }
.choice input:focus-visible, .check input:focus-visible { box-shadow: inset 0 0 0 1px var(--j-mark), 0 0 0 3px var(--j-ring); }
.choice input:active, .check input:active { transform: scale(0.88); }
.choice input[type="radio"]:checked, .check input[type="checkbox"]:checked,
[data-theme="light"] .choice input[type="radio"]:checked, [data-theme="light"] .check input[type="checkbox"]:checked {
  background-color: var(--j-mark); box-shadow: inset 0 0 0 1.5px var(--j-mark), 0 0 0 3px var(--j-ring); animation: j-ckpop 0.32s cubic-bezier(0.3, 0.9, 0.3, 1.3); }
.choice input[type="radio"]::before { width: 7px; height: 7px; background: var(--j-on); }
.check input[type="checkbox"]::before { width: 8px; height: 4px; margin-top: -2px; background: none; clip-path: none; border-left: 2px solid var(--j-on); border-bottom: 2px solid var(--j-on);
  transform: rotate(-45deg) scale(0); }
.check input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
@keyframes j-ckpop { 0% { transform: scale(0.7); } 70% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .choice input:checked, .check input:checked { animation: none; } }

/* ---------- Journal standard, round 2 (27 Oct 2026, P): what is chosen wears the Journal's gold rim on a soft gold fill:
   the theme switch, the language menu, the account menu, the phone menu ---------- */
:root { --j-soft: rgba(201, 169, 97, 0.12); }
[data-theme="light"] { --j-soft: rgba(201, 169, 97, 0.14); }
.theme-opt[aria-checked="true"], [data-theme="light"] .theme-opt[aria-checked="true"], [data-theme="light"].lite .theme-opt[aria-checked="true"] {
  color: var(--foam); background: var(--j-soft); box-shadow: inset 0 0 0 1px var(--j-mark); }
.theme-opt { transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.theme-opt:not([aria-checked="true"]):hover { color: var(--foam); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.35); }
.lang-panel a[aria-current], [data-theme="light"] .lang-panel a[aria-current] { color: var(--foam); background: var(--j-soft); box-shadow: inset 0 0 0 1px var(--j-mark); }
.lang-panel a[aria-current]::after { color: var(--j-mark); }
.acct-nav a[aria-current], [data-theme="light"] .acct-nav a[aria-current] { color: var(--foam); background: var(--j-soft); box-shadow: inset 0 0 0 1px var(--j-mark); }
.mnav-panel .nav-link[aria-current="page"], [data-theme="light"] .mnav-panel .nav-link[aria-current="page"] {
  color: var(--foam); background: var(--j-soft); box-shadow: inset 0 0 0 1px var(--j-mark); border-radius: 11px; }

/* ---------- Announcement banner as a pop-up card (27 Oct 2026, P): the Journal's pop-up glass (blur 5px), a red-gold rim
   so it stands out (the warn tone keeps red), a round mark and a "Notice" heading; bottom right, full width on phones ---------- */
.site-banner { --ban-rim: linear-gradient(120deg, #E3C47E, #D98A3A 45%, #D9483B); --ban-halo: rgba(217, 100, 59, 0.12); --ban-ic: #E07A4A; --ban-icbg: rgba(224, 122, 74, 0.14);
  left: auto; right: 22px; bottom: 22px; transform: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  width: 360px; max-width: calc(100vw - 24px); padding: 16px 14px 16px 16px; border-radius: 18px;
  background: rgba(7, 14, 24, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.site-banner, .site-banner.is-warn { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14), 0 18px 48px rgba(0, 0, 0, 0.38), 0 0 0 4px var(--ban-halo); }
[data-theme="light"] .site-banner { background: rgba(244, 241, 234, 0.62); --ban-ic: #B8521F; }
[data-theme="light"] .site-banner, [data-theme="light"] .site-banner.is-warn { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.85), 0 16px 40px rgba(7, 14, 24, 0.12), 0 0 0 4px var(--ban-halo); }
.site-banner.is-warn { --ban-rim: linear-gradient(120deg, #F26A5A, #D9363E); --ban-halo: rgba(217, 54, 62, 0.12); --ban-ic: #F0656A; --ban-icbg: rgba(240, 101, 106, 0.14); }
[data-theme="light"] .site-banner.is-warn { --ban-ic: #C42E3A; }
.site-banner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--ban-rim); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.site-banner::after { content: "!"; grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ban-icbg); color: var(--ban-ic); font-weight: 700; font-size: 1rem; line-height: 1; }
.site-banner p { grid-column: 2; grid-row: 1; align-self: center; }
.site-banner p::before { content: "\E1B\E23\E30\E01\E32\E28"; display: block; margin-bottom: 2px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ban-ic); }
.site-banner:lang(en) p::before { content: "Notice"; }
.site-banner-x { grid-column: 3; grid-row: 1; background: rgba(236, 233, 226, 0.06); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.12); }
[data-theme="light"] .site-banner-x { background: rgba(7, 14, 24, 0.04); box-shadow: inset 0 0 0 1px rgba(7, 14, 24, 0.1); }
.site-banner-x:hover, [data-theme="light"] .site-banner-x:hover { color: var(--foam); box-shadow: inset 0 0 0 1px var(--citadel-gold); }
.lite .site-banner { background: rgba(10, 20, 34, 0.9); }
[data-theme="light"].lite .site-banner { background: rgba(251, 250, 246, 0.94); }
@media (max-width: 600px) { .site-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; border-radius: 16px; } }
/* the admin panel's preview (Settings): the Thai card, then the English one, side by side */
.bo-banner-preview.bo-banner-preview { grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); }
.bo-banner-preview .site-banner.site-banner { position: relative; left: auto; right: auto; bottom: auto; width: auto; max-width: none; }
.bo-banner-preview .site-banner:nth-child(1) p::before { content: "\E1B\E23\E30\E01\E32\E28"; }
.bo-banner-preview .site-banner:nth-child(2) p::before { content: "Notice"; }

/* ---------- Announcement banner as the long bar, at the top just under the menu bar (27 Oct 2026, P 17:04-17:05): same pop-up
   glass (blur 5px), red-gold rim (warn: red) and halo as the card; no mark or heading; sits under the menu's own drop-downs ---------- */
.site-banner.site-banner { top: calc(84px + env(safe-area-inset-top)); bottom: auto; left: 50%; right: auto; z-index: 19; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(760px, calc(100vw - 24px)); padding: 10px 10px 10px 18px; border-radius: 999px; }
.site-banner.site-banner::after, .site-banner.site-banner p::before { display: none; }
@media (max-width: 600px) { .site-banner.site-banner { top: calc(80px + env(safe-area-inset-top)); left: 12px; right: 12px; transform: none; width: auto; max-width: none; border-radius: 16px; } }
@media (prefers-reduced-motion: no-preference) { .site-banner.site-banner { animation: site-banner-down 0.4s ease-out both; } }
@keyframes site-banner-down { from { opacity: 0; translate: 0 -10px; } }
.bo-banner-preview.bo-banner-preview { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.bo-banner-preview .site-banner.site-banner { position: relative; top: auto; left: auto; bottom: auto; z-index: auto; transform: none; max-width: 100%; animation: none; }

/* ---------- Announcement bar on the menu bar's own glass (27 Oct 2026, P 17:13: in Chrome it didn't look like the menu bar):
   same fill, edges and shadow as the scrolled menu bar, the bar's refracting lens in Chromium, no milky halo; the red-gold rim stays ---------- */
.site-banner.site-banner { background-color: rgba(7, 14, 24, 0.14); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.55), inset 0 -0.5px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.3); }
[data-theme="light"] .site-banner.site-banner { background-color: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 28px rgba(7, 14, 24, 0.1); }
.real-lens .site-banner.site-banner { backdrop-filter: url(#edge-lens) blur(5px); }
.lite .site-banner.site-banner { background-color: rgba(7, 14, 24, 0.92); }
[data-theme="light"].lite .site-banner.site-banner { background-color: rgba(255, 255, 255, 0.96); }

/* ---------- Announcement bar: closing slides it up and fades it, the reverse of how it comes in (27 Oct 2026, P 17:16) ---------- */
.site-banner.site-banner.is-closing { animation: site-banner-up 0.36s cubic-bezier(0.4, 0, 0.2, 1) forwards; pointer-events: none; }
@keyframes site-banner-up { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 -14px; scale: 0.97; } }

/* ---------- Announcement bar, light theme: the menu bar's current paper glass (cream 10%, P's design note 23 Oct 2026), not the
   older white 66% (27 Oct 2026, P 17:28 "white, not cream") ---------- */
[data-theme="light"] .site-banner.site-banner { background-color: rgba(244, 241, 234, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 10px 30px rgba(7, 14, 24, 0.025); }

/* ---------- Glass check, items 1-2 (27 Oct 2026, P 17:45): the theme switch on the same glass as the icon
   buttons beside it (navy 14% / cream 10%, blur 3px, the small lens in Chromium, top and bottom highlights, soft drop shadow;
   its 1px rim stays), and the icon buttons' dark fill 16% -> 14% like every other glass ---------- */
.icon-btn { background-color: rgba(7, 14, 24, 0.14); }
.theme-sw { background: rgba(7, 14, 24, 0.14); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0.5px 0 rgba(255, 255, 255, 0.55), inset 0 -0.5px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.3); }
.real-lens .theme-sw { backdrop-filter: url(#edge-lens-sm) blur(3px); }

/* ---------- Drop-downs unfold the Journal way (27 Oct 2026, P 18:00): Indicators, account, language and the phone menu
   grow out of their button (scale .96, 4px up) on the Journal's curve, 0.2s in, and fold back quicker, 0.14s out ---------- */
.menu-panel, .acct-panel, .lang-panel { transform: translateY(-4px) scale(0.96); transform-origin: top right;
  transition: opacity 0.14s ease-in, transform 0.14s ease-in, visibility 0s linear 0.14s; }
.menu.open .menu-panel, .acct-menu.open .acct-panel, .lang-menu.open .lang-panel, .mnav.open .mnav-panel {
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .menu:hover .menu-panel, .menu:focus-within .menu-panel, .acct-menu:hover .acct-panel, .acct-menu:focus-within .acct-panel,
  .lang-menu:hover .lang-panel, .lang-menu:focus-within .lang-panel {
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, visibility 0s 0.05s; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel, .acct-panel, .lang-panel { transform: none; transition: opacity 0.1s linear, visibility 0s linear 0.1s; } }

/* ---------- The Indicators drop-down keeps its frame still (27 Oct 2026, P 18:19: the rim floated when the list scrolled) ----------
   Taller than the screen, the panel itself used to scroll, and its rim, blur and pointer light (drawn on the panel) scrolled
   away with the list. Now the frame stays put and only the list scrolls inside it; "All indicators" stays at the bottom. */
.masthead .menu-panel:not(.mnav-panel) { display: flex; flex-direction: column; overflow: hidden; }
.masthead .menu-panel:not(.mnav-panel) > .menu-grid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(201, 169, 97, 0.45) transparent; }
.masthead .menu-panel:not(.mnav-panel) > .menu-all { flex: none; }

/* ---------- Performance, Safari (27 Oct 2026, evening): the drop-downs unfold without the scale there - WebKit redraws a
   blurred layer's picture on every frame while it scales; they still fade and slide 4px, on the same curve ---------- */
@supports (-webkit-backdrop-filter: blur(1px)) {
  .menu-panel, .acct-panel, .lang-panel { transform: translateY(-4px); }
}

/* ---------- Scroll fade, the Journal way (27 Oct 2026, P: "if there is more below, fade the edge so it shows it scrolls; once
   scrolled, fade the top and bottom edges"): a list that scrolls inside itself fades its last 40px (to 8% at the edge) while there
   is more below, and its first 28px once scrolled down (site.js sets .sf-y / .sf-t from the scroll position). A mask, so no extra
   blur; the two edges ease in and out. Lists only: a mask on a box with glass inside would cut that glass's blur. ---------- */
@property --sf-top { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sf-bot { syntax: '<number>'; inherits: false; initial-value: 1; }
.masthead .menu-panel > .menu-grid, .mnav-scroll, .bo-pick-list {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
  transition: --sf-top 0.25s ease, --sf-bot 0.25s ease;
}
@media (min-width: 861px) {
  .bo-side.glass > .bo-nav {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
    transition: --sf-top 0.25s ease, --sf-bot 0.25s ease;
  }
}
.sf-t.sf-t { --sf-top: 0; }
.sf-y.sf-y { --sf-bot: 0.08; }
@media (prefers-reduced-motion: reduce) {
  .masthead .menu-panel > .menu-grid, .mnav-scroll, .bo-pick-list, .bo-side.glass > .bo-nav { transition: none; }
}

/* ---------- Your indicators: Have an access code? (ported from r3, 27 Oct 2026) ---------- */
.redeem-row { display: flex; gap: 10px; align-items: stretch; }
.redeem-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.redeem-row .btn { flex: none; }
@media (max-width: 520px) { .redeem-row { flex-direction: column; } }
.redeem-form { margin-top: 16px; }
.redeem-form .check { margin-top: 12px; }

/* ---------- Pop-ups (27 Oct 2026, P: "pop-ups fade top and bottom when they scroll; check the others too" and "an X at the top
   right to close"): the dialog's glass stays still and its form scrolls inside it, fading its edges like the scrolling lists
   (only while it can scroll: a mask would take the blur from the glass buttons inside); an X top right, outside the scroll.
   site.js adds the X (not to the Terms prompt, which must be accepted) and the .sf-s / .sf-y / .sf-t marks. ---------- */
dialog.bo-dlg[open], dialog.claim-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.claim-dialog[open] { padding: 0; }
dialog.claim-dialog > form { padding: 24px; }
dialog.bo-dlg[open] > form, dialog.claim-dialog[open] > form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog[open] > form.sf-s {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-top)), #000 28px, #000 calc(100% - 40px), rgba(0, 0, 0, var(--sf-bot)));
  transition: --sf-top 0.25s ease, --sf-bot 0.25s ease;
}
.dlg-x { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(163, 174, 191, 0.12); color: var(--mist); cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.dlg-x svg { width: 14px; height: 14px; }
.dlg-x:hover, .dlg-x:focus-visible { color: var(--foam); box-shadow: inset 0 0 0 1px var(--citadel-gold); outline: none; }
[data-theme="light"] .dlg-x { background: rgba(7, 14, 24, 0.05); }
dialog > form > :first-child:is(h2, h3, p) { padding-right: 40px; }
@media (prefers-reduced-motion: reduce) { dialog[open] > form.sf-s, .dlg-x { transition: none; } }
/* Policy pages: the version shown, and an earlier version's note (28 Oct 2026, from the r3 design) */
.policy-ver { color: var(--mist); }
.policy-old { display: inline-block; margin: 14px 0 0; padding: 8px 14px; border-radius: 12px; background: rgba(201, 169, 97, 0.12);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.35); font-size: 0.9375rem; }
.policy-old a { color: var(--citadel-gold); }
[data-theme="light"] .policy-old { color: var(--ink, #141B27); }
[data-theme="light"] .policy-old a { color: #7A5B12; }

/* ---------- Account tabs keep their frame still (29 Oct 2026, P: on a phone the tab bar's rim stopped short and slid along
   with the tabs) ---------- The bar used to scroll sideways inside its own glass box, so the rim drawn on that box scrolled away
   with the tabs. Now the box stays put and only the row of tabs inside it scrolls (the Indicators drop-down's fix of 27 Oct). */
.acct-nav-in { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 899px) {
  .acct-nav { display: block; overflow: hidden; padding: 0; }
  .acct-nav-in { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 10px; scroll-padding-inline: 10px; }
  .acct-nav-in::-webkit-scrollbar { display: none; }
}

/* ---------- The next arrow of an indicator row glows until the row is first moved (29 Oct 2026, P: "ปุ่มลูกศรขวาเรืองแสง";
   site.js: Indicator rows open past the hero's cards). A soft gold ring and halo breathe on top of the arrow's own shadow
   (--ae-nb, the same as at rest in each theme), the chevron turns gold at the peak. Hover shows the normal hover; at the
   row's end (disabled) it stops. Reduced motion: a still, fainter glow ---------- */
.slider-btn { --ae-nb: inset 0 0.5px 0 rgba(255, 255, 255, 0.55), inset 0 -0.5px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.3); }
[data-theme="light"] .slider-btn { --ae-nb: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(7, 14, 24, 0.03); }
@keyframes ae-glow {
  50% { box-shadow: var(--ae-nb), 0 0 0 1px rgba(201, 169, 97, 0.65), 0 0 22px 3px rgba(201, 169, 97, 0.45); color: var(--citadel-gold); }
}
.slider-btn.ae-glow:not(:disabled, :hover, :focus-visible) { animation: ae-glow 2.4s ease-in-out 3; box-shadow: var(--ae-nb), 0 0 0 1px rgba(201, 169, 97, 0.5); }   /* 3 pulses, then a still ring (31 Oct 2026, P) */
[data-theme="light"] .slider-btn.ae-glow:not(:disabled, :hover, :focus-visible) { animation-name: ae-glow-light; box-shadow: var(--ae-nb), 0 0 0 1px rgba(201, 169, 97, 0.75); }
@keyframes ae-glow-light {
  50% { box-shadow: var(--ae-nb), 0 0 0 1px rgba(201, 169, 97, 0.85), 0 0 22px 4px rgba(201, 169, 97, 0.6); color: #9a7a35; }
}
@media (prefers-reduced-motion: reduce) {
  .slider-btn.ae-glow:not(:disabled, :hover, :focus-visible) { animation: none !important; box-shadow: var(--ae-nb), 0 0 0 1px rgba(201, 169, 97, 0.55), 0 0 14px 2px rgba(201, 169, 97, 0.3); color: var(--citadel-gold); }
}