/* overshoot.design: design system v1 tokens (type-editor/src/tokens.css) plus the website's grid and type sizes. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600.woff2) format('woff2'); }

:root { --paper:#ffffff; --field:#f2f2f4; --hover:#ececf0; --line:#e5e5ea; --ink:#1d1d1f; --quiet:#69696e; --accent:#0039a6; --signal:#ff6319; --metric:#ee352e; --anchor:#b933ad; --guide:#6cbe45; --good:#00933c; --warn:#fccc0a; --logo-sq:#0039a6; --shadow-float:0 1px 5px rgba(0,0,0,0.14); --shadow-pop:0 8px 30px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.05); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#1c1c1e; --field:#2c2c2f; --hover:#333337; --line:#38383c; --ink:#f2f2f4; --quiet:#a1a1a6; --accent:#7896d0; --metric:#f26a64; --anchor:#d076c8; --good:#36aa65; --logo-sq:#ffffff; --shadow-float:0 1px 5px rgba(0,0,0,0.5); --shadow-pop:0 8px 30px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.08); } }
:root[data-theme="dark"] { --paper:#1c1c1e; --field:#2c2c2f; --hover:#333337; --line:#38383c; --ink:#f2f2f4; --quiet:#a1a1a6; --accent:#7896d0; --metric:#f26a64; --anchor:#d076c8; --good:#36aa65; --logo-sq:#ffffff; --shadow-float:0 1px 5px rgba(0,0,0,0.5); --shadow-pop:0 8px 30px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.08); color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root { --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif; --accent-soft:color-mix(in srgb,var(--accent) 11%,var(--paper)); --zone:color-mix(in srgb,var(--signal) 28%,transparent); --bearing:color-mix(in srgb,var(--metric) 16%,transparent); --fill-preview:color-mix(in srgb,var(--ink) 8%,transparent); --marquee:color-mix(in srgb,var(--accent) 8%,transparent); --good-text:color-mix(in srgb,var(--good) 75%,var(--ink)); --metric-text:color-mix(in srgb,var(--metric) 75%,var(--ink)); --on-line:#1d1d1f;
  /* the grid: 4 columns on phones, 8 on tablets, 12 (72px columns) from 1024px; every measure on the 8px unit */
  --cols:4; --gut:16px; --m:16px; --sec:96px; }
@media (min-width:720px) { :root { --cols:8; --gut:24px; --m:32px; --sec:128px; } }
@media (min-width:1024px) { :root { --cols:12; --m:48px; --sec:160px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); } a:hover { color: color-mix(in srgb,var(--accent) 80%,var(--ink)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; }
.skip:focus { top: 16px; }

.wrap { max-width: 1224px; margin: 0 auto; padding: 0 var(--m); }
.g { display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); column-gap: var(--gut); }

/* type: the design system's scale, plus three web sizes (display, section heading, lede) */
.display { margin: 0; font-weight: 600; font-size: 40px; line-height: 48px; }
.h2 { margin: 0; font-weight: 600; font-size: 28px; line-height: 32px; }
@media (min-width:720px) { .display { font-size: 48px; line-height: 56px; } .h2 { font-size: 32px; line-height: 40px; } }
@media (min-width:1024px) { .display { font-size: 64px; line-height: 72px; } .h2 { font-size: 40px; line-height: 48px; } }
.lede { margin: 0; font-size: 17px; line-height: 28px; color: var(--quiet); }
.label { font: 600 11px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--quiet); }
.caption { font: 400 11px/16px var(--font-sans); color: var(--quiet); }
.body { font: 400 13px/20px var(--font-sans); margin: 0; }
.quiet { color: var(--quiet); }
.bstrong { font: 600 13px/20px var(--font-sans); }
.title { font: 600 15px/20px var(--font-sans); }
kbd { font: 600 11px/16px var(--font-sans); padding: 0 4px; border-radius: 4px; background: var(--field); }

/* logo */
.lk-c { fill: #ff6319; } .lk-s { fill: var(--logo-sq); } .lk-w { fill: var(--ink); }
.band { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; line-height: 0; } .logo svg { height: 24px; width: auto; display: block; }
@media (max-width:479px) { .logo svg { height: 16px; } .band .btn.lg { height: 32px; padding: 0 12px; border-radius: 8px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 8px; background: var(--field); color: var(--ink); font: 600 13px/20px var(--font-sans); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); color: var(--ink); }
.btn.pri { background: var(--accent); color: var(--paper); } .btn.pri:hover { background: var(--accent); color: var(--paper); filter: brightness(1.08); }
.btn.quiet { background: none; font-weight: 400; } .btn.quiet:hover { background: var(--hover); }
.btn.lg { height: 40px; padding: 0 24px; border-radius: 12px; }
.btn.sm { height: 24px; padding: 0 12px; font-size: 11.5px; line-height: 16px; }
.btn.block { width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the stage: the editor's canvas across the full width. Everything floating over it sits on the page grid:
   --edge is where the grid's content starts, --col one column, measured on the full-width stage. */
:root { --edge: max(var(--m), calc((100% - 1224px) / 2 + var(--m))); --col: calc((100% - 2 * var(--edge) - (var(--cols) - 1) * var(--gut)) / var(--cols)); --hp: 4; }
@media (min-width:1024px) { :root { --hp: 5; } }
.stage { position: relative; background: var(--field); }
.stagecv { position: relative; width: 100%; aspect-ratio: 390/330; overflow: hidden; }
@media (min-width:720px) { .stagecv { aspect-ratio: auto; height: 800px; height: clamp(560px, 100svh, 800px); } }
.ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tbar { position: absolute; left: var(--edge); right: var(--edge); top: 16px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.tbar > * { pointer-events: auto; }
.tbar .logo { padding: 0 12px; } .tbar .logo svg { height: 16px; }
.acct { margin-left: auto; }
.acct .btn { border-radius: 999px; }
.tbar .themebtn, .tbar .resetbtn, .tbar .statuspill { position: static; flex: none; }
@media (max-width:719px) { .tbar .statuspill { display: none; } }
@media (max-width:719px) { .acct .quiet { display: none; } }
.pop.hpanel { width: auto; padding: 24px; margin: 0 var(--m); position: relative; top: -32px; z-index: 1; }
.hpanel h1 { margin: 0 0 16px; font-weight: 600; font-size: 40px; line-height: 48px; }
.hpanel .lede { font-size: 15px; line-height: 24px; }
@media (min-width:720px) { .pop.hpanel { position: absolute; left: var(--edge); bottom: 24px; top: auto; margin: 0; width: calc(var(--col) * var(--hp) + var(--gut) * (var(--hp) - 1)); } .hpanel h1 { font-size: 56px; line-height: 64px; } }
.pop.fpanel { position: absolute; right: var(--edge); bottom: 24px; width: calc(var(--col) * 3 + var(--gut) * 2); height: 248px; display: flex; flex-direction: column; }
@media (max-width:1023px) { .pop.fpanel { display: none; } }
.stagecap { margin: 0; padding: 0 var(--m) 24px; }
@media (min-width:720px) { .stagecap { position: absolute; left: var(--edge); right: var(--edge); bottom: -40px; padding: 0; } }
.cv.anim { pointer-events: none; touch-action: auto; }
.mcur { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mring { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hid { display: none !important; }
.pill { fill: var(--metric-text); }
.pill-t { fill: var(--paper); font-family: var(--font-sans); font-weight: 600; text-anchor: middle; }
.cv { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: default; outline: none; }
.cv.c-copy { cursor: copy; } .cv.c-grab { cursor: grab; }
.stagecv:has(.cv:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.nbr { fill: var(--line); }
.ml { fill: none; stroke: var(--metric); stroke-width: 1; vector-effect: non-scaling-stroke; }
.zone { fill: var(--zone); } .bear { fill: var(--bearing); }
.gl { fill: var(--fill-preview); stroke: var(--ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.hlN { fill: none; stroke: var(--quiet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hlS { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hdN { fill: var(--paper); stroke: var(--quiet); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.hdS { fill: var(--accent); stroke: var(--accent); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.cN { fill: var(--accent); }
.cS { fill: var(--accent); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sN { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sS { fill: var(--accent); stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hov { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.4; vector-effect: non-scaling-stroke; }
.segh { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ghost { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.snapl { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mq { fill: var(--marquee); stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lasso { fill: var(--marquee); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.badge { fill: var(--accent); } .badge-t { fill: var(--paper); font-family: var(--font-sans); font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.statuspill { position: absolute; left: var(--edge); top: 72px; height: 40px; padding: 0 16px; display: flex; align-items: center; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow-float); font: 400 13px/20px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.circ { position: absolute; right: var(--edge); top: 72px; width: 40px; height: 40px; border-radius: 999px; border: 0; padding: 0; background: var(--paper); box-shadow: var(--shadow-float); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.formsvg { flex: 1 1 auto; width: 100%; min-height: 0; display: block; margin-top: 8px; }
.fg { fill: var(--ink); }

/* plans keep the section rule: a hairline, then a number */
.feat { margin-top: var(--sec); }
.feat .g { box-shadow: inset 0 1px 0 var(--line); padding-top: 24px; row-gap: 24px; }
.num { grid-column: 1/-1; }
.svgfill { display: block; width: 100%; height: auto; }
.tag { display: inline-flex; align-items: center; height: 16px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 10.5px/16px var(--font-sans); }
.tag.good { background: color-mix(in srgb,var(--good) 12%,transparent); color: var(--good-text); }
.tagsp { margin-left: 8px; vertical-align: 1px; }
.pv { fill: var(--ink); }

/* 01: the preview strip under the canvas, as in the editor */
.strip { background: var(--paper); box-shadow: inset 0 1px 0 var(--line); overflow: hidden; }
@media (min-width:720px) { .strip { margin-top: 56px; } }
.strip .g { padding: 24px 0 48px; row-gap: 24px; align-items: start; }
.stxt { grid-column: 1/-1; }
.stxt .h2 { margin-top: 16px; }
.stxt .body { margin-top: 16px; color: var(--quiet); }
.slines { grid-column: 1/-1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; white-space: nowrap; }
.slines svg { display: block; height: auto; flex: none; }
.sl1 { width: 100%; } .sl2 { width: 62%; } .sl3 { width: 31%; }
@media (min-width:1024px) { .stxt { grid-column: 1/5; } .slines { grid-column: 5/13; } }

/* 02 to 04: side by side on a desktop; one after another, each picture above its text, on smaller screens */
.trio { margin-top: 48px; --ih: 240px; }
@media (min-width:720px) { .trio { --ih: 280px; } }
.row3 { display: flex; flex-direction: column; gap: 64px; }
.col3 { display: flex; flex-direction: column; gap: 16px; }
@media (min-width:1024px) { .row3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gut); } }
.ill3 { height: var(--ih); display: flex; align-items: center; justify-content: center; position: relative; pointer-events: none; user-select: none; -webkit-user-select: none; }
.ill3 .svgfill { max-height: var(--ih); -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent), linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent), linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); mask-composite: intersect; }
.ill3 .tgstage { width: min(100%, calc(var(--ih) * 1.149)); }
@media (max-width:719px) { .lnstack { transform: scale(0.82); } }
.tgtb { position: absolute; top: 0; right: 0; }
.lnstack { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.col3 .num { box-shadow: inset 0 1px 0 var(--line); padding-top: 16px; }
.col3 .h2 { font-size: 28px; line-height: 32px; }
.col3 .lede { font-size: 15px; line-height: 24px; }
.edge { fill: none; stroke: var(--metric); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sp-g { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; animation: spOut 7s ease-in-out infinite, spFill 7s ease-in-out infinite; }
.sp-n { animation: spNodes 7s ease-in-out infinite; }
.illsvg .hl { fill: none; stroke: var(--quiet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.illsvg .hd { fill: var(--paper); stroke: var(--quiet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.illsvg .nc { fill: var(--accent); }
.illsvg .ns { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tb { height: 40px; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow-float); display: inline-flex; align-items: center; padding: 0 4px; }
.tool { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink); flex: none; }
.tool.on { color: var(--accent); }
.tool.ring { color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent); }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.avs { display: inline-flex; padding: 0 4px; }
.av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/16px var(--font-sans); color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.avs .av + .av { margin-left: -4px; }
.c-anchor { background: var(--anchor); } .c-signal { background: var(--signal); color: var(--on-line); } .c-accent { background: var(--accent); }
.pop { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 16px; width: 304px; max-width: 100%; }
.pophead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font: 600 15px/20px var(--font-sans); }
.row { display: flex; align-items: center; gap: 8px; }
.ib { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); flex: none; }
.tgstage { position: relative; }
.pin { position: absolute; left: 32.8%; top: 56.9%; transform: translateY(-100%); min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px 12px 12px 4px; border: 2px solid var(--paper); background: var(--anchor); color: var(--paper); font: 600 11px/20px var(--font-sans); text-align: center; }
.cur { position: absolute; pointer-events: none; display: flex; align-items: flex-start; }
.cur svg { width: 16px; height: 16px; flex: none; }
.cur path { fill: currentColor; stroke: var(--paper); stroke-width: 1.25; stroke-linejoin: round; }
.cur .nm { margin: 12px 0 0 -4px; padding: 0 8px; border-radius: 999px; font: 600 11px/16px var(--font-sans); white-space: nowrap; }
.cur.a { color: var(--anchor); left: 12%; top: 28%; animation: curA 9s ease-in-out infinite; } .cur.a .nm { background: var(--anchor); color: var(--paper); }
.cur.b { color: var(--signal); left: 20%; top: 72%; animation: curB 9s ease-in-out infinite; } .cur.b .nm { background: var(--signal); color: var(--on-line); }
.msg { padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mhead .caption { margin-left: auto; }
.tglyph { font: 400 17px/20px var(--font-sans); margin-right: 8px; }
.lhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ltitle { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ltick { color: var(--good); display: inline-flex; animation: tick 8s infinite; }
.hint { margin: 8px 0 0; }
.lfoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.lfoot .push { margin-left: auto; }
.nextb { animation: nextOn 8s infinite; }
.probs { align-self: flex-end; }
.glabel { margin-bottom: 8px; }
.pcount { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--warn); color: var(--on-line); font: 600 10px/16px var(--font-sans); text-align: center; }
.qrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); animation: rowIn 8s infinite; }
.qrow.r2 { animation-delay: 0.4s; }
.qdot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; margin-top: 6px; }
.qg { font: 400 17px/20px var(--font-sans); width: 16px; text-align: center; flex: none; }
.qt { flex: 1; min-width: 0; }

/* plans and sign-up */
.plans .g { row-gap: 0; }
.ptxt { grid-column: 1/-1; margin-top: 24px; }
.ptxt .lede { margin-top: 16px; }
@media (min-width:720px) { .ptxt { grid-column: 1/7; } }
.curpick { grid-column: 1/-1; margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; height: 32px; padding: 4px; gap: 0; border-radius: 8px; background: var(--field); }
.seg button { height: 24px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 400 13px/20px var(--font-sans); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); font-weight: 600; box-shadow: var(--shadow-float); }
.pcards { grid-column: 1/-1; display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); column-gap: var(--gut); row-gap: var(--gut); margin-top: 24px; align-items: start; }
.pcard { grid-column: 1/-1; background: var(--field); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 24px; color: var(--ink); cursor: pointer; }
.pcard:hover, .pcard.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pcard.on { background: var(--accent-soft); cursor: default; }
.pchoose { appearance: none; border: 0; background: none; padding: 0; margin: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 16px; }
.pcard.on .pchoose { cursor: default; }
.pchoose:focus-visible { outline-offset: 8px; border-radius: 4px; }
@media (min-width:1024px) { .pcard { grid-column: auto/span 4; } }
.ph { display: flex; justify-content: space-between; align-items: center; }
.radio { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--quiet); flex: none; }
.pcard.on .radio { box-shadow: inset 0 0 0 5px var(--accent); background: var(--paper); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.amt { font-weight: 600; font-size: 40px; line-height: 48px; font-variant-numeric: tabular-nums; }
.psub { display: block; font: 400 13px/20px var(--font-sans); color: var(--quiet); }
.fl { display: flex; flex-direction: column; gap: 8px; }
.fi { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/20px var(--font-sans); }
.fi svg { flex: none; margin-top: 2px; color: var(--quiet); }
.su { box-shadow: inset 0 1px 0 color-mix(in srgb,var(--accent) 20%,transparent); padding-top: 24px; }
.su .surow { flex-direction: column; }
.su .fld { flex: none; background: var(--paper); }
.su .btn:not(.pri) { background: var(--paper); }
.su .btn:not(.pri):hover { background: var(--hover); }
.flbl { display: block; margin-bottom: 8px; }
.surow { display: flex; flex-wrap: wrap; gap: 8px; }
.fld { flex: 1 1 200px; height: 40px; border: 0; border-radius: 8px; background: var(--field); padding: 0 12px; font: 400 13px/20px var(--font-sans); color: var(--ink); min-width: 0; }
.fld::placeholder { color: var(--quiet); }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--quiet); font: 400 13px/20px var(--font-sans); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fine { margin: 16px 0 0; }
.ent { grid-column: 1/-1; margin-top: var(--gut); background: var(--field); border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ent .body { margin-top: 4px; }
.ent .btn { background: var(--paper); } .ent .btn:hover { background: var(--hover); }
.vat { grid-column: 1/-1; margin: 16px 0 0; }

/* footer */
.foot { margin-top: var(--sec); }
.foot .g { box-shadow: inset 0 1px 0 var(--line); padding-top: 24px; padding-bottom: 48px; row-gap: 16px; align-items: center; }
.f1, .f2, .f3 { grid-column: 1/-1; }
.f1 svg { height: 14px; width: auto; display: block; }
.f3 { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.f3 a { color: var(--quiet); text-decoration: none; font: 400 13px/20px var(--font-sans); } .f3 a:hover { color: var(--ink); }
@media (min-width:720px) { .f1 { grid-column: 1/3; } .f2 { grid-column: 3/6; } .f3 { grid-column: 6/-1; justify-content: flex-end; } }
@media (min-width:1024px) { .f1 { grid-column: 1/4; } .f2 { grid-column: 4/7; } .f3 { grid-column: 7/13; } }

/* the illustrations move; nothing else does */
@keyframes spOut { 0%,12% { opacity: 0; } 22%,88% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes spFill { 0%,42% { fill-opacity: 0; } 54%,88% { fill-opacity: 1; } 96%,100% { fill-opacity: 0; } }
@keyframes spNodes { 0%,24% { opacity: 0; } 32%,64% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes curA { 0%,100% { left: 12%; top: 28%; } 25% { left: 26%; top: 20%; } 50% { left: 30%; top: 44%; } 75% { left: 10%; top: 52%; } }
@keyframes curB { 0%,100% { left: 20%; top: 72%; } 35% { left: 30%; top: 64%; } 65% { left: 16%; top: 62%; } }
@keyframes tick { 0%,40% { opacity: 0; } 46%,92% { opacity: 1; } 98%,100% { opacity: 0; } }
@keyframes nextOn { 0%,40% { opacity: 0.4; } 46%,92% { opacity: 1; } 98%,100% { opacity: 0.4; } }
@keyframes rowIn { 0%,4% { opacity: 0; } 10%,92% { opacity: 1; } 98%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }