/* connectors.async-digital.com
 *
 * Layout follows the Audient product site (nav, hero, sections, footer), on
 * the Async Digital palette: every colour is a brand.css token (--bg, --card,
 * --text, --muted, --primary and the rest). The one exception is the card
 * mockup (.cc), which draws the Example Council card in the card's own
 * colours, because the point of the mockup is to show what the resident
 * actually sees.
 */

:root {
  --hairline: rgba(0, 0, 0, 0.06);
  --wrap-wide: 1120px;
}

/* Light or dark by the reader's system setting, as the Audient site does.
 * brand.css writes every colour token as a
 * light-dark() pair, and this is the opt-in that lets the pair follow the
 * system. It sits behind the same @supports test brand.css uses, so a browser
 * that cannot resolve the pairs is never told to render dark. Screen only:
 * print stays light, and a forced data-theme="dark" is put back to light for
 * print too. Local values get their dark halves here, behind the same test;
 * each light half is the plain value above, so keep the two identical. */
@supports (color: light-dark(#000, #fff)) {
  @media screen {
    :root { color-scheme: light dark; }
  }
  :root {
    --hairline: light-dark(rgba(0, 0, 0, 0.06), #2F2B26);
  }
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 30;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout primitives ---------- */
.wrap-wide {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
}
.nav-brand .ad-mark { width: 22px; height: 22px; flex: none; }
.nav-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-brand-sub {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.nav-cta {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.nav-links a.nav-cta:hover { border-color: var(--muted); background: var(--card); }
.lang-switch { font-size: 13px; }
.nav-links .lang-switch a {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.nav-links .lang-switch a:hover { color: var(--text); border-bottom-color: var(--text); }

@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links li.nav-hide-sm { display: none; }
}
@media (max-width: 560px) {
  .nav-links { gap: 12px; }
  .nav-links li.nav-hide-xs { display: none; }
}
@media (max-width: 400px) {
  .nav-brand-sub { display: none; }
}

/* ---------- Brand mark ----------
 * The six-bar symbol is never drawn below 32px, the logo rules' minimum. The
 * footer draws it at 32px; the nav, at 22px, uses the three-bar favicon-mark.svg
 * the rules name for small sizes. Both files are brick #8B3A2A, which would
 * sink into the dark page, so on screen each is drawn as a mask over
 * var(--primary): brick in light, #E0907B in dark. The image itself is pushed
 * out of its box so none of it paints. Print drops backgrounds, so print keeps
 * the plain image. */
.ad-mark { display: block; }
@supports (color: light-dark(#000, #fff)) and ((mask-image: none) or (-webkit-mask-image: none)) {
  @media screen {
    .ad-mark {
      object-position: -99999px 0;
      background: var(--primary);
      -webkit-mask: url("logo-symbol.svg") center / 100% 100% no-repeat;
              mask: url("logo-symbol.svg") center / 100% 100% no-repeat;
    }
    .ad-mark.small {
      -webkit-mask-image: url("favicon-mark.svg");
              mask-image: url("favicon-mark.svg");
    }
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 0;
  text-align: center;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 22px;
}
.hero-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 17ch;
  color: var(--text);
  text-wrap: balance;
}
.hero-sub {
  margin: 22px auto 0;
  font-size: var(--size-intro);
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              filter var(--dur-1) var(--ease-out);
}
.btn-primary {
  background: var(--primary-fill);
  color: var(--on-primary);
  border: 1px solid var(--primary-fill);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--muted); background: var(--card); }
.btn-ghost .arrow { transition: transform var(--dur-1) var(--ease-out); }
.btn-ghost:hover .arrow { transform: translateX(2px); }

/* ---------- Demo video ---------- */
.demo {
  margin: 48px auto 0;
  padding: 0 24px;
  max-width: 1048px;
  scroll-margin-top: 72px;
}
.demo-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #141614;
  box-shadow: 0 30px 60px -24px rgba(31, 28, 24, 0.28),
              0 12px 30px -12px rgba(31, 28, 24, 0.16);
}
.demo-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1160;
  background: #141614;
}
.demo-caption {
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.demo-caption strong { color: var(--text); font-weight: 600; }
.demo-caption .sep { color: var(--border); }

/* ---------- Sections ---------- */
.section { padding: 104px 0 0; }
.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.section h2,
.contact-card h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 14px;
  max-width: 26ch;
  text-wrap: balance;
}
.section-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
section[id] { scroll-margin-top: 56px; }

/* ---------- Steps (what the demo shows) ---------- */
.steps-row {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  margin: 6px 0 0;
}
.step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 1000px) {
  .steps-row { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 640px) {
  .steps-row { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- The two tools ---------- */
.tool-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.tool {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.tool h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.tier {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.tool > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
.tool p.note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
/* Child selectors only, so none of this reaches the card mockup's own list. */
.tool > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.tool > ul > li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.tool > ul > li::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateY(-2px);
}
.mock {
  margin: 10px 0 0;
}
.mock figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.tools-note {
  margin: 40px 0 0;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
@media (max-width: 980px) {
  .tool-grid { grid-template-columns: 1fr; gap: 64px; }
  .mock .cc { max-width: 620px; }
}
/* Side by side, the two columns share their rows (heading, intro, list,
   drawing), so the two card drawings start at the same height whatever each
   column's text above them wraps to. A note under a drawing travels inside
   .tool-drawing, in the drawing's own row, so it sits under its own card. */
.tool-drawing { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    .tool-grid { grid-template-rows: repeat(4, auto); row-gap: 14px; }
    .tool { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  }
}

/* ---------- Contact ---------- */
.contact { padding: 96px 0 104px; }
.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
}
.contact-card > div { flex: 1 1 380px; min-width: 0; }
.contact-card h2 { margin-bottom: 10px; }
.contact-card .btn-primary { flex: none; }

/* ---------- Footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 0 0 36px;
}
.footer-bar {
  height: 4px;
  background: var(--primary);
  width: 100%;
  margin-bottom: 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand-block { display: flex; flex-direction: column; gap: 14px; }
.footer-brand-block .ad-mark { width: 32px; height: 32px; }
.footer-blurb {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0;
}
.footer-col h2 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-1) var(--ease-out);
}
.footer-col a:hover { border-bottom-color: var(--muted); }
.footer-meta {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.footer-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.footer-meta-row + .footer-meta-row { margin-top: 8px; }
.footer-sep { color: var(--border); }
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-bar { margin-bottom: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .footer-meta-row { gap: 4px 10px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .demo { margin-top: 36px; padding: 0 16px; }
  .section { padding-top: 80px; }
  .contact { padding: 72px 0 80px; }
  .wrap-wide { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- The Example Council card, as a static mockup ----------
 * Values copied from the connector's own card stylesheet, light and dark, so the
 * mockup matches the card the demo shows. The card's own Public Sans webfont
 * is NOT loaded: it comes from a third-party host, which this site never
 * contacts, so the mockup uses the card's own fallback, the system font.
 * Nothing in the mockup is interactive: the buttons and links are drawings. */
.cc {
  --bc-surface: #ffffff; --bc-border: #d3dddb; --bc-divider: #e4eae9;
  --bc-ink: #0f1e1d; --bc-ink2: #4b5c5a; --bc-accent: #0b6b6b; --bc-accent-tint: #e6f2f0;
  --bc-sunken: #f2f6f5; --bc-track: #cfdad7;
  --bc-btn-bg: #0b6b6b; --bc-btn-ink: #ffffff;
  --bc-notice-bg: #fff5da; --bc-notice-border: #ebd594; --bc-notice-label: #7a4e00; --bc-notice-ink: #2b2207; --bc-notice-icon: #8a5a00;
  --bc-logo-plate: transparent;
  --bc-bin-green: #3e8e41; --bc-bin-green-lid: #2d6b30; --bc-caddy: #8b5a34; --bc-caddy-lid: #6c4425; --bc-glass-caddy: #2e6bb8; --bc-glass-caddy-lid: #234f88;
  --bc-bag-red: #d23b2f; --bc-bag-blue: #2e6bb8; --bc-black-bin: #3b4342; --bc-black-bin-lid: #262c2b; --bc-wheel: #2b3130;

  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  background: var(--bc-surface);
  color: var(--bc-ink);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  font-family: system-ui, var(--font-sans);
  text-align: left;
  box-shadow: 0 18px 40px -24px rgba(15, 30, 29, 0.35);
}
@supports (color: light-dark(#000, #fff)) {
  .cc {
    --bc-surface: light-dark(#ffffff, #152120); --bc-border: light-dark(#d3dddb, #2c3c3a); --bc-divider: light-dark(#e4eae9, #253331);
    --bc-ink: light-dark(#0f1e1d, #edf3f2); --bc-ink2: light-dark(#4b5c5a, #a9bab7); --bc-accent: light-dark(#0b6b6b, #74d1c1); --bc-accent-tint: light-dark(#e6f2f0, #1e3532);
    --bc-sunken: light-dark(#f2f6f5, #1c2a28); --bc-track: light-dark(#cfdad7, #344642);
    --bc-btn-bg: light-dark(#0b6b6b, #74d1c1); --bc-btn-ink: light-dark(#ffffff, #06221f);
    --bc-notice-bg: light-dark(#fff5da, #2b2413); --bc-notice-border: light-dark(#ebd594, #54441a); --bc-notice-label: light-dark(#7a4e00, #f2c461); --bc-notice-ink: light-dark(#2b2207, #f3ebd7); --bc-notice-icon: light-dark(#8a5a00, #f2c461);
    --bc-logo-plate: light-dark(transparent, #ffffff);
    --bc-bin-green: light-dark(#3e8e41, #4fa653); --bc-bin-green-lid: light-dark(#2d6b30, #3e8a42); --bc-caddy: light-dark(#8b5a34, #a8703f); --bc-caddy-lid: light-dark(#6c4425, #8a5a31); --bc-glass-caddy: light-dark(#2e6bb8, #4f8bd6); --bc-glass-caddy-lid: light-dark(#234f88, #3c70b3);
    --bc-bag-red: light-dark(#d23b2f, #e5574b); --bc-bag-blue: light-dark(#2e6bb8, #4f8bd6); --bc-black-bin: light-dark(#3b4342, #7e8a88); --bc-black-bin-lid: light-dark(#262c2b, #67726f); --bc-wheel: light-dark(#2b3130, #a5b0ae);
  }
}
.cc svg { display: block; }
.cc-pad { padding-left: clamp(16px, 4cqi, 28px); padding-right: clamp(16px, 4cqi, 28px); }
.cc-bar { height: 4px; background: linear-gradient(90deg, #0b6b6b, #1e8a6e); }
.cc-fiction { padding-top: 7px; padding-bottom: 7px; background: var(--bc-sunken); border-bottom: 1px solid var(--bc-divider);
  color: var(--bc-ink2); font-size: 13px; line-height: 1.4; font-weight: 600; }
.cc-signed { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-top: 9px; padding-bottom: 9px;
  background: var(--bc-accent-tint); color: var(--bc-accent); font-size: 14px; line-height: 1.35; }
.cc-signed svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-signed b { font-weight: 700; }
.cc-signed .num { font-weight: 500; font-variant-numeric: tabular-nums; }
.cc-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 18px; }
.cc-logo { flex: none; width: 56px; height: 56px; border-radius: 12px; background: var(--bc-logo-plate);
  display: flex; align-items: center; justify-content: center; }
.cc-who { flex: 1 1 0; min-width: 0; padding-right: 112px; }
@container (max-width: 480px) { .cc-who { flex-basis: 100%; padding-right: 0; } }
.cc-who .name { font-size: 15px; line-height: 1.3; font-weight: 600; }
.cc-who .sub { font-size: 15px; line-height: 1.4; color: var(--bc-ink2); margin-top: 2px; }
.cc-lang { position: absolute; top: 24px; right: clamp(16px, 4cqi, 28px); padding: 2px;
  border-radius: 999px; border: 1px solid var(--bc-border); background: var(--bc-surface); }
.cc-lang span { display: inline-flex; align-items: center; height: 38px; padding: 0 10px; color: var(--bc-ink2); font-size: 14px; font-weight: 600; }
.cc-hero { padding-top: clamp(22px, 4.6cqi, 30px); }
.cc-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cc-kicker .label { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--bc-accent); }
.cc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; font-weight: 600;
  color: var(--bc-accent); background: var(--bc-accent-tint); padding: 5px 10px; border-radius: 999px; }
.cc-chip svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cc-big { margin-top: 8px; display: flex; flex-wrap: wrap; column-gap: .26em; font-size: clamp(30px, 6.6cqi, 46px);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cc-big span { white-space: nowrap; }
.cc-big.money { font-size: clamp(34px, 7cqi, 50px); }
.cc-hint { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.4; color: var(--bc-ink2); }
.cc-hint svg { flex: none; margin-top: 1px; fill: none; stroke: var(--bc-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-hint strong { font-weight: 600; color: var(--bc-ink); white-space: nowrap; }
.cc-bins { list-style: none; margin: 0; padding-top: clamp(20px, 4cqi, 26px); display: flex; flex-wrap: wrap; gap: 12px 16px; }
.cc-bins li { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.cc-tile { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--bc-sunken);
  display: flex; align-items: center; justify-content: center; }
.cc-tile.small { width: 38px; height: 38px; border-radius: 10px; }
.cc-bins .what { font-size: 17px; line-height: 1.25; font-weight: 600; }
.cc-bins .how { font-size: 14px; line-height: 1.35; color: var(--bc-ink2); margin-top: 2px; }
.cc-notice-wrap { margin-left: clamp(16px, 4cqi, 28px); margin-right: clamp(16px, 4cqi, 28px); }
.cc-notice { margin-top: clamp(20px, 4cqi, 24px); display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-radius: 12px; background: var(--bc-notice-bg); border: 1px solid var(--bc-notice-border); }
.cc-notice svg { flex: none; margin-top: 1px; fill: none; stroke: var(--bc-notice-icon); stroke-width: 1.8; stroke-linecap: round; }
.cc-notice .label { font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--bc-notice-label); }
.cc-notice .text { font-size: 15px; line-height: 1.45; color: var(--bc-notice-ink); margin-top: 3px; }
.cc-after { margin: clamp(22px, 4.4cqi, 28px) clamp(16px, 4cqi, 28px) 0; padding-top: 18px; border-top: 1px solid var(--bc-divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.cc-after .label { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--bc-ink2); }
.cc-after .date { font-size: 19px; line-height: 1.3; font-weight: 600; margin-top: 2px; }
.cc-after .bins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.cc-after .icons { flex: none; display: flex; gap: 4px; }
.cc-after .bins span { font-size: 15px; line-height: 1.35; color: var(--bc-ink2); }
.cc-panel { margin: clamp(20px, 4cqi, 26px) clamp(16px, 4cqi, 28px) 0; padding: 18px clamp(16px, 3.4cqi, 22px) 16px;
  border-radius: 14px; background: var(--bc-sunken); }
.cc-panel .label { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--bc-ink2); }
.cc-panel .sum { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.cc-panel .total { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cc-panel .split { font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--bc-ink2); font-variant-numeric: tabular-nums; }
.cc-steps { margin-top: 14px; display: flex; gap: 4px; }
.cc-steps span { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--bc-track); }
.cc-steps span.done { background: var(--bc-accent); }
.cc-panel .meta { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  font-size: 14px; line-height: 1.4; color: var(--bc-ink2); }
.cc-panel .meta b { font-weight: 600; color: var(--bc-ink); }
.cc-actions { padding-top: clamp(20px, 4cqi, 24px); padding-bottom: clamp(20px, 4cqi, 24px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.cc-primary { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 16px;
  border-radius: 10px; background: var(--bc-btn-bg); color: var(--bc-btn-ink); font-size: 16px; font-weight: 600; line-height: 1; }
.cc-primary svg, .cc-link svg, .cc-leaves svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.cc-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.cc-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--bc-accent); }
.cc-link .u { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cc-leaves { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--bc-border);
  border-radius: 999px; font-size: 12.5px; line-height: 1.2; font-weight: 600; color: var(--bc-ink2); }
.cc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 12px; padding-bottom: 12px;
  background: var(--bc-sunken); border-top: 1px solid var(--bc-divider); font-size: 13px; line-height: 1.45; color: var(--bc-ink2); }
.cc-foot .text { flex: 1 1 260px; min-width: 0; }
.cc-foot .site { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }