/* ==========================================================================
   Dot Avatar Maker — design system
   Paper-cream canvas, ink type, toy-bright accents. Light, playful, fast.
   ========================================================================== */

/* Fonts are declared inline (was an @import of fonts.css): an @import makes the
   browser finish downloading and parsing this file before it even discovers the
   font files, which adds a full serialized round trip to first text paint. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-var.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2');}

:root {
  --paper:      #F7F3EA;
  --paper-2:    #FFFDF8;
  --card:       #FFFFFF;
  --ink:        #14131A;
  --ink-2:      #5C5749;
  --ink-3:      #8C8779;
  --line:       #E7E0D1;
  --line-2:     #F0EADD;

  --brand:      #3D7EFF;
  --brand-ink:  #2454C9;
  --brand-soft: #E8EFFF;
  --pink:       #FF7FA8;
  --pink-soft:  #FFE9F0;
  --yellow:     #FFC93C;
  --yellow-soft:#FFF4D6;
  --mint:       #5FD3A5;
  --mint-soft:  #E3F8EF;
  --lav:        #B48CFF;
  --lav-soft:   #F1EAFF;
  --coral:      #FF7A6B;
  --coral-soft: #FFEDE9;

  --r-xl: 34px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  --shadow-1: 0 1px 2px rgba(20,19,26,.05), 0 10px 26px -16px rgba(20,19,26,.22);
  --shadow-2: 0 2px 4px rgba(20,19,26,.05), 0 26px 60px -30px rgba(20,19,26,.30);
  --shadow-in: inset 0 1px 0 rgba(255,255,255,.7);

  --nav-h: 64px;
  --maxw: 1160px;

  --font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, canvas, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
}
h1 { font-size: clamp(40px, 6.4vw, 76px); }
h2 { font-size: clamp(30px, 4.4vw, 52px); }
h3 { font-size: clamp(19px, 2.1vw, 24px); font-weight: 700; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: 14.5px; }
.tiny { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.accent-brand { color: var(--brand); }
.accent-pink  { color: var(--pink); }
.accent-yellow{ color: #D89B00; }
.accent-mint  { color: #1E9A70; }
.accent-lav   { color: #7C4CE8; }
.accent-coral { color: #E5503C; }

/* ------------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600; font-size: 15.5px; letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, color .16s;
  box-shadow: 0 10px 22px -14px rgba(20,19,26,.6);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(20,19,26,.55); }
.btn:active { transform: translateY(0); }
.btn.brand { --bg: var(--brand); --bd: var(--brand); }
.btn.ghost { --bg: #fff; --fg: var(--ink); --bd: var(--line); box-shadow: var(--shadow-1); }
.btn.ghost:hover { --bd: #D9D1C0; }
.btn.lg { padding: 16px 28px; font-size: 17px; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.wide { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--brand-ink); border-bottom: 1.5px solid transparent;
}
.link-arrow:hover { border-color: currentColor; }

/* --------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px 7px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-in);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.pill.p-pink .dot { background: var(--pink); }
.pill.p-yellow .dot { background: var(--yellow); }
.pill.p-mint .dot { background: var(--mint); }
.pill.p-lav .dot { background: var(--lav); }
.pill.p-coral .dot { background: var(--coral); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  background: var(--line-2); color: var(--ink-2);
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: rgba(247,243,234,.82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.nav.stuck { border-bottom-color: var(--line); background: rgba(247,243,234,.94); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: #fff; color: var(--ink); }
.nav-cta { margin-left: 6px; }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 12px 18px 20px; gap: 2px;
    transform: translateY(-130%); transition: transform .28s cubic-bezier(.2,.7,.3,1); margin: 0; }
  .nav-links a { padding: 12px 10px; font-size: 16px; }
  .nav.open .nav-links { transform: translateY(0); }
  .nav-toggle { display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px;
    border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; }
  .nav-cta { display: none; }
}

/* ------------------------------------------------------------ sections */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
section.plain { background: var(--paper); }
section.paper2 { background: var(--paper-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.sec-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 34px; }
.sec-head .grow { flex: 1 1 420px; }
.sec-head .pill { margin-bottom: 6px; }
.sec-head p { margin: 12px 0 0; max-width: 62ch; color: var(--ink-2); }

/* --------------------------------------------------------------- hero */
.hero { padding: 54px 0 76px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% 30% 40% -10%;
  background: radial-gradient(closest-side, rgba(255,201,60,.28), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; position: relative; }
.hero h1 { margin: 16px 0 0; }
.hero .lead { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--ink-2); margin-top: 18px; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-stats div strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.hero-stats div span { font-size: 13px; color: var(--ink-3); }

.stage-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #FFFDF7 0%, #F1EADA 58%, #E4DAC6 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.stage-card.hero-stage { aspect-ratio: 1 / 1; }
.stage-card canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stage-card canvas.is-grabbing { cursor: grabbing; }
.stage-badge {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; backdrop-filter: blur(6px);
}
.stage-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(95,211,165,.25); }
.stage-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; color: var(--ink-2);
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .stage-card.hero-stage { max-width: 520px; margin: 0 auto; }
}

