/* ============================================================================
   STITCHIST — public site design system
   ----------------------------------------------------------------------------
   The idea: a pattern sheet, not a SaaS template.

   Embroidery is a craft with its own printed language — spec sheets, thread
   charts, hoop marks, running-stitch rules, millimetre callouts. This system
   borrows that language wholesale:

     · TWO TONES. Every section declares data-tone="ink" (warm near-black,
       the studio at night) or data-tone="paper" (linen, where the stitch-outs
       live). Each tone rebinds --bg/--fg/--line/--accent, and every component
       below is written against those four names only. Nothing is hard-coded,
       so a section changes character by changing one attribute.
     · TWO VOICES. Plus Jakarta Sans set very large, very tight (-0.045em) for
       display; a system monospace, uppercase and wide-tracked, for anything
       technical — section numbers, formats, stitch counts, captions.
     · STITCH MOTIFS. Rules are running stitches (dashed gradients), the hero
       art sits in a hoop, the content column carries a selvedge margin, and
       the section numbers are sewn rather than typeset.

   Layout is deliberately asymmetric and left-aligned: centred-everything is
   the thing that made the old page read as generated.
   ============================================================================ */

/* ------------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* raw ramps ------------------------------------------------------------- */
  --ink-900: #0B0A0D;          /* page, night */
  --ink-800: #121016;
  --ink-700: #191720;
  --ink-600: #232030;
  --lin-50:  #FBF8F2;          /* linen, day */
  --lin-100: #F2ECE0;
  --lin-200: #E6DECD;
  --slate-900: #16141F;
  /* the engine renders its stitch previews onto this grey — matching it means
     letterboxed artwork has no visible seam whatever the plate's aspect */
  /* exactly the ground the engine's preview renderer paints behind a
     stitch-out (export/preview.py _BG), so a render dropped on a plate has
     no visible edge */
  --render-bg: #F4F4F6;

  /* thread box — real spool colours, used as accents and chart dots -------- */
  --t-crimson: #E0483C;
  --t-clay:    #D9743A;
  --t-gold:    #E3B53F;
  --t-jade:    #2AA88F;
  --t-indigo:  #5A48F5;        /* the studio's accent, evolved */
  --t-plum:    #9B5CE0;

  /* type ------------------------------------------------------------------ */
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* metrics --------------------------------------------------------------- */
  --wrap: 1220px;
  --gutter: 28px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .16s;
  --t-mid: .28s;
}

/* --------------------------------------------------------------- the tones */
/* Everything below reads --bg / --fg / --fg-2 / --fg-3 / --line / --accent.
   Set the tone on a section and the whole subtree re-skins itself. */
[data-tone="ink"] {
  color-scheme: dark;
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --fg: var(--lin-50);
  --fg-2: rgba(251, 248, 242, .68);
  --fg-3: rgba(251, 248, 242, .44);
  --line: rgba(251, 248, 242, .13);
  --line-2: rgba(251, 248, 242, .26);
  --accent: #9384FF;
  --accent-ink: #0B0A0D;
  --btn-bg: var(--lin-50);
  --btn-fg: var(--ink-900);
  --shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
[data-tone="paper"] {
  color-scheme: light;
  --bg: var(--lin-100);
  --surface: #FBF8F2;
  --surface-2: #FFFFFF;
  --fg: var(--slate-900);
  --fg-2: rgba(22, 20, 31, .70);
  --fg-3: rgba(22, 20, 31, .46);
  --line: rgba(22, 20, 31, .15);
  --line-2: rgba(22, 20, 31, .30);
  --accent: #4A34E8;
  --accent-ink: #FFFFFF;
  --btn-bg: var(--slate-900);
  --btn-fg: var(--lin-50);
  --shadow: 0 24px 60px rgba(22, 20, 31, .13);
}

/* --------------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: #33303c; border: 3px solid var(--ink-900); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #4a4657; }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* several components below set display on elements the chrome also toggles with
   [hidden] (the signed-in/out swap) — hidden has to win */
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }

/* Sections own their tone and their own background paint. */
.band { background: var(--bg); color: var(--fg); position: relative; }
.band--pad { padding: clamp(72px, 9vw, 132px) 0; }
.band--pad-sm { padding: clamp(52px, 6vw, 84px) 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 18px; background: var(--lin-50); color: var(--ink-900); font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------- typographic voices */
.display {
  font-size: clamp(44px, 8.2vw, 108px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .93;
}
.display em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
/* The accent word is underscored with a running stitch, not a gradient. It sits
   just inside the inline box so it reads as an underline on its own word rather
   than a rule floating in the leading — the display line-height is under 1. */
.display em::after {
  content: "";
  position: absolute; left: .02em; right: .02em; bottom: .19em;
  height: .045em;
  background: repeating-linear-gradient(90deg, var(--accent) 0 .13em, transparent .13em .23em);
}

h2.head {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 750;
  letter-spacing: -.037em;
  line-height: 1.02;
}
h3 { font-size: 20px; letter-spacing: -.022em; }

.lede {
  font-size: clamp(16.5px, 1.35vw, 19px);
  color: var(--fg-2);
  max-width: 52ch;
  line-height: 1.6;
}

/* the technical voice */
.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.dim { color: var(--fg-3); }

/* ------------------------------------------------------------ stitch motifs */
/* A running stitch: dash, gap, dash. Used everywhere a rule is needed. */
.stitch {
  height: 2px; width: 100%; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 9px, transparent 9px 17px);
}
.stitch--v {
  width: 2px; height: 100%;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 9px, transparent 9px 17px);
}
.stitch--accent { background: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 17px); }

/* thread chart dots */
.spools { display: flex; align-items: center; gap: 6px; }
.spool {
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28);
  flex: none;
}

/* ---------------------------------------------------------------- section head */
/* Numbered like a pattern sheet: the number sits in the margin, the headline
   and its deck share a two-column measure. */
.sechead { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.sechead__no {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); padding-top: 10px;
}
.sechead__main { display: grid; gap: 18px; }
.sechead__label { color: var(--fg-3); }
/* headline left, deck bottom-right — an explicit two-track grid, so it can't
   silently wrap to a stack the way an auto-sized flex row does */
.sechead__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
                gap: 26px 56px; align-items: end; }
.sechead__deck { color: var(--fg-2); font-size: 16px; padding-bottom: .35em; }
.sechead .stitch { margin-top: 6px; }

/* --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(11, 10, 13, .72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: background var(--t-mid) ease, border-color var(--t-mid) ease;
}
.nav[data-tone="paper"] { background: rgba(242, 236, 224, .78); }
.nav.is-stuck { background: rgba(11, 10, 13, .94); }
.nav.is-stuck[data-tone="paper"] { background: rgba(242, 236, 224, .96); }

.nav__inner {
  display: flex; align-items: center; gap: 14px;
  height: 66px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.035em; font-size: 18.5px; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-ink);
  transition: transform var(--t-fast) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-8deg); }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 30px; }
.nav__links a {
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 550; color: var(--fg-2);
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav__links a:hover { color: var(--fg); background: var(--surface-2); }
.nav__links a[aria-current="page"] { color: var(--fg); }

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

.nav__burger {
  display: none; width: 38px; height: 38px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  place-items: center;
}
.nav__burger i { display: block; width: 15px; height: 1.5px; background: var(--fg); position: relative; }
.nav__burger i::before, .nav__burger i::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--fg);
  transition: transform var(--t-fast) var(--ease);
}
.nav__burger i::before { top: -5px; }
.nav__burger i::after { top: 5px; }
.nav__burger[aria-expanded="true"] i { background: transparent; }
.nav__burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }

.nav__drawer {
  display: none; border-top: 1px solid var(--line);
  padding: 12px var(--gutter) 22px;
  background: var(--bg);
}
.nav__drawer.is-open { display: block; }
.nav__drawer a {
  display: block; padding: 13px 2px; font-size: 17px; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.nav__drawer .btn { width: 100%; margin-top: 16px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn--solid:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn--line { border-color: var(--line-2); color: var(--fg); background: transparent; }
.btn--line:hover { border-color: var(--fg); background: var(--surface-2); }
.btn--quiet { color: var(--fg-2); padding: 0 12px; }
.btn--quiet:hover { color: var(--fg); }
.btn--sm { height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--full { width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn .arw { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* text link with a stitch underline that sews itself on hover */
.tlink { position: relative; font-weight: 600; color: var(--fg); }
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 13px);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------------- badges */
.tagline {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fg-2);
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--t-jade); flex: none;
  box-shadow: 0 0 0 0 rgba(42, 168, 143, .55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(42, 168, 143, .5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(42, 168, 143, 0); }
}

