/* ============================================================
   iGO HOMEPAGE — UX REFINEMENT LAYER v3
   Loads LAST. Keeps the slate theme, green brand, Syne/Inter
   type and ALL copy. Goal: fix hierarchy, modernise the visual,
   tighten responsive behaviour and strengthen the Start-free CTA.
   Direction (2026): editorial structure · monochrome + single
   green accent · flat design with depth · confident grid.
   ============================================================ */

:root{
  --space-section: clamp(68px, 8.5vw, 116px);
  --container: 1120px;
  --r-card: 18px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.045) inset, 0 24px 60px -34px rgba(0,0,0,0.85);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 70px -34px rgba(0,0,0,0.9);
  --accent-line: linear-gradient(90deg, var(--accent2), rgba(16,184,146,0.18));
}

/* ----------------------------------------------------------------
   1. TYPE HIERARCHY  — the core fix.
   The base stylesheet gives EVERY section H2 the animated blue-white
   gradient sheen, so they all compete with the hero. Reserve that
   treatment for the hero alone; section headlines become solid and
   calm, with the green accent doing the emphasis.
---------------------------------------------------------------- */
.ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2, .cta-h2,
.prob-h2, .aw-head, h2.grad-head, .trust-band .grad-head,
.ws-oneliner p, .stat-val, .mkt-stat strong, .aw-cardtitle span,
.aw-dmnum, .profd-name, .profd-dmnum, .dmr-name, .bft-role, .awn-name{
  background:none !important;
  background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--chrome-pure) !important;
  animation:none !important;
}

/* Emphasis words inside section headlines → the single green accent */
.ws-h2 em, .wyc-h2 em, .bft-h2 em, .profd-h2 em, .dmr-h2 em, .alw-h2 em,
.faq-h2 em, .cta-h2 em, .prob-h2 em, .aw-head em, h2.grad-head em,
.ws-oneliner p em{
  background:none !important;
  background-image:none !important;
  -webkit-text-fill-color:var(--accent2) !important;
  color:var(--accent2) !important;
  font-style:normal;
  animation:none !important;
}

/* One consistent section-headline scale, clearly below the hero */
.ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2,
.prob-h2, .aw-head, .trust-band .grad-head{
  font-family:var(--display) !important;
  font-weight:700 !important;
  font-size:clamp(1.85rem, 3.2vw, 2.65rem) !important;
  line-height:1.08 !important;
  letter-spacing:-0.032em !important;
  text-wrap:balance;
}
.cta-h2{
  font-size:clamp(2rem, 3.8vw, 3rem) !important;
  letter-spacing:-0.035em !important;
}

/* Base heading: one solid colour (emphasis handled separately) */
.ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2,
.prob-h2, .aw-head, .cta-h2, .grad-head, .trust-band .grad-head{
  font-weight:700 !important;
  background:none !important;
  -webkit-text-fill-color:#F2F4F9 !important;
  color:#F2F4F9 !important;
}
/* Emphasis words: animated blue-white sheen, exactly like the hero headline */
.ws-h2 em, .wyc-h2 em, .bft-h2 em, .profd-h2 em, .dmr-h2 em, .alw-h2 em, .faq-h2 em,
.prob-h2 em, .aw-head em, .cta-h2 em, .grad-head em{
  font-style:normal !important;
  background-image:linear-gradient(100deg,#C8CFEA 0%,#FFFFFF 25%,#C8CFEA 50%,#FFFFFF 75%,#C8CFEA 100%) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
@media (prefers-reduced-motion:no-preference){
  .ws-h2 em, .wyc-h2 em, .bft-h2 em, .profd-h2 em, .dmr-h2 em, .alw-h2 em, .faq-h2 em,
  .prob-h2 em, .aw-head em, .cta-h2 em, .grad-head em{ animation:titleSheen 6s linear infinite }
}
/* one-liner emphasis matches the hero sheen too */
.ws-oneliner p em{
  font-style:normal !important;
  background:none !important;
  background-image:linear-gradient(100deg,#C8CFEA 0%,#FFFFFF 25%,#C8CFEA 50%,#FFFFFF 75%,#C8CFEA 100%) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  animation:titleSheen 6s linear infinite !important;
}

/* Sub / lead paragraph — one rhythm everywhere */
.ws-sub, .wyc-sub, .bft-sub, .profd-sub, .dmr-sub, .alw-sub, .faq-sub,
.prob-body, .trust-sub, .aw-sub{
  font-size:1.0rem !important;
  line-height:1.7 !important;
  color:var(--muted2) !important;
  text-wrap:pretty;
}

/* Kicker — match the hero eyebrow exactly (chrome-bright text, green rules) */
.relationship-kicker{
  font-size:0.74rem !important;
  letter-spacing:0.22em !important;
  gap:13px !important;
  color:var(--chrome-bright) !important;
  margin-bottom:18px !important;
  opacity:1;
}
.relationship-kicker::before, .relationship-kicker::after{
  width:26px !important;
}

/* ----------------------------------------------------------------
   2. SPACING & RHYTHM  — more air, consistent vertical scale,
   shared container width, content aligned to a calmer grid.
---------------------------------------------------------------- */
.prob-section, .ws-section, .wyc-section, .aw-section, .profd-section,
.dmr-section, .alw-section, .bft-section, .faq-section, .cta-section,
.trust-band, .stats-band{
  padding-top:var(--space-section) !important;
  padding-bottom:var(--space-section) !important;
  padding-left:clamp(20px, 4vw, 40px) !important;
  padding-right:clamp(20px, 4vw, 40px) !important;
}
.prob-inner, .ws-inner, .wyc-inner, .aw-inner, .profd-inner, .dmr-inner,
.alw-inner, .bft-inner, .faq-inner, .cta-inner, .trust-inner, .stats-inner{
  max-width:var(--container) !important;
}

/* tighten the kicker→headline→sub stack so groups read as one unit */
.ws-head, .bft-head, .alw-head, .dmr-head{ margin-top:0 !important; }
.ws-head .ws-h2, .wyc-h2, .bft-head .bft-h2, .dmr-head .dmr-h2,
.alw-head .alw-h2, .profd-head .profd-h2{ margin-top:6px !important; }
.ws-sub, .wyc-sub, .bft-sub, .dmr-sub, .alw-sub, .profd-sub{
  margin-top:14px !important;
}

/* ----------------------------------------------------------------
   3. HERO  — keep the signature sheen, but give the layout room and
   make the primary action unmistakable.
---------------------------------------------------------------- */
#heroSection.hero{ padding-top:clamp(64px,8vw,116px) !important; padding-bottom:clamp(56px,7vw,88px) !important; }
#heroSection .hero-2col .hero-eyebrow{
  font-size:0.72rem !important; letter-spacing:0.2em !important; margin-bottom:22px !important;
}
#heroSection .hero-2col .hero-title{
  font-size:clamp(2.25rem, 4.3vw, 3.65rem) !important;
  line-height:1.06 !important;
  letter-spacing:-0.04em !important;
  margin-bottom:28px !important;
  text-wrap:balance;
}
#heroSection .hero-2col .hero-sub{
  font-size:1.05rem !important; line-height:1.65 !important; max-width:500px !important;
  color:var(--muted2) !important;
  margin-bottom:36px !important;
  text-wrap:pretty;
}
/* keep the action group tight to the copy: sub → buttons → microcopy read as one unit */
#heroSection .hero-2col .hero-cta-wrap{ margin-top:0 !important; margin-bottom:14px !important; }
#heroSection .hero-2col .hero-eyebrow{ margin-bottom:28px !important; }
.hero-graph-wrap{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ----------------------------------------------------------------
   4. CTA SYSTEM  — Start free is the hero action. Stronger fill,
   crisper depth, confident hover. Secondary stays quiet.
---------------------------------------------------------------- */
.btn-primary, .form-submit{
  background:linear-gradient(180deg, var(--accent2), var(--accent)) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 12px 26px -10px rgba(14,122,98,0.7), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  font-weight:700 !important; letter-spacing:-0.01em !important;
}
.btn-primary:hover, .form-submit:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 18px 34px -10px rgba(14,122,98,0.78), inset 0 1px 0 rgba(255,255,255,0.24) !important;
}
.btn-primary:active, .form-submit:active{ transform:translateY(0) !important; }

/* Hero / section marketing CTAs: bigger tap target, even sizing */
.hero-cta-wrap .btn-primary, .trust-cta .btn-primary, .cta-section .btn-primary,
.prob-inner .btn-primary{
  padding:15px 34px !important; font-size:0.98rem !important; border-radius:0 !important;
}
.hero-cta-wrap .btn-outline, .trust-cta .btn-outline, .cta-section .btn-outline{
  padding:15px 26px !important; font-size:0.92rem !important; border-radius:0 !important;
}
.btn-outline{ font-weight:600 !important; }