/* ----------------------------------------------------------- mascot */
.mascot-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: center; }
.mascot-art { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); background: #fff; position: relative; }
.mascot-art img { width: 100%; height: auto; }
.mascot-facts { display: grid; gap: 14px; margin-top: 26px; }
.fact { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-1); }
.fact .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 17px; }
.fact strong { font-family: var(--font-display); font-weight: 700; display: block; font-size: 15.5px; }
.fact span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 940px) { .mascot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ----------------------------------------------------------- studio */
.studio-shell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.studio-top {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2); background: var(--paper-2); flex-wrap: wrap;
}
.studio-top .brand { font-size: 15.5px; }
.studio-top .brand svg { width: 24px; height: 24px; }
.studio-top .file { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.studio-top .file input {
  font: inherit; font-size: 14.5px; font-weight: 600; font-family: var(--font-display);
  border: 1px solid transparent; background: transparent; padding: 6px 10px; border-radius: 10px; width: 190px; color: var(--ink);
}
.studio-top .file input:hover { background: #fff; border-color: var(--line); }
.studio-top .file input:focus { outline: none; background: #fff; border-color: var(--brand); }
.studio-top .spacer { flex: 1 1 auto; }
.studio-top .grp { display: flex; align-items: center; gap: 6px; }
.seg { display: inline-flex; background: var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: transparent; border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }

.studio-body { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 560px; }
.studio-stage {
  position: relative; background: radial-gradient(120% 100% at 50% 0%, #FFFDF7 0%, #F2EBDB 60%, #E5DBC7 100%);
  border-right: 1px solid var(--line-2); min-height: 420px;
}
.studio-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.studio-stage canvas.is-grabbing { cursor: grabbing; }
.studio-stage .overlay { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; }
.nameplate {
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-in);
}
.nameplate em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.studio-stage .stage-badge { left: 14px; top: 14px; }
.studio-stage .hint { position: absolute; right: 14px; top: 14px; font-size: 12.5px; color: var(--ink-3); background: rgba(255,255,255,.75); border-radius: 999px; padding: 5px 11px; }

.studio-panel { display: flex; flex-direction: column; background: var(--card); }
.panel-tabs { display: flex; gap: 4px; padding: 12px 14px 0; flex-wrap: wrap; }
.panel-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: 9px 4px 12px; margin-right: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-3);
  border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
}
.panel-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--brand); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; flex-wrap: wrap; }
.panel-head h4 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin: 0; }
.panel-head .pill { padding: 5px 12px 5px 10px; font-size: 12.5px; }
.panel-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 18px; max-height: 470px; }
.panel-scroll::-webkit-scrollbar { width: 10px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #E3DCCB; border: 3px solid #fff; border-radius: 99px; }

.opt-grid { display: grid; gap: 10px; }
.opt-grid.forms { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.opt-grid.styles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.opt-grid.colors { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.opt-grid.finishes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

.opt {
  position: relative; border: 1.5px solid var(--line); background: var(--paper-2); border-radius: var(--r-md);
  padding: 6px 6px 7px; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s, box-shadow .15s;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.25; overflow: hidden;
}
.opt:hover { transform: translateY(-2px); border-color: #D8D0BE; background: #fff; box-shadow: var(--shadow-1); }
.opt[aria-pressed="true"] { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); color: var(--ink); }
.opt .thumb { width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; }
.opt .thumb img { width: 100%; height: 100%; object-fit: contain; }
.opt .ph { width: 58%; aspect-ratio: 1/1; border-radius: 50%; background: var(--line); opacity: .55; }
.opt .nm { display: block; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; margin-top: 2px; }
.opt.col { padding: 5px; }
.opt.col .sw { width: 100%; aspect-ratio: 1/1; border-radius: 12px; border: 1px solid rgba(20,19,26,.08); }
.opt.col[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--brand-soft); }
.opt.custom { display: grid; place-items: center; }
.opt.custom input[type=color] { width: 100%; aspect-ratio: 1/1; border: 0; background: none; padding: 0; cursor: pointer; }
.opt.fin { display: flex; gap: 9px; align-items: center; text-align: left; padding: 7px 9px; }
.opt.fin .thumb { width: 44px; height: 44px; aspect-ratio: auto; flex: none; }
.opt.fin .meta { min-width: 0; }
.opt.fin .nm { font-size: 12.5px; margin: 0; }
.opt.fin .note { font-size: 10.5px; color: var(--ink-3); display: block; }

.group-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 16px 2px 8px; grid-column: 1/-1; }

.panel-actions { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line-2); background: var(--paper-2); flex-wrap: wrap; }
.panel-actions .spacer { flex: 1; }

