/* ============================================================================
   allcatch.ai general layer. Loaded AFTER style.css on the general pages and
   the pages shared by both layers; the gas layer (/gas-welding/) does not load
   it and keeps style.css's own look. Every colour comes from the one custom-property
   block below: the palette lines between the markers are the only lines that
   change between colour variants, the rest maps them onto style.css's tokens
   and onto the g- components. Every class is prefixed g- so nothing here
   restyles the gas layer. No position:fixed anywhere (backdrop-filter
   containing-block trap); motion is opacity/transform only. A variant may
   also fill the palette-rules region at the very end (rules that tokens
   cannot express); it is empty for V1-V4. The logo is style.css's own
   lockup (.logo-mark-hd + .logo-word), exactly as on main.
   ========================================================================== */

:root{
  /* palette:begin v5 RAL 9005 black + metallic gold */
  --g-d1:#0a0a0a;
  --g-d2:#0e0e0e;
  --g-d3:#141414;
  --g-d4:#1c1c1c;
  --g-d5:#262626;
  --g-end:#f6f2ea;
  --g-paper:#f6f2ea;
  --g-paper-2:#ebe5d8;
  --g-card:#fffdf9;
  --g-ink:#0a0a0a;
  --g-text:#262320;
  --g-dim:#5a554c;
  --g-snow:#f4efe4;
  --g-accent:#b8860b;
  --g-accent-deep:#7a5a10;
  --g-on-accent:#0a0a0a;
  --g-btn-1:#c9a449;
  --g-btn-2:#a67c1c;
  --g-focus:#e6c786;
  --g-hi:#e6c786;
  --g-signal:#e6c786;
  /* palette:end */
  --g-snow-dim:color-mix(in srgb,var(--g-snow) 84%,transparent);
  --g-ink-dim:var(--g-dim);
  --g-lum-ink:var(--g-ink);
  --g-accent-text:var(--g-accent-deep);
  --g-card-brd:color-mix(in srgb,var(--g-ink) 12%,transparent);
  --g-line:color-mix(in srgb,var(--g-ink) 9%,transparent);
  --g-glass-bg:rgba(255,255,255,.055);
  --g-glass-brd:color-mix(in srgb,var(--g-snow) 18%,transparent);
  --g-dark-glass:color-mix(in srgb,var(--g-d1) 64%,transparent);
  --g-tint:color-mix(in srgb,var(--g-accent) 11%,transparent);
  --g-tint-brd:color-mix(in srgb,var(--g-accent) 34%,transparent);
  --g-hi-tint:color-mix(in srgb,var(--g-hi) 20%,transparent);
  --g-hi-brd:color-mix(in srgb,var(--g-hi) 46%,transparent);
  --g-signal-tint:color-mix(in srgb,var(--g-signal) 16%,transparent);
  --g-signal-brd:color-mix(in srgb,var(--g-signal) 70%,transparent);
  --g-shadow:color-mix(in srgb,var(--g-d1) 14%,transparent);
  --g-head:"Inter Tight",sans-serif;
  --g-mono:"IBM Plex Mono",monospace;
  --g-frame-m:14px; --g-frame-r:34px;
  --g-tile-w:82px; --g-tile-h:32px; --g-tile-gap:9px; --g-tile-r:10px;
  /* style.css tokens, remapped so its header, footer, form and the shared
     pages' bodies follow the general palette */
  --steel:var(--g-d1); --steel-2:var(--g-d2); --graphite:var(--g-d3); --graphite-2:var(--g-d3);
  --paper:var(--g-paper); --paper-2:var(--g-paper-2); --paper-3:var(--g-paper-2); --warm:var(--g-snow);
  --ink:var(--g-ink); --text:var(--g-text); --muted:var(--g-dim); --muted-2:var(--g-dim);
  --line:color-mix(in srgb,var(--g-ink) 16%,transparent);
  --line-strong:color-mix(in srgb,var(--g-ink) 24%,transparent);
  --line-dark:var(--g-glass-brd);
  --copper:var(--g-accent); --copper-light:var(--g-hi); --copper-dark:var(--g-accent-deep);
  --copper-dark-a11y:var(--g-accent-deep); --copper-deep:var(--g-accent-deep); --ok:var(--g-accent);
  --shadow-soft:0 20px 60px var(--g-shadow);
  --shadow-hard:0 22px 80px color-mix(in srgb,var(--g-d1) 24%,transparent);
}

