/* ===========================================================================
   Kwikz — marketing layer.

   This file is NOT the design system. The design system is Builds/demo/demo.css:
   the stylesheet the merchant/admin screens were built with. It is served once,
   at /demo.css, and BOTH halves of this website load it — the public marketing
   pages and /dashboard/. One set of tokens, one light/dark pair, one set of
   buttons, chips, tables and fields.

   So the rule for everything below is simple: a rule may only style something
   the marketing pages need and the app does not have. Anything the app already
   styles — .btn, .btn-primary, .btn-sm, .chip, .field, .grid, .chart-head — is
   inherited from demo.css untouched, deliberately, so the two halves cannot
   drift into looking like different products.

   Where the app's class means something *structurally different* in prose (the
   app's .step is a one-line wizard chip, not a marketing step card; its .tabs
   is a real tab bar; its .note is a sidebar caption), the marketing markup was
   renamed rather than fought over: .stepcard, .tabcard, .art-note, .tablebox.
   =========================================================================== */

/* The one token that is ours: the reading measure of a page. */
:root { --wrap: 1160px; }

/* --------------------------------------------------------------- page base
   demo.css owns box-sizing, body colour, body font-family and the link colour.
   What is restated here is only what long-form reading needs: a measure, a
   leading, and the headings and lists demo.css has no opinion about. */

html { scroll-behavior: smooth; scroll-padding-top: 74px; }

/* demo.css gives .btn and .icon-btn an explicit `display`, which outranks the
   user agent's `[hidden] { display: none }` — so any hidden button still painted
   itself. The account area switches on the `hidden` attribute, so the attribute
   has to win. */
[hidden] { display: none !important; }

body { font-size: 15px; line-height: 1.75; }

img { display: block; }

h1, h2, h3, h4 { line-height: 1.4; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px;
}

/* demo.css paints every link with --primary, which is right for the app and for
   prose. A card is a link whose whole surface is the target, so its text keeps
   the page's own colours and only its own affordance is tinted. */
.lcard, .fcard { color: var(--foreground); }
.lcard p, .fcard p { color: var(--muted-fg); }

/* The page-level call to action is the app's .btn, sized up. The app has no
   equivalent, so the size lives here. */
.btn-lg {
  min-height: 46px; padding: 12px 22px;
  font-size: 15px; font-weight: 700; border-radius: 9px;
  justify-content: center;
}

/* ---------------------------------------------------------------- masthead */

.mast {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.mast-in { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.mast-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: var(--foreground); }
.mast-brand img { width: 30px; height: 30px; object-fit: contain; }
.mast-brand b { font-family: var(--font-num); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.mast-links { display: flex; align-items: center; gap: 3px; margin-inline-start: auto; flex-wrap: wrap; }
.mast-links a { padding: 7px 11px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted-fg); }
.mast-links a:hover { background: var(--secondary); color: var(--foreground); }
.mast-links a[aria-current="page"] { color: var(--accent-fg); background: var(--accent); }
.mast-end { display: flex; align-items: center; gap: 8px; margin-inline-start: 6px; }

.icon-btn {
  display: inline-grid; place-items: center;
  inline-size: 36px; block-size: 36px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--foreground); cursor: pointer;
}
.icon-btn:hover { background: var(--secondary); }
.icon-btn svg { inline-size: 17px; block-size: 17px; }

/* The account area: the one door from the public site into the workspace. */
.acct { display: flex; align-items: center; gap: 8px; }
.acct-who { display: grid; gap: 1px; text-align: end; line-height: 1.35; }
.acct-who b { font-size: 12.5px; font-weight: 800; }
.acct-who span { font-size: 11px; color: var(--muted-fg); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 66px 0 56px; }
.hero-in { display: grid; gap: 46px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
/* One or two mockups stack in the hero's second column. */
.hero-viz { display: grid; gap: 18px; align-content: center; min-width: 0; }
.hero h1 { font-size: clamp(30px, 4.2vw, 47px); font-weight: 800; letter-spacing: -.035em; }
.hero-lead { margin-top: 18px; font-size: 17px; line-height: 1.85; color: var(--muted-fg); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted-fg); }

.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--accent-fg); }

/* ---------------------------------------------------------------- sections */

.sect { padding: 62px 0; }
.sect-alt { background: var(--secondary); border-block: 1px solid var(--border); }
.sect-head { max-width: 720px; margin-bottom: 38px; }
.sect-head h2 { font-size: clamp(23px, 2.6vw, 31px); font-weight: 800; letter-spacing: -.03em; }
.sect-head p { margin-top: 14px; font-size: 16px; line-height: 1.85; color: var(--muted-fg); }

.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* Feature card: numbered, like the app's tool cards. */
.fcard {
  display: grid; align-content: start; gap: 9px;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.fcard-n {
  display: inline-grid; place-items: center;
  inline-size: 26px; block-size: 26px; border-radius: 7px;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 800;
}
.fcard h3 { font-size: 16px; font-weight: 700; }
.fcard p { font-size: 14px; line-height: 1.8; }

/* Ticked list — the app's success/feature rows. */
.ticks { display: grid; gap: 10px; }
.tick {
  display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card);
}
.tick svg { inline-size: 20px; block-size: 20px; color: var(--good); margin-top: 3px; }
.tick b { font-weight: 700; }
.tick p { font-size: 14px; line-height: 1.8; color: var(--muted-fg); }

/* Steps as marketing cards. demo.css's .steps/.step are the app's compact
   one-line wizard, so these carry their own names. */
.stepcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.stepcard {
  display: grid; align-content: start; gap: 6px;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.step-n { font-family: var(--font-num); font-size: 11.5px; font-weight: 800; color: var(--primary); }
.stepcard h3 { font-size: 15.5px; font-weight: 700; }
.stepcard p { font-size: 13.5px; line-height: 1.8; color: var(--muted-fg); }

/* A labelled row, the app's spec/detail row at a reading width. */
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.spec-row {
  display: grid; gap: 3px; padding: 15px 16px; align-content: start;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.spec-row b { font-size: 14px; font-weight: 700; }
.spec-row p { margin-top: 4px; font-size: 13.5px; line-height: 1.8; color: var(--muted-fg); }
.spec-row .chip { justify-self: start; margin-top: 8px; }

/* Internal links — arrow cards, the site's main navigation between pages. */
.linkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.lcard {
  display: grid; gap: 7px; align-content: start;
  padding: 19px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.lcard:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lcard h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.lcard h3 svg { inline-size: 15px; block-size: 15px; color: var(--primary); flex-shrink: 0; }
.lcard p { font-size: 13.5px; line-height: 1.8; }
.lcard span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--accent-fg); }
.lcard span svg { inline-size: 13px; block-size: 13px; }

/* Text beside a visual. */
.splitv { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.splitv h2 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.03em; }
.splitv .lead { margin-top: 13px; font-size: 15.5px; line-height: 1.85; color: var(--muted-fg); }
.splitv .ticks { margin-top: 20px; }

/* --------------------------------------------------------------- prose
   An article body, restyled from the semantics the source kept. */
.prose { max-width: 68ch; }
.prose p { margin-top: 15px; font-size: 16px; line-height: 1.9; color: var(--muted-fg); }
.prose p + p { margin-top: 15px; }
.prose h2 { margin: 40px 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.prose h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 700; }
.prose h4 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 700; }
.prose ul, .prose ol { margin-top: 15px; display: grid; gap: 10px; padding-inline-start: 22px; }
.prose ul { list-style: none; padding-inline-start: 22px; }
.prose ol { list-style: decimal; }
.prose li { position: relative; font-size: 16px; line-height: 1.85; color: var(--muted-fg); }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: -18px; top: .68em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--primary);
}
.prose ol li { padding-inline-start: 4px; }
.prose ol li::marker { color: var(--muted-fg); font-weight: 700; }

/* The wording an article offers the reader to copy. */
.prose blockquote {
  margin: 26px 0; padding: 18px 22px;
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--foreground);
  font-size: 16px; font-weight: 600; line-height: 1.85;
}
.prose blockquote p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }

/* A boxed aside inside an article: something to act on, not more prose.
   Renamed from .note, which in demo.css is the app's sidebar caption. */
.art-note {
  margin-top: 30px; padding: 20px 22px;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius); background: var(--secondary);
}
.art-note h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; }
.art-note p { margin-top: 0; font-size: 15px; color: var(--foreground); }
.art-note ul, .art-note ol { margin-top: 12px; gap: 7px; }
.art-note li { font-size: 14.5px; line-height: 1.75; color: var(--muted-fg); }

/* The one shape where a table is the right answer. Scrolls rather than
   overflowing on a phone. demo.css's .table-wrap is a bare scroll container, so
   the framed version carries its own name. */
.tablebox {
  margin-top: 22px; overflow-x: auto; contain: paint;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.tablebox table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.tablebox th, .tablebox td { padding: 12px 15px; text-align: start; border-bottom: 1px solid var(--border); }
.tablebox th { background: var(--secondary); font-size: 12px; font-weight: 800; color: var(--muted-fg); }
.tablebox tbody tr:last-child td { border-bottom: 0; }

/* Closing call to action. */
.callout {
  padding: 40px 34px; border-radius: 20px;
  background: var(--accent); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  text-align: center;
}
.callout h2 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.03em; color: var(--accent-fg); }
.callout p { margin: 13px auto 0; max-width: 56ch; font-size: 15.5px; line-height: 1.85; }
.callout .btn-primary { margin-top: 24px; }

/* -------------------------------------------------------------- visuals
   Product mockups, rebuilt on the demo's tokens so they sit inside the same
   system as the app screens rather than being pasted-in illustrations. */

.viz { border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden; }
.viz-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--secondary);
}
.viz-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--border); }
.viz-bar strong { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; color: var(--muted-fg); }
.viz-body { padding: 18px; }
/* A split's mockup column, so it can shrink inside a grid track. */
.viz-wrap { min-width: 0; }

.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.viz .metric { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.metric small { display: block; font-size: 11px; font-weight: 700; color: var(--muted-fg); }
.metric b { display: block; margin-top: 4px; font-family: var(--font-num); font-size: 17px; font-weight: 800; }
.metric em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--good); }

.bars { display: flex; align-items: flex-end; gap: 7px; block-size: 84px; margin-top: 16px; }
.bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--series-2), var(--series-1)); }
/* demo.css owns .chart-head's layout; only the two texts are ours. */
.chart-head b { font-size: 13px; font-weight: 700; }
.chart-head span { font-size: 11.5px; color: var(--muted-fg); }

/* A chart card sits inside a mockup, so it is inset rather than floating. */
.chart-card { padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--secondary); }

/* The dashboard mockup's own sidebar, so the screen reads as an app and not
   as a card with text in it. */
.dash-nav {
  display: grid; gap: 10px; margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mini-brand { display: flex; align-items: center; gap: 7px; font-family: var(--font-num); font-size: 13px; font-weight: 800; }
.mini-brand span {
  display: grid; place-items: center; inline-size: 22px; block-size: 22px;
  border-radius: 6px; background: var(--primary); color: var(--primary-fg); font-size: 12px;
}
.shophead { display: flex; align-items: center; gap: 10px; }
.shophead .store-avatar { inline-size: 34px; block-size: 34px; margin-bottom: 0; }
.shophead b { display: block; font-size: 13.5px; font-weight: 700; }
.shophead small { display: block; font-size: 11px; color: var(--muted-fg); }
/* a store address is Latin, so it is set left-to-right inside an RTL page */
.online-url {
  padding: 6px 10px; border-radius: 7px; background: var(--secondary);
  font-family: var(--font-num); font-size: 10.5px; color: var(--muted-fg);
  direction: ltr; text-align: start;
}
.strip-note { margin: 14px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted-fg); }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.mini-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.mini-nav span { padding: 5px 10px; border-radius: 6px; background: var(--secondary); font-size: 11.5px; font-weight: 600; color: var(--muted-fg); }
.mini-nav span.on { background: var(--accent); color: var(--accent-fg); }

.phone {
  inline-size: 100%; max-inline-size: 260px; margin-inline: auto;
  border: 8px solid var(--foreground); border-radius: 30px;
  background: var(--card); box-shadow: var(--shadow-lg); overflow: hidden;
}
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.phone-top b { font-family: var(--font-num); font-size: 13px; font-weight: 800; }
.phone-top span { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 10.5px; font-weight: 800; }
.phone-body { padding: 6px 14px 16px; }
.phone-body small { display: block; margin-top: 12px; font-size: 11px; color: var(--muted-fg); }
.phone-body strong { display: block; margin-top: 3px; font-family: var(--font-num); font-size: 19px; font-weight: 800; }
.phone-body em { display: inline-block; margin-top: 5px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--good); }
.phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.phone-tiles span { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--secondary); }
.phone-tiles b { display: block; font-family: var(--font-num); font-size: 14px; font-weight: 800; }
.phone-tiles small { margin-top: 2px; font-size: 10.5px; }
/* A phone screen is a stack of rows: a balance screen has one, a receipt has
   three. Grouping them keeps the spacing honest whichever it is. */
.phone-row { margin-top: 14px; }
.phone-row + .phone-row { margin-top: 16px; }
.phone-row small { margin-top: 0; }

.store { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.store-cover {
  display: flex; align-items: center; justify-content: center; block-size: 108px;
  background: linear-gradient(135deg, var(--series-1), var(--series-3));
  color: var(--primary-fg); font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: .08em;
}
.store-info { padding: 15px; }
.store-avatar {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px;
  margin-bottom: 10px; border-radius: 9px;
  background: var(--accent); color: var(--accent-fg); font-weight: 800;
}
.store-name { font-size: 15px; font-weight: 700; }
.store-info p { margin-top: 4px; font-size: 13px; color: var(--muted-fg); }
.store-actions { display: flex; gap: 7px; margin-top: 13px; }

.searchrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--secondary);
}
.searchrow span { font-size: 12px; color: var(--muted-fg); }
.searchrow b { font-size: 13px; font-weight: 600; }

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-top: 14px; }
.offer { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.offer i { display: grid; place-items: center; block-size: 46px; border-radius: 8px; background: var(--secondary); font-style: normal; font-size: 19px; }
.offer small { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 800; color: var(--accent-fg); }
.offer h3 { margin-top: 3px; font-size: 13.5px; font-weight: 700; }
.offer strong { display: block; margin-top: 3px; font-family: var(--font-num); font-size: 14.5px; font-weight: 800; color: var(--primary); }
.offer p { margin-top: 2px; font-size: 11px; color: var(--muted-fg); }

.posters { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.poster {
  display: grid; align-content: start; gap: 4px;
  padding: 16px; border-radius: var(--radius); color: var(--primary-fg);
  background: linear-gradient(155deg, var(--series-1), var(--series-3));
}
.poster span { font-family: var(--font-num); font-size: 10px; font-weight: 800; letter-spacing: .1em; opacity: .85; }
.poster b { font-size: 14.5px; font-weight: 800; }
.poster em { font-style: normal; font-size: 11.5px; opacity: .88; }
.poster strong { margin-top: 5px; font-family: var(--font-num); font-size: 16px; font-weight: 800; }

/* The app's four tab names, shown above the mockups on the guide page.
   demo.css's .tabs/.tab are a real tab bar, so these are named apart. */
.tabrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tabcard {
  display: grid; gap: 2px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); box-shadow: var(--shadow-sm);
}
.tabcard b { font-size: 13px; font-weight: 800; }
.tabcard small { font-size: 11px; color: var(--muted-fg); }

.orbit { display: flex; flex-wrap: wrap; gap: 8px; }
.orbit span { padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 13px; font-weight: 600; }

/* The origin card on the company page. */
.sudan-card {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card);
}
.sudan-flag { font-size: 26px; line-height: 1; }
.sudan-card b { display: block; font-size: 14px; font-weight: 800; }
.sudan-card small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-fg); }

/* ------------------------------------------------------------------ forms
   The interest form on the company page. There is no server behind this
   prototype, so site.js cancels the submit instead of navigating. */

.wl { display: grid; gap: 14px; max-width: 460px; margin-top: 8px; }
/* demo.css owns .field's own grid; the label and control sizing are ours. */
.field + .field { margin-top: 14px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--muted-fg); }
.field input, .field select { min-height: 44px; font-size: 14px; background: var(--background); }
.wl .btn { justify-self: start; }
.wl-note { margin-top: 16px; font-size: 12px; line-height: 1.75; color: var(--muted-fg); }

/* ------------------------------------------------------------ sign-in
   The site is public. This dialog is the only door to the workspace, and it
   reuses demo.css's .field and .btn so it looks like the app it opens. */

.si { padding: 0; border: 0; background: none; max-inline-size: none; max-block-size: none; }
.si::backdrop { background: color-mix(in srgb, var(--foreground) 40%, transparent); backdrop-filter: blur(3px); }
.si-box {
  inline-size: min(430px, calc(100vw - 32px));
  margin: auto; padding: 32px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow-lg); color: var(--foreground);
}
.si-crest { inline-size: 52px; block-size: 52px; object-fit: contain; margin-bottom: 18px; }
.si-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--accent-fg); }
.si-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.si-lead { margin: 10px 0 22px; font-size: 14px; line-height: 1.8; color: var(--muted-fg); }
/* Two mutually exclusive roles, so this is a radio group. A tablist would
   promise a tabpanel that does not exist, and its roving tabindex would have
   to be reimplemented by hand. The native radios also bring arrow-key
   movement and the selection announcement for free. */
.si-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.si-legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted-fg); }
.si-role {
  position: relative; display: grid; place-items: center;
  min-height: 42px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--muted-fg); cursor: pointer;
  font-size: 13.5px; font-weight: 700;
}
.si-role input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.si-role:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.si-role:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.si .field + .field { margin-top: 12px; }
.si-submit { inline-size: 100%; margin-top: 16px; min-height: 44px; }
.si-errors { margin: 0; color: var(--bad); font-size: 13px; font-weight: 700; }
.si-note { margin: 20px 0 0; font-size: 12px; line-height: 1.75; color: var(--muted-fg); }

/* --------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--border); background: var(--secondary); padding: 46px 0 34px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; }
.foot h3 { font-size: 12.5px; font-weight: 800; color: var(--muted-fg); letter-spacing: .04em; }
.foot ul { display: grid; gap: 9px; margin-top: 14px; }
/* padding rather than a gap, so each link's own box clears WCAG 2.2's 24px
   minimum target without changing the column's visual rhythm */
.foot li a { display: inline-block; padding-block: 4px; font-size: 14px; color: var(--foreground); }
.foot li a:hover { color: var(--accent-fg); }
.foot-brand p { margin-top: 13px; font-size: 13.5px; line-height: 1.8; color: var(--muted-fg); max-width: 34ch; }
.foot-end {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted-fg);
}
.foot-end span:last-child { margin-inline-start: auto; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .mast-links { display: none; }
  .mast-end { margin-inline-start: auto; }
}
@media (max-width: 900px) {
  .hero-in, .splitv { grid-template-columns: 1fr; }
  .mast-in { gap: 14px; }
}
@media (max-width: 640px) {
  .g2, .g3, .linkcards { grid-template-columns: minmax(0, 1fr); }
  .phone { max-width: 100%; }
  .fcard, .hero-in > *, .splitv > * { min-width: 0; overflow-wrap: anywhere; }
  .wrap { padding-inline: 18px; }
  .hero { padding: 40px 0 34px; }
  .sect { padding: 44px 0; }
  .hero-actions .btn { flex: 1 1 auto; }
  .acct-who { display: none; }
  .si-box { padding: 24px 20px; }
}

/* ---------------------------------------------------------------- reduced */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}