/* Tejas public site. Tokens follow design/brand/tejas/README: night indigo and burnished gold,
   a Tiro display serif (Latin and Devanagari in one family) over Hanken Grotesk. Light by day,
   night when the visitor's system is dark. One small inline script only pauses the order demo off screen; nothing from another host but the fonts. */
:root {
  --ground: #F5F4FA;
  --surface: #FFFFFF;
  --sunk: #ECEAF5;
  --line: #DAD7EC;
  --ink: #1A1848;
  --ink-2: #43416C;
  --muted: #5A5880;
  --accent: #8F5600;
  --gold: #C8861C;
  --on-accent: #FFFFFF;
  --night: #15133D;
  --on-night: #F2EFFA;
  --on-night-2: #BDBAE0;
  --gold-on-night: #EDB354;
  --ok: #1E6B3A;
  --focus: #1A1848;
  --shadow: 0 1px 2px rgba(26, 24, 72, .06), 0 12px 32px rgba(26, 24, 72, .07);
  --tj-night: #1E1B4F;
  --tj-gold: #C8861C;
  --tj-ink: #1A1848;
  --serif: "Tiro Devanagari Hindi", "Tiro Devanagari Marathi", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Noto Sans", Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0C0B1F;
    --surface: #151433;
    --sunk: #100F29;
    --line: rgba(255, 255, 255, .11);
    --ink: #F2EFFA;
    --ink-2: #CAC7E3;
    --muted: #A5A3C9;
    --accent: #EDB354;
    --gold: #EDB354;
    --on-accent: #1A1848;
    --night: #151433;
    --ok: #7FD19B;
    --focus: #EDB354;
    --shadow: none;
    --tj-night: #2B2870;
    --tj-gold: #EDB354;
    --tj-ink: #F2EFFA;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -64px; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 8px; border: 2px solid var(--ink); z-index: 20; }
.skip:focus { top: 8px; }
/* the gutter is padding-inline, so a page that sets its own padding-top (.doc) is not overridden by the shorthand */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 7.4vw, 4.75rem); line-height: 1.03; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; }
h3 { font-size: 1.5rem; line-height: 1.2; }
/* The one italic is the h1's gold clause, as on Kairos: section headings stay plain. */
h1 em { font-style: italic; color: var(--accent); }
h1 + .lede, h2 + .lede, .sec-head h2 + p { margin-top: 20px; }
/* Devanagari joins its letters: tracking and capitals split them. */
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(mr) h1, :lang(mr) h2, :lang(mr) h3 { letter-spacing: 0; }
:lang(hi) .eyebrow, :lang(mr) .eyebrow, :lang(hi) .kind, :lang(mr) .kind { letter-spacing: 0; text-transform: none; }
p { margin: 0; }
.lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); max-width: 34rem; }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.fine { font-size: .8125rem; line-height: 1.5; color: var(--muted); margin-top: 16px; }
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { max-width: 40rem; margin-bottom: 40px; }
.sec-head h2 + p { color: var(--ink-2); font-size: 1.125rem; }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header */
.top { position: relative; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); border-radius: 8px; }
.brand svg { width: 128px; height: auto; display: block; }
nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
nav a.link { color: var(--ink-2); text-decoration: none; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 99px; font-weight: 600; font-size: .9375rem; }
nav a.link:hover { color: var(--ink); background: var(--sunk); }
nav a.link.pill { border: 1px solid var(--line); color: var(--ink); }
.nav-wide { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 99px; font: 600 1rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1px solid var(--ink); transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--ground); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 32px; }

