/* Marketing site (the homepage), after the recapi-design skill's reference
   homepage. Colours, type, radii and spacing come from tokens.css. */

/* A few page-only shades the tokens don't name: tints of the brand colours
   and the ground of the navy bands, which stay navy in every theme. */
:root {
  --hp-hairline: #ECE8DF;
  --hp-orange-ring: #FFD9C2;
  --hp-sky-ring: #CFE6FB;
  --hp-sky-faint: #F2F8FE;
  --hp-veil: rgba(255, 255, 255, 0.55);
  --hp-header: rgba(248, 246, 241, 0.92);
  --navy: #13202E;
  --navy-raised: #17202B;
  --navy-line: #26313E;
  --navy-sky: #24496E;
  --navy-text: #C9D0DA;
  --navy-muted: #A9B2BD;
  --navy-outline: #66707D;
  --code-comment: #B5BFCC;
  --shadow-float: 0 1px 2px rgba(19, 32, 46, 0.04), 0 8px 24px rgba(19, 32, 46, 0.08);
  --shadow-code: 0 2px 4px rgba(19, 32, 46, 0.08), 0 18px 40px rgba(19, 32, 46, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.hp { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
:where(.hp) a { color: var(--sky-text); }
.hp a:focus-visible, .hp button:focus-visible, .hp summary:focus-visible, .hp input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hp button { font: inherit; cursor: pointer; }
:where(.hp) :where(h1, h2, h3, p) { margin: 0; }
.hp svg { flex: none; }
/* Decoration may bleed past a band's edge; it never widens the page. */
.hp main { overflow-x: clip; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; background: var(--surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.skip:focus { top: var(--space-4); }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }
.sec { padding: 112px 0; border-top: 1px solid var(--hp-hairline); background: var(--canvas); }
.sec.alt { background: var(--surface); }
.sec-tight { padding: 88px 0; }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto var(--space-7); }
.sec-head.flush { margin-bottom: 0; }
.sec-head .lead { margin-left: auto; margin-right: auto; max-width: 680px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--hp-orange-ring); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); margin: 0 0 20px; }
.eyebrow::before { content: ""; width: 22px; height: 15px; flex: none; background: url("favicon.svg") center / contain no-repeat; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; letter-spacing: -0.035em; color: var(--ink); }
.lead { font-size: 17px; line-height: 28px; color: var(--ink-muted); margin-top: var(--space-4); }
.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ok { color: var(--success); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; text-decoration: none; border: 0; white-space: nowrap; transition: filter 150ms ease; }
.btn:hover { filter: brightness(1.08); }
.hp .btn-primary { background: var(--action); color: var(--on-action); }
.hp .btn-dark { background: var(--navy); color: var(--canvas); }
.hp .btn-outline { background: transparent; color: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--navy-outline); }
.btn-sm { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.btn-md { height: 44px; padding: 0 18px; }

/* The logo: three cards, the same colours on every ground. */
.mark .c1 { fill: var(--orange); }
.mark .c2 { fill: var(--mark-blue); }
.mark .c3 { fill: var(--mark-sky); }
.logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); }
.logo b { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.03em; }

/* Header */
.hd { position: sticky; top: 0; z-index: 5; background: var(--hp-header); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hd-row { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
.hd-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; flex: 1; white-space: nowrap; }
.hd-nav a, .hd-signin { color: var(--ink); text-decoration: none; }
.hd-nav a:hover, .hd-signin:hover { text-decoration: underline; }
.hd-signin { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hd-spacer { flex: 1; display: none; }
.hd-menu { display: none; position: relative; }
.hd-menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); color: var(--ink); }
.hd-menu summary::-webkit-details-marker { display: none; }
.hd-panel { position: absolute; right: 0; top: 48px; min-width: 200px; background: var(--surface); border-radius: 14px; padding: var(--space-2); display: flex; flex-direction: column; box-shadow: var(--shadow-pop); }
.hd-panel a { padding: 10px var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.hd-panel a:hover { background: var(--surface-sunken); }
@media (max-width: 960px) {
  .hd-nav, .hd-signin { display: none; }
  .hd-menu, .hd-spacer { display: block; }
  .hd-row { gap: var(--space-3); }
}
@media (max-width: 400px) { .hero h1 { font-size: 38px; line-height: 42px; } }
@media (max-width: 380px) { .hd-cta { padding: 0 var(--space-3); font-size: 13px; } .logo b { font-size: 20px; } }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 88px; padding-bottom: 112px; }
.hero-copy { flex: 1 1 460px; min-width: 0; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 68px; line-height: 70px; letter-spacing: -0.045em; }
.hero-lead { font-size: 19px; line-height: 30px; color: var(--ink-muted); margin-top: var(--space-5); max-width: 540px; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-free { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: 18px; display: flex; align-items: center; gap: var(--space-2); }
.hero-art { flex: 1 1 480px; min-width: 0; position: relative; padding-bottom: 40px; }
.hero-art::before { content: ""; position: absolute; inset: 24px -20px 0 40px; background: var(--sky); border-radius: 28px; }
.hero-card { position: relative; padding: 22px; margin-right: 20px; }
.hero-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); font-weight: 600; }
.hero-card-head .mono { font-size: 12px; font-weight: 400; color: var(--ink-subtle); }
.hero-items { display: flex; gap: var(--space-3); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.hero-item { flex: 0 0 150px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hero-item.top { flex-basis: 168px; box-shadow: inset 0 0 0 2px var(--orange); }
.hero-item .pic { height: 104px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.hero-item.top .pic { height: 120px; }
.hero-item b { display: block; font-size: 14px; line-height: 18px; margin-top: 10px; }
.hero-item span { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: var(--space-1); }
.tint-orange { background: var(--orange-soft); color: var(--orange-text); }
.tint-sky { background: var(--sky-soft); color: var(--sky-text); }
.tint-blue { background: var(--sky-soft); color: var(--mark-blue); }
.tint-teal { background: var(--success-soft); color: var(--success); }
.tint-amber { background: var(--warning-soft); color: var(--warning); }

/* Catalog marquee */
.catalogs { overflow: hidden; }
.cat-marquee { display: flex; flex-direction: column; gap: var(--space-3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cat-track { display: flex; gap: var(--space-3); width: max-content; margin: 0 0 0 -100px; padding: 0; list-style: none; animation: cat-scroll 90s linear infinite; }
.cat-track.rev { animation-direction: reverse; animation-duration: 100s; margin-left: -40px; }
.cat-marquee:hover .cat-track { animation-play-state: paused; }
@keyframes cat-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cat { flex: none; width: 196px; height: 148px; border-radius: var(--radius-lg); padding: var(--space-4) 18px; display: flex; flex-direction: column; color: var(--ink); }
.cat.cw2 { width: 208px; }
.cat.cw3 { width: 220px; }
.cat.cw4 { width: 260px; }
.cat b { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; letter-spacing: -0.03em; }
.cat span { font-size: 13px; line-height: 18px; margin-top: 2px; }
.cat.paper { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cat.paper span { color: var(--ink-muted); }
.cat.sky { background: var(--sky); }
.cat.sky span { color: var(--sky-text); }
.cat.orange { background: var(--orange); }
.cat.blue { background: var(--mark-blue); color: var(--surface); }
.cat.blue span { color: var(--sky-soft); }
.cat.navy { background: var(--navy); color: var(--canvas); }
.cat.navy span { color: var(--navy-muted); }
.cat.peach { background: var(--orange-soft); }
.cat.peach span { color: var(--orange-text); }
.cat.mid { background: var(--mark-sky); }

/* Navy promise band */
.band { position: relative; overflow: hidden; border-radius: 28px; }
.band-art { position: absolute; height: auto; pointer-events: none; }
.promises { background: var(--navy); padding: var(--space-7) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-6) 0; }
.promises .band-art { right: -70px; bottom: -110px; width: 300px; opacity: 0.18; }
.promise { position: relative; flex: 1 1 260px; min-width: 0; padding: var(--space-2) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.promise + .promise { border-left: 1px solid var(--navy-line); }
.promise h3 { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--canvas); }
.promise p { font-size: 17px; line-height: 26px; color: var(--navy-text); }
.tile { width: 60px; height: 60px; border-radius: var(--radius-lg); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.tile.orange { background: var(--orange); }
.tile.mid { background: var(--mark-sky); }
.tile.white { background: var(--surface); }
.tilt-l { transform: rotate(-5deg); }
.tilt-r { transform: rotate(4deg); }
.tilt-s { transform: rotate(-3deg); }
@media (max-width: 900px) { .promise + .promise { border-left: 0; border-top: 1px solid var(--navy-line); padding-top: var(--space-6); } }

/* How it works: one line per kind of catalog, each its own size */
.wild { position: relative; margin-top: var(--space-6); }
.wild .band-art { right: 0; top: 50%; transform: translateY(-50%); width: min(360px, 40%); }
.wild .band-art .c1 { fill: var(--orange-soft); }
.wild .band-art .c2 { fill: var(--sky-soft); }
.wild .band-art .c3 { fill: var(--hp-sky-faint); }
.wild ul { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-display); font-weight: 500; color: var(--ink-muted); letter-spacing: -0.03em; }
.wild li { display: flex; align-items: center; gap: var(--space-3); }
.wild li > span { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
.wild li:nth-child(odd) > span { background: var(--orange-soft); color: var(--orange-text); }
.wild li:nth-child(even) > span { background: var(--sky-soft); color: var(--mark-blue); }
.wild em { font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-thickness: 0.3em; text-underline-offset: -0.08em; text-decoration-skip-ink: none; }
.wild li:nth-child(odd) em { color: var(--chart-1); text-decoration-color: var(--hp-orange-ring); }
.wild li:nth-child(even) em { color: var(--mark-blue); text-decoration-color: var(--hp-sky-ring); }
.wild .w1 { font-size: 46px; line-height: 52px; }
.wild .w1 > span { width: 60px; height: 60px; transform: rotate(-6deg); }
.wild .w2 { font-size: 26px; line-height: 29px; margin-left: 36%; }
.wild .w2 > span { width: 34px; height: 34px; transform: rotate(5deg); }
.wild .w3 { font-size: 30px; line-height: 34px; margin-left: 9%; }
.wild .w3 > span { width: 39px; height: 39px; transform: rotate(-3deg); }
.wild .w4 { font-size: 52px; line-height: 58px; margin-left: 28%; }
.wild .w4 > span { width: 68px; height: 68px; transform: rotate(7deg); }
.wild .w5 { font-size: 28px; line-height: 31px; margin-left: 3%; }
.wild .w5 > span { width: 36px; height: 36px; transform: rotate(-5deg); }
.wild .w6 { font-size: 38px; line-height: 43px; margin-left: 42%; }
.wild .w6 > span { width: 49px; height: 49px; transform: rotate(4deg); }
.wild li > span svg { width: 55%; height: 55%; }
.adapts { margin: var(--space-7) auto 0; max-width: 820px; text-align: center; background: var(--navy); color: var(--canvas); border-radius: 22px; padding: 28px 36px; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.025em; }
.adapts strong { color: var(--orange); font-weight: 700; }

.loop { position: relative; margin-top: 80px; }
.loop-line { position: absolute; left: 6%; right: 6%; top: 50px; border-top: 2px dashed var(--hp-orange-ring); }
.loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.loop-grid li { position: relative; min-width: 0; background: var(--canvas); border-radius: 20px; padding: var(--space-5); display: flex; flex-direction: column; gap: 14px; }
.loop-grid h3, .step h3, .flavor b, .proof-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.loop-grid h3 { font-size: 22px; line-height: 26px; }
.loop-grid p { font-size: 16px; line-height: 24px; }
.icon52 { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
@media (max-width: 1000px) { .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loop-line { display: none; } }
@media (max-width: 560px) { .loop-grid { grid-template-columns: 1fr; } }
.proof { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); align-items: center; background: var(--canvas); border-radius: 20px; padding: 28px var(--space-6); }
.proof-copy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.proof-title { font-size: 26px; line-height: 32px; }
.proof-copy p { font-size: 17px; line-height: 26px; }
.legend { display: flex; gap: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--chart-1); }
.legend span + span::before { background: var(--chart-2); }
.proof-chart { flex: 1.6 1 420px; min-width: 0; }
.proof-chart svg { width: 100%; height: auto; margin-top: var(--space-3); }
.proof-chart .grid { stroke: var(--line); }
.proof-chart .base-area { fill: var(--sky-soft); }
.proof-chart .base { fill: none; stroke: var(--chart-2); stroke-width: 2.5; }
.proof-chart .ours { fill: none; stroke: var(--chart-1); stroke-width: 3; }
.proof-chart .dot { fill: var(--surface); stroke: var(--chart-1); stroke-width: 3; }
.proof-chart text { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-subtle); }

/* Integrations */
.two { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: stretch; }
.way { flex: 1 1 420px; min-width: 0; padding: 36px; display: flex; flex-direction: column; gap: 20px; border-radius: var(--radius-lg); }
.way h3 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }
.way h3 + p { margin-top: var(--space-2); color: var(--ink-muted); }
.chip { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--orange-soft); color: var(--orange-text); font-size: 13px; font-weight: 600; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 10px; }
.ticks svg { margin-top: var(--space-1); }
.platforms { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-1); }
.platform { display: flex; flex-wrap: wrap; align-items: center; gap: 14px var(--space-4); padding: var(--space-4) 18px; border-radius: 14px; background: var(--canvas); }
.platform > div { flex: 1 1 160px; min-width: 0; }
/* Each platform's own mark, unaltered, on white (their brand rules). */
.platform-logo { flex: none; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; justify-content: center; }
.platform-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 17px; }
.platform-name + div, .more small { font-size: 14px; color: var(--ink-muted); }
.badge-ok { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 600; }
.more { display: flex; align-items: center; gap: 14px; padding: 14px var(--space-4); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
.more > div { flex: 1; }
.more b { display: block; font-weight: 600; }
.more small { display: block; font-size: 13px; }
.more > span { flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-subtle); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.more a { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.way.dark { background: var(--navy); color: var(--canvas); }
.way.dark h3 + p { color: var(--navy-muted); }
.way.dark .chip { background: var(--navy-sky); color: var(--sky-soft); }
.libs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.libs li { flex: 1 1 220px; min-width: 0; display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: var(--navy-raised); }
.libs .mono { flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--navy-sky); color: var(--sky-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.libs b { display: block; font-size: 17px; line-height: 22px; }
.libs small { display: block; font-size: 15px; line-height: 21px; color: var(--navy-muted); margin-top: 2px; }

/* Getting started: the sky band */
.start { background: var(--sky); border-radius: 32px; padding: 72px 64px; }
.start > .band-art { right: -80px; top: -60px; width: 420px; opacity: 0.55; }
.start > .band-art .c1 { fill: var(--surface); }
.start > .band-art .c2, .start > .band-art .c3 { fill: var(--sky-soft); }
.start-head { position: relative; max-width: 680px; }
.start-head .lead, .step p, .flavors > p, .tweak small { color: var(--ink); }
.steps { position: relative; display: flex; flex-direction: column; gap: 36px; margin: 56px 0 0; padding: 0; list-style: none; }
.steps::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 40px; border-left: 2px dashed var(--orange); }
.steps > li { position: relative; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.step { flex: 1 1 300px; min-width: 0; display: flex; gap: 18px; align-items: flex-start; }
.step.full, .code.full { flex-basis: 100%; }
.step h3 { font-size: 24px; line-height: 30px; }
.step p { margin-top: 6px; font-size: 16px; line-height: 24px; }
.num { flex: none; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--orange); color: var(--on-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 28px; }
.code { flex: 1.4 1 420px; min-width: 0; background: var(--code-bg); color: var(--code-ink); border-radius: 16px; overflow: hidden; font-family: var(--font-mono); font-size: 14px; line-height: 22px; box-shadow: var(--shadow-code); }
.code.full { padding: 0; margin-left: 74px; }
.code-bar { display: flex; align-items: center; gap: 6px; padding: 10px var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--code-muted); font-size: 12px; line-height: 16px; }
.code-bar i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--mark-sky); }
.code-bar i:first-child { background: var(--orange); }
.code-bar i:nth-child(2) { background: var(--mark-blue); }
.code-bar span { margin-left: var(--space-2); }
.code pre { margin: 0; padding: var(--space-4) 18px; overflow-x: auto; font: inherit; }
.code .k { color: var(--code-key); }
.code .s { color: var(--code-string); }
.code .c { color: var(--code-comment); }