/* Nav: prevent the wrap/clip seen at narrower desktop and make the
   primary nav action read as the key step. */
.nav-right{ flex-wrap:nowrap !important; gap:10px !important; }
.nav-right .btn-ghost, .nav-right .btn-primary{ white-space:nowrap !important; }
.nav-right .btn-primary{ padding:9px 18px !important; font-size:0.8rem !important; }

/* ----------------------------------------------------------------
   5. CARD SYSTEM  — one radius scale, flat surfaces with restrained
   depth used only for hierarchy (2026 flat-with-depth).
---------------------------------------------------------------- */
.prob-card, .aw-card, .awn-panel, .profd-card, .dmr-card, .dmr-single .dmr-card,
.alw-card, .alw-notif, .alw-recur, .bft-card, .wyc-card, .ws-compare,
.tm-card, .mkt, .stat-cell, .faq-item, .today-card, .use-case-card,
.cta-chip, .wyc-query{
  border-radius:0 !important;
  border-color:var(--border) !important;
}
.prob-card, .aw-card, .awn-panel, .profd-card, .dmr-single .dmr-card,
.ws-compare, .mkt{
  box-shadow:var(--shadow-card) !important;
}
/* hover depth only on the interactive marketing cards */
.bft-card, .tm-card, .wyc-card, .stat-cell{
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.bft-card:hover, .tm-card:hover, .wyc-card:hover, .stat-cell:hover{
  transform:translateY(-3px) !important;
  border-color:var(--border2) !important;
  box-shadow:var(--shadow-card-hover) !important;
}
/* neutral cards — no coloured accent borders (category reads from the dot + label) */
.wyc-card{ border-top:1px solid var(--border) !important; }

/* ----------------------------------------------------------------
   6. COLOUR DISCIPLINE  — monochrome + a single green accent.
   Keep semantic colour where it carries meaning (signals, status,
   license badges); calm the purely decorative colour.
---------------------------------------------------------------- */
/* stat values: neutral, with the live "signals" value in green */
.stat-val, .hero-stat-val{ color:var(--chrome-pure) !important; }
.stat-val.y, .hero-stat-val.y{ color:var(--accent2) !important; text-shadow:none !important; }
.stat-val.m, .hero-stat-val.m{ color:var(--chrome-pure) !important; }
.mkt-stat strong{ color:var(--accent2) !important; }

/* the stats band reads as one quiet strip, signals the standout */
.stats-band{ border-bottom:1px solid var(--border); }
.stat-strip{ margin-top:104px !important; }
.stat-cell{ background:rgba(33,37,46,0.42) !important; }
.stat-lbl{ letter-spacing:0.04em; }

/* ----------------------------------------------------------------
   7. SIGNAL SUMMARY BAR + FILTERS + TABLE region
---------------------------------------------------------------- */
.filters{ padding:14px clamp(20px,4vw,40px) !important; gap:9px !important; }
#operator-preview{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ----------------------------------------------------------------
   8. FAQ — calmer, more legible
---------------------------------------------------------------- */
.faq-list{ max-width:820px !important; gap:10px !important; }
.faq-item summary{ font-size:1rem !important; }

/* ----------------------------------------------------------------
   9. RESPONSIVE
---------------------------------------------------------------- */

/* Laptop 1280 — slightly tighter rhythm, keep generous */
@media (max-width:1280px){
  :root{ --space-section: clamp(60px,7.5vw,92px); }
  .prob-inner, .ws-inner, .wyc-inner, .aw-inner, .profd-inner, .dmr-inner,
  .alw-inner, .bft-inner, .faq-inner, .cta-inner, .trust-inner{ max-width:1000px !important; }
}

/* Tablet 768 — collapse remaining 2-col blocks, restack hero already
   handled at 860. Make split panels stack for comfortable reading. */
@media (max-width:860px){
  .prob-inner, .aw-grid, .alw-grid, .dmr-flow, .profd-grid, .ws-compare{
    grid-template-columns:1fr !important;
  }
  .aw-left{ position:static !important; }
  .profd-cell:nth-child(odd){ border-right:none !important; }
  .ws-col--after{ border-left:none !important; border-top:1px solid var(--border) !important; }
  .ws-arrow{ top:auto !important; left:50% !important; transform:translate(-50%,-50%) rotate(90deg) !important; }
  .bft-grid{ gap:14px !important; }
  #heroSection .hero-2col .hero-title{ font-size:clamp(2.2rem,6vw,3.2rem) !important; }
  #heroSection .hero-2col .hero-sub{ max-width:560px !important; }
}

/* tablet — let CTA rows wrap nicely, give sections a touch less side air */
@media (max-width:768px){
  .hero-cta-wrap .btn-primary, .hero-cta-wrap .btn-outline,
  .trust-cta .btn-primary, .trust-cta .btn-outline{ flex:0 1 auto; }
  .wyc-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* keep hero CTAs side-by-side on tablet — there's room until real mobile.
   Don't force justify here: the 2-col block keeps them flex-start (left) on
   desktop and centres them only on the stacked layout (<=860). */
@media (min-width:481px){
  #heroSection .hero-cta-wrap{
    flex-direction:row !important; flex-wrap:wrap !important;
  }
}
/* desktop 2-col hero: force the CTA group flush-left with the title/sub
   (beats the base `justify-content:center !important`) */
@media (min-width:861px){
  #heroSection .hero-2col .hero-cta-wrap{ justify-content:flex-start !important; }
}

/* Mobile 390 — scale headlines down, full-bleed CTAs, tighter cards */
@media (max-width:480px){
  :root{ --space-section: clamp(60px,14vw,80px); --r-card:16px; }
  .prob-inner{ gap:34px !important; }
  .ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2,
  .prob-h2, .aw-head, .trust-band .grad-head{
    font-size:clamp(1.55rem, 7.5vw, 1.95rem) !important;
  }
  .cta-h2{ font-size:clamp(1.7rem, 8vw, 2.2rem) !important; }
  .ws-sub, .wyc-sub, .bft-sub, .profd-sub, .dmr-sub, .alw-sub, .faq-sub,
  .prob-body, .trust-sub, .aw-sub{ font-size:0.95rem !important; }

  #heroSection .hero-2col .hero-title{ font-size:clamp(2.05rem,10vw,2.7rem) !important; }
  #heroSection .hero-2col .hero-sub{ font-size:0.98rem !important; }

  /* CTA groups: two buttons sit side-by-side on mobile, not full-width stacked */
  .hero-cta-wrap, .cta-actions, .trust-cta{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    gap:10px !important; width:100% !important; justify-content:center !important;
  }
  .hero-cta-wrap .btn-primary, .hero-cta-wrap .btn-outline,
  .cta-actions .btn-primary, .cta-actions .btn-outline,
  .trust-cta .btn-primary, .trust-cta .btn-outline{
    flex:1 1 0 !important; width:auto !important; min-width:0 !important;
    justify-content:center !important; white-space:nowrap !important; padding:13px 12px !important;
  }
  .wyc-grid{ grid-template-columns:1fr !important; }
  .stat-strip{ grid-template-columns:repeat(2,1fr) !important; }
  /* lone 5th stat tile → centred across both columns (gap 14px) */
  .stat-strip .stat-cell:nth-child(5):last-child{
    grid-column:1 / -1 !important; width:calc(50% - 7px) !important; margin:0 auto !important;
  }
  /* footer CTA card is redundant on mobile (page already ends in CTAs) */
  .footer-cta{ display:none !important; }
  .prob-section, .ws-section, .wyc-section, .aw-section, .profd-section,
  .dmr-section, .alw-section, .bft-section, .faq-section, .cta-section, .trust-band{
    padding-left:22px !important; padding-right:22px !important;
  }
}

/* ----------------------------------------------------------------
   Problem section: give the headline column room to breathe
---------------------------------------------------------------- */
.prob-inner .relationship-kicker{ margin-bottom:26px !important; }
.prob-h2{ margin:0 0 24px !important; }
.prob-body{ margin:0 0 36px !important; }
.prob-inner .btn-primary{ margin-top:4px !important; }

/* Tablet: the locked-table CTA button kisses the section's bottom line —
   give the overlay more bottom clearance so the button clears it. */
@media (max-width:900px){
  .table-locked-overlay{ padding-bottom:76px !important; }
}

/* Stats strip is 2-col from 760 down — centre the lone 5th tile (gap 14px) */
@media (max-width:760px){
  .stat-strip .stat-cell:nth-child(5):last-child{
    grid-column:1 / -1 !important; width:calc(50% - 7px) !important; margin:0 auto !important;
  }
}

/* Hero visual: the desktop layer spans hero→stats (pours into tiles). On
   tablet/mobile that spanning canvas is unavoidably oversized, so swap to a
   compact world contained inside the hero spacer instead. */
@media (max-width:860px){
  #heroVizFrame{ display:none !important; }
  #heroVizCompact{ display:block !important; }
  #heroSection .hero-right{ min-height:300px !important; }
  /* the big runway above the tiles is only for the desktop pour — reclaim it */
  .stat-strip{ margin-top:0 !important; }
  .stats-band{ padding-top:8px !important; }
}
@media (min-width:521px) and (max-width:900px){
  .wyc-grid .wyc-card:nth-child(5):last-child{
    grid-column:1 / -1 !important;
    width:calc(50% - 6px) !important;
    margin-left:auto !important; margin-right:auto !important;
  }
}

/* === HEADING TYPE RULE (2026-06-22) — homepage ============================
   Syne 700 + silver sheen on the WHOLE heading (base AND emphasis); weight 800
   is NOT used (see brandbook). No green word/phrase highlight — emphasis blends
   into the same sheen as the hero headline. ============================== */
.ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2, .prob-h2, .aw-head, .cta-h2, .grad-head, .today-title, .use-cases-title, .relationship-title,
.ws-h2 em, .wyc-h2 em, .bft-h2 em, .profd-h2 em, .dmr-h2 em, .alw-h2 em, .faq-h2 em, .prob-h2 em, .aw-head em, .cta-h2 em, .grad-head em, .today-title em, .use-cases-title em, .relationship-title em{
  font-weight:700 !important; font-style:normal !important;
  background-image:linear-gradient(100deg,#C8CFEA 0%,#FFFFFF 25%,#C8CFEA 50%,#FFFFFF 75%,#C8CFEA 100%) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
@media (prefers-reduced-motion:no-preference){
  .ws-h2, .wyc-h2, .bft-h2, .profd-h2, .dmr-h2, .alw-h2, .faq-h2, .prob-h2, .aw-head, .cta-h2, .grad-head, .today-title, .use-cases-title, .relationship-title{ animation:titleSheen 6s linear infinite }
}

/* ============================================================
   FINAL gr8 de-round + chamfer — overrides the .card{border-radius:0}
   rule above (this file loads last on the homepage, so this wins).
   ============================================================ */
*{border-radius:0 !important}
[class*="dot"],.qd,.awn-d,.aw-dot,.alw-dot,.dmr-dot,.is-loading::after,
.nav-badge-dot,.status-dot,.step-dot,.modal-badge-dot{border-radius:50% !important}
/* cards / panels / tiles -> chamfered cut corners (beats the card-radius rule) */
.prob-card,.aw-card,.awn-panel,.profd-card,.dmr-card,.dmr-single .dmr-card,.alw-card,.alw-notif,.alw-recur,
.bft-card,.wyc-card,.ws-compare,.tm-card,.mkt,.stat-cell,.today-card,.use-case-card,.signal-card,
.contact-card,.alert-card,.alert-box,.product-preview-card,.roadmap-card,.modal-box,
[class*="card"],[class*="panel"],[class*="-box"],[class*="tile"],[class*="frame"],[class*="compare"]{
  border-radius:0 !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px) !important}
.stat-cell{border-top:2px solid var(--accent2) !important}
/* FAQ stays a gr8 divider row, never a chamfered card */
.faq-item{clip-path:none !important;border-radius:0 !important}

/* FINAL: buttons flat — box-shadow ignores clip-path and pokes past the chamfer ("mangled").
   This file loads last on the homepage, so this is the final word. */
.btn-primary,.form-submit,.btn-outline,.btn-ghost,[class*="btn"]{box-shadow:none !important;filter:none !important}
.footer-cta-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,0.22) !important;filter:drop-shadow(4px 5px 0 rgba(7,55,42,0.9)) !important}

/* remove the two decorative dots from the EXEC CHANGE / prob-badge */
.prob-badge::before{content:none !important;display:none !important}
.prob-livedot{display:none !important}
.prob-badge{gap:0 !important}