/* ============================================================================
   Loopcraft Engineer — Storefront Design System  v1
   Hand-written, zero-dependency CSS. Layer order is load-bearing.
   Benchmarked against: Linear (restraint + figure captions), Stripe (gradient
   mesh + hairline grid), Apple (type rhythm + scroll choreography),
   Vercel (monochrome + single accent), Family (motion curves).
   ========================================================================== */

@layer tokens, reset, base, layout, components, motion, utilities;

/* ---------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    /* — surface ladder (dark is the primary theme) — */
    --void: #060608;
    --ground: #08080B;
    --surface: #0E0E12;
    --raised: #14141A;
    --overlay: #1B1B22;

    /* — hairlines & strokes — */
    --line: rgb(255 255 255 / 0.07);
    --line-strong: rgb(255 255 255 / 0.13);
    --line-soft: rgb(255 255 255 / 0.04);

    /* — ink — */
    --fg: #F6F6F4;
    --fg-2: #A8A8B2;
    --fg-3: #6C6C77;
    --fg-4: #44444E;

    /* — accents: max three per section (Stripe's rule) — */
    --brass: #C9AB6E;
    --brass-dim: #8A7646;
    --iris: #8585FF;
    --iris-dim: #4A4AA8;
    --mint: #5FC8A4;
    --rose: #E68F8F;

    /* — semantic — */
    --up: var(--mint);
    --down: var(--rose);

    /* — type — */
    --font-thai: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif;
    --font-disp: "Archivo", "Anuphan", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    --t-hero: clamp(2.3rem, 4.4vw, 3.9rem);
    --t-h1: clamp(2rem, 4.2vw, 3.5rem);
    --t-h2: clamp(1.5rem, 2.5vw, 2.125rem);
    --t-h3: 1.1875rem;
    --t-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
    --t-body: 1rem;
    --t-sm: 0.875rem;
    --t-label: 0.6875rem;

    --lh-tight: 1.16;
    --lh-thai: 1.78;
    --tr-tight: -0.028em;
    --tr-label: 0.19em;

    /* — space: 8pt grid — */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --section: clamp(4rem, 7.5vw, 7.5rem);

    /* — shell — */
    --shell: 77.5rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* — radii — */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* — elevation — */
    --sh-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sh-2: 0 8px 24px -8px rgb(0 0 0 / 0.6);
    --sh-3: 0 32px 64px -24px rgb(0 0 0 / 0.75);
    --glow-brass: 0 0 0 1px rgb(201 171 110 / 0.22), 0 18px 48px -18px rgb(201 171 110 / 0.3);
    --glow-iris: 0 0 0 1px rgb(133 133 255 / 0.24), 0 18px 48px -18px rgb(133 133 255 / 0.32);

    /* — motion — */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --d-1: 120ms;
    --d-2: 200ms;
    --d-3: 400ms;
    --d-4: 760ms;

    --nav-h: 4.25rem;
    color-scheme: dark;
  }

  /* light theme — opt-in, same token names so components never branch */
  :root[data-theme="light"] {
    --void: #FFFFFF;
    --ground: #FBFBF9;
    --surface: #FFFFFF;
    --raised: #F5F5F2;
    --overlay: #EFEFEB;
    --line: rgb(10 10 15 / 0.10);
    --line-strong: rgb(10 10 15 / 0.18);
    --line-soft: rgb(10 10 15 / 0.05);
    --fg: #121216;
    --fg-2: #52525C;
    --fg-3: #7B7B86;
    --fg-4: #A9A9B2;
    --brass: #8A6D28;
    --iris: #4F4FD6;
    --mint: #1F8F68;
    --rose: #B3514F;
    --sh-2: 0 8px 24px -10px rgb(10 10 20 / 0.14);
    --sh-3: 0 32px 64px -28px rgb(10 10 20 / 0.18);
    color-scheme: light;
  }
}

/* ----------------------------------------------------------------- reset -- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
  }

  body {
    min-height: 100svh;
    background: var(--ground);
    color: var(--fg);
    font-family: var(--font-thai);
    font-size: var(--t-body);
    line-height: var(--lh-thai);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
    overflow-x: clip;
  }

  img, svg, canvas { display: block; max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }

  :focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  ::selection { background: rgb(201 171 110 / 0.26); color: var(--fg); }

  /* tabular numbers everywhere a number carries meaning */
  .num, td.num, .mono { font-variant-numeric: tabular-nums; }
}

/* ------------------------------------------------------------------ base -- */
@layer base {
  .display {
    font-family: var(--font-disp);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    line-height: var(--lh-tight);
    text-wrap: balance;
  }

  h1, h2, h3 { font-weight: 600; text-wrap: balance; }
  h1 { font-size: var(--t-h1); line-height: 1.2; letter-spacing: -0.02em; }
  h2 { font-size: var(--t-h2); line-height: 1.3; letter-spacing: -0.015em; }
  h3 { font-size: var(--t-h3); line-height: 1.45; }

  p { text-wrap: pretty; }

  .lead {
    font-size: var(--t-lead);
    line-height: var(--lh-thai);
    color: var(--fg-2);
    max-width: 46ch;
  }

  .label {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  .mono { font-family: var(--font-mono); }
  .muted { color: var(--fg-2); }
  .faint { color: var(--fg-3); }
  .up { color: var(--up); }
  .down { color: var(--down); }

  /* the figure caption pattern, lifted from Linear */
  .fig {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: 0.1em;
    color: var(--fg-4);
  }
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
  .shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  section { position: relative; overflow: clip; }

  .band { padding-block: var(--section); }
  .band + .band { border-top: 1px solid var(--line-soft); }

  .stack { display: flex; flex-direction: column; }
  .row { display: flex; align-items: center; }
  .wrap { flex-wrap: wrap; }
  .gap-2 { gap: var(--s-2); }
  .gap-3 { gap: var(--s-3); }
  .gap-4 { gap: var(--s-4); }
  .gap-5 { gap: var(--s-5); }
  .gap-6 { gap: var(--s-6); }
  .gap-7 { gap: var(--s-7); }

  .grid { display: grid; gap: var(--s-5); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* two-column split whose ratio is set per instance with --a / --b,
     so no instance needs an inline grid-template that media queries
     cannot override */
  .split {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: minmax(0, var(--a, 1fr)) minmax(0, var(--b, 1fr));
  }
  @media (max-width: 62rem) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .cols-2 { grid-template-columns: minmax(0, 1fr); }
  }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* section head: eyebrow + title + sub, consistent across every band */
  .head { max-width: 58ch; }
  .head .label { display: block; margin-bottom: var(--s-4); }
  .head p { margin-top: var(--s-4); }

  /* hairline vertical grid that the whole page sits inside (Stripe) */
  .rules {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .rules span { border-right: 1px solid var(--line-soft); }
  .rules span:first-child { border-left: 1px solid var(--line-soft); }

  @media (max-width: 60rem) {
    .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: 1fr; }
    .rules { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 40rem) {
    .cols-2, .cols-4 { grid-template-columns: 1fr; }
    .rules { display: none; }
  }
}

/* ------------------------------------------------------------ components -- */
@layer components {

  /* ---------- atmosphere: grain + gradient mesh ---------- */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .mesh {
    position: absolute;
    inset: -20% 0 auto;
    height: 140%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(42rem 28rem at 18% 8%, rgb(201 171 110 / 0.13), transparent 62%),
      radial-gradient(34rem 26rem at 88% 24%, rgb(133 133 255 / 0.12), transparent 60%),
      radial-gradient(28rem 20rem at 60% 78%, rgb(95 200 164 / 0.06), transparent 65%);
    filter: blur(6px);
  }

  /* ---------- nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
  }
  .nav[data-stuck="true"] {
    background: color-mix(in oklab, var(--ground) 78%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom-color: var(--line);
  }
  .nav .shell { display: flex; align-items: center; gap: var(--s-6); }

  .brand { display: flex; align-items: baseline; gap: var(--s-3); }
  .brand b {
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }
  .brand span { font-size: var(--t-sm); color: var(--fg-3); }

  .nav-links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
  .nav-links a:not(.btn) {
    font-size: var(--t-sm);
    color: var(--fg-2);
    position: relative;
    padding-block: 0.4rem;
    transition: color var(--d-1) linear;
  }
  .nav-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px; width: 0;
    background: var(--brass);
    transition: width var(--d-2) var(--ease);
  }
  .nav-links a:not(.btn):hover { color: var(--fg); }
  .nav-links a:not(.btn):hover::after { width: 100%; }

  @media (max-width: 62rem) { .nav-links .hide-sm { display: none; } }
  @media (max-width: 48rem) {
    .brand span { display: none; }
    .nav .shell { gap: var(--s-4); }
    .nav-links { gap: var(--s-4); }
  }
  @media (max-width: 30rem) {
    .nav-links .pill { display: none; }
  }

  /* scroll progress hairline */
  .progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    z-index: 55;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--brass), var(--iris));
  }

  /* ---------- buttons ---------- */
  .btn {
    --btn-bg: var(--fg);
    --btn-fg: var(--ground);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 2.875rem;
    padding-inline: 1.375rem;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sh-1);
    transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease),
      background var(--d-2) var(--ease), color var(--d-2) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  .btn:active { transform: translateY(0) scale(0.985); }
  .btn .arrow { transition: transform var(--d-2) var(--ease); }
  .btn:hover .arrow { transform: translateX(3px); }

  .btn-brass { --btn-bg: var(--brass); --btn-fg: #120D02; font-weight: 700; }
  .btn-brass:hover { box-shadow: var(--glow-brass); }
  .btn-iris { --btn-bg: var(--iris); --btn-fg: #07071A; font-weight: 700; }
  .btn-iris:hover { box-shadow: var(--glow-iris); }
  .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    border: 1px solid var(--line-strong);
    box-shadow: none;
  }
  .btn-ghost:hover { background: var(--raised); border-color: var(--fg-4); box-shadow: var(--sh-2); }
  .btn-sm { height: 2.25rem; padding-inline: 0.9rem; font-size: 0.8125rem; }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 1.9rem;
    padding-inline: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--raised) 70%, transparent);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  .pill .dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 3px rgb(201 171 110 / 0.18);
  }
  .pill.iris .dot { background: var(--iris); box-shadow: 0 0 0 3px rgb(133 133 255 / 0.18); }
  .pill.mint .dot { background: var(--mint); box-shadow: 0 0 0 3px rgb(95 200 164 / 0.18); }

  /* ---------- card: spotlight-follow surface ---------- */
  .card {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--ground) 85%, var(--surface)));
    padding: var(--s-5);
    overflow: hidden;
    transition: border-color var(--d-3) var(--ease), transform var(--d-3) var(--ease),
      box-shadow var(--d-3) var(--ease);
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(
      18rem 18rem at var(--mx, 50%) var(--my, 0%),
      color-mix(in oklab, var(--tint, var(--brass)) 20%, transparent),
      transparent 72%
    );
    transition: opacity var(--d-3) var(--ease);
  }
  .card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-3); }
  .card:hover::before { opacity: 1; }
  .card-pad { padding: var(--s-6); }

  /* conic ring for the one featured card */
  .card-feature { border-color: transparent; background-clip: padding-box; }
  .card-feature::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -2;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
      from var(--spin, 0deg),
      var(--brass), transparent 28%, var(--iris) 52%, transparent 78%, var(--brass)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0.55;
    animation: spin 9s linear infinite;
  }
  @keyframes spin { to { --spin: 360deg; } }
  @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

  /* ---------- product card ---------- */
  .product {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-height: 100%;
  }
  .product .top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .product h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
  .product .desc { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.75; }
  .product .feat { display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
  .product .feat li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--fg-2); }
  .product .feat li::before {
    content: "";
    flex: none;
    width: 4px; height: 4px;
    margin-top: 0.75rem;
    background: var(--tint, var(--brass));
  }
  .product .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); }
  .price { display: flex; align-items: baseline; gap: 0.35rem; }
  .price b { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
  .price s { color: var(--fg-4); font-size: var(--t-sm); }
  .price .unit { color: var(--fg-3); font-size: 0.75rem; }

  /* ---------- the hero terminal: US-stock ledger mock ---------- */
  .terminal {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    box-shadow: var(--sh-3);
    overflow: hidden;
    backdrop-filter: blur(12px);
  }
  .terminal-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: 2.5rem;
    padding-inline: var(--s-4);
    border-bottom: 1px solid var(--line);
    background: color-mix(in oklab, var(--raised) 60%, transparent);
  }
  .terminal-bar .tabs { display: flex; gap: 0.15rem; margin-left: auto; }
  .tab {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 0.3rem 0.55rem;
    border-radius: var(--r-sm);
    transition: color var(--d-1) linear, background var(--d-1) linear;
  }
  .tab[aria-selected="true"] { color: var(--fg); background: var(--overlay); }
  .tab:hover { color: var(--fg); }

  .tick { display: flex; gap: 6px; }
  .tick i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }

  .ledger { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
  .ledger th {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-4);
    text-align: right;
    padding: 0.6rem var(--s-4);
    border-bottom: 1px solid var(--line);
  }
  .ledger th:first-child, .ledger td:first-child { text-align: left; }
  .ledger td {
    padding: 0.62rem var(--s-4);
    text-align: right;
    border-bottom: 1px solid var(--line-soft);
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
  }
  .ledger tr:last-child td { border-bottom: 0; }
  .ledger .sym { font-family: var(--font-mono); font-weight: 600; color: var(--fg); letter-spacing: 0.02em; }
  .ledger .brkr { font-size: 0.6875rem; color: var(--fg-4); }
  .ledger tbody tr { transition: background var(--d-1) linear; }
  .ledger tbody tr:hover { background: color-mix(in oklab, var(--raised) 55%, transparent); }

  .spark { height: 20px; width: 72px; margin-left: auto; }
  .spark path { fill: none; stroke-width: 1.5; stroke-linecap: round; }

  .rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.42rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    color: var(--fg-3);
  }
  .rule-chip.armed { color: var(--mint); border-color: rgb(95 200 164 / 0.3); background: rgb(95 200 164 / 0.07); }
  .rule-chip.hit { color: var(--rose); border-color: rgb(230 143 143 / 0.34); background: rgb(230 143 143 / 0.08); }

  /* ---------- AI panel ---------- */
  .ai {
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgb(133 133 255 / 0.05), transparent 70%);
    padding: var(--s-4);
    display: flex;
    gap: var(--s-4);
  }
  .ai-avatar {
    flex: none;
    width: 1.75rem; height: 1.75rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--iris), var(--iris-dim));
    color: #0B0B18;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgb(133 133 255 / 0.3), 0 0 22px -6px rgb(133 133 255 / 0.55);
  }
  .ai-body { min-width: 0; }
  .ai-body .who {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iris);
  }
  .ai-text { font-size: var(--t-sm); line-height: 1.8; color: var(--fg-2); margin-top: 0.3rem; min-height: 3.5rem; }
  .ai-text b { color: var(--fg); font-weight: 600; }
  .caret {
    display: inline-block;
    width: 0.5ch;
    background: var(--iris);
    color: transparent;
    animation: blink 1.1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* ---------- marquee ticker ---------- */
  .ticker {
    border-block: 1px solid var(--line-soft);
    overflow: hidden;
    padding-block: 0.8rem;
    background: color-mix(in oklab, var(--surface) 40%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker-track {
    display: flex;
    gap: var(--s-6);
    width: max-content;
    animation: slide 52s linear infinite;
  }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes slide { to { transform: translateX(-50%); } }
  .ticker-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fg-3);
  }
  .ticker-item b { color: var(--fg-2); font-weight: 600; }

  /* ---------- steps ---------- */
  .step { display: flex; gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--line-soft); }
  .step-n {
    flex: none;
    width: 2.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--brass);
    padding-top: 0.35rem;
  }
  .step h3 { margin-bottom: var(--s-2); }

  /* ---------- stat ---------- */
  .stat { display: flex; flex-direction: column; gap: 0.35rem; }
  .stat b {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .stat span { font-size: var(--t-sm); color: var(--fg-3); }

  /* ---------- faq ---------- */
  .faq { border-top: 1px solid var(--line-soft); }
  .faq summary {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding-block: var(--s-5);
    cursor: pointer;
    list-style: none;
    font-size: 1.0625rem;
    font-weight: 500;
    transition: color var(--d-1) linear;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--brass); }
  .faq summary .plus {
    flex: none;
    margin-left: auto;
    width: 1.25rem; height: 1.25rem;
    position: relative;
    margin-top: 0.4rem;
  }
  .faq summary .plus::before,
  .faq summary .plus::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: var(--fg-3);
    transition: transform var(--d-3) var(--ease);
  }
  .faq summary .plus::after { transform: rotate(90deg); }
  .faq[open] summary .plus::after { transform: rotate(0deg); }
  .faq .answer { padding-bottom: var(--s-5); color: var(--fg-2); font-size: var(--t-sm); line-height: 1.85; max-width: 62ch; }
  .faq[open] .answer { animation: reveal var(--d-3) var(--ease) both; }
  @keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }

  /* ---------- capture ---------- */
  .capture {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    max-width: 30rem;
    transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
  }
  .capture:focus-within { border-color: var(--brass); box-shadow: var(--glow-brass); }
  .capture input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding-inline: var(--s-4);
    font-size: var(--t-sm);
  }
  .capture input::placeholder { color: var(--fg-4); }
  .capture input:focus { outline: none; }

  /* ---------- command palette ---------- */
  .kbd {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: var(--r-sm);
    padding: 0.1rem 0.34rem;
    color: var(--fg-3);
  }
  dialog.cmd {
    width: min(34rem, calc(100vw - 2rem));
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: color-mix(in oklab, var(--overlay) 90%, transparent);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--sh-3);
    color: var(--fg);
  }
  dialog.cmd::backdrop { background: rgb(4 4 8 / 0.62); backdrop-filter: blur(3px); }
  dialog.cmd[open] { animation: pop var(--d-3) var(--ease) both; }
  @keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
  .cmd-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    padding: var(--s-4) var(--s-5);
    font-size: 0.9375rem;
  }
  .cmd-input:focus { outline: none; }
  .cmd-list { padding: var(--s-2); max-height: 20rem; overflow-y: auto; }
  .cmd-list li a, .cmd-list li button {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: 0.6rem var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--fg-2);
    text-align: left;
  }
  .cmd-list li a:hover, .cmd-list li button:hover,
  .cmd-list li[data-active="true"] a, .cmd-list li[data-active="true"] button {
    background: var(--raised);
    color: var(--fg);
  }
  .cmd-list .hint { margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-4); }

  /* ---------- footer ---------- */
  .foot-top { display: flex; gap: var(--s-7); flex-wrap: wrap; justify-content: space-between; }
  .foot-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 9rem; }
  .foot-col a { font-size: var(--t-sm); color: var(--fg-3); transition: color var(--d-1) linear; }
  .foot-col a:hover { color: var(--fg); }
  .legal {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-soft);
    font-size: 0.75rem;
    line-height: 1.85;
    color: var(--fg-4);
    max-width: 72ch;
  }
}

/* ---------------------------------------------------------------- motion -- */
@layer motion {
  /* scroll-reveal: JS adds [data-seen]; stagger via --i */
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--d-4) var(--ease) calc(var(--i, 0) * 70ms),
      transform var(--d-4) var(--ease) calc(var(--i, 0) * 70ms);
  }
  [data-reveal][data-seen] { opacity: 1; transform: none; }

  /* hero lines rise behind a mask, Apple-style */
  /* headroom so Thai tone marks and descenders are never clipped by the mask */
  .rise {
    display: block;
    overflow: hidden;
    padding-block: 0.22em 0.16em;
    margin-block: -0.11em -0.08em;
  }
  .rise > span {
    display: block;
    transform: translateY(105%);
    animation: rise 900ms var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 95ms + 120ms);
  }
  @keyframes rise { to { transform: none; } }

  .fade-in { animation: fade 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 95ms + 380ms); }
  @keyframes fade { from { opacity: 0; transform: translateY(10px); } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .rise > span { transform: none; }
  }
}

/* ------------------------------------------------------------- utilities -- */
@layer utilities {
  .center { text-align: center; margin-inline: auto; }
  .mt-2 { margin-top: var(--s-2); }
  .mt-4 { margin-top: var(--s-4); }
  .mt-5 { margin-top: var(--s-5); }
  .mt-6 { margin-top: var(--s-6); }
  .mt-7 { margin-top: var(--s-7); }
  .mt-8 { margin-top: var(--s-8); }
  .sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .z1 { position: relative; z-index: 1; }
  .brass { color: var(--brass); }
  .iris-fg { color: var(--iris); }
  .tint-brass { --tint: var(--brass); }
  .tint-iris { --tint: var(--iris); }
  .tint-mint { --tint: var(--mint); }
  .underline-brass {
    background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 3px no-repeat;
    padding-bottom: 0.08em;
  }
}

/* --------------------------------------------------- page: sales page -- */
@layer components {
  /* sticky buy bar — appears once the hero offer scrolls past */
  .buybar {
    position: fixed;
    inset: auto 0 0;
    z-index: 48;
    border-top: 1px solid var(--line);
    background: color-mix(in oklab, var(--ground) 82%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    transform: translateY(102%);
    transition: transform var(--d-3) var(--ease);
  }
  .buybar[data-show="true"] { transform: none; }
  .buybar .shell {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block: 0.7rem;
  }
  .buybar .what { min-width: 0; }
  .buybar .what b { font-size: var(--t-sm); font-weight: 600; }
  .buybar .what span { display: block; font-size: 0.75rem; color: var(--fg-3); }
  .buybar .price { margin-left: auto; }
  @media (max-width: 34rem) {
    .buybar .what span { display: none; }
    .buybar .price s { display: none; }
  }

  /* offer stack rows */
  .offer { display: flex; flex-direction: column; }
  .offer li {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-top: 1px solid var(--line-soft);
    font-size: var(--t-sm);
  }
  .offer li:last-child { border-bottom: 1px solid var(--line-soft); }
  .offer .what { flex: 1; color: var(--fg); }
  .offer .what span { display: block; color: var(--fg-3); font-size: 0.8125rem; margin-top: 0.15rem; }
  .offer .val { font-family: var(--font-mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
  .offer-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding-top: var(--s-5);
  }

  /* notion-ish module preview */
  .module {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
  }
  .module header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0.7rem var(--s-4);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .module header::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--tint, var(--brass));
  }
  .module .body { padding: var(--s-4); display: flex; flex-direction: column; gap: 0.55rem; }
  .skel { height: 7px; border-radius: 4px; background: var(--line); }
  .skel.w-90 { width: 90%; } .skel.w-70 { width: 70%; }
  .skel.w-55 { width: 55%; } .skel.w-40 { width: 40%; }
  .skel.tint { background: color-mix(in oklab, var(--tint, var(--brass)) 42%, var(--line)); }

  /* quote */
  .quote { font-size: 1.0625rem; line-height: 1.85; color: var(--fg); }
  .quote + .who { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--fg-3); }
}

@layer utilities {
  @media (max-width: 30rem) { .hide-xs { display: none; } }
  .maxw-sm { max-width: 34rem; }
  .maxw-md { max-width: 46rem; }
  .sticky-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  @media (max-width: 60rem) { .sticky-side { position: static; } }
}

/* ------------------------------------------------------ small screens -- */
@layer components {
  @media (max-width: 34rem) {
    .ledger th, .ledger td { padding-inline: 0.6rem; font-size: 0.8125rem; }
    .ledger .brkr { font-size: 0.625rem; }
    .rule-chip { font-size: 0.5625rem; padding-inline: 0.3rem; }
    .terminal-bar .label { display: none; }
    .capture { flex-direction: column; border-radius: var(--r-lg); }
    .capture input { padding: 0.55rem var(--s-3); }
    .capture .btn { justify-content: center; }
    .offer li { flex-direction: column; gap: var(--s-2); }
    .offer .val { color: var(--fg-2); }
  }
}

/* ------------------------------------------- email capture status line -- */
@layer components {
  #form-status { color: var(--fg-3); min-height: 1.25rem; }
  #form-status[data-state="ok"] { color: var(--mint); }
  #form-status[data-state="err"] { color: var(--rose); }
}

/* ------------------------------------------- long-form legal documents -- */
@layer components {
  /* These pages carry the original wording with its Tailwind classes stripped,
     so everything here is styled by tag. */
  .prose {
    max-width: 44rem;
    font-size: var(--t-body);
    line-height: var(--lh-thai);
    color: var(--fg-2);
  }
  .prose > a:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: var(--s-6);
    border-bottom: 0;
  }
  .prose > a:first-child:hover { color: var(--brass); }

  .prose h1 {
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.2;
    letter-spacing: var(--tr-tight);
    color: var(--fg);
  }
  /* the "ปรับปรุงล่าสุด / สถานะร่าง" line that follows every <h1> */
  .prose h1 + p {
    margin-top: var(--s-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
    color: var(--fg-3);
  }

  .prose section { margin-top: var(--s-7); }
  .prose h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fg);
    margin-bottom: var(--s-3);
    letter-spacing: -0.01em;
  }
  .prose h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--fg);
    margin-top: var(--s-5);
    margin-bottom: var(--s-2);
  }
  .prose p + p { margin-top: var(--s-4); }
  .prose strong { color: var(--fg); font-weight: 600; }

  .prose ul, .prose ol { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
  .prose li { display: flex; gap: var(--s-4); }
  .prose li::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-top: 0.78rem;
    background: var(--brass);
  }
  .prose ol { counter-reset: n; }
  .prose ol li::before {
    counter-increment: n;
    content: counter(n) ".";
    width: auto;
    height: auto;
    margin-top: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--brass);
  }

  .prose table { width: 100%; border-collapse: collapse; margin-top: var(--s-5); font-size: var(--t-sm); }
  .prose th, .prose td { text-align: left; padding: 0.7rem var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  .prose th { color: var(--fg); font-weight: 600; border-bottom-color: var(--line); }

  .prose a, .link {
    color: var(--fg);
    border-bottom: 1px solid color-mix(in oklab, var(--brass) 55%, transparent);
    padding-bottom: 1px;
    transition: border-color var(--d-1) linear, color var(--d-1) linear;
  }
  .prose a:hover, .link:hover { color: var(--brass); border-bottom-color: var(--brass); }
}