.flavors { position: relative; margin-top: 80px; }
.flavors h3, .tweaks h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.flavors h3 { font-size: 32px; line-height: 38px; }
.flavors > p { margin-top: var(--space-2); font-size: 17px; line-height: 26px; }
.flav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.flavor { min-width: 0; background: var(--surface); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-float); }
.flavor:nth-child(1) { transform: rotate(-2deg); }
.flavor:nth-child(2) { transform: rotate(1.5deg); }
.flavor:nth-child(3) { transform: rotate(-1deg); }
.flavor:nth-child(4) { transform: rotate(2deg); }
.flavor:nth-child(5) { transform: rotate(-1.5deg); }
.flavor:nth-child(6) { transform: rotate(1.5deg); }
.flavor:nth-child(odd) .icon40 { background: var(--orange-soft); color: var(--orange-text); }
.flavor:nth-child(even) .icon40 { background: var(--sky-soft); color: var(--mark-blue); }
.flavor b { font-size: 18px; line-height: 22px; }
.flavor small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-1); }
.icon40 { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex: none; }
.tweaks { position: relative; margin-top: var(--space-8); background: var(--hp-veil); border-radius: 22px; padding: var(--space-6); }
.tweaks h3 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.tweak-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) 40px; margin: 0; padding: 0; list-style: none; }
.tweak { min-width: 0; display: flex; gap: 14px; align-items: flex-start; }
.tweak .icon40 { border-radius: var(--radius-pill); background: var(--navy); color: var(--code-string); }
.tweak b { display: block; font-size: 17px; line-height: 22px; }
.tweak small { display: block; font-size: 15px; line-height: 22px; margin-top: 2px; }
@media (max-width: 760px) { .flav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tweak-grid { grid-template-columns: 1fr; } }

/* Dashboard */
.stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 28px 0 0; padding: 0; list-style: none; }
.stickers li { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--surface); color: var(--orange-text); font-weight: 600; font-size: 15px; transform: rotate(-3deg); box-shadow: var(--shadow-float); }
.stickers li::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }
.stickers li:nth-child(2) { background: var(--sky-soft); color: var(--mark-blue); transform: rotate(2deg); }
.stickers li:nth-child(3) { background: var(--orange-soft); transform: rotate(-1.5deg); }
.preview { position: relative; max-width: 860px; margin: 40px auto 0; padding: 28px 28px 0; }
.preview::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: -28px; background: var(--sky); border-radius: 28px; }
.preview .card { position: relative; padding: 20px; display: flex; flex-wrap: wrap; gap: 14px; }
.preview .note { flex: 1 1 100%; font-size: 12px; color: var(--ink-subtle); }
.stat { flex: 1 1 150px; border-radius: var(--radius-md); padding: var(--space-4); }
.stat small { display: block; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.stat b { display: block; font-family: var(--font-mono); font-size: 26px; line-height: 32px; font-weight: 500; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--ink-muted); }
.stat.s1 { background: var(--orange-soft); }
.stat.s2 { background: var(--sky-soft); }
.stat.s3 { background: var(--success-soft); }
.bars { flex: 1 1 100%; display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: var(--space-2) var(--space-1) 0; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--sky); }
.bars i:last-child { background: var(--orange); }
.bars i:nth-child(1) { height: 30%; }
.bars i:nth-child(2) { height: 38%; }
.bars i:nth-child(3) { height: 34%; }
.bars i:nth-child(4) { height: 46%; }
.bars i:nth-child(5) { height: 52%; }
.bars i:nth-child(6) { height: 48%; }
.bars i:nth-child(7) { height: 58%; }
.bars i:nth-child(8) { height: 62%; }
.bars i:nth-child(9) { height: 55%; }
.bars i:nth-child(10) { height: 66%; }
.bars i:nth-child(11) { height: 70%; }
.bars i:nth-child(12) { height: 64%; }
.bars i:nth-child(13) { height: 74%; }
.bars i:nth-child(14) { height: 78%; }
.bars i:nth-child(15) { height: 72%; }
.bars i:nth-child(16) { height: 82%; }
.bars i:nth-child(17) { height: 86%; }
.bars i:nth-child(18) { height: 80%; }
.bars i:nth-child(19) { height: 88%; }
.bars i:nth-child(20) { height: 92%; }
.features { display: flex; flex-wrap: wrap; gap: 0 40px; margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.features li { flex: 1 1 320px; min-width: 0; padding: var(--space-5) 0; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
.features li:nth-child(odd) .icon40 { background: var(--orange-soft); color: var(--orange-text); transform: rotate(-3deg); }
.features li:nth-child(even) .icon40 { background: var(--sky-soft); color: var(--mark-blue); transform: rotate(3deg); }
.features h3 { font-size: 17px; line-height: 24px; margin-bottom: 6px; }
.features p { color: var(--ink-muted); }

/* Pricing */
.est-head { margin-top: var(--space-7); text-align: center; }
.est-head h3 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.03em; }
.est-head > p { margin-top: var(--space-2); color: var(--ink-muted); font-size: 16px; }
.presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: var(--space-5) auto 0; max-width: 980px; }
.presets button { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 18px 0 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; border: 0; background: var(--surface-sunken); color: var(--ink); transition: background 150ms ease; }
.presets button:hover { background: var(--line); }
.presets button[aria-pressed="true"] { background: var(--navy); color: var(--canvas); }
.est-note { margin-top: 14px; font-size: 15px; color: var(--ink-muted); min-height: 24px; }
.est { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: 28px; }
.est-sliders { flex: 1.6 1 560px; min-width: 0; padding: 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.slider { display: flex; flex-direction: column; gap: var(--space-3); }
.slider label { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.slider label > span { font-size: 16px; font-weight: 600; display: flex; gap: 10px; }
.slider small { display: block; font-size: 15px; line-height: 21px; font-weight: 400; margin-top: 2px; }
.slider .rate { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); background: var(--surface-sunken); border-radius: 6px; padding: 3px var(--space-2); margin-top: 6px; }
.slider output { font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swatch { width: 12px; height: 12px; border-radius: var(--radius-xs); flex: none; margin-top: 5px; background: var(--swatch); }
.call-recommendation { --swatch: var(--orange); }
.call-event { --swatch: var(--mark-blue); }
.call-popular { --swatch: var(--mark-sky); }
.call-item_write { --swatch: var(--success); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: var(--radius-pill); cursor: pointer; margin: 6px 0; background: linear-gradient(to right, var(--swatch) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(19, 32, 46, 0.18); cursor: grab; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 2px 8px rgba(19, 32, 46, 0.18); cursor: grab; }
.range:active::-webkit-slider-thumb { cursor: grabbing; }
.est-fine { font-size: 13px; line-height: 20px; color: var(--ink-subtle); }
.est-total { flex: 1 1 340px; min-width: 0; background: var(--navy); color: var(--canvas); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.est-total > small { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--code-string); }
.est-total strong { font-family: var(--font-mono); font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.est-total strong.long { font-size: 40px; line-height: 48px; }
.est-total .per, .est-total .vat { font-size: 17px; color: var(--navy-muted); }
.est-total .vat { font-size: 14px; }
.breakdown { display: flex; flex-direction: column; margin: var(--space-2) 0 0; }
.breakdown div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: 16px; border-top: 1px solid var(--navy-line); padding: var(--space-3) 0; }
.breakdown dt { display: flex; align-items: center; gap: 10px; color: var(--code-ink); }
.breakdown dt .swatch { margin-top: 0; }
.breakdown dd { margin: 0; font-family: var(--font-mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.talk { color: var(--navy-text); }
.talk a { color: var(--code-string); }
.est-total .btn { margin-top: auto; }
.est-fallback { margin-top: var(--space-6); text-align: center; color: var(--ink-muted); font-size: 17px; }
.reassure { display: flex; flex-wrap: wrap; gap: var(--space-5) 40px; margin: 40px 0 0; padding: 0; list-style: none; }
.reassure li { flex: 1 1 240px; min-width: 0; display: flex; gap: 10px; }
.reassure svg { margin-top: 3px; }
.reassure b { display: block; font-size: 16px; }
.reassure span { display: block; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* FAQ */
.faq-wrap { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.faq-wrap > div:first-child { flex: 1 1 300px; }
.faq-list { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 22px 0; font-size: 17px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 22px; color: var(--ink-muted); font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin: 0 0 22px; font-size: 15px; line-height: 24px; color: var(--ink-muted); max-width: 720px; }

/* Final call to action */
.final { background: var(--navy); color: var(--canvas); padding: 72px 64px; min-height: 260px; }
.final .band-art { right: -60px; top: -60px; width: 520px; opacity: 0.95; }
.final-copy { position: relative; max-width: 560px; }
.final h2, .final-copy > p { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.035em; }
.final-copy > p { color: var(--orange); }

/* Footer */
.ft { background: var(--canvas); border-top: 1px solid var(--line); }
.ft .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: 40px; font-size: 14px; color: var(--ink-muted); }
.ft .logo b { font-size: 18px; }
.ft nav { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; }
.ft nav a { color: var(--ink-muted); }

/* Sign-up, log-in and early-access pages (_public.html): one card on the
   paper ground, the form fields and buttons of the skill's TextField and
   Button at their auth-screen size. */
body.pub { display: flex; flex-direction: column; min-height: 100vh; }
.hd-fill { flex: 1; }
.pub .hd-signin { display: inline; }
.auth { flex: 1; padding: 72px var(--space-5) 112px; }
.auth-card { max-width: 480px; margin: 0 auto; padding: var(--space-7); }
.auth-card > * + * { margin-top: var(--space-5); }
.auth h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.03em; }
.auth h1 + .lead { margin-top: var(--space-3); }
.auth .lead { font-size: 15px; line-height: 24px; }
.auth-alt { font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
.auth-alt + .auth-alt { margin-top: var(--space-2); }
.auth-fine { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); }
.field small { font-size: inherit; font-weight: 400; color: var(--ink-muted); }
.field input { width: 100%; height: var(--control-lg); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; }
.field input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
.form .btn { width: 100%; height: var(--control-lg); margin-top: var(--space-2); font-weight: 600; }
.alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; color: var(--ink); }
.alert svg { margin-top: 2px; }
.alert-danger { background: var(--danger-soft); }
.alert-danger svg, .alert-danger b { color: var(--danger); }
.alert-info { background: var(--sky-soft); }
.alert-info svg, .alert-info b { color: var(--sky-text); }
@media (max-width: 640px) {
  .auth { padding: 40px var(--space-4) 72px; }
  .auth-card { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 1000px) {
  .final .band-art { width: 300px; top: auto; bottom: -70px; right: -50px; }
  .final { padding-bottom: 200px; }
}
@media (max-width: 760px) {
  .wild ul > li { margin-left: 0 !important; }
  .wild .w1, .wild .w4 { font-size: 30px; line-height: 36px; }
  .wild .w2, .wild .w3, .wild .w5, .wild .w6 { font-size: 22px; line-height: 28px; }
  .wild .band-art { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .sec { padding: 72px 0; }
  .sec-tight { padding: 56px 0; }
  .sec-head { margin-bottom: var(--space-6); }
  .hero h1 { font-size: 44px; line-height: 48px; }
  .hero-art::before { left: var(--space-5); right: 0; }
  .hero-card { margin-right: var(--space-3); }
  .h2 { font-size: 32px; line-height: 36px; }
  .lead { font-size: 16px; line-height: 26px; }
  .promises, .start, .final { padding: 40px var(--space-5); border-radius: var(--space-5); }
  .start > .band-art { display: none; }
  .code.full { margin-left: 0; }
  .est-sliders, .est-total, .way { padding: var(--space-5); }
  .est-total strong { font-size: 48px; line-height: 52px; }
  .adapts { font-size: 22px; line-height: 30px; padding: var(--space-5); }
  .final h2, .final-copy > p { font-size: 34px; line-height: 40px; }
  .final .band-art { width: 220px; bottom: -60px; }
  .final { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cat-track { animation: none; }
  .cat-marquee { overflow-x: auto; }
  .btn, .presets button { transition: none; }
}

/* Icon sizes, per place */
.cat > svg { width: 26px; height: 26px; stroke-width: 1.4; }
.hero-item .pic svg { width: 44px; height: 44px; stroke-width: 1.2; }
.tile svg { width: 28px; height: 28px; stroke-width: 1.5; }
.icon52 svg { width: 24px; height: 24px; stroke-width: 1.5; }
.icon40 svg, .presets svg { width: 18px; height: 18px; }
.wild li > span svg { stroke-width: 1.4; }
.badge-ok svg { width: 12px; height: 12px; margin: 0; }

/* Inner pages: docs, privacy, terms, contact */
.page { padding: 88px 0 112px; }
.page-head { max-width: 760px; margin-bottom: var(--space-7); }
.page-head .h2 { font-size: 56px; line-height: 60px; }
.prose { max-width: 760px; font-size: 16px; line-height: 27px; color: var(--ink); }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; scroll-margin-top: 96px; }
.prose h1 { font-size: 36px; line-height: 42px; margin: var(--space-8) 0 var(--space-4); }
.prose h2 { font-size: 26px; line-height: 32px; margin: var(--space-7) 0 var(--space-3); }
.prose h3 { font-size: 19px; line-height: 26px; margin: var(--space-6) 0 var(--space-2); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table, .prose pre { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-1); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 5px; }
.prose pre { background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-md); padding: var(--space-4) 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 22px; }
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px var(--space-3); border-bottom: 1px solid var(--line); }
.prose th { background: var(--surface-sunken); font-weight: 600; }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--sky); background: var(--sky-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-subtle); }
.draft-note { display: flex; gap: 10px; align-items: flex-start; background: var(--warning-soft); color: var(--ink); border-radius: var(--radius-md); padding: 14px var(--space-4); margin-bottom: var(--space-6); }
.draft-note svg { color: var(--warning); width: 20px; height: 20px; margin-top: 3px; }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.contact-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.contact-card h2 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; }
.contact-card p { color: var(--ink-muted); flex: 1; }
.contact-card small { color: var(--ink-subtle); font-size: 13px; }
.contact-card:target { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--orange); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

.doc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.doc-steps li { padding: var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; }
.doc-steps .num { width: 44px; height: 44px; font-size: 22px; border-radius: var(--radius-md); }
.doc-steps h2 { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-1); }
.doc-steps p { color: var(--ink-muted); }
.doc-steps code, .libs code { font-family: var(--font-mono); font-size: 0.9em; }
.doc-sub { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.03em; margin: var(--space-8) 0 var(--space-5); scroll-margin-top: 96px; }
.libs.light li { background: var(--surface); box-shadow: var(--shadow-card); }
.libs.light .mono { background: var(--sky-soft); color: var(--sky-text); }
.libs.light small { color: var(--ink-muted); }
.doc-code { margin-top: var(--space-5); max-width: 860px; }
.doc-text { max-width: 760px; margin-top: var(--space-5); color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.doc-text p, .doc-text ul { margin: 0 0 var(--space-3); }
.doc-text ul { padding-left: var(--space-5); }
.doc-text li + li { margin-top: var(--space-1); }
.doc-text b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.doc-text code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 1px 5px; color: var(--ink); }
.doc-sec .doc-sub { margin-bottom: 0; }
.lang-group .tablist { display: none; }
.lang-group.tabbed .tablist { display: flex; gap: var(--space-1); padding: 0 var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; }
.lang-group.tabbed .lang-panel .code-bar { display: none; }
.lang-group:not(.tabbed) .lang-panel + .lang-panel { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tablist button { font: inherit; font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--code-muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px var(--space-3) 10px; cursor: pointer; white-space: nowrap; }
.tablist button:hover { color: var(--code-ink); }
.tablist button[aria-selected="true"] { color: var(--code-ink); border-bottom-color: var(--orange); }
.tablist button:focus-visible { outline: 2px solid var(--code-string); outline-offset: -2px; border-radius: var(--radius-xs); }
@media (max-width: 900px) { .doc-steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .page { padding: 56px 0 72px; } .page-head .h2 { font-size: 40px; line-height: 44px; } }