.pro-tag {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 6px 2px;
  color: var(--t-gold); border: 1px solid rgba(227, 181, 63, .5); border-radius: 3px;
  line-height: 1;
}

/* ---------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 104px) 0 0; }
/* a faint blueprint grid, cropped hard to the left column — structure, not glow */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(251, 248, 242, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 248, 242, .04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(105deg, #000 0 26%, transparent 62%);
          mask-image: linear-gradient(105deg, #000 0 26%, transparent 62%);
}
/* Headline left, support column right, both sitting on the same baseline —
   then the product runs full width beneath them. */
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 68px); align-items: end;
}
.hero__lede { display: grid; gap: 24px; justify-items: start; }
.hero__support { display: grid; gap: 22px; justify-items: start; padding-bottom: 6px; }
.hero .display { max-width: 11ch; }
/* Each headline line shares one rhythm; inline gradient padding must not
   enlarge only the middle line or leave a lone final word on small screens. */
.hero .hero__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .055em;
  max-width: none;
  line-height: 1;
  letter-spacing: -.04em;
}
.hero__headline > span { display: block; white-space: nowrap; }

.hero .fine { font-size: 13px; color: var(--fg-3); }

/* proof strip — true counts under the hero CTA, set as a single quiet row */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.proof__item {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--fg-3); display: flex; align-items: baseline; gap: 6px;
}
.proof__item + .proof__item { padding-left: 22px; border-left: 1px solid var(--line); }
.proof__item b {
  font-family: var(--sans, inherit); font-size: 15px; font-weight: 720;
  letter-spacing: -.02em; color: var(--fg);
}
@media (max-width: 640px) {
  /* the dividers stop reading once the row wraps to three lines */
  .proof__item + .proof__item { padding-left: 0; border-left: 0; }
}

/* spec strip — the hero's technical footnote, set like a data sheet */
.spec {
  display: grid; grid-template-columns: 1.35fr 1fr 1.1fr;
  width: 100%; max-width: 720px; margin: 0;
  border-top: 1px solid var(--line);
}
.spec > div { padding: 16px 20px 0 0; }
.spec dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
           text-transform: uppercase; color: var(--fg-3); }
.spec dd { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }

/* the rig: the editor, and the thing it made ----------------------------- */
/* The screenshot runs the full column width in a window frame; a real hoop
   with a finished stitch-out overlaps its corner. Editor and output in one
   picture, which is the whole product argument. */
.rig { position: relative; margin: clamp(46px, 5vw, 78px) 0 clamp(48px, 5vw, 70px); }
.screen {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: var(--shadow);
}
.screen__bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.screen__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: none; }
.screen__bar span { margin-left: 14px; color: var(--fg-3); }
/* height:auto is load-bearing: the width/height attributes give the box an
   aspect-ratio before the file arrives, and if they ever drift from the real
   image the box wins and the screenshot is stretched inside it. auto makes the
   file's own proportions final, so a wrong attribute costs a layout shift
   rather than a distorted product shot. */
.screen img { width: 100%; height: auto; }

/* the hoop --------------------------------------------------------------- */
/* Outer ring, inner ring, tension screw at the top; the artwork is clipped
   by the inner ring and a needle path sews itself across it. */
.hoop { position: relative; margin: 0; aspect-ratio: 1; width: 100%; max-width: 560px; }
.hoop--float {
  position: absolute; left: -30px; bottom: -44px; z-index: 2;
  width: clamp(148px, 17vw, 232px);
}
.hoop__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 10px solid var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .5);
}
.hoop__ring::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid var(--line-2);
}
.hoop__screw {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 30px; border-radius: 7px 7px 3px 3px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  display: grid; place-items: center;
}
.hoop__screw i { width: 22px; height: 2px; background: var(--line-2); box-shadow: 0 5px 0 var(--line-2); }
.hoop__cloth {
  position: absolute; inset: 10px; border-radius: 50%; overflow: hidden;
  background: var(--lin-50);
  display: grid; place-items: center;
}
.hoop__cloth img { width: 100%; height: 100%; object-fit: cover; }
.hoop--phoenix .hoop__cloth { background: #090f18; }
/* Keep the wing tips inside the circular opening, including at mobile sizes. */
.hoop--phoenix .hoop__cloth img { width: 82%; height: 82%; object-fit: contain; }
/* The needle path that sews itself across the artwork. The visible line is
   permanently dashed (stitches); a solid path inside a mask uncovers it
   progressively, so the stitches appear one after another instead of the
   whole dash pattern sliding. The group fades before it loops, so the reset
   never snaps in view. */
.hoop__path {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  animation: hoopcycle 7s linear infinite;
}
.hoop__path .thread {
  fill: none; stroke: var(--t-crimson); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 6 5;
}
.hoop__path .reveal-path {
  fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: sew 7s var(--ease) infinite;
}
@keyframes sew { 0% { stroke-dashoffset: 100; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes hoopcycle { 0%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

.hoop--float .hoop__ring { border-width: 7px; }
.hoop--float .hoop__ring::after { inset: -7px; }
.hoop--float .hoop__cloth { inset: 7px; }
.hoop--float .hoop__screw { top: -17px; width: 34px; height: 20px; }
.hoop--float .hoop__screw i { width: 14px; box-shadow: 0 4px 0 var(--line-2); }

.hero__chart { display: flex; align-items: center; gap: 12px; color: var(--fg-3); }

/* ticker ------------------------------------------------------------------ */
.ticker {
  position: relative; margin-top: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: roll 42s linear infinite; }
.ticker__track > span {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 26px; color: var(--fg-3); white-space: nowrap;
}
.ticker__track > span::after { content: "✕"; font-size: 8px; opacity: .5; }
@keyframes roll { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- capability index */
/* Sixteen features as a two-column index, not sixteen identical cards. Rows
   are hairline-separated and the number sits in the gutter — a contents page. */
.index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 54px; }
.index__row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 16px;
  padding: 20px 0 22px; border-top: 1px solid var(--line);
  transition: border-color var(--t-fast) ease;
}
.index__row:hover { border-top-color: var(--accent); }
.index__no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--fg-3); padding-top: 4px; }
.index__row:hover .index__no { color: var(--accent); }
.index h4 { font-size: 16.5px; font-weight: 680; letter-spacing: -.018em; }
.index p { margin-top: 6px; font-size: 14.5px; color: var(--fg-2); }

/* ------------------------------------------------------------------ process */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 54px; }
.step { padding: 34px 34px 40px 0; position: relative; }
.step + .step { padding-left: 34px; border-left: 1px solid var(--line); }
.step__no {
  font-family: var(--mono); font-size: 44px; font-weight: 400; letter-spacing: -.02em;
  color: var(--fg-3); line-height: 1; margin-bottom: 22px;
}
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p { color: var(--fg-2); font-size: 15px; }
.step__seam { margin: 26px 0 0; }

/* ---------------------------------------------------------------- showcase */
.pieces { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 54px; }
.piece {
  grid-column: span 6; margin: 0;
  display: flex; flex-direction: column;
}
.piece__plate {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--render-bg); border: 1px solid var(--line);
  aspect-ratio: 1;
}
.piece__plate img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.piece:hover .piece__plate img { transform: scale(1.04); }
/* caption is always visible — a stitch-out deserves a label, not a hover state */
.piece__cap { display: flex; align-items: center; gap: 10px; padding: 13px 2px 0; }
.piece__cap b { font-size: 14px; font-weight: 650; letter-spacing: -.015em; }
.piece__cap .spools { margin-left: auto; }
.piece__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); padding: 3px 2px 0; }

/* ---------------------------------------------------------- satin lettering */
#satin-text { scroll-margin-top: 100px; }
.text-showcase { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 52px; align-items: start; }
.text-specimens { display: grid; gap: 16px; min-width: 0; }
.text-specimen { margin: 0; background: var(--render-bg); color: var(--slate-900); border-radius: var(--r); overflow: hidden; }
.text-specimen img { display: block; width: 100%; height: 168px; object-fit: contain; padding: 20px; }
.text-specimen--name img { height: 190px; }
.text-specimen figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 12px 20px; border-top: 1px solid rgba(22,20,31,.12); font-size: 12px; }
.text-specimen figcaption span { color: #615e6b; }
.text-specimens__note { font-family: var(--mono); color: var(--fg-2); font-size: 10px; letter-spacing: .06em; }
.text-showcase__copy > .mono { color: var(--accent); font-size: 11px; letter-spacing: .12em; }
.text-showcase__copy h3 { margin: 18px 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.04em; }
.text-showcase__copy > p:not(.mono) { color: var(--fg-2); }
.text-showcase__list { list-style: none; padding: 0; margin: 24px 0 28px; color: var(--fg-2); font-size: 14px; }
.text-showcase__list li { padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line); position: relative; }
.text-showcase__list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.text-showcase__hint { font-size: 12px; margin-top: 12px; }
.text-upload { margin-top: 32px; padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.text-upload h4 { font-size: 21px; letter-spacing: -.02em; margin: 14px 0 8px; }
.text-upload p { color: var(--fg-2); font-size: 14px; }
.text-upload a { display: inline-block; margin-top: 18px; color: var(--accent); font-weight: 650; font-size: 13px; }
@media (max-width: 860px) {
  .text-showcase { grid-template-columns: 1fr; }
  .text-showcase__copy { max-width: 600px; }
}
@media (max-width: 480px) {
  .text-specimen img, .text-specimen--name img { height: 140px; padding: 12px; }
  .text-specimen figcaption { padding: 12px; }
}

/* ------------------------------------------------------------------ pricing */
/* One bordered artifact split by hairlines, not two floating cards. */
.plans {
  margin-top: 54px;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--surface);
}
.plan { padding: 38px 38px 40px; display: flex; flex-direction: column; position: relative; }
/* the masthead's Get Pro button links to #pro; 66px of sticky nav plus air */
.plan[id] { scroll-margin-top: 92px; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan--pro { background: var(--surface-2); }
.plan__flag {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 17px);
}
.plan__name { display: flex; align-items: baseline; gap: 12px; }
.plan__name h3 { font-size: 22px; }
.plan__badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 8px 3px; border-radius: 3px;
  background: var(--accent); color: var(--accent-ink);
}
.plan__tag { margin-top: 6px; color: var(--fg-3); font-size: 14px; }
.plan__price { margin: 26px 0 4px; font-size: clamp(42px, 5vw, 60px); font-weight: 780; letter-spacing: -.045em; line-height: 1; }
.plan__price small { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--fg-3); }
.plan__sub { min-height: 22px; font-size: 13px; color: var(--fg-3); }
.plan ul { margin: 26px 0 32px; display: grid; gap: 11px; }
/* The bullet is an absolutely positioned pseudo-element rather than a flex or
   grid track: a flex/grid li turns every inline child into its own item, which
   tears sentences like "<b>Auto-digitize</b> & <b>Redwork</b> wizards" into
   three stacked rows. */
.plan li { position: relative; padding-left: 19px; font-size: 14.5px; color: var(--fg-2); }
.plan li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--t-jade);
}
.plan li.no { color: var(--fg-3); }
.plan li.no::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.plan li b { color: var(--fg); font-weight: 680; }
.plan .btn { margin-top: auto; }
/* the "see everything in Pro" link under the landing page's buy button */
.plan__more { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.plan__more:hover { color: var(--fg); text-decoration-color: var(--accent); }
.plan__note { margin-top: 12px; font-size: 12.5px; color: var(--fg-3); text-align: center; min-height: 18px; }
/* The price comparison and the refund promise, at the decision rather than seven
   collapsed FAQ entries below it. */
.plan__anchor { margin-top: 10px; font-size: 12.5px; color: var(--fg-3); text-align: center; }
.plan__guarantee {
  margin-top: 10px; font-size: 13px; font-weight: 640; color: var(--fg-2); text-align: center;
}
/* the address capture that stands in for the CTA while checkout is unconfigured */
.notify { margin-top: auto; }
.notify__lede { font-size: 13.5px; color: var(--fg-2); }
.notify__row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: stretch; }
.notify__row input {
  flex: 1 1 190px; min-width: 0; padding: 12px 14px; border-radius: var(--r-sm, 8px);
  font-family: inherit; font-size: 14.5px; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-2);
}
.notify__row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the plan card pushes its CTA to the bottom with margin-top:auto; the button
   inside this form must not inherit that or it drops away from its field */
.plan .notify .btn { margin-top: 0; }
.notify__msg { margin-top: 12px; font-size: 13.5px; font-weight: 620; color: var(--t-jade); }
/* label text for a field whose placeholder carries the visible hint */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* comparison sheet -------------------------------------------------------- */
.sheet { margin-top: 54px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); }
.sheet table { width: 100%; border-collapse: collapse; min-width: 620px; }
.sheet th, .sheet td { padding: 15px 24px; text-align: left; font-size: 14.5px; }
.sheet thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface);
}
.sheet tbody tr + tr { border-top: 1px solid var(--line); }
.sheet tbody tr:hover { background: var(--surface-2); }
.sheet td:first-child { color: var(--fg-2); }
.sheet td:not(:first-child), .sheet th:not(:first-child) { text-align: center; width: 21%; }
.sheet td.y { color: var(--fg); font-weight: 650; }
.sheet td.n { color: var(--fg-3); }
.sheet .tick { color: var(--t-jade); font-weight: 800; }

/* --------------------------------------------------------------------- faq */
.faq { margin-top: 46px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 17px; font-weight: 630; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  margin-top: -7px;
  background:
    linear-gradient(var(--fg-2) 0 0) center/13px 1.5px no-repeat,
    linear-gradient(var(--fg-2) 0 0) center/1.5px 13px no-repeat;
  transition: transform var(--t-mid) var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details[open] summary { color: var(--fg); }
.faq__a { padding: 0 15% 26px 0; color: var(--fg-2); font-size: 15.5px; }

/* --------------------------------------------------------------------- about */
/* A long read, so it is set as a proper prose column: one measure, generous
   leading, and headings that step down clearly. The same section furniture as
   the converter page (label, rule, heading) so the two long pages match. */
.ab-top { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.ab-h1 {
  margin: 15px 0 18px; max-width: 18ch;
  font-size: clamp(38px, 6vw, 62px); font-weight: 720;
  letter-spacing: -.045em; line-height: 1.03;
}
.ab-lede { max-width: 62ch; }
.ab-top .btnrow { margin-top: 30px; }
.ab-seclabel { color: var(--fg-3); margin-top: 14px; font-size: 10.5px;
               letter-spacing: .16em; text-transform: uppercase; }
.ab-h2 {
  margin: 10px 0 24px; max-width: 24ch;
  font-size: clamp(25px, 3.2vw, 35px); font-weight: 680;
  letter-spacing: -.03em; line-height: 1.14;
}
.ab-prose > p { max-width: 68ch; color: var(--fg-2); font-size: 16.5px; line-height: 1.72; }
.ab-prose > p + p { margin-top: 18px; }
.ab-prose b { color: var(--fg); font-weight: 640; }
.ab-prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
              text-decoration-color: var(--line-2); }
.ab-prose a:hover { text-decoration-color: var(--accent); }
.ab-prose h3 {
  margin: 40px 0 12px; font-size: 19px; font-weight: 680; letter-spacing: -.024em;
  color: var(--fg);
}
.ab-prose h3:first-of-type { margin-top: 28px; }
.ab-prose .faq { margin-top: 20px; }
/* the format/machine table — a grid of pairs, same visual language as .cv-fmts */
.ab-fmts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin: 30px 0;
}
.ab-fmts > div { background: var(--bg); padding: 15px 17px; display: grid; gap: 3px; }
.ab-fmts b { font-size: 14.5px; letter-spacing: -.01em; }
.ab-fmts span { font-size: 13px; color: var(--fg-3); }

/* ------------------------------------------------------------------- contact */
/* The address is the page, so it gets the weight of a hero element rather than
   being a link buried in a paragraph. */
.ct-mail {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 30px 0 18px; padding: 22px 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease,
              transform var(--t-fast) var(--ease);
}
.ct-mail:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px); }
/* Let readers select the address inside the email links to copy it. */
.ct-mail__addr, .cta a[href^="mailto:"] {
  -webkit-user-select: text;
  user-select: text;
}
.ct-mail__label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  flex: 1 0 100%;
}
.ct-mail__addr {
  font-size: clamp(19px, 2.8vw, 27px); font-weight: 700; letter-spacing: -.03em;
  word-break: break-word; min-width: 0;
}
.ct-mail__go { margin-left: auto; font-size: 22px; color: var(--fg-3); transition: transform var(--t-fast) var(--ease); }
.ct-mail:hover .ct-mail__go { transform: translateX(4px); color: var(--accent); }

.ct-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
/* Flex column rather than grid so the call to action can be pushed to the
   bottom — the cards in a row are stretched to a common height, and without
   this their links sit at whatever height their own paragraph happened to end. */
.ct-card {
  display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
}
.ct-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.ct-card h3 { font-size: 17px; font-weight: 670; letter-spacing: -.025em; }
.ct-card p { color: var(--fg-2); font-size: 14.5px; line-height: 1.62; }
.ct-card__go {
  margin-top: auto; padding-top: 6px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); transition: color var(--t-fast) ease;
}
.ct-card:hover .ct-card__go { color: var(--accent); }

/* ------------------------------------------------------------- testimonials */
/* Currently unused: the landing page carried three placeholder reviews and they
   were removed rather than reworded — a review nobody wrote is a claim about the
   product that isn't true. Kept so real customer quotes can drop straight in.
   test_no_invented_testimonials_ship fails if invented ones ever come back. */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; }
.voice { padding: 34px 34px 30px 0; }
.voice + .voice { padding-left: 34px; border-left: 1px solid var(--line); }
.voice__stars { color: var(--t-gold); font-size: 12px; letter-spacing: 3px; }
.voice blockquote { margin: 16px 0 22px; font-size: 18px; line-height: 1.5; letter-spacing: -.022em; font-weight: 500; }
.voice__who { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--fg-2); }
.voice__avi {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--accent-ink); background: var(--accent);
}
.voice__who em { font-style: normal; color: var(--fg-3); }

/* ---------------------------------------------------------------- cta band */
.cta { position: relative; overflow: hidden; text-align: left; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
/* a closing band with two answers: keep reading for free, or buy */
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .display { max-width: 13ch; }
.cta p { margin-top: 20px; color: var(--fg-2); max-width: 42ch; }

/* ------------------------------------------------------------------ footer */
.foot { padding: clamp(56px, 6vw, 84px) 0 34px; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .55fr)); gap: 40px; }
.foot__blurb { color: var(--fg-2); font-size: 14.5px; max-width: 30ch; margin-top: 16px; }
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__col b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
               text-transform: uppercase; color: var(--fg-3); }
.foot__col a { font-size: 14.5px; color: var(--fg-2); width: fit-content; }
.foot__col a:hover { color: var(--fg); }
.foot .stitch { margin: 46px 0 24px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between;
               font-size: 12.5px; color: var(--fg-3); }
.foot__legal p { max-width: 74ch; }
.foot__wordmark {
  margin-top: 40px; font-size: clamp(56px, 15vw, 190px); font-weight: 800; letter-spacing: -.06em;
  line-height: .8; color: var(--line); user-select: none; pointer-events: none;
}

/* ------------------------------------------------------------- legal / doc */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 60px; align-items: start; }
.doc__toc { position: sticky; top: 96px; display: grid; gap: 9px; }
.doc__toc b { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
              text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.doc__toc a { font-size: 13.5px; color: var(--fg-3); line-height: 1.4; }
.doc__toc a:hover { color: var(--fg); }
.doc__body { max-width: 74ch; }
.doc__body h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 780; letter-spacing: -.04em; }
.doc__updated { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
                color: var(--fg-3); margin-top: 14px; }
.doc__body h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -.025em;
  margin: 46px 0 12px; padding-top: 20px; border-top: 1px solid var(--line);
}
/* sub-headings inside a section; only h2 feeds the contents rail */
.doc__body h3 { font-size: 17px; font-weight: 680; letter-spacing: -.02em; margin: 30px 0 9px; }
.doc__body p, .doc__body li { font-size: 15.5px; color: var(--fg-2); }
.doc__body p + p { margin-top: 12px; }
.doc__body ul { list-style: disc; padding-left: 22px; margin: 12px 0; display: grid; gap: 7px; }
.doc__body a:not(.btn) { color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
                         text-decoration-color: var(--line-2); }
.doc__body a:not(.btn):hover { text-decoration-color: var(--accent); }
.doc__body b { color: var(--fg); }
/* Unfilled blanks in the legal pages. Deliberately loud: a placeholder that
   looks like body text is a placeholder that ships. tests/test_legal_pages.py
   fails if any survive, so this style should never be seen in production. */
.todo {
  display: inline; padding: 1px 7px; border-radius: 3px;
  background: rgba(227, 181, 63, .14); color: var(--t-gold);
  border: 1px dashed rgba(227, 181, 63, .55);
  font-family: var(--mono); font-size: .8em; font-weight: 600; letter-spacing: .03em;
}

.plainly {
  margin: 30px 0 8px; padding: 22px 26px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 15px; color: var(--fg-2);
}
.plainly b { color: var(--fg); }

/* ------------------------------------------------------------------- auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__form { padding: 34px var(--gutter) 60px; display: flex; flex-direction: column; }
.auth__col { width: 100%; max-width: 400px; margin: auto; padding: 40px 0; }
.auth__col h1 { font-size: 32px; font-weight: 780; letter-spacing: -.035em; }
.auth__col > .mono { color: var(--fg-3); margin-top: 12px; display: block; }

/* the aside: a hoop-lit panel with a rotating proof point */
.auth__aside {
  position: relative; overflow: hidden; padding: 52px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-left: 1px solid var(--line);
}
.auth__aside::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(251, 248, 242, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 248, 242, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 78%);
}
.auth__aside > * { position: relative; }
.auth__quote { font-size: clamp(22px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.032em; line-height: 1.18; }
.auth__aside .spec { max-width: none; }

/* sign in / create account / forgot are three forms in one column; the page
   script swaps which one carries .on */
.af { display: none; }
.af.on { display: block; animation: cardin .3s var(--ease) both; }

.field { margin-bottom: 17px; position: relative; }
.field > label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 7px; }
.field > label .why { color: var(--fg-3); font-weight: 500; cursor: help; }
.input {
  width: 100%; height: 48px; padding: 0 15px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 15px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(147, 132, 255, .22); }
.field--eye .input { padding-right: 48px; }
.eye {
  position: absolute; right: 5px; bottom: 5px; width: 38px; height: 38px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg-3);
  cursor: pointer; display: grid; place-items: center;
}
.eye:hover { background: var(--surface-2); color: var(--fg); }
.formnote { min-height: 22px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--t-crimson); }
.formnote.ok { color: var(--t-jade); }
.formrow { display: flex; justify-content: flex-end; margin: -6px 0 15px; }
.formrow button { background: none; border: 0; padding: 2px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); cursor: pointer; }
.formrow button:hover { color: var(--accent); }
.auth__legal { margin-top: 16px; font-size: 13px; color: var(--fg-3); line-height: 1.55; }
.auth__legal a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.auth__switch { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.auth__switch button { background: none; border: 0; padding: 0 3px; font-weight: 700; color: var(--accent); cursor: pointer; }
.provs { display: grid; gap: 9px; margin-bottom: 20px; }
.provs.off, .or.off { display: none; }
.prov {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: transparent; font-size: 14.5px; font-weight: 620; cursor: pointer;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.prov:hover { border-color: var(--fg); background: var(--surface-2); }
.or { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--fg-3);
      font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.waiting { display: none; align-items: center; gap: 11px; padding: 13px 15px; margin-bottom: 18px;
           border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
           font-size: 14px; color: var(--fg-2); }
.waiting.on { display: flex; }
.spin { width: 15px; height: 15px; border-radius: 50%; flex: none;
        border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* a compact centred card for /reset and /verify */
.slip {
  min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter);
}
.slip__card {
  width: 100%; max-width: 430px; padding: 40px 38px 36px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.slip__card h1 { font-size: 26px; font-weight: 740; letter-spacing: -.03em; margin: 22px 0 8px; }
.slip__card .hint { font-size: 14.5px; color: var(--fg-2); }
.slip__card form { margin-top: 22px; }
.slip__card .msg { margin-top: 14px; font-size: 14px; color: var(--fg-2); min-height: 22px; }
.slip__card .msg.err { color: var(--t-crimson); }

/* -------------------------------------------------------------- projects */
/* The account's saved work, living on the site rather than bolted inside the
   editor: same nav, same tone system, same typographic voice. */
.pv { padding: 44px 0 clamp(64px, 8vw, 110px); min-height: 72vh; }
.pv__head { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; justify-content: space-between; }
.pv__title { display: grid; gap: 10px; }
.pv__title h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 780; letter-spacing: -.04em; }
.pv__bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 30px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pv__tabs { display: flex; gap: 4px; }
.pv__tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 620; color: var(--fg-3);
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.pv__tab:hover { color: var(--fg); }
.pv__tab.on { color: var(--fg); background: var(--surface-2); }
.pv__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pv__search, .pv__sort {
  height: 38px; padding: 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  font: inherit; font-size: 13.5px;
}
.pv__search { width: 210px; }
.pv__search:focus, .pv__sort:focus { outline: none; border-color: var(--accent); }
/* The <option> popup is painted by the OS, and [data-tone="ink"] sets
   color-scheme: dark — so a dark text colour landed on a dark popup and the
   list was unreadable. Pin both halves rather than only the text. */
.pv__sort option { background: #16141F; color: #FBF8F2; }
.pv__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }

.pv__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; margin-top: 30px; }
.pv__card {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: var(--surface); cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease);
  animation: cardin .5s var(--ease) both; animation-delay: var(--d, 0ms);
}
.pv__card:hover { border-color: var(--line-2); transform: translateY(-3px); }
@keyframes cardin { from { opacity: 0; transform: translateY(12px); } }
.pv__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--render-bg); overflow: hidden; }
.pv__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* the live vector preview paints over the stored thumbnail once its data lands */
.pv__thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%;
                    background: var(--render-bg);
                    opacity: 0; transition: opacity var(--t-mid) ease; }
.pv__thumb canvas.on { opacity: 1; }
.pv__thumb .ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-3); }
/* Two rows in one flex container: the name claims a whole line (flex-basis 100%)
   so it isn't squeezed to four characters by the date and the three icon
   buttons, which wrap underneath it. */
.pv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 9px;
            padding: 11px 14px 12px; border-top: 1px solid var(--line); }
.pv__name { flex: 1 0 100%; min-width: 0; font-size: 14px; font-weight: 650; letter-spacing: -.015em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__when { margin-right: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--fg-3); }
.pv__acts { display: flex; gap: 2px; }
.pv__ico {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg-3); cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.pv__ico:hover { background: var(--surface-2); color: var(--fg); }
.pv__ico.on { color: var(--t-gold); }
.pv__ico.danger:hover { color: var(--t-crimson); }
.pv__new {
  border: 1px dashed var(--line-2); border-radius: var(--r); background: transparent;
  color: var(--fg-2); cursor: pointer; min-height: 190px;
  display: grid; place-items: center; align-content: center; gap: 10px;
  font-size: 14px; font-weight: 620;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
  animation: cardin .5s var(--ease) both; animation-delay: var(--d, 0ms);
}
.pv__new:hover { border-color: var(--accent); color: var(--fg); background: var(--surface); }
.pv__new span:first-child { font-size: 26px; font-weight: 300; line-height: 1; }
/* Empty and signed-out states are a dashed panel — the pattern-sheet language
   again, and left-aligned so they sit under the page title rather than floating
   in the middle of a mostly empty page. */
.pv__empty {
  margin-top: 30px; padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 46px);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  display: grid; gap: 12px; justify-items: start;
}
.pv__empty h3 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.032em; }
.pv__empty p { color: var(--fg-2); max-width: 52ch; }
.pv__empty .btn, .pv__empty .btnrow { margin-top: 12px; }
.pv__err { margin-top: 18px; color: var(--t-crimson); font-size: 13.5px; font-weight: 600; }

/* modal used by rename / delete on the projects page */
.pv__backdrop {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
  background: rgba(6, 5, 8, .68); backdrop-filter: blur(3px);
  animation: fade .2s ease both;
}
@keyframes fade { from { opacity: 0; } }
.pv__modal {
  width: 100%; max-width: 420px; padding: 30px 30px 26px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  animation: cardin .28s var(--ease) both;
}
.pv__modal h3 { font-size: 20px; margin-bottom: 10px; }
.pv__modal p { color: var(--fg-2); font-size: 14.5px; }
.pv__modal .input { margin-top: 16px; }
.pv__modal .btnrow { margin-top: 24px; justify-content: flex-end; }

/* ------------------------------------------------------- shared design page
   What somebody sees when they open a link they were sent. They arrive with no
   context and no account, so the page has one job: show them the design, big,
   and say what it is. Everything else is secondary and sits beside it. */