/* --------------------- style.css components on the general palette --------- */
body{background:linear-gradient(180deg,color-mix(in srgb,var(--g-paper),#fff 45%) 0%,var(--g-paper) 44%,var(--g-paper-2) 100%)}
.site-header{background:color-mix(in srgb,var(--g-paper) 92%,transparent);border-bottom-color:var(--g-card-brd)}
.navlinks{color:var(--g-dim)}
.btn{border-color:var(--g-btn-2);color:var(--g-on-accent);
  background:linear-gradient(135deg,var(--g-btn-1) 0%,var(--g-btn-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px color-mix(in srgb,var(--g-accent) 22%,transparent)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px color-mix(in srgb,var(--g-accent) 30%,transparent)}
.btn:focus-visible{outline-color:var(--g-accent)}
.btn.on-dark{background:transparent;color:var(--g-snow);border-color:var(--g-glass-brd);box-shadow:none}
.lead{color:var(--g-text)}
.lang-switch{border-color:var(--line)}
.lang-switch:hover{border-color:var(--g-accent);color:var(--g-accent-deep)}
footer{background:linear-gradient(180deg,var(--g-paper-2) 0%,var(--g-paper) 100%);border-top-color:var(--line)}
.footer-bottom{border-top-color:var(--g-line);color:var(--g-dim)}
.footer-col,.footer-col a,.footer-tagline{color:var(--g-dim)}
.dark-section{background:linear-gradient(180deg,var(--g-d1) 0%,var(--g-d2) 100%)}
.dark-section:before{background:radial-gradient(circle at 18% 0%,var(--g-tint),transparent 40%)}
.dark .kicker,.dark-section .kicker,.truth-box .kicker,.modes-note,.mode-card .mode-tag,.dark-section .more-link{color:var(--g-hi)}
.mode-card .mode-tag,.dark-section .more-link{border-color:var(--g-hi-brd)}
.dark-section .section-head p,.dark-section .copy,.dark-section p,.dark-section .lead,.control-card ul,.mode-card p{color:var(--g-snow-dim)}
.note{color:var(--g-hi);background:var(--g-hi-tint)}
.buyer-kit{border-color:var(--g-tint-brd);background:var(--g-tint)}
.portrait-frame{background:var(--g-d2);border-color:var(--g-tint-brd);box-shadow:none}
.privacy-block p{color:var(--g-dim)}
label{color:var(--g-snow-dim)}
input,select,textarea{background:var(--g-d1);border-color:var(--g-glass-brd)}
input:focus,select:focus,textarea:focus{border-color:var(--g-hi-brd);box-shadow:0 0 0 3px var(--g-hi-tint)}
.form-status,.form-footnote a,.mail-fallback .fallback-row a{color:var(--g-hi)}
.form-footnote{color:var(--g-snow-dim)}

/* style.css gives every <section> 74px padding and caps h1/h2 widths; the
   general layer sets its own rhythm per component. */
main.g > section{padding:0}
main.g h1,main.g h2{max-width:none}
main.g{padding-top:14px}
.g-section,main.g > .g-section{padding:64px 0}
main.g > .g-page-hero{padding:0}
main.g > .g-pilot{padding:58px 0}
main.g > .g-gasband{padding:30px 0}
main.g > .g-strip{padding:34px 0 4px}
.g-tail{color:var(--g-accent-text)}
.g-on-dark .g-tail,.g-hero .g-tail,.g-page-hero .g-tail,.g-band .g-tail,.g-pilot .g-tail{color:var(--g-hi)}
.g-page-hero .g-tail.g-price{color:var(--g-signal)}
/* the idea line lands anywhere from the bright to the luminous stop as the
   width changes, so it carries its own soft near-white backing: dark ink on it */
.g-hero .g-idea .g-tail{color:var(--g-accent-text)}

/* ------------------------------ header ------------------------------------- */
/* 7 links, the language switch and two buttons on one line: compact mono type.
   EN needs about 1125px of row, ES about 1130px with Queen's shorter labels (addendum 3,
   item 5), so both fit the 1141px container at 1181px and share the 1180px menu breakpoint.
   ES items sit 1px closer (12px), so its row keeps about 11px of slack at 1181px instead of 2px. */
.g-header .navlinks{gap:13px;font-size:11.5px;letter-spacing:.04em}
html[lang="es"] .g-header .navlinks{gap:12px}
.g-header .navlinks > *{flex-shrink:0;white-space:nowrap}
.g-header .navlinks .btn{padding:0 13px;letter-spacing:.02em;font-size:11.5px}
.g-header .navlinks .lang-switch{padding:6px 9px}
.g-header .navlinks a[aria-current="page"]:not(.btn){color:var(--g-ink);opacity:1;box-shadow:inset 0 -2px 0 var(--g-accent)}
.g-header .navlinks .g-gas-btn{order:1;margin-left:3px}
.g-header .navlinks .g-book{order:2}
.g-gas-btn{background:var(--g-card);color:var(--g-accent-deep);border:1.5px solid var(--g-accent);box-shadow:none}
.g-gas-btn:hover{background:color-mix(in srgb,var(--g-accent) 8%,var(--g-card));box-shadow:none}
@media (max-width:1180px){
  .g-header .navlinks{
    position:absolute;left:14px;right:14px;top:calc(var(--nav-h) + 8px);display:none;
    flex-direction:column;align-items:stretch;gap:0;background:var(--g-paper);
    border:1px solid var(--line);box-shadow:var(--shadow-soft);border-radius:12px;padding:10px;font-size:12px;letter-spacing:.07em}
  .g-header .navlinks.open{display:flex}
  .g-header .navlinks a,.g-header .navlinks .btn{width:100%;justify-content:flex-start;padding:14px 12px}
  .g-header .navlinks a[aria-current="page"]:not(.btn){box-shadow:inset 3px 0 0 var(--g-accent)}
  .g-header .navlinks .btn{display:none}
  .g-header .navlinks .btn.g-gas-btn{display:flex;order:-1;justify-content:center;margin:0 0 8px;min-height:48px;font-size:12px;padding:0 14px}
  .g-header .nav .nav-cta-mobile{display:inline-flex;min-height:40px;padding:0 14px;margin-left:auto}
  .g-header .mobile-toggle{display:block;flex:0 0 auto}
}

/* --------------------------------- pills ----------------------------------- */
.g-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
  font-family:var(--g-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.07);border:1px solid var(--g-glass-brd);color:var(--g-snow)}
.g-eyebrow .g-edot{width:6px;height:6px;border-radius:50%;background:var(--g-signal);flex:none}
.g-eyebrow.g-light{background:var(--g-card);border-color:var(--g-card-brd);color:var(--g-accent-text)}
.g-demo-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;white-space:nowrap;
  font-family:var(--g-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--g-tint);color:var(--g-accent-deep);border:1px solid var(--g-tint-brd)}
.g-on-dark .g-demo-pill,.g-scene .g-demo-pill,.g-window .g-demo-pill,.g-band .g-demo-pill{
  background:var(--g-signal-tint);color:var(--g-signal);border-color:var(--g-signal-brd)}
.g-ui-note{font-size:12.5px;color:var(--g-ink-dim);font-style:italic;margin-top:10px}
.g-hero .g-ui-note,.g-band .g-ui-note{color:var(--g-snow-dim)}
.g-btn-ghost{background:transparent;color:var(--g-snow);border-color:color-mix(in srgb,var(--g-snow) 40%,transparent);box-shadow:none}
.g-btn-ghost:hover{border-color:color-mix(in srgb,var(--g-snow) 75%,transparent);box-shadow:none}
.g-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ------------------------------ panels + hero ------------------------------ */
.g-panel{border-radius:var(--g-frame-r);margin:0 var(--g-frame-m);position:relative;overflow:hidden}
/* near-black, deep, saturated, bright, luminous, near-white, then paper.
   The copy and the scene sit on the dark half; the steps keep their own dark
   glass; text placed straight on the bright or light half (the idea line, the
   stat line) is dark ink. */
.g-hero{background:linear-gradient(180deg,var(--g-d1) 0%,var(--g-d2) 20%,var(--g-d3) 42%,var(--g-d4) 58%,var(--g-d5) 72%,var(--g-end) 92%,var(--g-paper) 100%)}
.g-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--g-tile-w),1fr));
  grid-auto-rows:var(--g-tile-h);gap:var(--g-tile-gap);padding:var(--g-tile-gap);pointer-events:none;z-index:0;overflow:hidden}
.g-tiles i{border-radius:var(--g-tile-r);background:color-mix(in srgb,var(--g-hi) 55%,transparent);opacity:.06;transition:opacity .5s ease}
.g-tiles i.lit{opacity:.5;transition:opacity .12s ease-out}
.g-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:start;padding-top:46px;padding-bottom:6px}
.g-hero-copy{color:var(--g-snow);display:flex;flex-direction:column;align-items:flex-start}
.g-hero h1{font-size:clamp(30px,3.6vw,48px);color:#fff;margin:18px 0 14px;line-height:1.05}
.g-hero .g-lead{font-size:16px;line-height:1.58;max-width:54ch;color:rgba(255,255,255,.9)}

.g-scene{border-radius:24px;padding:18px 18px 14px;position:relative;width:100%;text-align:left;
  background:var(--g-dark-glass);border:1px solid color-mix(in srgb,var(--g-snow) 20%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px color-mix(in srgb,var(--g-d1) 35%,transparent)}
.g-scene-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px;
  font-size:12.5px;color:var(--g-snow-dim)}
.g-scene-tools{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.g-hero .g-scene-note{margin:-2px 0 10px}
/* round 5 (cross-family F3): a persistent pause for the conversation and the tile sweep */
.g-pause{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid color-mix(in srgb,var(--g-snow) 40%,transparent);color:var(--g-snow);
  font:inherit;font-size:12.5px;font-weight:600;line-height:1}
.g-pause::before{content:"";width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.g-pause[data-state="paused"]::before{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.g-pause:hover{border-color:color-mix(in srgb,var(--g-snow) 75%,transparent)}
.g-pause[hidden]{display:none}
/* round 5 (F4): a stage that is not shown yet, or was replaced, is hidden, never faint */
.g-scene-el{margin:8px 0;animation:gin .38s ease}
.g-scene [hidden]{display:none !important}
@keyframes gin{from{transform:translateY(4px)}to{transform:none}}
.g-still .g-scene-el{animation:none}
.g-bubble{max-width:88%;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.42}
.g-bubble .g-meta{display:block;margin-top:5px;font-size:11px;opacity:.78}
/* F4: in the hero example no text is faded by opacity; the meta line takes a solid dim colour */
.g-scene .g-bubble .g-meta{opacity:1;color:var(--g-snow-dim)}
.g-scene .g-bubble.g-client .g-meta{color:var(--g-ink-dim)}
.g-bubble.g-client{margin-left:auto;background:color-mix(in srgb,var(--g-card) 95%,transparent);color:var(--g-ink);border-bottom-right-radius:6px}
.g-bubble.g-draft{background:color-mix(in srgb,var(--g-d1) 30%,transparent);border:1.5px dashed var(--g-hi-brd);color:var(--g-snow);border-bottom-left-radius:6px}
.g-bubble.g-sent{background:var(--g-hi-tint);border:1px solid var(--g-hi-brd);color:#fff;border-bottom-left-radius:6px}
.g-row{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:13px;background:color-mix(in srgb,var(--g-d1) 34%,transparent);
  border:1px solid color-mix(in srgb,var(--g-snow) 14%,transparent);font-size:12.5px;color:var(--g-snow)}
.g-row .g-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--g-hi)}
.g-erp{padding:11px 13px;border-radius:13px;background:rgba(20,26,18,.45);border:1px solid rgba(160,196,140,.4);
  font-size:12.5px;color:var(--g-snow)}
.g-erp b{color:#cfe6bf}
.g-erp .g-meta{display:block;margin-top:5px;font-size:11px;color:rgba(207,230,191,.75)}
/* F7: approval is a status line, not a button */
.g-approval{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;padding:0 4px}
.g-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--g-snow)}
.g-status .g-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--g-hi)}
.g-status.g-ok{color:var(--g-hi)}
.g-approve-note{font-size:12.5px;color:var(--g-snow-dim)}

.g-idea{position:relative;z-index:1;text-align:center;font-family:var(--g-head);font-weight:700;
  font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;line-height:1.2;color:var(--g-lum-ink);margin:40px auto 4px;max-width:900px}
/* round 4: the longer idea line wraps; keep the pill narrower than the container and its lines even */
.g-hero .g-idea{width:fit-content;max-width:min(940px,100%);text-wrap:balance;padding:10px 26px;border-radius:28px;
  background:color-mix(in srgb,var(--g-end) 88%,transparent);
  box-shadow:0 0 34px 14px color-mix(in srgb,var(--g-end) 42%,transparent)}
.g-hero .g-btn-ghost{background:color-mix(in srgb,var(--g-d1) 46%,transparent)}
/* the filled button on a dark hero: a thin light ring so it never melts into a same-hue stop */
.g-hero .btn:not(.g-btn-ghost),.g-page-hero .btn:not(.g-btn-ghost){border-color:color-mix(in srgb,var(--g-hi) 60%,transparent)}
.g-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:24px 0 22px;margin:0;list-style:none}
.g-step{position:relative;text-align:left;background:color-mix(in srgb,var(--g-d1) 80%,transparent);border:1px solid color-mix(in srgb,var(--g-snow) 17%,transparent);
  border-radius:14px;padding:11px 12px 14px;cursor:pointer;color:var(--g-snow);font:inherit;
  transition:background .25s ease,border-color .25s ease}
.g-step:hover{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),color-mix(in srgb,var(--g-d1) 78%,transparent)}
.g-step.active{border-color:var(--g-signal-brd);background:linear-gradient(var(--g-signal-tint),var(--g-signal-tint)),color-mix(in srgb,var(--g-d1) 82%,transparent)}
.g-num{display:inline-flex;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.12);
  font-family:var(--g-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;margin-bottom:7px}
.g-step.active .g-num{background:var(--g-signal);color:var(--g-d1)}
main.g .g-step h3{font-size:15px;letter-spacing:-.015em;margin-bottom:3px;color:#fff}
/* F11: the button is the heading's label; its ::after makes the whole card the hit area */
.g-step-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.g-step-btn::after{content:"";position:absolute;inset:0;border-radius:14px}
/* the ring hugs the label: 3 px out it would meet the active step's champagne number badge (1.02) */
.g-step-btn:focus-visible{outline-offset:1px}
.g-step p{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.86)}
.g-progress{position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.15);overflow:hidden;opacity:0}
.g-step.active .g-progress{opacity:1}
.g-progress i{display:block;height:100%;background:var(--g-signal);transform:scaleX(0);transform-origin:left}
.g-step.active.playing .g-progress i{animation:gbar 1.4s linear forwards}
@keyframes gbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.g-chips{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:6px;padding-bottom:22px}
.g-chip{display:flex;align-items:center;gap:11px;padding:14px 18px;border-radius:15px;background:color-mix(in srgb,var(--g-card) 96%,transparent);
  border:1px solid var(--g-line);box-shadow:0 10px 26px var(--g-shadow);font-weight:600;font-size:14.5px;color:var(--g-ink);line-height:1.35}
.g-chip svg{flex:none;width:22px;height:22px;color:var(--g-accent-text)}
@media (max-width:1060px){.g-steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .g-hero-inner{grid-template-columns:1fr;gap:26px;padding-top:34px}
  .g-chips{grid-template-columns:1fr}
}
/* F9: below 640 the steps are one column, the primary CTA is full width and the second is a text link */
@media (max-width:640px){
  .g-steps{grid-template-columns:1fr;overflow:visible}
  .g-hero .g-actions{width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .g-hero .g-actions .btn:not(.g-btn-ghost){width:100%;justify-content:center}
  .g-hero .g-actions .g-btn-ghost{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
    background:none;border:0;border-radius:0;box-shadow:none;color:var(--g-snow);transform:none;
    font-family:inherit;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
    text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
}

/* ------------------------------ gas button band ---------------------------- */
.g-gasband{margin:22px var(--g-frame-m) 0;border-radius:24px;padding:30px 0;
  background:linear-gradient(120deg,var(--g-d2) 0%,var(--g-d3) 100%);color:var(--g-snow)}
.g-gasband .container{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.g-gasband p{max-width:62ch;margin-top:12px;font-size:16px;line-height:1.55;color:var(--g-snow-dim)}
.g-btn-xl{min-height:56px;padding:0 28px;font-size:13.5px}

/* ------------------------------ fits-what-you-run strip -------------------- */
.g-strip{padding:34px 0 4px;text-align:center}
.g-strip-label{font-family:var(--g-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-ink-dim);font-weight:700;margin-bottom:13px}
.g-strip-items{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.g-strip-item{padding:11px 22px;border-radius:13px;background:var(--g-card);border:1px solid var(--g-card-brd);
  font-family:var(--g-head);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--g-ink)}

/* --------------------------------- heads ----------------------------------- */
.g-head{max-width:840px;margin:0 auto 34px;text-align:center}
main.g .g-head h2{font-size:clamp(28px,3.3vw,42px);line-height:1.08}
.g-head .g-tail{display:block;margin-top:4px}
.g-head .g-sub{margin-top:13px;color:var(--g-ink-dim);font-size:16px;line-height:1.56}
.g-head.g-left{text-align:left;margin-left:0}

/* ------------------------------ before / after ----------------------------- */
.g-oldnew{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;border:1px solid var(--g-card-brd);
  background:var(--g-card);box-shadow:0 14px 44px var(--g-shadow)}
.g-col{padding:30px}
main.g .g-col h3{font-size:20px;margin-bottom:14px}
.g-col.g-now h3{color:var(--g-ink-dim)}
.g-col.g-new{background:linear-gradient(180deg,var(--g-d2) 0%,var(--g-d3) 100%);color:var(--g-snow)}
main.g .g-col.g-new h3{color:#fff}
.g-on-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;font-size:15px;line-height:1.45}
.g-now .g-on-row{color:var(--g-ink-dim);border-bottom:1px solid var(--g-line)}
.g-new .g-on-row{border-bottom:1px solid color-mix(in srgb,var(--g-snow) 12%,transparent)}
.g-on-row:last-child{border-bottom:0}
.g-mark{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;margin-top:1px}
.g-now .g-mark{background:var(--g-line);color:var(--g-ink-dim)}
.g-new .g-mark{background:var(--g-hi-tint);color:#fff}
@media (max-width:820px){.g-oldnew{grid-template-columns:1fr}}

/* ------------------------------ industry tabs ------------------------------ */
.g-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 22px}
.g-tab{padding:9px 16px;border-radius:999px;border:1px solid var(--g-card-brd);background:var(--g-card);
  font-family:var(--g-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-ink-dim);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.g-tab:hover{color:var(--g-ink)}
.g-tab[aria-selected="true"]{background:var(--g-d2);border-color:var(--g-d2);color:var(--g-snow)}
.g-erp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.g-erp-grid[hidden]{display:none}
.g-card{border-radius:22px;border:1px solid var(--g-card-brd);background:var(--g-card);padding:20px;box-shadow:0 14px 44px var(--g-shadow)}
.g-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;gap:10px;flex-wrap:wrap}
.g-card-head b{font-family:var(--g-head);font-size:16px;letter-spacing:-.015em;color:var(--g-ink)}
.g-chat{display:flex;flex-direction:column;gap:9px}
.g-chat .g-bubble.g-client{background:var(--g-paper-2);color:var(--g-ink)}
.g-chat .g-bubble.g-agent{background:color-mix(in srgb,var(--g-accent) 9%,var(--g-card));color:var(--g-ink);border-bottom-left-radius:6px}
.g-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:11px}
.g-kpi{border:1px solid var(--g-card-brd);border-radius:13px;padding:12px}
.g-kpi b{display:block;font-family:var(--g-head);font-size:24px;letter-spacing:-.03em;color:var(--g-ink)}
.g-kpi span{font-size:12.5px;color:var(--g-ink-dim)}
.g-prows{display:flex;flex-direction:column;gap:7px}
.g-prow{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;border-radius:11px;background:var(--g-paper);font-size:13.5px;color:var(--g-ink)}
.g-prow .g-tag{font-family:var(--g-mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g-accent-text);white-space:nowrap}
.g-linkcard{display:flex;flex-direction:column;justify-content:center;gap:16px;
  background:linear-gradient(160deg,var(--g-d2) 0%,var(--g-d3) 100%);color:var(--g-snow);border-color:transparent}
.g-linkcard p{font-size:17px;line-height:1.5;color:var(--g-snow)}
@media (max-width:820px){.g-erp-grid{grid-template-columns:1fr}}

/* -------------------------------- calculator ------------------------------- */
.g-calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:start}
main.g .g-calc h2{font-size:clamp(26px,3vw,38px);line-height:1.1}
.g-calc-note{font-size:15px;line-height:1.56;color:var(--g-ink-dim);margin-top:14px;max-width:44ch}
.g-calc-field{margin-bottom:14px;display:grid;gap:6px}
.g-calc-field label{color:var(--g-ink);font-size:11px}
.g-calc-field input{background:#fff;color:var(--g-ink);border:1px solid var(--line)}
.g-calc-field input::placeholder{color:var(--g-dim);opacity:1}
.g-calc-out{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.g-calc-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0}
.g-calc-line span{font-size:14.5px;color:var(--g-ink-dim)}
.g-calc-line b{font-family:var(--g-head);font-size:26px;letter-spacing:-.03em;color:var(--g-accent-text)}
.g-calc-line.g-year b{font-size:32px}
.g-calc-formula{margin-top:11px;font-size:12.5px;color:var(--g-ink-dim)}
@media (max-width:860px){.g-calc{grid-template-columns:1fr}}

/* ------------------------------ pilot + form ------------------------------- */
.g-pilot{background:linear-gradient(180deg,var(--g-d1) 0%,var(--g-d2) 55%,var(--g-d3) 100%);padding:58px 0;margin-top:8px}
.g-pilot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:start}
.g-pilot-copy{color:var(--g-snow)}
main.g .g-pilot-copy h2,.g-pilot .g-pilot-copy h2{font-size:clamp(26px,3.1vw,40px);color:#fff;margin-top:18px;line-height:1.08;max-width:none}
.g-pilot-lead{margin-top:14px;font-size:16px;line-height:1.55;color:var(--g-snow)}
.g-points{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.g-point{display:flex;gap:11px;font-size:15px;line-height:1.5;color:var(--g-snow-dim)}
.g-point b{color:var(--g-snow)}
.g-point .g-mark{background:var(--g-hi-tint);color:#fff}
.g-price-line{margin-top:26px;padding:18px 20px;border-radius:14px;border:1px solid color-mix(in srgb,var(--g-snow) 16%,transparent);background:rgba(255,255,255,.045);
  font-size:15px;line-height:1.5;color:var(--g-snow-dim)}
.g-price-line a{color:var(--g-signal);text-decoration:underline;text-underline-offset:3px}
.g-price-line strong{color:var(--g-signal)}
.g-cohort{margin-top:16px;display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--g-snow)}
.g-cohort .g-edot{margin-top:8px;width:8px;height:8px;border-radius:50%;background:var(--g-hi);flex:none;box-shadow:0 0 0 4px var(--g-hi-tint)}
.g-pilot form .field-note{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--g-snow-dim)}
.g-pilot form .field-note a{color:var(--g-hi);text-decoration:underline}
.g-pilot form .btn[type="submit"]{width:100%}
@media (max-width:860px){.g-pilot-grid{grid-template-columns:1fr}}

/* -------------------------------- short faq -------------------------------- */
.g-faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.g-more{display:inline-flex;margin-top:20px;font-family:var(--g-mono);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g-accent-text);border-bottom:1px solid var(--g-tint-brd);padding-bottom:3px}
.g-center{text-align:center}

/* --------------------------------- subpages -------------------------------- */
/* the home hero's shape in two parts: the text sits on the dark body (d1 to
   d3); the bright, luminous and near-white stops run in the foot below it,
   behind the light pills, so no line of text crosses from white to dark ink */
.g-page-hero{background:var(--g-paper);color:var(--g-snow);padding:0}
.g-ph-body{background:linear-gradient(180deg,var(--g-d1) 0%,var(--g-d2) 38%,var(--g-d3) 100%);padding:60px 0 34px}
.g-ph-foot{background:linear-gradient(180deg,var(--g-d3) 0%,var(--g-d4) 28%,var(--g-d5) 52%,var(--g-end) 86%,var(--g-paper) 100%);
  padding:20px 0 72px;min-height:112px}
.g-ph-foot .g-pills{margin-top:0}
.g-ph-foot .g-pill{background:color-mix(in srgb,var(--g-card) 94%,transparent);color:var(--g-ink);border-color:var(--g-line);
  box-shadow:0 8px 20px var(--g-shadow)}
.g-page-hero .container{position:relative;z-index:1}
main.g .g-page-hero h1{font-size:clamp(30px,3.8vw,48px);color:#fff;margin:20px 0 14px;line-height:1.06}
.g-page-hero .g-lead{font-size:16.5px;line-height:1.6;max-width:62ch;color:rgba(255,255,255,.9)}
.g-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.g-pill{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid color-mix(in srgb,var(--g-snow) 16%,transparent);
  color:var(--g-snow);font-size:13px;font-weight:600}
.g-band{background:linear-gradient(180deg,var(--g-d1) 0%,var(--g-d2) 60%,var(--g-d3) 100%);color:var(--g-snow)}
main.g .g-band h2,main.g .g-band h3{color:#fff}
.g-kicker{display:inline-block;font-family:var(--g-mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-accent-text);margin-bottom:10px}
.g-band .g-kicker,.g-page-hero .g-kicker{color:var(--g-hi)}
main.g .g-split h2,main.g .g-section > .container > h2{font-size:clamp(26px,3vw,38px);line-height:1.1}
.g-text{font-size:16px;line-height:1.6;color:var(--g-ink-dim);margin-top:12px}
.g-band .g-text{color:var(--g-snow-dim)}
.g-contrast{font-family:var(--g-head);font-weight:700;font-size:clamp(19px,2.1vw,24px);line-height:1.35;letter-spacing:-.015em;
  max-width:780px;color:var(--g-ink);margin-top:14px}
.g-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.g-split.g-top{align-items:start}
@media (max-width:860px){.g-split{grid-template-columns:1fr;gap:30px}}
.g-grid{display:grid;gap:18px}
.g-grid-2{grid-template-columns:repeat(2,1fr)}
.g-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.g-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-grid-2,.g-grid-3{grid-template-columns:1fr}}
.g-grid-label{display:flex;justify-content:flex-end;margin:-14px 0 12px}
main.g .g-grid .g-card h3,main.g .g-feature-card h3{font-size:18px;margin:0 0 8px;color:var(--g-ink);letter-spacing:-.02em}
.g-grid .g-card p{font-size:14.5px;line-height:1.56;color:var(--g-ink-dim)}
.g-band .g-grid .g-card{background:var(--g-glass-bg);border-color:var(--g-glass-brd);color:var(--g-snow);box-shadow:none}
main.g .g-band .g-grid .g-card h3{color:#fff}
.g-band .g-grid .g-card p{color:var(--g-snow-dim)}
.g-cnum{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:10px;
  font-family:var(--g-mono);font-weight:700;font-size:12.5px;margin-bottom:12px;background:var(--g-line);color:var(--g-ink)}
.g-band .g-cnum{background:rgba(255,255,255,.14);color:#fff}
.g-tagchip{display:inline-flex;padding:4px 11px;border-radius:999px;background:var(--g-tint);color:var(--g-accent-text);
  font-family:var(--g-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.g-band .g-tagchip{background:rgba(255,255,255,.13);color:#fff}
.g-features{display:flex;flex-direction:column}
.g-frow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--g-line)}
.g-frow:last-child{border-bottom:0}
.g-check{flex:none;width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;background:var(--g-tint);color:var(--g-accent-text);margin-top:1px}
.g-frow b{display:block;font-size:15px;color:var(--g-ink);margin-bottom:2px}
.g-frow span{display:block;font-size:14px;color:var(--g-ink-dim);line-height:1.52}
.g-band .g-frow{border-color:color-mix(in srgb,var(--g-snow) 13%,transparent)}
.g-band .g-frow b{color:#fff}
.g-band .g-frow span{color:var(--g-snow-dim)}
.g-band .g-check{background:var(--g-hi-tint);color:#fff}
.g-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.g-stage{background:color-mix(in srgb,var(--g-d1) 40%,transparent);border:1px solid color-mix(in srgb,var(--g-snow) 17%,transparent);border-radius:14px;padding:20px 20px 22px}
.g-stage-num{display:inline-flex;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.13);font-family:var(--g-mono);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:12px}
main.g .g-stage h3{font-size:18px;color:#fff;margin-bottom:8px}
.g-stage p{font-size:14px;line-height:1.56;color:var(--g-snow-dim)}
@media (max-width:860px){.g-stages{grid-template-columns:1fr}}
.g-pipeline{display:flex;align-items:center;gap:14px;margin-top:8px}
.g-pipe{flex:1;background:var(--g-glass-bg);border:1px solid var(--g-glass-brd);border-radius:18px;padding:20px;text-align:center;color:var(--g-snow)}
.g-pipe b{display:block;font-family:var(--g-head);font-size:18px;margin-bottom:8px;color:#fff}
.g-pipe span{display:block;font-size:13.5px;line-height:1.5;color:var(--g-snow-dim)}
.g-pipe-link{flex:none;width:36px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.08),var(--g-hi),rgba(255,255,255,.08));position:relative}
.g-pipe-link::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--g-hi)}
@media (max-width:820px){
  .g-pipeline{flex-direction:column}
  .g-pipe{width:100%}
  .g-pipe-link{width:2px;height:26px}
  .g-pipe-link::after{right:50%;top:auto;bottom:-3px;transform:translate(50%,0)}
}
.g-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--g-accent-text);font-weight:600;font-size:15px;
  text-decoration:underline;text-underline-offset:3px}
.g-text a{color:var(--g-accent-text);text-decoration:underline;text-underline-offset:3px}
.g-band .g-link{color:var(--g-hi)}
.g-window{border-radius:22px;overflow:hidden;background:var(--g-dark-glass);border:1px solid color-mix(in srgb,var(--g-snow) 20%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px color-mix(in srgb,var(--g-d1) 35%,transparent)}
.g-window-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--g-snow) 12%,transparent);
  font-size:12.5px;color:var(--g-snow-dim)}