@media (max-width: 940px) {
  /* min-height: 0 + align-self: start are load-bearing: the base rules set
     .studio-body{min-height:560px} and .studio-stage{min-height:420px}, and a
     stretched 1-column grid item then forces the aspect-ratio square to at least
     that tall — i.e. wider than a phone screen, so the card's right edge ran off
     the viewport. Let the stage size itself from the column width instead. */
  .studio-body { grid-template-columns: 1fr; min-height: 0; }
  .studio-stage {
    border-right: 0; border-bottom: 1px solid var(--line-2);
    aspect-ratio: 1/1; width: 100%; min-height: 0; align-self: start;
  }
  .panel-scroll { max-height: none; }
}

/* ---------------------------------------------------------- galleries */
.grid-cards { display: grid; gap: 18px; }
.grid-cards.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-cards.c3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-cards.c4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 15px; }
.card .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; }

.gal { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.gal-item {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2);
  padding: 10px; cursor: pointer; text-align: center; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.gal-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #DCD4C2; }
.gal-item .thumb { aspect-ratio: 1/1; display: grid; place-items: center; }
.gal-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.gal-item .thumb .ph { width: 62%; aspect-ratio: 1/1; border-radius: 50%; background: var(--line); opacity: .5; }
.gal-item .nm { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.gal-item .sub { font-size: 11.5px; color: var(--ink-3); }
.gal-item .use { margin-top: 10px; opacity: 0; transition: opacity .18s; }
.gal-item:hover .use { opacity: 1; }
/* no hover on touch: keep the affordance visible instead of unreachable */
@media (hover: none) { .gal-item .use { opacity: 1; } }

.mats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.mat {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); padding: 10px;
  text-align: center; cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.mat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mat .thumb { aspect-ratio: 1/1; }
.mat .thumb img { width: 100%; height: 100%; object-fit: contain; }
.mat .nm { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.mat .note { font-size: 11.5px; color: var(--ink-3); }

/* ------------------------------------------------------------- steps */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: s; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-1); position: relative; }
.step .n {
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .1em;
  color: var(--brand); display: block; margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* --------------------------------------------------------- brand band */
.band {
  background: linear-gradient(155deg, var(--brand) 0%, #2E63E0 100%);
  color: #fff; padding: 74px 0; position: relative; overflow: hidden;
}
.band::after {
  content: ''; position: absolute; right: -12%; top: -40%; width: 62%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%); pointer-events: none;
}
.band h2 { color: #fff; max-width: 22ch; }
.band p { color: rgba(255,255,255,.86); }
.band .btn { --bg: #fff; --fg: var(--brand-ink); --bd: #fff; }
.band .btn.ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.5); box-shadow: none; }
.band-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; }
@media (max-width: 900px) { .band-inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink-3); transition: transform .2s;
}
.faq details[open] summary::after { content: '–'; }
.faq .ans { padding: 0 60px 20px 0; color: var(--ink-2); font-size: 15.5px; }

