/* Flycket marketing site — V2 "vibrant" variant. Same brand system (BRAND_STYLE_GUIDE v2): Sora +
   DM Sans, Amber #F99E16 = the one primary/CTA colour. V2 difference: jewel-coloured section bands
   for energy + lively colour-blocking, and NO big black/charcoal fills (small dark accents only).
   Saturated jewel bands carry white text (contrast-checked: sapphire/raspberry/emerald pass);
   turquoise & amber appear as light TINT bands with ink text. */

:root {
  --amber: #F99E16;
  --amber-press: #E08A07;
  --raspberry: #C41E3A;
  --sapphire: #1B3FA0;
  --turquoise: #0099A8;
  --emerald: #046A38;
  /* light jewel tints (ink text on these) */
  --sapphire-tint: #EAEEF8;
  --turquoise-tint: #E2F4F6;
  --emerald-tint: #E6F2EC;
  --raspberry-tint: #FBEAEE;
  --amber-tint: #FEF3E0;
  /* neutrals — V4: pure white base (V3 unlock) */
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #21242B;
  --slate: #565E6B;
  --hairline: #ECE7DF;
  --deep: #231A36; /* warmed-charcoal/deep-jewel — the ONE dramatic dark moment (never pure black) */

  --display: 'Sora', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20, 22, 27, 0.08);
  --shadow-lg: 0 24px 60px rgba(27, 63, 160, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration: none; }
img { max-width: 100%; display: block; }
strong { font-weight: 700; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 9vw, 110px) 0; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--slate); }
.eyebrow { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise); margin: 0 0 14px; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

/* ---------- jewel section bands (the V2 signature) ---------- */
.band--paper { background: var(--paper); }
.band--surface { background: var(--surface); }
.band--sapphire-tint { background: var(--sapphire-tint); }
.band--turquoise-tint { background: var(--turquoise-tint); }
.band--emerald-tint { background: var(--emerald-tint); }
.band--amber-tint { background: var(--amber-tint); }
.band--raspberry, .band--sapphire, .band--emerald { color: #fff; }
.band--raspberry { background: var(--raspberry); }
.band--sapphire { background: var(--sapphire); }
.band--emerald { background: var(--emerald); }
.band--raspberry h1, .band--raspberry h2, .band--raspberry h3,
.band--sapphire h1, .band--sapphire h2, .band--sapphire h3,
.band--emerald h1, .band--emerald h2, .band--emerald h3 { color: #fff; }
.band--raspberry .lead, .band--sapphire .lead, .band--emerald .lead { color: rgba(255,255,255,0.82); }
.band--raspberry .eyebrow, .band--sapphire .eyebrow, .band--emerald .eyebrow { color: rgba(255,255,255,0.85); }
/* V4 — deep-jewel band: the single dramatic dark moment (2→137), not black */
.band--deep { background: var(--deep); color: #fff; }
.band--deep h1, .band--deep h2, .band--deep h3 { color: #fff; }
.band--deep .lead { color: rgba(255,255,255,0.82); }
.band--deep .eyebrow { color: rgba(255,255,255,0.85); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-weight: 600; font-size: 1.02rem; padding: 15px 28px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: transform .08s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn--amber { background: var(--amber); color: #1c1206; box-shadow: 0 6px 18px rgba(249, 158, 22, 0.4); }
.btn--amber:hover { background: var(--amber-press); }
.btn--sapphire { background: var(--sapphire); color: #fff; }
.btn--sapphire:hover { background: #16358a; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(33,36,43,0.25); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.textlink { color: var(--sapphire); font-weight: 600; }
.band--raspberry .textlink, .band--sapphire .textlink, .band--emerald .textlink { color: #fff; }
.textlink:hover { text-decoration: underline; }

/* ---------- header (light, translucent) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 242, 0.9); backdrop-filter: saturate(150%) blur(10px); border-bottom: 2px solid var(--amber); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.wordmark { font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--sapphire); }
.wordmark .dot { color: var(--amber); }
/* Header brand lockup: visible amber character + wordmark (real SVGs, no CSS mask). */
.brandmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brandmark-icon { height: 34px; width: auto; display: block; }
.brandmark-word { height: 22px; width: auto; display: block; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.header-cta .btn { padding: 10px 20px; font-size: 0.98rem; }

/* ---------- hero (light, colourful) ---------- */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); background:
  radial-gradient(900px 380px at 88% -8%, rgba(0,153,168,0.16), transparent 60%),
  radial-gradient(760px 340px at -6% 12%, rgba(196,30,58,0.12), transparent 60%), var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero h1 .hl { color: var(--raspberry); }
.hero .tagline { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--sapphire); margin: 0 0 14px; }
.hero .whatitis { font-size: clamp(1.08rem, 2vw, 1.22rem); font-weight: 500; color: var(--ink); max-width: 34em; margin: 0 0 18px; }
.hero p.body { font-size: 1.12rem; color: var(--ink); max-width: 36em; }
.hero .btn-row { margin-top: 26px; }

/* ---------- the Flycket CARD device (the signature brand object) ---------- */
.flycket-card { position: relative; background: var(--surface); border-radius: 22px; overflow: hidden; max-width: 360px; margin: 0 auto; border: 1px solid var(--hairline); box-shadow: 0 30px 70px rgba(27,63,160,0.20), 0 4px 14px rgba(20,22,27,0.08); }
.flycket-card .fc-hero { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--raspberry), var(--amber)); display: flex; align-items: flex-end; padding: 16px; color: #fff; }
.flycket-card .fc-herotext { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.05; text-shadow: 0 1px 10px rgba(0,0,0,0.20); }
.flycket-card .fc-chip { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.92); color: #1c1206; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.flycket-card .fc-body { padding: 18px 20px 20px; }
.flycket-card .fc-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sapphire); margin-bottom: 5px; }
.flycket-card .fc-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; margin-bottom: 6px; color: var(--ink); }
.flycket-card .fc-meta { color: var(--slate); font-size: 0.92rem; margin-bottom: 16px; }
.flycket-card .fc-claim { width: 100%; background: var(--amber); color: #1c1206; border: 0; border-radius: 13px; font-family: var(--body); font-weight: 700; font-size: 1.05rem; padding: 14px; cursor: pointer; box-shadow: 0 6px 16px rgba(249,158,22,0.4); }
.flycket-card .fc-claim:hover { background: var(--amber-press); }
.flycket-card .fc-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-top: 14px; }

/* hero: two real Flycket renders, side by side (slight fan), static + non-clickable */
.example-cards { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.ex-card { margin: 0; flex: 1 1 0; max-width: 232px; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(27,63,160,0.18), 0 4px 14px rgba(20,22,27,0.08); }
.ex-card img { display: block; width: 100%; height: auto; }
.example-cards .ex-card:first-child { transform: rotate(-2.5deg); }
.example-cards .ex-card:last-child  { transform: rotate(2.5deg); }
.example-label { text-align: center; margin: 18px 0 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }

/* closing: the single claimable Flycket render — a real card that links to the live DL */
.claimable-card { display: inline-block; width: 260px; max-width: 100%; border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 26px 60px rgba(0,0,0,0.28), 0 4px 14px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.claimable-card img { display: block; width: 100%; height: auto; }
.claimable-card:hover { transform: translateY(-4px); box-shadow: 0 34px 72px rgba(0,0,0,0.34), 0 6px 18px rgba(0,0,0,0.2); }
.claimable-hint { display: block; text-align: center; background: var(--amber); color: #1c1206; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; padding: 11px; }

/* ---------- proof stat ---------- */
.proof { text-align: center; }
.proof .stat { font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 16vw, 9rem); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.proof .stat .arrow, .proof .stat .to { color: var(--amber); }
.proof .kicker { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--amber); margin-bottom: 6px; }
.proof .sub { max-width: 40em; margin: 18px auto 0; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.step { background: var(--surface); border: 1px solid var(--hairline); border-top: 4px solid var(--turquoise); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; font-family: var(--display); font-weight: 800; color: #fff; margin-bottom: 16px; }
.step:nth-child(1) .num { background: var(--raspberry); } .step:nth-child(1) { border-top-color: var(--raspberry); }
.step:nth-child(2) .num { background: var(--sapphire); } .step:nth-child(2) { border-top-color: var(--sapphire); }
.step:nth-child(3) .num { background: var(--emerald); } .step:nth-child(3) { border-top-color: var(--emerald); }
.step h3 { margin-bottom: 8px; } .step p { margin: 0; color: var(--slate); font-size: 1rem; }

/* ---------- callout ---------- */
.callout { background: #fff; border: 1px solid var(--hairline); border-left: 6px solid var(--amber); border-radius: 12px; padding: 24px 26px; margin-top: 32px; box-shadow: var(--shadow); }
.callout h3 { margin-bottom: 8px; } .callout p { margin: 0; color: var(--slate); }

/* ---------- pull quote ---------- */
.pullquote { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.2; max-width: 22em; margin: 0; color: var(--sapphire); }
.pullquote .accent { color: var(--amber); }
.pullquote .small { display: block; font-family: var(--body); font-weight: 400; font-size: 1.05rem; color: var(--slate); margin-top: 14px; line-height: 1.55; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip { font-weight: 600; font-size: 0.95rem; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5); color: #fff; }

/* ---------- examples grid ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 32px; }
.usecard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.usecard h3 { font-size: 1.08rem; margin-bottom: 8px; }
.usecard h3 .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 9px; vertical-align: middle; }
.usecard p { margin: 0; color: var(--slate); font-size: 1rem; }
.result-callout { margin-top: 30px; background: var(--emerald); color: #fff; border-radius: var(--radius); padding: 30px 32px; }
.result-callout h3 { color: #fff; margin-bottom: 10px; } .result-callout p { color: rgba(255,255,255,0.85); margin: 0; }
.result-callout .big { color: var(--amber); font-weight: 700; }

/* ---------- two-col generic ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }

/* ---------- placeholders ---------- */
.placeholder { border: 2px dashed var(--sapphire); border-radius: var(--radius); background: repeating-linear-gradient(45deg, #eef2fb, #eef2fb 14px, #e4ebf8 14px, #e4ebf8 28px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; color: var(--slate); min-height: 200px; }
.placeholder .ph-label { font-family: var(--display); font-weight: 700; color: var(--sapphire); margin-bottom: 6px; }
.placeholder .ph-note { font-size: 0.92rem; max-width: 30em; }
.placeholder--video { aspect-ratio: 16 / 9; min-height: 0; }
.placeholder--dash { aspect-ratio: 16 / 10; min-height: 0; }

/* ---------- free band ---------- */
.free-band { text-align: center; }
.free-band .big-free { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4rem); }
.free-band .big-free .accent { color: var(--amber); }

/* ---------- closing ---------- */
.closing .secondary { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.22); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.badges { display: flex; gap: 14px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.badges img { height: 48px; width: auto; }
.badges a.badge-todo { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 2px dashed rgba(255,255,255,0.5); border-radius: 10px; color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 600; }

/* ---------- footer (LIGHT — no big dark block) ---------- */
.site-footer { background: var(--surface); color: var(--slate); padding: 56px 0 40px; border-top: 4px solid var(--amber); }
.site-footer a { color: var(--slate); } .site-footer a:hover { color: var(--sapphire); }
.footer-top { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.footer-tag { font-family: var(--display); font-weight: 700; color: var(--sapphire); font-size: 1.05rem; max-width: 16em; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links .col h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); margin-bottom: 12px; font-family: var(--body); font-weight: 700; }
.footer-links .col a { display: block; margin-bottom: 8px; font-size: 0.95rem; }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--slate); }
.footer-bottom .for-agencies-link { color: var(--sapphire); font-weight: 600; }

/* ---------- agency page ---------- */
.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(800px 360px at 90% -10%, rgba(27,63,160,0.14), transparent 60%), var(--paper); }
.winlist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.winlist li { background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--turquoise); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); }
.winlist li:nth-child(3n+1) { border-left-color: var(--raspberry); }
.winlist li:nth-child(3n+2) { border-left-color: var(--sapphire); }
.winlist li:nth-child(3n+3) { border-left-color: var(--emerald); }
.winlist li strong { display: block; margin-bottom: 4px; } .winlist li span { color: var(--slate); font-size: 0.98rem; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .steps, .grid2, .winlist { grid-template-columns: 1fr; }
  .closing .secondary { grid-template-columns: 1fr; }
  .header-cta .hide-sm { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .btn { width: 100%; justify-content: center; }
  .header-cta .btn { width: auto; }
}
/* ---------- §8b — three parts: apps = homescreen tiles, website = URL-pill ---------- */
.threeparts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; align-items: stretch; }
.tp-card { background: var(--surface); border: 1px solid var(--hairline); border-top: 4px solid var(--hairline); border-radius: 16px; padding: 24px 22px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tp-card.admin  { border-top-color: var(--raspberry); }  /* Admin = raspberry */
.tp-card.dash   { border-top-color: var(--sapphire); }   /* Dash = sapphire */
.tp-card.wallet { border-top-color: var(--amber); }      /* Wallet = amber */
.tp-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 8px; }
.tp-card p { color: var(--slate); font-size: 0.98rem; flex: 1 1 auto; margin: 0; }
.tp-cta { margin-top: 18px; }                 /* bottom-aligned: the flex:1 p above pushes it down */
.tp-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.tp-badges img { height: 44px; width: auto; }

/* identity row — fixed height + bottom-anchored so the descriptor (.tp-tag) row LEVELS across panes */
.app-id { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 10px; margin-bottom: 18px; }
.admin-id { align-items: center; }            /* Admin lozenge: centred in the pane (matches Dash/Wallet) */
.app-tile { width: 84px; height: 84px; border-radius: 21px; background: #fff; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(20,22,27,0.14); }
.app-tile img { width: 60px; height: 60px; }
/* one-row home-screen app label — uniform size, coloured to its icon, all-caps Promo */
.app-name { font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; font-size: 1.05rem; line-height: 1; }
.tp-card.wallet .app-name { color: var(--amber-press); } /* Wallet label = deeper amber for legibility; tile/icon stays true amber */
.tp-card.dash   .app-name { color: var(--sapphire); } /* Dash label = sapphire */

/* website identity — a URL-pill (raspberry), same scale, distinct from the app tiles */
.web-lozenge { display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px 14px 14px; border-radius: 23px; background: #fff; border: 1.5px solid var(--raspberry); box-shadow: 0 10px 24px rgba(20,22,27,0.10); }
.web-lozenge .lozenge-icon { width: 48px; height: 48px; flex: none; }   /* size the icon only — NOT the wordmark (B-V4 regression: a blanket .web-lozenge img rule squashed the wide wordmark SVG) */
.web-lozenge .promo { font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; color: var(--raspberry); font-size: 1.15rem; }

@media (max-width: 860px) { .threeparts { grid-template-columns: 1fr; } }
/* §8b Admin "Sign up" — raspberry (matches Admin accent), centred, same height as the store badges */
.btn--raspberry { background: var(--raspberry); color: #fff; box-shadow: 0 6px 18px rgba(196,30,58,0.32); }
.btn--raspberry:hover { background: #a8182f; }
.tp-badges { justify-content: center; }                 /* centre Wallet/Dash badges */
.tp-cta { text-align: center; }                          /* centre the Admin button to match */
.tp-cta .btn { height: 44px; padding: 0 22px; }          /* = the 44px store-badge graphics */

/* ---------- agency contact form (/for-agencies) ---------- */
.agency-form { margin-top: 28px; display: grid; gap: 16px; }
.af-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.agency-form label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.agency-form .opt { color: var(--slate); font-weight: 400; }
.agency-form input[type=text], .agency-form input[type=email], .agency-form textarea {
  width: 100%; margin-top: 6px; font: inherit; font-weight: 400; padding: 12px 14px;
  border: 1px solid var(--hairline); border-radius: 10px; background: #fff; color: var(--ink); }
.agency-form input:focus, .agency-form textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.agency-form textarea { resize: vertical; }
.af-chips { border: 0; padding: 0; margin: 0; }
.af-chips legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 10px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check { display: inline-block; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-block; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.chip-check input:checked + span { background: var(--amber); border-color: var(--amber); color: #1c1206; }
.chip-check input:focus-visible + span { outline: 2px solid var(--sapphire); }
.af-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.af-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.af-status { font-size: 0.92rem; font-weight: 600; }
.af-status.ok { color: var(--emerald); } .af-status.err { color: var(--raspberry); }
.af-note { font-size: 0.82rem; color: var(--slate); margin: 0; }
.af-note code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
@media (max-width: 600px) { .af-row { grid-template-columns: 1fr; } }

/* Wordmarks as outlined SVGs — NO web font served (Promo @font-face removed). Standalone FLYCKET uses a
   CSS mask so it inherits the contextual text colour (currentColor); product wordmarks are coloured SVGs. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wordmark { display: inline-block; width: 104px; height: 26px; padding: 0; background-color: currentColor;
  -webkit-mask: url(/brand/flycket-wordmark.svg) left center / contain no-repeat;
          mask: url(/brand/flycket-wordmark.svg) left center / contain no-repeat; }
.app-wordmark { height: 20px; width: auto; display: block; }
.lozenge-wordmark { height: 20px; width: auto; display: block; }   /* match .app-wordmark — "Flycket Admin" same size + colour as Dash/Wallet wordmarks (single raspberry SVG) */