/* hero: the line, and the chakra with the doors orders come in by */
.hero { padding: 56px 0 96px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 0; }
.dial-box { display: flex; flex-direction: column; align-items: center; position: relative; }
.dial { width: 100%; height: auto; max-width: 600px; display: block; margin: 0 auto; overflow: visible; }
/* Pause motion: the chakra turns for minutes, so a visitor can stop it (WCAG 2.2.2). A checkbox, so it needs no script. */
.pause-in { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pause-btn { order: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); font-weight: 600; font-size: .875rem; cursor: pointer; user-select: none; }
.pause-btn:hover { border-color: var(--ink); color: var(--ink); }
.pause-btn::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pause-btn .play { display: none; }
.pause-in:checked + .pause-btn::before { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.pause-in:checked + .pause-btn .play { display: inline; }
.pause-in:checked + .pause-btn .stop { display: none; }
.pause-in:focus-visible + .pause-btn { outline: 3px solid var(--focus); outline-offset: 3px; }
.pause-in:checked ~ .dial .spin, .pause-in:checked ~ .dial .arrive { animation-play-state: paused; }
.dial .spoke { stroke: var(--line); stroke-width: 1.5; }
.dial .orbit { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dial .orbit.dash { stroke-dasharray: 2 7; stroke-linecap: round; }
.dial .halo { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .5; }
.dial .node { fill: var(--gold); stroke: var(--ground); stroke-width: 3; }
.dial text { font-family: var(--sans); font-size: 21px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--ground); stroke-width: 7px; stroke-linejoin: round; }
.dial .spin { transform-box: fill-box; transform-origin: center; animation: turn 54s linear 3; }
.dial .arrive { animation: arrive 1.1s cubic-bezier(.2, .7, .2, 1) both; transform-box: fill-box; transform-origin: center; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes arrive { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* what you get: numbered, ruled, no boxes */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 56px; counter-reset: row; }
.rows li { border-top: 1px solid var(--line); padding: 28px 0 32px; display: grid; grid-template-columns: 52px 1fr; gap: 0 8px; }
.rows li::before { counter-increment: row; content: counter(row); font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--accent); }
.rows h3 { margin-bottom: 8px; }
.rows p { color: var(--ink-2); }

/* an order, start to finish */
.split { display: grid; gap: 48px; align-items: center; }
.chat-wrap { display: flex; flex-direction: column; align-items: center; position: relative; }
.phone { margin: 0; width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; }
.phone-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.phone-bar b { display: block; line-height: 1.2; }
.phone-bar small { color: var(--muted); font-size: .8125rem; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tj-night); color: var(--gold-on-night); display: grid; place-items: center; font-family: var(--serif); font-size: 1.25rem; }
.chat { padding: 20px 16px 22px; display: grid; gap: 12px; background: var(--sunk); }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: .9688rem; line-height: 1.45; }
.msg.out { justify-self: end; background: var(--tj-night); color: var(--on-night); border-bottom-right-radius: 5px; }
.msg.in { justify-self: start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; width: 88%; }
.msg ul { list-style: none; margin: 8px 0; padding: 0; }
.msg li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.msg .tot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; }
.chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.chip.solid { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.num { font-variant-numeric: tabular-nums; }

/* the order demo: a calm loop, one 12 s timeline that every part follows.
   Without motion the base styles below are the finished story, buyer's phone then shop's app, standing still. */
.phone-bar .who { margin-left: auto; flex: none; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.scene { display: flex; flex-direction: column; }
.scene .chat { flex: 1; align-content: start; }
.scene + .scene { border-top: 1px solid var(--line); }
.demo .slot { display: grid; justify-items: end; }
.demo .slot > * { grid-area: 1 / 1; }
.demo .typing, .demo .st-new { display: none; }
.demo .typing { gap: 5px; align-items: center; padding: 14px 16px; }
.demo .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-night-2); }
.demo .msg.card { width: 88%; }
.demo .reply { display: flex; align-items: flex-start; gap: 8px; }
.demo .ck { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.demo .oh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.demo .state { display: grid; justify-items: end; }
.demo .st { grid-area: 1 / 1; padding: 2px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; }
.demo .st-new { border: 1px solid var(--line); color: var(--ink-2); }
.demo .st-ok { background: var(--tj-night); color: var(--on-night); }
.demo .status { justify-self: start; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-weight: 600; font-size: .9375rem; }
.demo .status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.demo .chip.tap { position: relative; }
.demo .chip.tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .demo { --play: running; --loop: 12s; }
  .demo.idle { --play: paused; }
  .pause-in:checked ~ .demo { --play: paused; }
  .pause-in:focus-visible + .pause-btn { outline: 3px solid var(--focus); outline-offset: 3px; }
  .demo .scenes { display: grid; }
  .demo .scene { grid-area: 1 / 1; border-top: 0; }
  .demo .typing { display: flex; }
  .demo .st-new { display: block; }
  .demo *, .demo *::after { animation-duration: var(--loop); animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; animation-play-state: var(--play); }
  .demo .sc-buyer { animation-name: sc-buyer; }
  .demo .sc-shop { animation-name: sc-shop; }
  .demo .typing { animation-name: d-typing; }
  .demo .typing i { animation: d-bob 1.2s ease-in-out infinite; animation-play-state: var(--play); }
  .demo .typing i:nth-child(2) { animation-delay: .15s; }
  .demo .typing i:nth-child(3) { animation-delay: .3s; }
  .demo .say { animation-name: d-say; }
  .demo .sc-buyer .card { animation-name: d-card-b; }
  .demo .sc-buyer .chips { animation-name: d-dim-b; }
  .demo .sc-buyer .chip.tap { animation-name: d-press-b; }
  .demo .sc-buyer .chip.tap::after { animation-name: d-ring-b; }
  .demo .reply { animation-name: d-reply; }
  .demo .ocard { animation-name: d-card-s; }
  .demo .st-new { animation-name: d-new; }
  .demo .st-ok { animation-name: d-ok; }
  .demo .sc-shop .chips { animation-name: d-dim-s; }
  .demo .sc-shop .chip.tap { animation-name: d-press-s; }
  .demo .sc-shop .chip.tap::after { animation-name: d-ring-s; }
  .demo .status { animation-name: d-status; }
}
@keyframes sc-buyer { 0%, 63% { opacity: 1; } 66%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-shop { 0%, 66% { opacity: 0; } 69%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes d-bob { 0%, 55%, 100% { transform: none; opacity: .55; } 28% { transform: translateY(-3px); opacity: 1; } }
@keyframes d-typing { 0% { opacity: 0; } 3%, 14% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes d-say { 0%, 14% { opacity: 0; transform: translateY(8px); } 18%, 96% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes d-card-b { 0%, 24% { opacity: 0; transform: translateX(-20px); } 29%, 96% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-20px); } }
@keyframes d-dim-b { 0%, 40% { opacity: 1; } 44%, 96% { opacity: .5; } 97%, 100% { opacity: 1; } }
@keyframes d-press-b { 0%, 37% { transform: none; } 39.5% { transform: scale(.92); } 42%, 100% { transform: none; } }
@keyframes d-ring-b { 0%, 37% { opacity: 0; transform: scale(.4); } 38.5% { opacity: .9; transform: scale(.6); } 45%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes d-reply { 0%, 44% { opacity: 0; transform: translateY(8px); } 48%, 96% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes d-card-s { 0%, 69% { opacity: 0; transform: translateY(14px); } 73%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes d-new { 0%, 78% { opacity: 1; } 80%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes d-ok { 0%, 78% { opacity: 0; } 80%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes d-dim-s { 0%, 80% { opacity: 1; } 84%, 96% { opacity: .5; } 97%, 100% { opacity: 1; } }
@keyframes d-press-s { 0%, 76% { transform: none; } 78.5% { transform: scale(.92); } 81%, 100% { transform: none; } }
@keyframes d-ring-s { 0%, 76% { opacity: 0; transform: scale(.4); } 77.5% { opacity: .9; transform: scale(.6); } 84%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes d-status { 0%, 84% { opacity: 0; transform: translateY(8px); } 88%, 97% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(8px); } }

/* who it is for */
.tags { list-style: none; margin: 0 0 44px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tags a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.tags a::after { content: "→"; color: var(--accent); transition: transform .15s ease; }
.tags a:hover { border-color: var(--ink); background: var(--sunk); color: var(--ink); }
.tags a:hover::after { transform: translateX(3px); }
.tags a:active { background: var(--line); }
.tags a:focus-visible { border-radius: 99px; border-color: var(--ink); color: var(--ink); }
.shops { display: grid; gap: 0 32px; }
.shop { border-top: 2px solid var(--gold); padding: 20px 0 28px; }
.shop .kind { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 12px; }
.shop { position: relative; }
.shop p { color: var(--ink-2); }
.shop p.kind { color: var(--muted); }
.shop h3 a { color: inherit; text-decoration: none; }
/* the whole card is the link: the heading's link stretches over it */
.shop h3 a::after { content: ""; position: absolute; inset: 0; }
.shop h3 a:focus-visible { outline: none; }
.shop h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 8px; }
.shop .more { margin-top: 14px; font-weight: 600; font-size: .9375rem; color: var(--accent); }
.shop .more span { display: inline-block; transition: transform .15s ease; }
.shop:hover { border-top-color: var(--accent); }
.shop:hover h3 a { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.shop:hover .more span { transform: translateX(3px); }

/* a page for one kind of shop */
.sector { padding: 24px 0 72px; }
.sector h1 { font-size: clamp(2.25rem, 6vw, 3.875rem); max-width: 18ch; }
.sector .lede { max-width: 38rem; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 20px; color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none; border-radius: 99px; }
.crumb:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
#others .sec-head { margin-bottom: 24px; }
#others h2 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* trust */
.checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.profile { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 28px; max-width: 460px; width: 100%; justify-self: center; }
.profile .row { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.profile h3 { margin-bottom: 2px; }
.profile .row small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; margin-bottom: 6px; }
.tick { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--accent); }
.tick svg { width: 20px; height: 20px; }
.profile dl { margin: 0; }
.profile dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.profile dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.profile dt { color: var(--muted); }
.profile dd { margin: 0; font-weight: 600; text-align: right; }

/* payments and catalogue */
.two { display: grid; gap: 0 56px; }
.two article { border-top: 1px solid var(--line); padding: 28px 0 8px; }
.two h3 { margin-bottom: 10px; }
.two p { color: var(--ink-2); }

/* pricing: a night panel in both themes */
#pricing { padding: 56px 0; border-top: 0; }
.panel { background: var(--night); color: var(--on-night); border-radius: 32px; padding: 40px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; position: relative; overflow: hidden; }
/* a grid item may not grow past the panel, so the table scrolls inside .tablewrap rather than being clipped */
.panel > * { min-width: 0; }
.price .intro { margin-top: 24px; color: var(--on-night-2); }
@media (prefers-color-scheme: dark) { .panel { border: 1px solid var(--line); } }
.panel .eyebrow { color: var(--on-night-2); }
.panel a { color: var(--gold-on-night); }
.price .big { font-family: var(--serif); font-size: clamp(3rem, 11vw, 5.5rem); line-height: 1; margin: 20px 0 14px; color: var(--gold-on-night); letter-spacing: -.02em; }
.price .big small { font-family: var(--sans); font-size: .22em; letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); margin: 0 .5em; vertical-align: middle; }
.price .basis { color: var(--on-night-2); }
.price ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.price li { display: flex; gap: 12px; align-items: flex-start; }
.price svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--gold-on-night); }
.tablewrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 18px 20px 6px; font-family: var(--serif); font-size: 1.25rem; color: var(--on-night); }
th, td { padding: 14px 20px; text-align: right; border-top: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
thead th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--on-night-2); border-top: 0; }
tbody th { text-align: left; font-weight: 600; }
td.strong { font-weight: 700; color: var(--gold-on-night); }
thead th:first-child { text-align: left; }
.panel .fine { color: var(--on-night-2); }

/* the close */
.final { text-align: center; }
.final .mark { width: 72px; height: 72px; display: block; margin: 0 auto 28px; }
.final .lede { margin-left: auto; margin-right: auto; }
.final .cta-row { justify-content: center; }

/* legal and 404 text pages */
/* padding-top and -bottom only: .wrap owns the side gutters, and the shorthand would zero them */
.doc { padding-top: 40px; padding-bottom: 88px; max-width: 40rem; }
.doc h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: 16px; }
.doc .lede { margin-bottom: 8px; }
.doc .reviewed { font-size: .875rem; color: var(--muted); margin-bottom: 36px; }
.doc h2 { font-size: 1.75rem; margin: 40px 0 12px; }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--accent); }
.doc strong { color: var(--ink); }
.lost { padding: 40px 0 96px; }
.lost .big { font-family: var(--serif); font-size: clamp(6rem, 26vw, 12rem); line-height: 1; color: var(--accent); }
.lost .mark { width: 140px; height: 140px; margin-bottom: 8px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 44px 0 56px; }
footer .wrap { display: grid; gap: 28px; }
footer svg { width: 120px; height: auto; display: block; margin-bottom: 14px; }
footer p { color: var(--muted); font-size: .9375rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
footer a { color: var(--ink-2); font-weight: 600; font-size: .9375rem; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 720px) {
  .wrap { padding-inline: 32px; }
  .nav-wide { display: list-item; }
  .rows { grid-template-columns: 1fr 1fr; }
  .shops { grid-template-columns: repeat(3, 1fr); }
  .two { grid-template-columns: 1fr 1fr; }
  .panel { padding: 56px 48px; }
  footer .wrap { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .split { grid-template-columns: 1fr 1fr; gap: 80px; }
  .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
}
@media (max-width: 520px) {
  section { padding: 56px 0; }
  .dial text { font-size: 24px; }
  .panel { padding: 32px 20px; }
  th, td { padding: 12px 10px; }
  caption { padding: 16px 10px 4px; }
  thead th { letter-spacing: .06em; }
  .cta-row .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .panel { padding: 28px 14px; }
  table { font-size: .9375rem; }
  th, td { padding: 12px 6px; }
  caption { padding: 16px 6px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dial .spin, .dial .arrive { animation: none; }
  .pause-btn { display: none; }
  .btn, .tags a, .tags a::after, .shop .more span { transition: none; }
}

/* The one marker for what is not live yet: the same words on every page. */
.soon { font-family: var(--sans); display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--sunk); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; white-space: nowrap; }
.dial text.sub { font-size: 15px; font-weight: 600; fill: var(--muted); }
@media (max-width: 640px) { .dial text.sub { font-size: 18px; } }