/* ------------------------------------------------------------ footer */
footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: 56px 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.foot-grid h4 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-grid a { font-size: 14.5px; color: var(--ink-2); }
.foot-grid a:hover { color: var(--brand-ink); }
.foot-brandp { margin-top: 14px; max-width: 34ch; font-size: 14px; color: var(--ink-3); }
.foot-bottom { margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-3); }
.foot-dot { width: 22px; height: 22px; margin-left: auto; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------- modal */
.modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(20,19,26,.42); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal .sheet {
  background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  width: min(560px, 100%); padding: 28px; transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2,.7,.3,1);
  max-height: 92vh; overflow-y: auto;
}
.modal.open .sheet { transform: none; }
.modal h3 { font-size: 24px; }
.dl-grid { display: grid; gap: 12px; margin-top: 20px; }
.dl {
  display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 16px; background: var(--paper-2); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .15s;
}
.dl:hover { border-color: var(--brand); background: #fff; transform: translateY(-1px); }
.dl .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; }
.dl strong { font-family: var(--font-display); display: block; font-size: 15px; }
.dl span { font-size: 13px; color: var(--ink-3); }
.share-row { display: flex; gap: 8px; margin-top: 18px; }
.share-row input {
  flex: 1; font: inherit; font-size: 13.5px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper-2); color: var(--ink-2); min-width: 0;
}
.modal .close { position: absolute; top: 16px; right: 16px; }
.modal .x {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 17px; display: grid; place-items: center;
}
.sheet-head { position: relative; }

/* -------------------------------------------------------- toast, etc */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 95;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 22px; font-size: 14.5px;
  box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fallback-note { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--yellow-soft); font-size: 14px; color: var(--ink-2); }


/* ---------- inner pages ---------- */
.page-head { padding: 74px 0 34px; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.02em; margin-top: 10px; }
.page-head .lead { margin-top: 16px; max-width: 62ch; color: var(--ink-2); }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.toc a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--card); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 999px; text-decoration: none; transition: .16s; }
.toc a:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }

.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--yellow-soft); box-shadow: inset 0 0 0 2px var(--card), 0 0 0 1px var(--line); }
.ticks li strong { color: var(--ink); }

.wrap.narrow section h2, .wrap.narrow h2 { font-size: clamp(24px, 3.1vw, 34px); letter-spacing: -0.015em; }
.wrap.narrow p { margin-top: 14px; color: var(--ink-2); }
.wrap.narrow h2 + p { margin-top: 12px; }
.wrap.narrow .grid-cards { margin-top: 22px; }
.center { text-align: center; }

.log { display: grid; gap: 18px; margin-top: 8px; }
.entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; }
.entry .ver { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entry h3 { font-size: 19px; }
.entry time { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.entry .tag.now { background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.entry .ticks { margin-top: 14px; }

@media (max-width: 700px) {
  .page-head { padding: 52px 0 22px; }
  .entry { padding: 20px; }
  .entry time { margin-left: 0; width: 100%; }
}


/* ================================================================ $DOTVA band */
/* The token section is the only place on the page that talks about money, so it
   gets its own darker surface: navy bookend to the blue CTA band below it, with
   the same radial glow motif. Text contrast is measured against the dark panels
   (rgba(4,22,52,.42) over the gradient), not against the gradient itself. */
/* Keep the token clause off a mid-verb line break on wide screens - but a nowrap
   phrase longer than a phone is CLIPPED (the band hides overflow), so let it wrap
   again below ~640px or the last word silently disappears. */
.nb { white-space: nowrap; }
@media (max-width: 640px) { .nb { white-space: normal; } }
.band-token {
  background: linear-gradient(158deg, #0B1220 0%, #14264F 48%, #1E3A8A 100%);
  color: #fff; padding: 78px 0 82px; position: relative; overflow: hidden;
}
.band-token::after {
  content: ''; position: absolute; left: -14%; bottom: -46%; width: 58%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(61,126,255,.34), transparent 70%);
  pointer-events: none;
}
.band-token .wrap { position: relative; }
.band-token h2 { max-width: 26ch; }
.tok-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #BFD9FF;
  background: rgba(4,22,52,.42); border: 1px solid rgba(191,217,255,.28);
  padding: 7px 14px; border-radius: 999px;
}
.tok-chip {
  font-size: 10.5px; letter-spacing: .1em; color: #FFD98A;
  background: rgba(255,201,60,.14); border: 1px solid rgba(255,201,60,.34);
  padding: 2px 8px; border-radius: 999px;
}
.tok-lede { color: rgba(255,255,255,.9); margin-top: 16px; max-width: 64ch; font-size: clamp(16px, 1.5vw, 18px); }
.tok-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; margin-top: 32px; align-items: stretch; }
.tok-panel {
  background: rgba(4,22,52,.42); border: 1px solid rgba(191,217,255,.3);
  border-radius: var(--r-lg); padding: 24px 24px 22px;
  display: flex; flex-direction: column;
}
.tok-label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.tok-well { display: flex; align-items: flex-start; gap: 14px; margin-top: 12px; }
.tok-ca {
  flex: 1 1 auto; min-height: 46px; padding: 11px 14px 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,.92); background: rgba(2,12,30,.55);
  border: 1px solid rgba(191,217,255,.22); border-radius: var(--r-sm);
  /* anywhere, not break-all: a 44-char mint still breaks, but the placeholder
     sentence breaks at spaces instead of splitting "address" mid-word. */
  overflow-wrap: anywhere;
}
.tok-copy {
  flex: none; margin-top: 3px; min-height: 41px; display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.5); font: inherit; font-size: 13.5px; font-weight: 500;
  transition: color .15s, background .15s;
}
.tok-copy:hover { color: rgba(255,255,255,.74); }
.tok-copy .tok-lock { width: 15px; height: 15px; flex: none; color: rgba(255,255,255,.62); }
.tok-copy.is-live {
  background: #fff; color: var(--brand-ink); font-weight: 600;
  padding: 0 16px; border-radius: 999px;
}
.tok-copy.is-live:hover { color: var(--brand-ink); }
.tok-status { min-height: 20px; margin-top: 10px; font-size: 13px; color: #FFD98A; }
/* The buy link only exists in the LIVE state (ca-toggle.py inserts it into the served
   html so it works with JS off, and it is an <a> acting as a button - so it needs the
   anchor reset, or it renders as an underlined left-aligned link next to a real one). */
.tok-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 0 18px; min-height: 44px;
  background: #fff; color: var(--brand-ink); font-size: 14.5px; font-weight: 600;
  border-radius: 999px; text-decoration: none; align-self: flex-start;
}
.tok-buy:hover { background: #EAF1FF; }
/* Group the panel's content at the top and let any slack fall at the BOTTOM edge:
   an auto margin here pins the chips to the bottom and leaves a hole in the middle
   of the panel, which reads as a missing block rather than as breathing room. */
.tok-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 0; }
.tok-facts span {
  font-size: 12.5px; color: rgba(255,255,255,.82); background: rgba(4,22,52,.5);
  border: 1px solid rgba(191,217,255,.2); padding: 5px 11px; border-radius: 999px;
}
.tok-benefits { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 13px; }
.tok-benefits li { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.88); }
.tok-benefits b { display: block; color: #fff; font-weight: 700; }
/* The trust warning lives with the address, not in fine print at the bottom of the
   band: it is the section's most consequential sentence. Hairline divider + stronger
   colour, and the facts row below it keeps the panel's bottom edge aligned. */
.tok-note {
  margin-top: 16px; padding-top: 14px; font-size: 12.5px; line-height: 1.6;
  color: rgba(255,255,255,.82); border-top: 1px solid rgba(191,217,255,.2);
}
@media (max-width: 900px) {
  .tok-grid { grid-template-columns: 1fr; gap: 18px; }
  .tok-well { flex-direction: column; gap: 10px; }
  .tok-copy { margin-top: 0; }
}

/* Nav additions: the token link is ALL CAPS in a sentence-case row (caps carry no
   ascender variation and $ overshoots the cap height, so it reads a notch larger at
   the same size — trimmed 1px + tracking), and the X link is an icon-only target. */
.nav-links a.nav-tok { font-size: 13.5px; letter-spacing: .02em; font-weight: 600; }
.nav-x {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 9px; margin: -8px -9px 0 2px; color: var(--ink-2); border-radius: 999px;
}
.nav-x:hover { background: #fff; color: var(--ink); }
.nav-x svg { width: 17px; height: 17px; }
.nav-x svg.fill { fill: currentColor; stroke: none; }
.foot-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }