/* Stardust, variant b: the page. The Stardust visual style, read from the Etiuda deck: the near-black ground,
   one violet, the lavender gradient on a heading's second half, Segoe UI Variable Display drawn tight, and mono
   kickers led by a point of light. No inline style anywhere; nothing loaded from another site. */

:root {
  --ground: #0b0a10; --ground-2: #110f19; --panel: #15131f;
  --ink: #eeedf4; --dim: #aaa6bd; --faint: #77728b;
  --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .18);
  --vio: #7c3aed; --vio-hi: #b69cff; --vio-2: #a78bfa; --vio-glow: rgba(124, 58, 237, .34);
  --ph: #fbbf24;
  --grad: linear-gradient(92deg, #c9b8ff 0%, #a78bfa 55%, #8b5cf6 100%);
  --bloom: radial-gradient(60% 70% at 68% 30%, rgba(124, 58, 237, .30), rgba(124, 58, 237, 0) 70%);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --pad: clamp(22px, 5.2vw, 104px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f6f5fb; --ground-2: #efedf7; --panel: #ffffff;
    --ink: #15121f; --dim: #565170; --faint: #8a85a0;
    --line: rgba(21, 18, 31, .10); --line-2: rgba(21, 18, 31, .18);
    --vio: #6d28d9; --vio-hi: #6d28d9; --vio-2: #7c3aed; --vio-glow: rgba(124, 58, 237, .18);
    --ph: #a16207;
    --grad: linear-gradient(92deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%);
    --bloom: radial-gradient(60% 70% at 68% 30%, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 70%);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* placeholders: what is not yet decided, visible as such */
.ph { font: 600 .82em/1.2 var(--mono); color: var(--ph); border: 1px dashed currentColor; border-radius: 6px;
      padding: .08em .4em; white-space: nowrap; letter-spacing: 0; }
.ph.big { font-size: .5em; padding: .15em .5em; white-space: normal; }

.kicker { font: 600 13px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--vio-hi);
          display: flex; align-items: center; gap: 12px; }
.pt { width: 7px; height: 7px; border-radius: 50%; background: var(--vio-hi); box-shadow: 0 0 12px 2px var(--vio-glow); }

/* the masthead: over the sky, not sticky */
.mast { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
        padding: 22px var(--pad); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 23px/1 var(--display); letter-spacing: -.02em; }
.brand img { display: block; width: 34px; height: 34px; }
.mast nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); font-size: 15px; }
.mast nav a { text-decoration: none; color: var(--dim); }
.mast nav a:hover { color: var(--ink); }
.mast nav a.cta { color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 18px; }
.mast nav a.cta:hover { border-color: var(--vio-2); }

/* the hero: the whole first screen is sky */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--bloom), var(--ground);
        display: flex; align-items: flex-end; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.js .sky { display: block; }
.still { position: absolute; right: 9vw; top: 8vh; width: min(64vh, 46vw); }
.still img { display: block; width: 100%; height: auto; }
.js .still { display: none; }
.hero-text { position: relative; z-index: 2; padding: 0 var(--pad) clamp(48px, 11vh, 120px); max-width: 1100px; }
.hero h1 { font-size: clamp(76px, 12.5vw, 212px); line-height: .92; letter-spacing: -.045em; margin: 22px 0 22px -.04em; }
.tag { font: 600 clamp(22px, 2.3vw, 38px)/1.2 var(--display); letter-spacing: -.02em; max-width: 24em; }
.meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 14px; color: var(--faint); font-size: 16px; }
.meta a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.meta a:hover { color: var(--ink); border-color: var(--vio-2); }

/* the bands */
.band { padding: clamp(72px, 12vh, 140px) var(--pad); border-top: 1px solid var(--line); }
.band-head { display: grid; gap: 22px; max-width: 1180px; margin-bottom: clamp(40px, 7vh, 72px); }
.band h2 { font-size: clamp(36px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -.035em; }
.lede { color: var(--dim); font-size: clamp(18px, 1.4vw, 21px); max-width: 40em; }

.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid var(--line-2); }
.products li { padding: 34px clamp(18px, 2.4vw, 44px) 40px 0; display: flex; flex-direction: column; gap: 14px; }
.products li + li { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.4vw, 44px); }
.no { font: 600 13px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }
.products h3 { font-size: clamp(30px, 2.8vw, 46px); letter-spacing: -.03em; line-height: 1.05; }
.products li > p:not(.no):not(.foot) { color: var(--dim); max-width: 30em; }
.foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 16px; }
.foot a { color: var(--vio-hi); text-underline-offset: 4px; }
.soon { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vio-hi);
        border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; }

.how { background: var(--ground-2); }
.how-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.para { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; color: var(--dim); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; padding: 22px 0;
            border-top: 1px solid var(--line-2); }
.steps li:last-child { border-bottom: 1px solid var(--line-2); }
.steps .no { grid-row: span 2; padding-top: 8px; color: var(--vio-hi); }
.steps h3 { font-size: 24px; letter-spacing: -.02em; }
.steps li > p:last-child { color: var(--dim); }

.writing .empty { color: var(--dim); font-size: clamp(18px, 1.4vw, 21px); max-width: 40em; padding: 28px 0;
                  border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); }

.contact { display: grid; gap: 22px; background: var(--bloom), var(--ground); }
.contact h2 { font-size: clamp(44px, 7vw, 120px); letter-spacing: -.04em; }

.foot-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px 36px; align-items: center;
            padding: 30px var(--pad) 84px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; }
.sig { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 17px/1 var(--display); letter-spacing: -.02em; }
.sig img { display: block; }
.foot-bar .ph { justify-self: start; white-space: normal; }

.draft { position: fixed; right: 16px; bottom: 16px; z-index: 9; margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em;
         text-transform: uppercase; color: var(--vio-hi); background: color-mix(in srgb, var(--ground) 86%, transparent);
         border: 1px dashed var(--vio-2); border-radius: 999px; padding: 9px 14px; }
.clean .draft { display: none; }

:focus-visible { outline: 2px solid var(--vio-2); outline-offset: 3px; border-radius: 4px; }

/* narrower screens */
@media (max-width: 1000px) {
  .how-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .mast nav a:not(.cta) { display: none; }
  .products { grid-template-columns: minmax(0, 1fr); }
  .products li, .products li + li { border-left: 0; padding-left: 0; padding-right: 0; }
  .products li + li { border-top: 1px solid var(--line); }
  .foot-bar { grid-template-columns: minmax(0, 1fr); }
  .still { right: 50%; transform: translateX(50%); top: 12vh; width: min(88vw, 44vh); }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .mast { padding-top: 16px; }
  .brand { font-size: 20px; }
  .brand img { width: 30px; height: 30px; }
  .mast nav .ph { display: none; }
  .draft { left: 12px; right: auto; bottom: 12px; font-size: 10px; }
}

/* b3c: the preview toggle below rings a few points in gold; the page itself carries one mark. */

/* the preview's chrome: the draft strip and the heart toggle, fixed bottom right, hidden under ?clean */
.preview { position: fixed; right: 16px; bottom: 16px; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.preview .draft { position: static; }
.clean .preview { display: none; }
.heart-toggle { display: none; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border: 1px dashed var(--vio-2); border-radius: 999px;
                background: color-mix(in srgb, var(--ground) 86%, transparent); font: 600 11px/1 var(--mono); letter-spacing: .12em;
                text-transform: uppercase; color: var(--vio-hi); }
.js .heart-toggle { display: flex; }
.heart-toggle .lbl { margin-right: 6px; }
.heart-toggle button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim); background: none; border: 0;
                       border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.heart-toggle button:hover { color: var(--ink); }
.heart-toggle button[aria-pressed="true"] { color: var(--ground); background: var(--vio-hi); }
.heart-toggle button:focus-visible { outline: 2px solid var(--vio-hi); outline-offset: 2px; }
@media (max-width: 480px) {
  .preview { left: 12px; right: 12px; bottom: 12px; align-items: flex-start; }
  .preview .draft { white-space: nowrap; font-size: 9px; letter-spacing: .1em; }
  /* on a phone the toggle sits up in the sky, under the masthead, clear of the hero's text */
  .heart-toggle { position: fixed; top: 74px; right: 12px; font-size: 10px; }
}

/* No stub last lines (Maxim 2026-10-01 23:21: "lines shouldn't break into orphans when at large screen"): the product
   descriptions and the headings set their lines evenly. Claude beta, 23:33. */
.products li > p:not(.no):not(.foot), .band-head h2, .tag { text-wrap: balance; }

/* The line under the name breaks only between its phrases (Claude beta, 2026-10-02). */
.tag .nw { white-space: nowrap; }