.g-window-top b{color:#fff}
.g-traffic{display:flex;gap:6px;flex:none}
.g-traffic span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.g-window-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.g-divider{text-align:center;font-size:12px;color:var(--g-snow-dim)}
.g-mini{margin-top:14px;padding-top:14px;border-top:1px solid var(--g-card-brd);display:flex;flex-direction:column;gap:7px}
.g-mini-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.g-mini-row span{color:var(--g-ink-dim)}
.g-mini-row b{font-weight:600;color:var(--g-ink);text-align:right}
.g-band .g-mini{border-color:color-mix(in srgb,var(--g-snow) 14%,transparent)}
.g-band .g-mini-row span{color:var(--g-snow-dim)}
.g-band .g-mini-row b{color:#fff}
.g-wide{grid-column:1/-1}

/* shared pages (style.css bodies): the pilot band sits after their content */
.g-shared-pilot{margin-bottom:14px}

/* ------------------------------ reveal + motion ---------------------------- */
.g-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.g-reveal.in{opacity:1;transform:none}
.no-js .g-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .g-tiles i,.g-tiles i.lit{transition:none;opacity:.14}
  .g-reveal{opacity:1;transform:none;transition:none}
  .g-step{transition:none}
  .g-scene-el{animation:none}
  .g-step.active.playing .g-progress i{animation:none;transform:scaleX(1)}
}
/* paused (F3): the tiles hold still without a fade */
.g-still .g-tiles i{transition:none}

@media (max-width:640px){
  .g-section,main.g > .g-section{padding:48px 0}
  .g-ph-body{padding:46px 0 28px}
  .g-ph-foot{padding:16px 0 56px;min-height:96px}
  main.g > .g-pilot{padding:44px 0}
}
@media (max-width:480px){
  .g-panel,.g-gasband{margin-left:8px;margin-right:8px;border-radius:24px}
  .g-col{padding:24px 20px}
  .g-calc-line b{font-size:22px}
  .g-calc-line.g-year b{font-size:26px}
  .g-gasband .btn{white-space:normal;text-align:center;line-height:1.3;padding:12px 18px}
}

/* FAQ groups on the shared FAQ page (style.css body) */
.g-faq-group{font-size:clamp(22px,2.4vw,28px);margin:40px 0 14px}
.g-faq-group:first-child{margin-top:0}

/* security.html additions A to D: paragraph cards beside the list cards */
.control-card > p{margin-top:10px;line-height:1.56;color:var(--g-snow-dim)}

/* privacy.html, terms.html: section headings are h2 (was h3, skipped a level), kept at the h3 look */
.privacy-block h2.g-legal-h{font-size:22px;margin-bottom:10px;letter-spacing:-.033em;max-width:none}
main.g .g-grid .g-card h2{font-size:20px;margin:0 0 8px;color:var(--g-ink);letter-spacing:-.02em}

/* 404: one lead per language */
.g-404-lead + .g-404-lead{margin-top:10px}

/* variant rules (palettes.py RULES), last so they win at equal specificity */
/* palette-rules:begin v5 */
/* V5: brushed-metal primary buttons (header Book a Demo, hero, bands, pilot, footer) */
.btn:not(.g-gas-btn):not(.g-btn-ghost):not(.on-dark):not(.secondary):not(.dark){background:linear-gradient(135deg,#9a7a2a 0%,#d4b25a 35%,#f3e2ad 50%,#c9a449 68%,#9a7a2a 100%);
  color:#0a0a0a;border:1px solid #6e5418;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.4)}
.btn:not(.g-gas-btn):not(.g-btn-ghost):not(.on-dark):not(.secondary):not(.dark):hover{background:linear-gradient(135deg,#9a7a2a 0%,#c9a449 20%,#f3e2ad 36%,#d4b25a 56%,#9a7a2a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.35)}
/* V5: gold heading words are a sheen on dark only; on light paper (and the idea line's
   light backing) they are bronze. Without background-clip:text they keep the champagne hi. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .g-on-dark .g-tail,.g-hero .g-tail,.g-page-hero .g-tail,.g-band .g-tail,.g-pilot .g-tail{
    background-image:linear-gradient(90deg,#e6c786 0%,#f7e7b5 45%,#c9a449 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .g-hero .g-idea .g-tail{background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--g-accent-deep)}
}
/* V5: the idea line's backing sits over near-black, not a bright stop: at 88% its bronze
   tail measured 4.35, so the backing is nearly opaque here */
.g-hero .g-idea{background:color-mix(in srgb,var(--g-end) 96%,transparent)}
/* V5: champagne hairline on eyebrow pills on dark */
.g-eyebrow:not(.g-light){border:1px solid rgba(230,199,134,.45)}
/* V5 focus (fix brief round 4): every indicator 3:1 against the element and its backdrop.
   On light, a bronze ring: 5.07-6.27 on ivory, card and paper-2, 3.03-3.11 on a black field or tab.
   In dark sections, champagne: 9.28 or more on d1-d5. Neither reaches 3:1 on the gold buttons'
   own gradient, so those carry an ink inner ring (4.89 or more on every stop) inside the outer one. */
:focus-visible,.navlinks a:focus-visible,.btn:focus-visible,.dash-tabs button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #7a5a10;outline-offset:3px}
:is(.g-hero,.g-page-hero,.g-band,.g-pilot,.g-on-dark,.g-gasband,.dark-section,.dark) :focus-visible{outline-color:#e6c786}
/* FAQ items are overflow:hidden: their ring sits inside the element, on its own fill.
   The hero step buttons (round 5) are heading labels on the step's own dark fill: the default ring. */
summary:focus-visible{outline-offset:-4px}
.btn:not(.g-gas-btn):not(.g-btn-ghost):not(.on-dark):not(.secondary):not(.dark):focus-visible{outline-offset:2px;
  box-shadow:0 0 0 2px #0a0a0a,inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.4)}
/* palette-rules:end */