/* GCOFII design tokens — matched to the reference template's palette and
   layout language (light blue canvas, white rounded cards, blue primary,
   dark navy footer, pill badges, green/orange accents). */

:root{
  /* Light-blue palette: blue header, light blue canvas, white cards,
     dark navy footer. */
  --bg-page:#eef4fd;
  --bg-page-2:#ffffff;
  --surface:#ffffff;
  --ink:#10192b;
  --ink-soft:#64748b;
  --line:#e6ebf5;
  --field-bg:#f7f9fd;

  --blue:#2b7fd4;
  --blue-dark:#1f6ab8;
  --blue-tint:#e6f1fd;
  --header-grad:linear-gradient(90deg,#2a79cc 0%,#3d8ce0 100%);

  --navy:#1c3d63;
  --navy-soft:#cddff2;

  --green:#16a34a;
  --green-tint:#e7f8ee;
  --orange:#ea8a1f;
  --orange-tint:#fdf1e2;
  --purple:#7c5cfc;
  --purple-tint:#efe9ff;
  --teal:#14b8a6;
  --teal-tint:#e6fbf8;

  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --shadow:0 24px 50px -20px rgba(16,25,43,.16), 0 4px 12px -6px rgba(16,25,43,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ overflow-x:hidden; }
/* Sticky footer: body fills the viewport and .gc-main takes the spare height,
   so short pages (dashboard, forms) keep the footer pinned to the bottom. */
body{ min-height:100vh; display:flex; flex-direction:column; }
.gc-main{ flex:1 0 auto; }
.gc-footer{ flex-shrink:0; }
/* In-page anchors (#features, #plans, #contact) land clear of the section top. */
section[id]{ scroll-margin-top:20px; }
body{
  background:
    var(--bg-page);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }

.gc-container{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* Nav */
.gc-nav{
  background:var(--header-grad);
  color:#fff;
}
.gc-nav-inner{
  max-width:1180px; margin:0 auto; padding:13px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.gc-nav-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:21px; }
.gc-nav-brand:hover{ text-decoration:none; }
.gc-nav-brand .mark{
  width:34px;height:34px;border-radius:9px;background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13.5px;
  flex:0 0 auto;
}
.gc-nav-brand .wordmark{ display:flex; flex-direction:column; line-height:1.05; }
.gc-nav-brand .wordmark small{
  font-size:9.5px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.82);
  margin-top:3px;
}
/* Desktop: brand | links | actions across the bar. */
.gc-nav-collapse{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex:1; }
.gc-nav-links{ display:flex; gap:24px; font-size:15px; font-weight:600; }
.gc-nav-links a{ color:#f0f6ff; }
.gc-nav-links a:hover{ color:#fff; text-decoration:none; }
.gc-nav-actions{ display:flex; align-items:center; gap:10px; }

/* Hamburger (mobile/tablet only) */
.gc-nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.gc-nav-burger{
  display:none; margin-left:auto; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:9px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12);
}
.gc-nav-burger span{ display:block; height:2px; background:#fff; border-radius:2px; }
.gc-nav-toggle:focus-visible + .gc-nav-burger{ outline:2px solid #fff; outline-offset:2px; }
.gc-btn-ghost-inv{
  border:1px solid rgba(255,255,255,.6); color:#fff; background:transparent;
  padding:8px 18px; border-radius:999px; font-weight:700; font-size:14px; cursor:pointer;
}
.gc-btn-ghost-inv:hover{ background:rgba(255,255,255,.14); text-decoration:none; }
.gc-btn-white{
  background:#fff; color:var(--blue); border:none; padding:9px 20px; border-radius:999px;
  font-weight:800; font-size:14px; cursor:pointer;
}
.gc-btn-white:hover{ text-decoration:none; }
/* Language switcher: <details>/<summary> dropdown, no JS. */
.gc-lang{ position:relative; }
.gc-lang-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff;
  padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer;
  font-family:inherit; list-style:none; white-space:nowrap;
}
.gc-lang-pill::-webkit-details-marker{ display:none; }
.gc-lang-pill::marker{ content:""; }
.gc-lang-pill:hover{ background:rgba(255,255,255,.26); }
.gc-lang-pill .gc-ic{ width:15px; height:15px; }
.gc-lang-pill .caret{
  width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .15s ease;
}
.gc-lang[open] .gc-lang-pill .caret{ transform:rotate(180deg); }
.gc-lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  display:flex; flex-direction:column; gap:2px; min-width:210px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
}
.gc-lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:none; border-radius:9px; padding:9px 11px;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
}
.gc-lang-menu button:hover{ background:var(--field-bg); }
.gc-lang-menu button.active{ background:var(--blue-tint); color:var(--blue-dark); }
.gc-lang-menu button small{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--ink-soft); }

@media (max-width:1000px){
  .gc-nav-inner{ flex-wrap:wrap; gap:10px; }
  .gc-nav-burger{ display:flex; }
  .gc-nav-collapse{
    display:none; order:3; flex:0 0 100%; flex-direction:column; align-items:stretch; gap:14px;
    margin-top:10px; padding-top:14px; padding-bottom:6px;
    border-top:1px solid rgba(255,255,255,.25);
  }
  .gc-nav-toggle:checked ~ .gc-nav-collapse{ display:flex; }
  .gc-nav-links{ flex-direction:column; gap:0; font-size:16px; }
  .gc-nav-links a{ padding:11px 2px; border-bottom:1px solid rgba(255,255,255,.12); }
  .gc-nav-actions{ flex-wrap:wrap; gap:9px; }
  .gc-nav-actions .gc-lang{ order:3; flex:0 0 100%; }
  .gc-lang-menu{ position:static; right:auto; min-width:0; margin-top:8px; }
  .gc-nav-actions .gc-btn-ghost-inv,
  .gc-nav-actions .gc-btn-white{ flex:1 1 130px; text-align:center; padding:11px 16px; }
}
@media (max-width:480px){
  .gc-nav-brand{ font-size:18px; }
  .gc-nav-brand .mark{ width:30px; height:30px; font-size:12px; }
  .gc-nav-brand .wordmark small{ display:none; }
}

/* Hero */
.gc-hero{ padding:64px 0 48px; }
.gc-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
@media (max-width:900px){
  .gc-hero{ padding:40px 0 34px; }
  .gc-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .gc-hero-grid .gc-lede{ max-width:none; }
  /* Stacked: keep the art from dominating the fold on tablets. */
  .gc-hero-art{ max-width:540px; width:100%; margin:0 auto; }
}
@media (max-width:560px){
  .gc-hero-ctas{ flex-direction:column; align-items:stretch; }
  .gc-hero-ctas .gc-btn{ justify-content:center; }
}
.gc-eyebrow-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--blue-tint); color:var(--blue);
  font-weight:700; font-size:13px; padding:7px 15px; border-radius:999px; margin-bottom:18px;
}
/* Fluid type: scales down on phones without shrinking the desktop sizes. */
.gc-h1{
  font-size:clamp(32px, 6.4vw, 52px); line-height:1.08; letter-spacing:-0.022em;
  margin:0 0 20px; font-weight:800;
}
.gc-h1 .accent{ color:var(--blue); }
.gc-lede{ color:var(--ink-soft); font-size:clamp(15.5px, 2.1vw, 17px); line-height:1.65; max-width:46ch; margin:0 0 28px; }
.gc-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.gc-btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:12px;
  font-weight:800; font-size:15.5px; cursor:pointer; border:none; text-decoration:none;
  font-family:inherit;
}
.gc-btn:hover{ text-decoration:none; }
.gc-btn-primary{ background:var(--blue); color:#fff; }
.gc-btn-primary:hover{ background:var(--blue-dark); }
.gc-btn-outline{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.gc-btn-outline:hover{ background:var(--field-bg); }
.gc-btn-green{ background:var(--green); color:#fff; }
.gc-btn-green:hover{ background:#0f8a3d; }
.gc-btn-block{ width:100%; justify-content:center; }
.gc-btn .gc-ic{ width:18px; height:18px; }

.gc-chip-row{ display:flex; gap:10px; flex-wrap:wrap; }
.gc-chip{
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); font-size:13.5px;
  font-weight:600; padding:8px 15px; border-radius:999px;
}

.gc-hero-art{
  border-radius:24px; overflow:hidden; box-shadow:var(--shadow); position:relative;
  aspect-ratio:16/10; background:linear-gradient(135deg,#1f6ab8,#3d8ce0);
  display:flex; align-items:center; justify-content:center;
}
.gc-hero-art .badge{
  position:absolute; left:16px; bottom:16px; background:rgba(11,28,57,.65); color:#fff;
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; display:flex; gap:8px; align-items:center;
}
.gc-hero-art .badge .dot{ width:7px; height:7px; border-radius:50%; background:#3ee08a; }
.gc-hero-art .glyphs{ font-size:clamp(38px, 8vw, 64px); font-weight:900; color:#fff; opacity:.9; letter-spacing:2px; }

/* Hero slideshow (no JS).
   All slides sit on top of each other and share one 24s timeline; each is
   delayed by a further 6s (24s / 4 slides), so exactly one is visible at a
   time. Adding or removing a slide means changing --gc-slide-cycle, the
   nth-child delays, and the percentages in the keyframes to match. */
.gc-hero-art{ --gc-slide-cycle:24s; }
.gc-hero-slides{ position:absolute; inset:0; }
.gc-hero-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; will-change:opacity, transform;
  animation:gcHeroFade var(--gc-slide-cycle) linear infinite;
}
/* The first slide gets a negative delay so it starts already at full opacity
   -- otherwise the hero is an empty blue box for the first second of the
   fade-in. The rest follow at 6s intervals from that shifted clock. */
.gc-hero-slides img:nth-child(1){ animation-delay:-1s; }
.gc-hero-slides img:nth-child(2){ animation-delay:5s; }
.gc-hero-slides img:nth-child(3){ animation-delay:11s; }
.gc-hero-slides img:nth-child(4){ animation-delay:17s; }
@keyframes gcHeroFade{
  0%    { opacity:0; transform:scale(1.08); }
  4%    { opacity:1; }
  25%   { opacity:1; }
  29%   { opacity:0; transform:scale(1); }
  100%  { opacity:0; transform:scale(1.08); }
}
/* Keeps the badge legible whatever photo is showing. */
.gc-hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,28,57,0) 45%, rgba(11,28,57,.55) 100%);
}
.gc-hero-dots{ position:absolute; right:16px; bottom:18px; display:flex; gap:6px; }
.gc-hero-dots i{
  flex:0 0 auto; width:7px; height:7px; border-radius:999px;
  background:rgba(255,255,255,.5);
  animation:gcHeroDot var(--gc-slide-cycle) linear infinite;
}
.gc-hero-dots i:nth-child(1){ animation-delay:-1s; }
.gc-hero-dots i:nth-child(2){ animation-delay:5s; }
.gc-hero-dots i:nth-child(3){ animation-delay:11s; }
.gc-hero-dots i:nth-child(4){ animation-delay:17s; }
/* The active window is 4%-29%, i.e. exactly the window in which the matching
   slide is on screen in gcHeroFade. Keeping the two in step matters: the dots
   are the only thing telling the visitor the hero is a slideshow. */
@keyframes gcHeroDot{
  0%,     3.99%  { width:7px;  background:rgba(255,255,255,.5); }
  4%,     29%    { width:18px; background:#fff; }
  29.01%, 100%   { width:7px;  background:rgba(255,255,255,.5); }
}
/* Respect the OS "reduce motion" setting: show the first photo, hold still. */
@media (prefers-reduced-motion:reduce){
  .gc-hero-slides img,
  .gc-hero-dots i{ animation:none; }
  .gc-hero-slides img{ opacity:0; }
  .gc-hero-slides img:nth-child(1){ opacity:1; }
  .gc-hero-dots i:nth-child(1){ width:18px; background:#fff; }
}

/* Section shell */
.gc-section{ padding:60px 0; }
@media (max-width:760px){ .gc-section{ padding:40px 0; } }
@media (max-width:480px){ .gc-section{ padding:32px 0; } }
.gc-section-head{ text-align:center; max-width:680px; margin:0 auto 38px; }
@media (max-width:600px){ .gc-section-head{ margin-bottom:26px; } }
.gc-badge-pill{
  display:inline-block; background:var(--blue-tint); color:var(--blue); font-weight:700; font-size:13px;
  padding:6px 15px; border-radius:999px; margin-bottom:14px;
}
.gc-h2{ font-size:clamp(24px, 3.6vw, 34px); font-weight:800; letter-spacing:-0.015em; margin:0 0 12px; }
.gc-section-sub{ color:var(--ink-soft); font-size:clamp(14.5px, 1.9vw, 16.5px); line-height:1.6; margin:0; }

/* Cards grid */
.gc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gc-cards.cols-5{ grid-template-columns:repeat(5,1fr); gap:15px; }
.gc-cards.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .gc-cards.cols-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:960px){ .gc-cards, .gc-cards.cols-4, .gc-cards.cols-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gc-cards, .gc-cards.cols-4, .gc-cards.cols-5{ grid-template-columns:1fr; } }

.gc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px;
}
.gc-cards.cols-5 .gc-card{ padding:20px 18px; }

/* Icon chips: a tinted rounded square holding a stroked SVG that inherits
   the chip's text colour. Pair with one of the .tint-* classes below. */
.gc-icon-chip{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; flex:0 0 auto;
}
.gc-ic{ width:22px; height:22px; display:block; }
.gc-icon-chip .gc-ic{ width:23px; height:23px; }
.tint-blue{ background:var(--blue-tint); color:var(--blue); }
.tint-green{ background:var(--green-tint); color:var(--green); }
.tint-orange{ background:var(--orange-tint); color:var(--orange); }
.tint-purple{ background:var(--purple-tint); color:var(--purple); }
.tint-teal{ background:var(--teal-tint); color:var(--teal); }

.gc-card-center{ text-align:center; }
.gc-card-center .gc-icon-chip{ margin-left:auto; margin-right:auto; }
.gc-card-center p:last-child{ margin-bottom:0; }

.gc-card h3{ font-size:17px; margin:0 0 8px; line-height:1.3; }
.gc-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0 0 12px; }
.gc-card .tag{ font-size:13.5px; font-weight:800; color:var(--blue); }

/* Steps */
.gc-steps{ display:flex; justify-content:space-between; gap:12px; position:relative; margin-top:20px; }
.gc-steps::before{
  content:""; position:absolute; top:22px; left:6%; right:6%; height:2px; background:var(--line); z-index:0;
}
.gc-step{ flex:1; text-align:center; position:relative; z-index:1; }
.gc-step .num{
  width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:16px;
}
.gc-step h4{ font-size:16.5px; margin:0 0 7px; }
.gc-step p{ color:var(--ink-soft); font-size:14px; line-height:1.5; max-width:24ch; margin:0 auto; }
@media (max-width:760px){ .gc-steps{ flex-direction:column; gap:22px; } .gc-steps::before{ display:none; } }

/* Pricing */
.gc-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .gc-plans{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gc-plans{ grid-template-columns:1fr; } }
.gc-plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; text-align:center;
  position:relative;
}
.gc-plan.popular{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.gc-plan .popular-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff;
  font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px;
}
.gc-plan .label{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:10px; }
.gc-plan .label.free{ color:var(--green); }
.gc-plan .price{ font-size:34px; font-weight:800; margin-bottom:4px; }
.gc-plan .price small{ font-size:14px; font-weight:600; color:var(--ink-soft); }
.gc-plan ul{ list-style:none; padding:0; margin:14px 0 20px; text-align:left; font-size:14.5px; color:var(--ink-soft); }
.gc-plan li{ padding:4px 0; }
.gc-plan li::before{ content:"✓ "; color:var(--green); font-weight:800; }

/* Closing CTA panel (#contact section) */
.gc-cta-panel{
  background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
  padding:44px 32px; text-align:center;
}
.gc-cta-panel .gc-h2{ margin-bottom:10px; }
.gc-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
@media (max-width:560px){
  .gc-cta-panel{ padding:30px 20px; border-radius:18px; }
  .gc-cta-actions{ flex-direction:column; }
  .gc-cta-actions .gc-btn{ justify-content:center; }
}

/* ---------------------------------------------------------------------------
   Legal pages (terms, privacy)

   Layout: a centred hero band, then a two-column grid — a sticky "On this
   page" index beside the document card. Section numbers in both the index and
   the heading chips come from CSS counters, so they can never fall out of
   step with each other.
   --------------------------------------------------------------------------- */

.gc-legal-hero{ padding:46px 0 34px; text-align:center; }
.gc-legal-back{
  display:block; text-align:left; margin-bottom:26px;
  color:var(--ink-soft); font-size:14px; font-weight:600;
}
.gc-legal-back:hover{ color:var(--blue); text-decoration:none; }
.gc-legal-hero h1{
  font-size:clamp(29px,4.6vw,44px); font-weight:800; letter-spacing:-0.02em; line-height:1.12;
  margin:0 0 14px;
}
.gc-legal-lede{
  max-width:60ch; margin:0 auto 20px; color:var(--ink-soft);
  font-size:clamp(15px,2vw,17px); line-height:1.65;
}
.gc-legal-meta{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 18px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.gc-legal-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

.gc-legal-wrap{
  display:grid; grid-template-columns:254px minmax(0,1fr); gap:30px;
  align-items:start; padding-bottom:76px;
}

/* Sticky section index */
.gc-legal-toc{
  position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 18px;
}
.gc-legal-toc h2{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 12px;
}
.gc-legal-toc ol{ list-style:none; counter-reset:legaltoc; margin:0; padding:0; }
.gc-legal-toc ol a{
  display:flex; gap:10px; padding:7px 9px; border-radius:9px;
  font-size:13.5px; font-weight:600; line-height:1.4; color:var(--ink-soft);
}
.gc-legal-toc ol a::before{
  counter-increment:legaltoc; content:counter(legaltoc);
  min-width:15px; color:var(--blue); font-weight:800; font-size:12px; padding-top:1px;
}
.gc-legal-toc ol a:hover{ background:var(--field-bg); color:var(--ink); text-decoration:none; }
.gc-legal-toc-foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-soft);
}
.gc-legal-toc-foot a{ font-weight:700; word-break:break-all; }

/* Document card */
.gc-legal-body{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:clamp(22px,3.2vw,42px);
  counter-reset:legalsec;
}
.gc-legal-note{
  background:var(--blue-tint); color:var(--blue-dark); border-radius:14px;
  padding:15px 18px; font-size:14px; line-height:1.62; margin:0 0 6px;
}
.gc-legal-body > section{ padding-top:32px; margin-top:32px; border-top:1px solid var(--line); }
.gc-legal-body h2{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(18px,2.2vw,21px); font-weight:800; letter-spacing:-0.01em;
  margin:0 0 14px; scroll-margin-top:20px;
}
.gc-legal-body h2::before{
  counter-increment:legalsec; content:counter(legalsec);
  width:30px; height:30px; border-radius:9px; background:var(--blue-tint); color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; flex:0 0 auto;
}
.gc-legal-body h3{
  font-size:14.5px; font-weight:800; color:var(--ink); margin:20px 0 9px;
  letter-spacing:.005em;
}
.gc-legal-body h3:first-of-type{ margin-top:0; }
.gc-legal-body p,
.gc-legal-body li{ color:#3a4a63; font-size:15.5px; line-height:1.75; }
.gc-legal-body p{ margin:0 0 14px; max-width:70ch; }
.gc-legal-body p:last-child{ margin-bottom:0; }
.gc-legal-body ul{
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:9px; max-width:70ch;
}
.gc-legal-body ul li{ position:relative; padding-left:22px; }
.gc-legal-body ul li::before{
  content:""; position:absolute; left:4px; top:10px;
  width:7px; height:7px; border-radius:50%; background:var(--blue); opacity:.5;
}
.gc-legal-body li strong{ color:var(--ink); }
/* Highlight the section you jumped to from the index. */
.gc-legal-body section:target h2{ color:var(--blue-dark); }
.gc-legal-body section:target h2::before{ background:var(--blue); color:#fff; }

.gc-legal-endcard{
  margin-top:34px; padding:28px 24px 4px; border-top:1px solid var(--line); text-align:center;
}
.gc-legal-endcard h3{ font-size:19px; margin:0 0 8px; }
.gc-legal-endcard p{ margin:0 auto 20px; max-width:46ch; color:var(--ink-soft); font-size:14.5px; }
.gc-legal-endcard-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:920px){
  .gc-legal-wrap{ grid-template-columns:minmax(0,1fr); gap:0; padding-bottom:56px; }
  /* The index is desktop-only: on a phone it would push the document itself
     a full screen down for no benefit. */
  .gc-legal-toc{ display:none; }
}
@media (max-width:560px){
  .gc-legal-hero{ padding:28px 0 24px; }
  .gc-legal-body{ border-radius:18px; }
  .gc-legal-body > section{ padding-top:26px; margin-top:26px; }
  .gc-legal-body h2{ gap:10px; }
  .gc-legal-body h2::before{ width:26px; height:26px; font-size:12px; }
  .gc-legal-body p, .gc-legal-body li{ font-size:15px; }
  .gc-legal-endcard{ padding:24px 0 4px; }
  .gc-legal-endcard-actions{ flex-direction:column; }
  .gc-legal-endcard-actions .gc-btn{ justify-content:center; }
}

/* Footer -- compact navy band, every column centred, headings in white and
   links in a light blue that reads clearly against the navy. */
.gc-footer{ background:var(--navy); color:var(--navy-soft); padding:26px 0 12px; margin-top:0; }
.gc-footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:24px;
  text-align:center; align-items:start;
}
@media (max-width:800px){ .gc-footer-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (max-width:480px){ .gc-footer-grid{ grid-template-columns:1fr; } }
.gc-footer-brand{ font-weight:800; color:#fff; font-size:19px; letter-spacing:.01em; margin-bottom:7px; }
.gc-footer-brand span{ color:#7ee787; }
.gc-footer p{ font-size:12.5px; line-height:1.55; color:var(--navy-soft); margin:0; }
.gc-footer h5{
  color:#fff; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 8px;
}
.gc-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.gc-footer a{ color:var(--navy-soft); font-size:13.5px; }
.gc-footer a:hover{ color:#fff; text-decoration:none; }
.gc-footer-bottom{
  text-align:center; font-size:12px; color:var(--navy-soft); margin-top:18px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
}

/* Auth (sign in / register / verify) -- light-blue theme to match the rest
   of the site: a blue header band (same gradient as .gc-nav) fades into the
   light blue canvas, and the white card overlaps it. */
.gc-main:has(> .gc-auth-wrap){
  background:
    linear-gradient(180deg, transparent 0, transparent 230px, var(--bg-page) 330px),
    var(--header-grad);
  background-color:var(--bg-page);
}
.gc-auth-wrap{ max-width:460px; margin:0 auto; padding:40px 20px 80px; }
.gc-auth-back{ color:rgba(255,255,255,.85); font-size:14px; font-weight:600; margin-bottom:22px; display:inline-block; }
.gc-auth-back:hover{ color:#fff; }
/* The auth screens carry no logo badge -- the wordmark in .gc-auth-brand h1 is
   the branding here. (.mark is still the nav wordmark chip in base.html.) */
.gc-auth-brand{ text-align:center; margin-bottom:22px; }
.gc-auth-brand h1{ font-size:24px; margin:0 0 4px; color:#fff; }
.gc-auth-brand p{ margin:0; color:var(--navy-soft); font-size:13.5px; }
.gc-auth-card{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--blue);
  border-radius:22px; box-shadow:0 30px 60px -24px rgba(31,106,184,.35), 0 4px 12px -6px rgba(16,25,43,.08);
  padding:28px;
}
.gc-auth-tabs{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--blue-tint); border-radius:999px; padding:4px; margin-bottom:22px; }
.gc-auth-tab{ text-align:center; padding:9px 6px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--blue-dark); }
.gc-auth-tab:hover{ background:rgba(43,127,212,.10); text-decoration:none; }
.gc-auth-tab.active{ background:var(--header-grad); color:#fff; box-shadow:0 4px 10px -4px rgba(31,106,184,.55); }
.gc-oauth-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px;
  border-radius:12px; border:1px solid #d6e4f5; background:#fff; color:var(--ink); font-weight:700;
  font-size:14.5px; cursor:pointer; margin-bottom:16px;
}
.gc-oauth-btn:hover{ background:var(--blue-tint); border-color:var(--blue); text-decoration:none; }
.gc-divider{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:12.5px; margin:16px 0 18px; }
.gc-divider::before,.gc-divider::after{ content:""; flex:1; height:1px; background:#d6e4f5; }
.gc-field{ margin-bottom:16px; }
.gc-field label{ display:block; font-size:13px; font-weight:700; margin:0 0 6px; color:var(--navy); }
.gc-input{
  width:100%; padding:11px 13px; border-radius:11px; border:1px solid #d6e4f5; background:#f4f8fe;
  color:var(--ink); font-size:14.5px; outline:none;
}
.gc-input:focus{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(43,127,212,.18); }
.gc-auth-card .gc-btn-primary{ background:var(--header-grad); box-shadow:0 8px 18px -8px rgba(31,106,184,.6); }
.gc-auth-card .gc-btn-primary:hover{ background:var(--blue-dark); }
.gc-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .gc-row2{ grid-template-columns:1fr; } }
.gc-hint{
  display:flex; gap:9px; font-size:12.5px; color:var(--navy); background:var(--blue-tint);
  border:1px solid #cfe2f8; border-radius:10px; padding:10px 12px; margin-top:14px;
}
.gc-hint .gc-ic{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:var(--blue); }
.gc-foot-note{ text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft); }
.gc-foot-note a{ font-weight:700; }
.gc-consent{ text-align:center; margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.gc-fp{ text-align:right; margin:-8px 0 18px; font-size:13px; font-weight:600; }
.gc-errorlist{ color:#dc2626; font-size:12.5px; margin:4px 0 0; padding:0; list-style:none; }
.gc-otp-row{ display:flex; gap:10px; justify-content:space-between; margin-bottom:18px; }
.gc-otp-row input{ width:100%; text-align:center; font-size:20px; font-weight:800; padding:12px 0; }

/* Messages */
.gc-messages{ max-width:460px; margin:20px auto 0; padding:0 20px; }
.gc-msg{ padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:10px; }
.gc-msg.info{ background:var(--blue-tint); color:var(--blue-dark); }
.gc-msg.success{ background:var(--green-tint); color:#0f6e33; }
.gc-msg.warning,.gc-msg.error{ background:var(--orange-tint); color:#9a5c0a; }

/* Simple app shell (dashboard/groups) */
.gc-shell{ max-width:1120px; margin:0 auto; padding:32px 20px 64px; }
.gc-page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.gc-page-head h1{ font-size:24px; margin:0; }
.gc-empty{
  background:#fff; border:1px dashed var(--line); border-radius:18px; padding:40px; text-align:center; color:var(--ink-soft);
}
.gc-group-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; display:flex;
  align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
.gc-group-card h3{ margin:0 0 4px; font-size:15.5px; }
.gc-group-card .meta{ font-size:12.5px; color:var(--ink-soft); }
.gc-role-pill{
  font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; background:var(--blue-tint); color:var(--blue);
}
.gc-role-pill.member{ background:var(--field-bg); color:var(--ink-soft); }
.gc-info-box{
  background:var(--blue-tint); border-radius:14px; padding:16px 18px; font-size:13.5px; color:var(--blue-dark);
  margin-bottom:22px; line-height:1.55;
}
.gc-officer-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.gc-officer-row:last-child{ border-bottom:none; }

/* ---------------------------------------------------------------------------
   Admin console (/console/) -- the styled front door to /admin/.
   Prefix: .gc-ac-*  ("admin console"). Nothing here is used elsewhere.
   --------------------------------------------------------------------------- */

.gc-ac-hero{
  background:var(--navy);
  /* Two soft radial highlights keep the navy band from reading as a flat slab. */
  background-image:
    radial-gradient(900px 300px at 12% -20%, rgba(61,140,224,.55), transparent 70%),
    radial-gradient(700px 280px at 96% 120%, rgba(20,184,166,.28), transparent 70%);
  color:#fff; padding:40px 0 34px;
}
.gc-ac-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center;
}
.gc-ac-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:6px 13px; border-radius:999px;
}
.gc-ac-eyebrow .gc-ic{ width:15px; height:15px; }
.gc-ac-hero h1{
  font-size:clamp(27px,4.2vw,40px); font-weight:800; letter-spacing:-0.02em;
  line-height:1.12; margin:0 0 12px;
}
.gc-ac-lede{ color:var(--navy-soft); font-size:15.5px; line-height:1.6; max-width:56ch; margin:0 0 24px; }
.gc-ac-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* A white-outline button that works on the navy band, where gc-btn-outline
   (white fill, pale border) would look like a hole in the header. */
.gc-btn-onnavy{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.34);
}
.gc-btn-onnavy:hover{ background:rgba(255,255,255,.18); }

.gc-ac-hero-meta{
  display:flex; gap:12px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:18px 8px;
}
.gc-ac-hero-meta > div{
  min-width:104px; padding:0 14px; text-align:center;
  border-right:1px solid rgba(255,255,255,.16);
}
.gc-ac-hero-meta > div:last-child{ border-right:none; }
.gc-ac-hero-num{ display:block; font-size:26px; font-weight:800; line-height:1.1; }
.gc-ac-hero-cap{
  display:block; margin-top:4px; color:var(--navy-soft);
  font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}

.gc-ac-wrap{ padding:26px 20px 70px; }

/* Headline counts */
.gc-ac-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(218px,1fr)); gap:14px;
  margin-bottom:26px;
}
.gc-ac-stat{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px;
}
/* The shared chip carries a bottom margin for the stacked card layout; these
   rows are horizontal, so drop it. */
.gc-ac-stat .gc-icon-chip,
.gc-ac-section-head .gc-icon-chip,
.gc-ac-funds-head .gc-icon-chip,
.gc-ac-foot .gc-icon-chip{ margin-bottom:0; }
.gc-ac-stat-num{ display:block; font-size:24px; font-weight:800; line-height:1.1; letter-spacing:-0.01em; }
.gc-ac-stat-label{ display:block; margin-top:3px; font-size:13.5px; font-weight:700; color:var(--ink); }
.gc-ac-stat-note{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft); }

/* Pooled funds, one figure per currency */
.gc-ac-funds{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; margin-bottom:26px;
}
.gc-ac-funds-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.gc-ac-funds-head h2{ font-size:17px; margin:0 0 5px; }
.gc-ac-funds-head p{ margin:0; color:var(--ink-soft); font-size:13px; line-height:1.55; max-width:74ch; }
.gc-ac-funds-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.gc-ac-fund{ background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; }
.gc-ac-fund .cur{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--blue);
}
.gc-ac-fund .amt{ display:block; margin-top:4px; font-size:21px; font-weight:800; letter-spacing:-0.01em; }
.gc-ac-fund .sub{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft); }

/* Domain sections */
.gc-ac-section{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px 22px; margin-bottom:18px;
}
.gc-ac-section-head{
  display:flex; gap:14px; align-items:center;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
/* flex-basis:0 rather than auto: the head is flex-wrap:wrap (so the count pill
   can drop to its own line on phones), and a wrapping flex container wraps an
   item before it shrinks it. With basis auto, a long blurb pushed the whole
   title block onto a second line, away from its icon. */
.gc-ac-section-title{ min-width:0; flex:1 1 0; }
.gc-ac-section-title h2{ font-size:17px; margin:0; letter-spacing:-0.01em; }
.gc-ac-section-title p{ margin:4px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.gc-ac-section-count{
  flex:0 0 auto; background:var(--blue-tint); color:var(--blue-dark);
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; white-space:nowrap;
}

.gc-ac-items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:10px; }
/* The row is not an <a> because it also holds the "add" link; .gc-ac-name a
   is stretched over the row instead so the whole tile stays clickable. */
.gc-ac-item{
  position:relative; display:flex; align-items:center; gap:12px;
  background:var(--field-bg); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:12px 13px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
.gc-ac-item:hover{ background:#fff; border-color:var(--blue); transform:translateY(-1px); }
.gc-ac-item.is-locked{ opacity:.6; }
.gc-ac-item.is-locked:hover{ transform:none; border-color:var(--line); background:var(--field-bg); }
.gc-ac-ic{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint); color:var(--blue);
}
.gc-ac-ic .gc-ic{ width:19px; height:19px; }
.gc-ac-item:hover .gc-ac-ic{ background:var(--blue); color:#fff; }
.gc-ac-item.is-locked:hover .gc-ac-ic{ background:var(--blue-tint); color:var(--blue); }
.gc-ac-name{ min-width:0; flex:1 1 auto; font-size:14px; font-weight:700; line-height:1.25; }
.gc-ac-name a{ color:var(--ink); text-decoration:none; }
.gc-ac-name a::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-md); }
.gc-ac-item:hover .gc-ac-name a{ color:var(--blue-dark); }
.gc-ac-name small{ display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.gc-ac-add{
  position:relative; z-index:2; flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft);
}
.gc-ac-add .gc-ic{ width:16px; height:16px; }
.gc-ac-add:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* Closing card */
.gc-ac-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; margin-top:8px;
}
.gc-ac-foot > div{ display:flex; gap:14px; align-items:flex-start; min-width:0; }
.gc-ac-foot h3{ font-size:16.5px; margin:0 0 5px; }
/* 62ch was right when a button sat beside this card; the card is text-only now,
   so let the paragraph use the width it has. */
.gc-ac-foot p{ margin:0; color:var(--ink-soft); font-size:13px; line-height:1.55; max-width:96ch; }

@media (max-width:900px){
  .gc-ac-hero-grid{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .gc-ac-hero-meta{ justify-content:space-between; }
  .gc-ac-hero-meta > div{ min-width:0; flex:1 1 0; }
}
@media (max-width:620px){
  .gc-ac-hero{ padding:28px 0 26px; }
  .gc-ac-hero-actions{ flex-direction:column; align-items:stretch; }
  .gc-ac-hero-actions .gc-btn{ justify-content:center; }
  .gc-ac-hero-meta{ padding:14px 4px; }
  .gc-ac-hero-num{ font-size:21px; }
  .gc-ac-wrap{ padding:20px 16px 52px; }
  .gc-ac-stats{ grid-template-columns:1fr; }
  .gc-ac-section,
  .gc-ac-funds,
  .gc-ac-foot{ padding:16px; border-radius:16px; }
  .gc-ac-section-head{ flex-wrap:wrap; }
  .gc-ac-section-count{ order:3; flex-basis:100%; text-align:center; }
  .gc-ac-items{ grid-template-columns:1fr; }
  .gc-ac-foot{ flex-direction:column; align-items:stretch; }
  .gc-ac-foot .gc-btn{ justify-content:center; }
}

/* ---------------------------------------------------------------------------
   Admin console: collection table + single record
   --------------------------------------------------------------------------- */

.gc-ac-hero.is-compact{ padding:24px 0 28px; }
.gc-ac-crumbs{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  font-size:13px; font-weight:600; color:var(--navy-soft);
}
.gc-ac-crumbs a{ color:#fff; text-decoration:none; }
.gc-ac-crumbs a:hover{ text-decoration:underline; }
.gc-ac-crumbs span{ opacity:.65; }

.gc-ac-title{
  display:flex; align-items:center; gap:13px; margin:0 0 8px;
  font-size:clamp(23px,3.2vw,32px); font-weight:800; letter-spacing:-0.02em; line-height:1.15;
}
.gc-ac-title-ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.gc-ac-hero.is-compact .gc-ac-lede{ margin-bottom:0; font-size:14.5px; }
.gc-ac-hero.is-compact .gc-ac-hero-grid{ align-items:end; }
.gc-ac-hero.is-compact .gc-ac-hero-actions{ flex:0 0 auto; }
.gc-ac-lede code{
  background:rgba(255,255,255,.14); padding:2px 7px; border-radius:6px;
  font-size:12.5px; word-break:break-all;
}

/* Filter bar */
.gc-ac-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:12px 14px; margin-bottom:16px;
}
.gc-ac-search{
  display:flex; align-items:center; gap:9px; flex:1 1 240px; min-width:0;
  background:var(--field-bg); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:0 12px; color:var(--ink-soft);
}
.gc-ac-search .gc-ic{ width:17px; height:17px; flex:0 0 auto; }
.gc-ac-search input{
  flex:1 1 auto; min-width:0; border:none; background:none; outline:none;
  font-family:inherit; font-size:14px; color:var(--ink); padding:11px 0;
}
.gc-ac-select{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.gc-ac-select select{
  font-family:inherit; font-size:14px; color:var(--ink); padding:10px 11px;
  background:var(--field-bg); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.gc-ac-toolbar .gc-btn{ padding:11px 20px; font-size:14.5px; }
.gc-ac-clear{ font-size:13px; font-weight:700; color:var(--ink-soft); }

/* Table */
.gc-ac-table-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  /* The table scrolls sideways on narrow screens rather than squashing the
     columns into unreadable slivers. */
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.gc-ac-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.gc-ac-table th,
.gc-ac-table td{
  text-align:left; padding:12px 16px; border-bottom:1px solid var(--line);
  vertical-align:middle; white-space:nowrap;
}
.gc-ac-table thead th{
  background:var(--field-bg); color:var(--ink-soft);
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  position:sticky; top:0; z-index:1;
}
.gc-ac-table tbody tr:last-child th,
.gc-ac-table tbody tr:last-child td{ border-bottom:none; }
.gc-ac-table tbody tr:hover{ background:var(--blue-tint); }
.gc-ac-table tbody th{ font-weight:700; max-width:320px; overflow:hidden; text-overflow:ellipsis; }
.gc-ac-table tbody th a{ color:var(--blue-dark); text-decoration:none; }
.gc-ac-table tbody th a:hover{ text-decoration:underline; }
.gc-ac-table td a{ color:var(--blue-dark); text-decoration:none; }
.gc-ac-table td a:hover{ text-decoration:underline; }
.gc-ac-table .num{ text-align:right; }

.gc-ac-num{ font-variant-numeric:tabular-nums; font-weight:700; }
.gc-ac-date{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.gc-ac-empty{ color:var(--ink-soft); opacity:.6; }
.gc-ac-masked{ color:var(--ink-soft); letter-spacing:.12em; }
.gc-ac-long{ margin:0; white-space:pre-wrap; line-height:1.6; max-width:70ch; }
.gc-ac-bool{ display:inline-flex; }
.gc-ac-bool .gc-ic{ width:18px; height:18px; }
.gc-ac-bool.is-on{ color:var(--green); }
.gc-ac-bool.is-off{ color:var(--ink-soft); opacity:.5; }
.gc-ac-badge{
  display:inline-block; background:var(--field-bg); border:1px solid var(--line);
  color:var(--ink-soft); font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px;
}
/* Status colouring is opt-in by value so an unknown status still renders
   neutrally rather than picking a misleading colour. */
.gc-ac-badge.s-active, .gc-ac-badge.s-paid, .gc-ac-badge.s-approved,
.gc-ac-badge.s-succeeded, .gc-ac-badge.s-completed, .gc-ac-badge.s-eligible,
.gc-ac-badge.s-disbursed, .gc-ac-badge.s-credit{
  background:var(--green-tint); border-color:transparent; color:#0f7a37;
}
.gc-ac-badge.s-due, .gc-ac-badge.s-pending, .gc-ac-badge.s-submitted,
.gc-ac-badge.s-under_review, .gc-ac-badge.s-initiated, .gc-ac-badge.s-open,
.gc-ac-badge.s-pending_setup, .gc-ac-badge.s-validated{
  background:var(--orange-tint); border-color:transparent; color:#b4660c;
}
.gc-ac-badge.s-late, .gc-ac-badge.s-failed, .gc-ac-badge.s-rejected,
.gc-ac-badge.s-defaulted, .gc-ac-badge.s-suspended, .gc-ac-badge.s-ineligible,
.gc-ac-badge.s-critical, .gc-ac-badge.s-reversed{
  background:#fdeaea; border-color:transparent; color:#b3261e;
}
.gc-ac-badge.s-debit, .gc-ac-badge.s-collection{
  background:var(--blue-tint); border-color:transparent; color:var(--blue-dark);
}

.gc-ac-rowlink{ font-size:12.5px; font-weight:700; }
.gc-ac-rowlink.is-muted{ margin-left:10px; color:var(--ink-soft); }

/* Pagination */
.gc-ac-pager{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:18px 0 4px; font-size:13.5px; font-weight:700;
}
.gc-ac-pager a{ color:var(--blue-dark); text-decoration:none; }
.gc-ac-pager a:hover{ text-decoration:underline; }
.gc-ac-pager .is-off{ color:var(--ink-soft); opacity:.45; }
.gc-ac-pager-at{ color:var(--ink-soft); font-weight:600; }

/* Single record */
.gc-ac-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:1px 0; margin:0; }
.gc-ac-field{ padding:12px 2px; border-top:1px solid var(--line); }
.gc-ac-field dt{
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:5px;
}
.gc-ac-field dd{ margin:0; font-size:14px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.gc-ac-field dd a{ color:var(--blue-dark); }

.gc-ac-backlink{ padding-top:20px; font-size:13.5px; font-weight:700; }
.gc-ac-backlink a{ color:var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Admin console: add / edit / delete
   The form fields come from Django's own ModelAdmin form, so its widgets carry
   admin class names (vTextField, vForeignKeyRawIdAdminField...) and no classes
   of ours. Rather than rewrite every widget in Python, the inputs are styled by
   element inside .gc-ac-form -- one place, and it keeps working when a new
   model brings a widget we have not seen.
   --------------------------------------------------------------------------- */

.gc-ac-form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px;
}
.gc-ac-formgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.gc-ac-formfield.is-wide{ grid-column:1 / -1; }
.gc-ac-formfield > label{
  display:block; margin:0 0 6px; font-size:12.5px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft);
}
.gc-ac-formfield > label .req{ color:var(--orange); font-style:normal; margin-left:2px; }

.gc-ac-form input[type=text], .gc-ac-form input[type=email],
.gc-ac-form input[type=number], .gc-ac-form input[type=url],
.gc-ac-form input[type=password], .gc-ac-form input[type=date],
.gc-ac-form input[type=time], .gc-ac-form input[type=datetime-local],
.gc-ac-form input[type=tel], .gc-ac-form input:not([type]),
.gc-ac-form select, .gc-ac-form textarea{
  width:100%; max-width:100%; padding:10px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--field-bg); color:var(--ink);
  font:inherit; font-size:14.5px; outline:none;
}
/* Django's default Textarea is rows=10, which swamps the form; a fixed height
   overrides it while resize:vertical still lets staff open it up. */
.gc-ac-form textarea{ height:132px; min-height:64px; line-height:1.55; resize:vertical; }
.gc-ac-form select[multiple]{ padding:8px 10px; }
.gc-ac-form input:focus, .gc-ac-form select:focus, .gc-ac-form textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(43,127,212,.18);
}
/* Django's split datetime renders two inputs in one <p class="datetime">. */
.gc-ac-form p.datetime{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0; font-size:13px; color:var(--ink-soft);
}
.gc-ac-form p.datetime input{ width:auto; flex:1 1 120px; }
.gc-ac-form .has-error input, .gc-ac-form .has-error select,
.gc-ac-form .has-error textarea{ border-color:#dc2626; background:#fff; }

.gc-ac-check{
  display:flex; align-items:center; gap:10px; min-height:40px;
  font-size:14.5px; font-weight:600; cursor:pointer;
}
.gc-ac-check input{ width:18px; height:18px; accent-color:var(--blue); flex:0 0 auto; }

.gc-ac-help{
  margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
}
.gc-ac-help.is-note{
  display:flex; gap:9px; margin-top:20px; padding:11px 13px;
  background:var(--field-bg); border-radius:11px;
}
.gc-ac-help.is-note .gc-ic{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; }

.gc-ac-formerror{
  display:flex; gap:14px; margin:0 0 22px; padding:16px 18px;
  background:var(--orange-tint); border-radius:var(--radius-md);
}
.gc-ac-formerror h3{ margin:0 0 4px; font-size:15px; }
.gc-ac-formerror p{ margin:0; font-size:13.5px; line-height:1.55; color:#9a5c0a; }

.gc-ac-formactions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:24px; padding-top:22px; border-top:1px solid var(--line);
}
/* Pushed to the far end so "delete" is never next to "save". */
.gc-ac-danger-link{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  font-size:13.5px; font-weight:700; color:#b3261e; text-decoration:none;
}
.gc-ac-danger-link:hover{ text-decoration:underline; }
.gc-ac-danger-link .gc-ic{ width:17px; height:17px; }

.gc-btn-danger{ background:#b3261e; color:#fff; }
.gc-btn-danger:hover{ background:#9a1f18; }
/* Tinted, not just outlined: next to "All users" on the navy band a border
   change alone is too quiet for a destructive action. */
.gc-btn-onnavy.is-danger{
  background:rgba(214,88,80,.32); border-color:rgba(255,178,172,.6); color:#ffe5e3;
}
.gc-btn-onnavy.is-danger:hover{ background:rgba(214,88,80,.5); }

.gc-ac-danger{
  display:flex; gap:16px; background:var(--surface);
  border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:var(--radius-lg); padding:24px;
}
.gc-ac-danger.is-blocked{ border-left-color:var(--ink-soft); }
.gc-ac-danger h2{ margin:0 0 8px; font-size:18px; }
.gc-ac-danger p{ margin:0 0 10px; font-size:14px; line-height:1.6; color:var(--ink-soft); }
.gc-ac-danger p:last-child{ margin-bottom:0; }
.gc-ac-danger p.note{ font-size:12.5px; }
.gc-ac-danger ul{ margin:0 0 12px; padding-left:20px; font-size:14px; line-height:1.7; }
.gc-ac-danger + .gc-ac-formactions{ border-top:none; margin-top:20px; padding-top:0; }

/* The single link to /admin/, sized to read as a footnote, not an invitation.
   .gc-ic is display:block by default, which would drop the arrow onto its own
   line mid-sentence -- hence inline-block here. */
.gc-ac-rawlink{ color:var(--ink-soft); font-weight:700; white-space:nowrap; }
.gc-ac-rawlink .gc-ic{
  display:inline-block; width:13px; height:13px; margin-left:3px; vertical-align:-1px;
}

@media (max-width:640px){
  .gc-ac-form{ padding:20px; }
  .gc-ac-formgrid{ grid-template-columns:minmax(0,1fr); }
  .gc-ac-formactions .gc-btn{ flex:1 1 100%; justify-content:center; }
  /* margin-left:auto would strand it mid-row once the buttons stack. */
  .gc-ac-danger-link{ margin-left:0; justify-content:center; width:100%; }
  .gc-ac-danger{ flex-direction:column; padding:20px; }
}

/* Horizontal scrolling has no affordance of its own, so say so -- but only on
   the screens where the table actually overflows. */
.gc-ac-scrollhint{ display:none; }

@media (max-width:760px){
  .gc-ac-hero.is-compact .gc-ac-hero-grid{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
  .gc-ac-hero.is-compact .gc-ac-hero-actions{ flex-direction:column; align-items:stretch; }
  .gc-ac-hero.is-compact .gc-ac-hero-actions .gc-btn{ justify-content:center; }
  .gc-ac-title-ic{ width:36px; height:36px; }
  .gc-ac-toolbar{ align-items:stretch; }
  .gc-ac-toolbar .gc-btn{ justify-content:center; }
  .gc-ac-select{ justify-content:space-between; }
  .gc-ac-table-wrap{ border-radius:16px; }
  .gc-ac-fields{ grid-template-columns:minmax(0,1fr); }
  .gc-ac-scrollhint{
    display:block; margin:10px 2px 0; color:var(--ink-soft);
    font-size:12.5px; line-height:1.5;
  }
}

/* ---------------------------------------------------------------------------
   Phone / tablet refinements. Layout breakpoints live next to their component
   above; this block only tightens spacing and touch targets on small screens.
   --------------------------------------------------------------------------- */

.gc-page-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:760px){
  .gc-plans{ gap:24px; }            /* vertical room for the POPULAR badge */
  .gc-page-head h1{ font-size:21px; }
  .gc-page-head-actions{ width:100%; flex-direction:column; }
  .gc-page-head .gc-btn{ width:100%; justify-content:center; }
}

@media (max-width:480px){
  .gc-container{ padding:0 16px; }
  .gc-card,
  .gc-cards.cols-5 .gc-card{ padding:18px; border-radius:16px; }
  .gc-hero-art{ aspect-ratio:16/11; border-radius:18px; }
  .gc-plan{ padding:20px; }
  .gc-shell{ padding:22px 16px 48px; }
  .gc-group-card{ padding:16px; }
  .gc-empty{ padding:28px 18px; }
  .gc-auth-wrap{ padding:28px 16px 56px; }
  .gc-auth-card{ padding:20px; border-radius:18px; }
  .gc-auth-tabs{ grid-template-columns:repeat(2,1fr); border-radius:16px; gap:2px; }
  .gc-auth-tab{ border-radius:14px; }
  .gc-messages{ padding:0 16px; }
  .gc-otp-row{ gap:7px; }
  .gc-otp-row input{ font-size:18px; padding:11px 0; }
  .gc-btn{ padding:13px 20px; font-size:15px; }
  .gc-footer{ padding:22px 0 10px; }
}