.dg { display: grid; gap: clamp(22px, 3vw, 40px); }
.dg__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr);
  gap: clamp(22px, 3.2vw, 46px); align-items: start;
}
.dg__stage {
  position: relative; aspect-ratio: 4 / 3; background: var(--render-bg);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.dg__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%;
                    opacity: 0; transition: opacity var(--t-mid) ease; }
.dg__stage canvas.on { opacity: 1; }
/* Shown until the artwork paints, and left in place if it never does. */
.dg__stage::after {
  content: attr(data-state); position: absolute; inset: 0; display: grid;
  place-items: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  pointer-events: none; transition: opacity var(--t-mid) ease;
}
.dg__stage.ready::after { opacity: 0; }

.dg__side { display: grid; gap: 16px; align-content: start; }
.dg__side .tagline { margin: 0; }
.dg__h1 { font-size: clamp(26px, 3vw, 38px); font-weight: 780; letter-spacing: -.035em;
          line-height: 1.1; margin: 0; }
.dg__by { color: var(--fg-2); font-size: 14.5px; margin: 0; }
.dg__summary { color: var(--fg-2); font-size: 15px; margin: 0; }

.dg__spec { display: grid; gap: 0; margin: 2px 0 0; border-top: 1px solid var(--line); }
.dg__spec > div { display: flex; align-items: center; justify-content: space-between;
                  gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dg__spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
               text-transform: uppercase; color: var(--fg-3); }
.dg__spec dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right;
               display: flex; align-items: center; gap: 8px; }
.dg__sws { display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.dg__sw { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line-2); }

.dg__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dg__note { font-size: 12.5px; color: var(--fg-3); margin: 0; max-width: 44ch; }

/* the state a dead or unshared link lands on */
.dg--gone { max-width: 52ch; margin: 0 auto; text-align: center; display: grid; gap: 16px;
            padding: clamp(28px, 6vw, 72px) 0; }
.dg--gone .dg__acts { justify-content: center; }

@media (max-width: 900px) {
  .dg__grid { grid-template-columns: 1fr; }
  .dg__acts .btn { flex: 1 0 auto; justify-content: center; }
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 130; padding: 12px 20px; border-radius: var(--r-sm);
  background: var(--lin-50); color: var(--ink-900); font-size: 14px; font-weight: 620;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
  animation: cardin .24s var(--ease) both;
}
.toast.hidden { display: none; }

/* --------------------------------------------------------- account chip */
.account-slot { display: inline-flex; position: relative; }
.acct-signin {
  height: 38px; padding: 0 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: transparent; color: var(--fg);
  font-size: 13.5px; font-weight: 620; cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
.acct-signin:hover { border-color: var(--fg); }
.acct-chip {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent;
  color: var(--fg); font-size: 13px; font-weight: 620; cursor: pointer;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.acct-chip:hover { border-color: var(--line-2); background: var(--surface-2); }
.acct-chip .face { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: none; }
.acct-chip .face.init {
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  font-size: 11.5px; font-weight: 800;
}
.acct-chip .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 100; min-width: 214px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px;
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
[data-tone="paper"] .acct-menu { background: #fff; box-shadow: 0 20px 50px rgba(22, 20, 31, .16); }
.acct-menu .who { display: grid; gap: 2px; padding: 4px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct-menu .who b { font-size: 13px; }
.acct-menu .who span { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; }
.acct-menu > button {
  text-align: left; padding: 9px 10px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast) ease;
}
.acct-menu > button:hover { background: var(--surface-2); }
.acct-menu .acct-upgrade { background: var(--accent); color: var(--accent-ink); }
.acct-menu .acct-upgrade:hover { filter: brightness(1.1); }

/* --------------------------------------------------------------- admin */
.adm { padding: 46px 0 80px; }
.adm h1 { font-size: 34px; font-weight: 760; letter-spacing: -.035em; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 0 20px; }
.tile { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tile .lbl { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
             text-transform: uppercase; color: var(--fg-3); }
.tile .val { font-size: 30px; font-weight: 740; letter-spacing: -.035em; margin-top: 8px; line-height: 1; }
.tile .note { font-size: 12px; color: var(--fg-3); margin-top: 6px; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.chart h3 { font-size: 15px; }
.chart .cap { font-size: 12px; color: var(--fg-3); margin: 4px 0 14px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.bars i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .85; }
.bars i:hover { opacity: 1; }
.bars i.zero { background: var(--line); }
.gate { max-width: 380px; display: grid; gap: 11px; margin-top: 24px; }

/* -------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero .display { max-width: 14ch; }
  .doc { grid-template-columns: 1fr; gap: 34px; }
  .doc__toc { position: static; grid-auto-flow: column; grid-auto-columns: max-content;
              overflow-x: auto; padding-bottom: 12px; }
  .doc__toc b { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__end .btn--sm.hide-sm { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .index { grid-template-columns: 1fr; }
  .sechead__row { grid-template-columns: 1fr; }
  .sechead__deck { padding-bottom: 0; }
  .voices, .steps { grid-template-columns: 1fr; }
  .voice + .voice, .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .voice, .step { padding-right: 0; }
  .cta__grid { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .hoop--float { left: 10px; bottom: -30px; width: 116px; }
  .rig { margin-bottom: 52px; }
  .sechead { grid-template-columns: 1fr; gap: 14px; }
  .sechead__no { padding-top: 0; }
  .pieces { grid-template-columns: repeat(2, 1fr); }
  .piece { grid-column: span 1; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .spec { grid-template-columns: 1fr 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 30px; }
  .faq__a { padding-right: 0; }
  .pv__tools { margin-left: 0; width: 100%; }
  .pv__search { flex: 1; width: auto; }
  .tiles { grid-template-columns: 1fr; }
  /* Below 900px the nav links are hidden and the burger is the ONLY way to
     navigate — so it has to survive. On a 390px phone the brand, the account
     chip, "Open Studio" and the burger together came to 417px, which pushed the
     burger clean off the right edge and left a signed-in visitor with no menu at
     all. The chip drops to its avatar (its name is inside the menu it opens) and
     the studio button loses its padding, which buys back ~120px. */
  .nav__end { gap: 8px; }
  .acct-chip .nm { display: none; }
  .acct-chip { padding: 4px; }
  .nav__end .btn--sm { padding: 0 12px; }

  /* Filter tabs: one scrollable row rather than a block of two-line buttons.
     A longer label wrapping inside its own pill made the row 60px tall and
     ragged. */
  .pv__bar { gap: 10px; }
  .pv__tabs {
    flex: 1 0 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pv__tabs::-webkit-scrollbar { display: none; }
  .pv__tab { white-space: nowrap; flex: none; }

  .ab-fmts { grid-template-columns: 1fr; }
  .ab-prose h3 { margin-top: 32px; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-mail { padding: 18px 20px; gap: 12px; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hoop__path { opacity: 1; }
  .hoop__path .reveal-path { stroke-dashoffset: 0; }
  .ticker__track { animation: none; }
  /* and the redesign's own perpetual motion */
  .ambient-orb { animation: none !important; will-change: auto; }
  .grad-shimmer { animation: none !important; background-position: 50% center; }
  .pro-hero-btn::after, .thread-line, .pro-pill-glow .pulse-dot,
  .carousel__live-dot { animation: none !important; }
  .btn:hover, .pv__card:hover { transform: none; }
  .piece:hover .piece__plate img { transform: none; }
}

/* ------------------------------------------------------------ print */
@media print {
  .nav, .ticker, .cta, .foot__wordmark { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   HOMEPAGE REDESIGN: HERO CAROUSEL, PRO SPOTLIGHT & ADVANCED MOTION
   ========================================================================== */

/* -------------------------------------------------- ambient mesh & glowing orbs */
.bg-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.17;
  pointer-events: none;
  animation: orb-drift 18s ease-in-out infinite alternate;
  /* A 600px circle under a 100px blur is expensive to paint, and these paint on
     every frame for as long as the page is open. Promoting them to their own
     layer means the blur is rasterised once and the animation is a composite
     step, which is the difference between an idle tab costing a few percent of
     a CPU and costing a lot of one. */
  will-change: transform;
  transform: translateZ(0);
}

.ambient-orb--1 {
  width: 540px;
  height: 540px;
  top: -120px;
  left: 20%;
  background: radial-gradient(circle, #5b47fb 0%, transparent 70%);
}

.ambient-orb--2 {
  width: 620px;
  height: 620px;
  top: 180px;
  right: -80px;
  background: radial-gradient(circle, #00d2ff 0%, transparent 70%);
  animation-duration: 24s;
  animation-delay: -6s;
}

.ambient-orb--3 {
  width: 480px;
  height: 480px;
  bottom: -160px;
  left: -60px;
  background: radial-gradient(circle, #ff6b4a 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: -10s;
}

@keyframes orb-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -30px, 0) scale(1.08); }
  100% { transform: translate3d(-35px, 25px, 0) scale(0.95); }
}

/* --------------------------------------------------------- hero header polish */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 72px;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Pro Pill in Hero */
/* The pill's dot: the markup was already asking for it on the homepage and the
   pricing hero, and only the keyframes existed, so it rendered as nothing. */
.pro-pill-glow .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: #a594fd;
  box-shadow: 0 0 10px rgba(157, 142, 255, 0.558);
  animation: pulse-dot 2s ease-in-out infinite;
}

.pro-pill-glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(91, 71, 251, 0.12);
  border: 1px solid rgba(122, 104, 255, 0.35);
  box-shadow: 0 0 20px rgba(91, 71, 251, 0.124);
  margin-bottom: 18px;
  font-size: 13.5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pro-pill-glow:hover {
  transform: translateY(-1px);
  border-color: rgba(122, 104, 255, 0.65);
  box-shadow: 0 0 26px rgba(91, 71, 251, 0.217);
}

.pro-pill-badge {
  background: linear-gradient(135deg, #ff4f4f, #ff8c42);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255, 79, 79, 0.4);
}

.pro-pill-link {
  color: #9d8eff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.pro-pill-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Shimmer on gradient word */
.grad-shimmer {
  background: linear-gradient(90deg, #7a68ff 0%, #4aa8e8 32%, #cfe4ff 50%, #4aa8e8 68%, #7a68ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-text 6s linear infinite;
  display: inline-block;
  /* The gradient is painted into the element's own box and then clipped to the
     glyphs, so anything the glyphs draw outside that box (the descender on the
     "j" of Projects, the tail of a "y") gets no paint at all and reads as a cut
     off letter. The display headings run a line-height under 1, which is exactly
     when that happens. Grow the box and pull the growth straight back out, so
     the paint area covers the glyphs and the layout does not move. */
  padding: 0.09em 0.05em 0.17em;
  margin: -0.09em -0.05em -0.17em;
}

@keyframes shimmer-text {
  to { background-position: 200% center; }
}

.pro-hero-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #6355ff 0%, #4338ca 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(99, 85, 255, 0.35);
}

.pro-hero-btn::after {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.13) 50%, transparent 100%);
  transform: rotate(30deg);
  animation: btn-beam 4.5s ease-in-out infinite;
}

@keyframes btn-beam {
  0%, 10% { transform: translateX(-100%) rotate(30deg); }
  40%, 100% { transform: translateX(200%) rotate(30deg); }
}

.badge-tag {
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 6px;
  margin-left: 6px;
  font-weight: 600;
}

/* ==========================================================================
   HERO DESIGN CAROUSEL
   ========================================================================== */
.carousel-card {
  position: relative;
  margin-top: 36px;
  border-radius: 24px;
  background: rgba(18, 22, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.031);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.carousel-card:hover {
  border-color: rgba(122, 104, 255, 0.3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 30px rgba(99, 85, 255, 0.112);
}

/* Top Control Bar */
.carousel__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 12, 20, 0.5);
  gap: 12px;
  flex-wrap: wrap;
}

.carousel__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.carousel__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.25); }
}

.carousel__tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.carousel__dot {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.22s ease;
}

.carousel__dot:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.carousel__dot.is-active {
  color: #fff;
  background: #6355ff;
  box-shadow: 0 2px 10px rgba(99, 85, 255, 0.45);
}

.carousel__dot-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.carousel__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel__counter {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

.carousel__counter-cur {
  color: #fff;
  font-weight: 700;
}

.carousel__nav-btns {
  display: flex;
  gap: 4px;
}

.carousel__btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.16s ease;
}

.carousel__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.carousel__btn svg {
  width: 14px;
  height: 14px;
}

/* Slides Track */
.carousel__track {
  position: relative;
  min-height: 440px;
}

.carousel__slide {
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  padding: 24px;
}

.carousel__slide.is-active {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
  opacity: 1;
  animation: slide-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3D Canvas Stage */
.carousel__stage {
  position: relative;
  aspect-ratio: 16 / 10.5;
  background: radial-gradient(ellipse at 50% 50%, #171b2d 0%, #0d0f1a 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.372), 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.1, 0.8, 0.3, 1);
  will-change: transform;
}

/* Subtle fabric weave background in stage */
.carousel__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: 0.6;
}

/* Specular cursor shine on 3D hover */
.carousel__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 240px at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.08), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.carousel__stage:hover::after {
  opacity: 1;
}

.carousel__stage.carousel__stage--bloom {
  aspect-ratio: 1;
  background: #f4efe5;
}

.carousel__stage--bloom::before { display: none; }

.carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel__source {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-underline-offset: 3px;
}

.carousel__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel__canvas.is-rendered {
  opacity: 1;
}

.carousel__stage-loading {
  position: absolute;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.carousel__stage.is-ready .carousel__stage-loading {
  opacity: 0;
}

/* Meta Sidebar */
.carousel__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 8px;
}

.carousel__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.carousel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(99, 85, 255, 0.15);
  color: #a594fd;
  border: 1px solid rgba(99, 85, 255, 0.3);
}

.carousel__badge--gold {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.carousel__author {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.carousel__title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.carousel__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Spec Row Grid */
.carousel__spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.carousel__spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.carousel__spec-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.carousel__spec-val {
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel__swatches {
  display: flex;
  align-items: center;
  gap: 5px;
}

.carousel__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Action Buttons */
.carousel__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.carousel__actions .btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  justify-content: center;
}

/* Bottom Progress Bar */
.carousel__progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.carousel__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6355ff, #38bdf8);
  transform-origin: left;
  transform: scaleX(0);
}

/* ==========================================================================
   PRO SPOTLIGHT BANNER
   ========================================================================== */
.pro-spotlight {
  margin: 54px 0 20px;
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(26, 21, 58, 0.85) 0%, rgba(16, 19, 36, 0.95) 100%);
  border: 1px solid rgba(122, 104, 255, 0.35);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 85, 255, 0.093);
  padding: 32px 36px;
  overflow: hidden;
}

.pro-spotlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8176ff, #38bdf8, transparent);
}

.pro-spotlight__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.pro-spotlight__title-wrap h3 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.pro-spotlight__title-wrap p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14.5px;
  margin-top: 4px;
}

.pro-spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.pro-spotlight__cta-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pro-spotlight__price {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pro-spotlight__price small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.pro-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pro-spotlight__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pro-spotlight__card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(122, 104, 255, 0.35);
}

.pro-spotlight__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(99, 85, 255, 0.2);
  color: #a594fd;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.pro-spotlight__card h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
}

.pro-spotlight__card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* ==========================================================================
   INTERACTIVE STITCH PLAYGROUND
   ========================================================================== */
.stitch-playground {
  margin: 44px 0 20px;
  background: rgba(14, 18, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(14px);
}

.stitch-playground__head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 24px;
}

.stitch-playground__head h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.stitch-playground__head p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}

.stitch-pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stitch-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stitch-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.stitch-pill.is-active {
  background: #6355ff;
  border-color: #7a68ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 85, 255, 0.4);
}

.stitch-demo-card {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px;
  animation: slide-fade-in 0.3s ease forwards;
}

.stitch-demo-card.is-active {
  display: grid;
}

.stitch-demo__info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.stitch-demo__info p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

.stitch-demo__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.stitch-demo__tags span {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono, monospace);
}

.stitch-demo__visual {
  height: 180px;
  /* These plates hold real stitch-outs now, rendered on the engine's own fabric
     ground, so the plate matches that ground rather than sitting a dark well
     behind a light picture. Same treatment as the showcase gallery. */
  background: var(--render-bg);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.stitch-demo__visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   ANIMATED EMBROIDERY THREAD PATH
   ========================================================================== */
.thread-divider {
  position: relative;
  width: 100%;
  height: 28px;
  margin: 36px 0;
  overflow: visible;
  pointer-events: none;
}

.thread-divider svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.thread-line {
  stroke: #6355ff;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(99, 85, 255, 0.231));
  animation: thread-march 20s linear infinite;
}

@keyframes thread-march {
  to { stroke-dashoffset: -400; }
}

/* ==========================================================================
   ELEVATED PRO PRICING CARD
   ========================================================================== */
.plan--pro {
  position: relative;
  border: 1px solid rgba(122, 104, 255, 0.5) !important;
  box-shadow: 0 16px 50px rgba(99, 85, 255, 0.22), 0 0 30px rgba(122, 104, 255, 0.093) !important;
}

.plan--pro::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #6355ff, #38bdf8, #fbbf24, #6355ff);
  opacity: .55;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Pro Badges in Feature List */
.pro-tag-link {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #6355ff, #8176ff);
  color: #fff !important;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pro-tag-link:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(99, 85, 255, 0.372);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR CAROUSEL & NEW SECTIONS
   ========================================================================== */
@media (max-width: 1024px) {
  .pro-spotlight__grid { grid-template-columns: repeat(2, 1fr); }
  .carousel__slide.is-active { grid-template-columns: 1fr; gap: 20px; }
  .carousel__stage { aspect-ratio: 16 / 11; max-width: 580px; margin: 0 auto; width: 100%; }
}

@media (max-width: 768px) {
  .carousel__topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .carousel__tabs { width: 100%; justify-content: space-between; }
  .carousel__dot { flex: 1; justify-content: center; padding: 6px 10px; }
  .carousel__title { font-size: 26px; }
  .pro-spotlight { padding: 24px 20px; }
  .pro-spotlight__header { flex-direction: column; align-items: flex-start; }
  .pro-spotlight__cta-box { width: 100%; justify-content: space-between; }
  .pro-spotlight__grid { grid-template-columns: 1fr; }
  .stitch-demo-card { grid-template-columns: 1fr; }
  .stitch-demo__visual { height: 140px; }
}


/* ==========================================================================
   SECONDARY PAGES STYLES: PRICING, ABOUT, CONTACT, CONVERTER, DOCS & AUTH
   ========================================================================== */

/* ------------------------------------------------------------- pricing sheet */
/* The comparison table lives inside a PAPER band. It had been given the dark
   glass treatment from the hero — white text on rgba(18,22,36,.7) — which on a
   light ground came out as muddy grey rows nobody could read. It takes its
   colours from the band's own tokens now, so it is light where the band is
   light and would follow the band anywhere else. */
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sheet table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sheet th {
  background: var(--surface-2);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-3);
  text-align: left;
}

.sheet th:last-child,
.sheet td:last-child {
  /* the Pro column: a wash of the accent, not a slab of it */
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-left: 1px solid var(--line);
}

.sheet th:last-child { color: var(--accent); }

.sheet td {
  padding: 15px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--fg-2);
  transition: background var(--t-fast) ease;
}

.sheet tbody tr:last-child td { border-bottom: none; }
.sheet tbody tr:hover td { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.sheet tbody tr:hover td:last-child {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.sheet td:first-child { color: var(--fg); }
.sheet td.tick { color: var(--t-jade); font-weight: 800; font-size: 16px; }
.sheet td.n { color: var(--fg-3); }
.sheet td.y { color: var(--accent); font-weight: 700; }
.sheet th:nth-child(2), .sheet td:nth-child(2),
.sheet th:last-child, .sheet td:last-child { text-align: center; }

/* ------------------------------------------------------------- FAQ Accordion */
.faq-grid {
  display: grid;
  gap: 12px;
  margin-top: 36px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 24px;
  transition: all 0.2s ease;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(122, 104, 255, 0.3);
  transform: translateY(-1px);
}

.faq-item h4 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-item p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* -------------------------------------------------------- About Page Pipeline */
.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 36px 0;
  position: relative;
}

.pipeline-step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  transition: all 0.22s ease;
}

.pipeline-step:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(122, 104, 255, 0.4);
  box-shadow: 0 8px 30px rgba(99, 85, 255, 0.15);
}

.pipeline-step__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  color: #a594fd;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.pipeline-step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.pipeline-step p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Format support grid in About */
.fmts-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0;
}

.fmt-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.fmt-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.fmt-card__ext {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.fmt-card__brand {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

/* ------------------------------------------------------------- Contact Cards */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.ct-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ct-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(122, 104, 255, 0.4);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.ct-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.ct-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 18px 0;
  flex: 1;
}

.ct-card__go {
  font-size: 13px;
  font-weight: 600;
  color: #9d8eff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease;
}

.ct-card:hover .ct-card__go {
  transform: translateX(4px);
  color: #fff;
}

.ct-mail {
  background: linear-gradient(135deg, rgba(99, 85, 255, 0.2) 0%, rgba(18, 22, 36, 0.7) 100%);
  border: 1px solid rgba(122, 104, 255, 0.4);
  box-shadow: 0 10px 30px rgba(99, 85, 255, 0.15);
  border-radius: 16px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  transition: all 0.2s ease;
}

.ct-mail:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 104, 255, 0.7);
  box-shadow: 0 14px 40px rgba(99, 85, 255, 0.25);
}

/* ------------------------------------------------------------- Converter Tool */
.cv {
  background: rgba(18, 22, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: 32px;
}

.cv__drop {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 32px 20px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.cv__drop:hover, .cv__drop.is-dragover {
  background: rgba(99, 85, 255, 0.08);
  border-color: rgba(122, 104, 255, 0.6);
  box-shadow: 0 0 24px rgba(99, 85, 255, 0.124);
}

/* ------------------------------------------------------------- Legal Documents */
.doc {
  gap: 48px;
}

.doc__toc {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px;
}

.doc__toc a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.doc__toc a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.doc__body h2 {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 28px;
  margin-top: 36px;
  color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
  .pipeline-flow { grid-template-columns: repeat(2, 1fr); }
  .fmts-cards { grid-template-columns: repeat(2, 1fr); }
  .ct-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .pipeline-flow { grid-template-columns: 1fr; }
  .fmts-cards { grid-template-columns: 1fr; }
  .sheet { overflow-x: auto; }
  .sheet th, .sheet td { padding: 12px 16px; font-size: 13.5px; }
}