/* ==========================================================
   GT VOICE — shared stylesheet for every industry page.
   Page-specific copy lives in the HTML; nothing here is niche-specific.
   ========================================================== */
    :root {
      --bg: #fcfcfd;
      --panel: #ffffff;
      --ink: #121416;
      --muted: #6a6e73;
      --faint: #9a9ea3;
      --line: rgba(0, 0, 0, 0.105);
      --line-2: rgba(0, 0, 0, 0.07);
      --dark: #0d0f11;
      --dark-2: #15181b;
      --live: #2fb67c;
      --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
      --wrap: 1180px;
      --pad: clamp(1.15rem, 3.2vw, 2.4rem);
    }
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    html, body { min-height: 100%; max-width: 100%; }
    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    img { height: auto; }
    picture { display: block; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    h1, h2, h3 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.03; text-wrap: balance; }

    .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

    /* ---------- Mono micro-labels ---------- */
    .mono {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--faint);
      font-weight: 500;
    }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      border-radius: 11px; font-weight: 500; font-size: 0.95rem;
      padding: 0.82rem 1.4rem; border: 1px solid transparent; white-space: nowrap;
      transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .btn--dark { background: var(--ink); color: #fff; }
    .btn--dark:hover { background: #000; }
    .btn--light { background: #fff; color: var(--ink); }
    .btn--light:hover { background: #f2f2f4; }
    .btn--ghost { border-color: var(--line); color: var(--ink); }
    .btn--ghost:hover { border-color: rgba(0, 0, 0, 0.3); }
    .btn--on-dark { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
    .btn--on-dark:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); }
    .btn--sm { padding: 0.6rem 1.05rem; font-size: 0.88rem; border-radius: 9px; }

    .livedot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: 0 0 auto;
      box-shadow: 0 0 0 0 rgba(47, 182, 124, 0.55);
      animation: pulse 2.1s ease-out infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(47, 182, 124, 0.5); }
      70% { box-shadow: 0 0 0 8px rgba(47, 182, 124, 0); }
      100% { box-shadow: 0 0 0 0 rgba(47, 182, 124, 0); }
    }

    /* ==========================================================
       ANNOUNCEMENT BAR
       ========================================================== */
    .ann {
      background: var(--dark); color: rgba(255, 255, 255, 0.82);
      font-size: 0.8rem; position: relative; z-index: 210;
    }
    .ann__in {
      max-width: var(--wrap); margin: 0 auto; padding: 0.56rem var(--pad);
      display: flex; align-items: center; justify-content: center; gap: 0.7rem; text-align: center;
    }
    .ann__tag {
      font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--live); font-weight: 600;
    }
    .ann__link { display: inline-flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; justify-content: center; }
    .ann__link:hover .ann__go { color: #fff; }
    .ann__go { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; white-space: nowrap; }
    .ann__x {
      position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.45); line-height: 1; padding: 0.3rem; font-size: 0.95rem;
    }
    .ann__x:hover { color: #fff; }
    @media (max-width: 720px) { .ann__x { display: none; } }

    /* ==========================================================
       NAV
       ========================================================== */
    /* flush at rest; on scroll it lifts off and becomes an opaque white pill */
    .nav {
      position: sticky; top: 0; z-index: 200;
      background: var(--bg);
      padding: 0 var(--pad);
      transition: background 0.3s ease, padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav.is-scrolled { background: transparent; padding-top: 0.7rem; }

    .nav__in {
      max-width: var(--wrap); margin: 0 auto; padding: 0.72rem 0;
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
      border: 1px solid transparent; border-radius: 999px;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
                  max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav.is-scrolled .nav__in {
      max-width: min(100%, 1000px);
      background: #fff;
      border-color: rgba(0, 0, 0, 0.09);
      padding: 0.58rem 0.6rem 0.58rem clamp(1.1rem, 2vw, 1.5rem);
      box-shadow:
        0 1px 2px rgba(16, 20, 26, 0.07),
        0 6px 14px -6px rgba(16, 20, 26, 0.12),
        0 20px 36px -16px rgba(16, 20, 26, 0.26);
    }

    /* GT Voice lockup — same mark + tracking as the GT Voice page */
    .brand { justify-self: start; display: inline-flex; align-items: center; gap: 0.62rem; }
    .brand__mark { height: 30px; width: auto; display: block; }
    .brand__v, .brand__legal {
      font-weight: 600; font-size: 1.02rem; letter-spacing: 0.34em; text-transform: uppercase;
      line-height: 1;
    }
    .brand__v { color: var(--ink); }
    .brand__legal { color: var(--faint); margin-left: -0.18rem; }

    .nav__links { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.3rem); }
    .nav__link {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-size: 0.925rem; color: var(--muted); padding: 0.5rem 0.2rem;
      transition: color 0.18s ease;
    }
    .nav__link:hover { color: var(--ink); }

    /* industries dropdown — only present on the neutral landing page */
    .ndrop { position: relative; display: inline-flex; }
    .ndrop__btn { cursor: pointer; }
    .ndrop__btn svg { width: 13px; height: 13px; transition: transform .2s ease; }
    .ndrop:hover .ndrop__btn, .ndrop.is-open .ndrop__btn { color: var(--ink); }
    .ndrop.is-open .ndrop__btn svg { transform: rotate(180deg); }

    .ndrop__menu {
      position: absolute; top: calc(100% + .6rem); left: 50%; transform: translate(-50%, 6px);
      width: 310px; z-index: 60;
      background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
      padding: .5rem; box-shadow: 0 2px 6px rgba(16,20,26,.07), 0 20px 40px -18px rgba(16,20,26,.35);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .ndrop:hover .ndrop__menu, .ndrop.is-open .ndrop__menu, .ndrop:focus-within .ndrop__menu {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
    }
    /* keeps the hover bridge across the gap under the trigger */
    .ndrop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }

    .ndrop__item { display: block; border-radius: 11px; padding: .72rem .8rem; transition: background .16s ease; }
    .ndrop__item:hover { background: rgba(0,0,0,.04); }
    .ndrop__item i { display: flex; align-items: center; gap: .4rem; font-style: normal;
                     font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
                     text-transform: uppercase; color: var(--faint); }
    .ndrop__item i img { height: 11px; width: auto; }
    .ndrop__item b { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.02em; margin-top: .3rem; }
    .ndrop__item span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.45; margin-top: .14rem; }

    .nav__right { justify-self: end; display: inline-flex; align-items: center; gap: 0.9rem; }
    .nav__login { font-size: 0.925rem; color: var(--muted); }
    .nav__login:hover { color: var(--ink); }


    /* ---------- Mobile toggle + drawer ---------- */
    .nav__toggle { display: none; justify-self: end; width: 40px; height: 34px; position: relative; }
    .nav__toggle span {
      position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); border-radius: 2px;
      transition: transform 0.26s ease, opacity 0.2s ease;
    }
    .nav__toggle span:nth-child(1) { top: 12px; }
    .nav__toggle span:nth-child(2) { top: 20px; }
    .nav__toggle.is-on span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .nav__toggle.is-on span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

    .drawer {
      position: fixed; inset: 0; z-index: 190; background: var(--bg);
      padding: 6rem var(--pad) 2rem; overflow-y: auto;
      opacity: 0; visibility: hidden; transform: translateY(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    .drawer.is-open { opacity: 1; visibility: visible; transform: none; }
    .drawer__group { border-top: 1px solid var(--line-2); padding: 1rem 0; }
    .drawer__group:first-of-type { border-top: 0; }
    .drawer__group > .mono { display: block; margin-bottom: 0.7rem; }
    .drawer__group a { display: block; font-size: 1.22rem; font-weight: 500; letter-spacing: -0.02em; padding: 0.42rem 0; }
    .drawer__group a.drawer__sub { font-size: 1.02rem; font-weight: 400; color: var(--muted); padding-left: 1rem; }
    .drawer__group a.drawer__sub::before { content: "4"; margin-right: .45rem; color: var(--faint); }

    .drawer__cta { display: grid; gap: 0.6rem; margin-top: 1.4rem; }

    /* ==========================================================
       HERO — centered statement, flow figure beneath
       ========================================================== */
    .hero { position: relative; overflow: hidden; padding: clamp(3rem, 6.4vw, 5.6rem) 0 clamp(3.4rem, 6vw, 5.4rem); }


    .hero__top { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; }
    .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.35rem); letter-spacing: -0.04em; }
    .hero__sub {
      font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--muted);
      margin: clamp(1rem, 1.9vw, 1.4rem) auto 0; max-width: 56ch; line-height: 1.6;
    }
    .hero__cta { display: flex; justify-content: center; margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }
    .hero__alt {
      display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
      margin: 1rem auto 0; font-size: 0.9rem; color: var(--muted);
    }
    .hero__alt:hover { color: var(--ink); }
    .hero__alt u { text-underline-offset: 0.22em; text-decoration-thickness: 0.06em; }

    /* ---------- One call, annotated — layered white objects ---------- */
    /* "this is an example" line above the player on the neutral page */
    .stage__pre {
      max-width: 62ch; margin: clamp(2.6rem, 5vw, 4rem) auto 0; text-align: center;
      font-size: .86rem; line-height: 1.6; color: var(--muted); text-wrap: pretty;
    }
    .stage__pre .mono {
      display: inline-block; margin-right: .5rem; padding: .18rem .5rem;
      border: 1px solid var(--line); border-radius: 999px;
      font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
      vertical-align: .08em;
    }
    .stage__pre + .stage { margin-top: clamp(1.1rem, 2vw, 1.6rem); }

    .stage { position: relative; z-index: 1; margin-top: clamp(2.4rem, 5vw, 4rem); }

    .call {
      position: relative;
      background: var(--dark); color: #fff; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px;
      padding-bottom: clamp(3.4rem, 5vw, 4.4rem);   /* room for the cards that sit on the edge */
      box-shadow:
        0 1px 2px rgba(16, 20, 26, 0.06),
        0 4px 10px -4px rgba(16, 20, 26, 0.07),
        0 18px 34px -16px rgba(16, 20, 26, 0.17),
        0 50px 80px -44px rgba(16, 20, 26, 0.26);
    }
    .call__top {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
      padding: 1.05rem clamp(1.2rem, 2.6vw, 2.1rem); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .call__mark { height: 24px; width: auto; }
    .call__lead { display: flex; align-items: center; gap: .85rem; }

    /* supported languages, as a stacked set of flag discs */
    .flags { display: inline-flex; align-items: center; padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.14); }
    .fl {
      width: 22px; height: 22px; border-radius: 50%; display: block; flex: 0 0 auto;
      margin-left: -3px; overflow: hidden; position: relative;
      box-shadow: 0 0 0 2px var(--dark), inset 0 0 0 1px rgba(255,255,255,.2);
    }
    .fl svg { width: 100%; height: 100%; display: block; }
    /* later discs sit on top, so the stack reads left to right */
    .fl:first-child { margin-left: 0; }
    .fl--us { z-index: 5; } .fl--es { z-index: 4; } .fl--fr { z-index: 3; }
    .fl--de { z-index: 2; } .fl--more { z-index: 1; }
    .fl--more {
      background: rgba(255,255,255,.12); color: rgba(255,255,255,.8);
      display: grid; place-items: center; font-size: .72rem; font-weight: 600; line-height: 1;
    }
    .call__stamp { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

    .call__track { padding: clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.1rem) clamp(1.2rem, 2vw, 1.6rem); }

    .call__player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(.9rem, 1.8vw, 1.4rem); align-items: center; }
    /* "Listen here" nudge, pointing at the play button */
    .call__playwrap { position: relative; display: flex; }
    .callhint {
      position: absolute; top: 50%; right: calc(100% + 14px); z-index: 4;
      display: flex; align-items: center; gap: .45rem; white-space: nowrap; cursor: pointer;
      background: #fff; color: var(--ink); border-radius: 999px;
      padding: .5rem .9rem; font-size: .82rem; font-weight: 600; letter-spacing: -.012em;
      box-shadow: 0 2px 6px rgba(16,20,26,.14), 0 16px 32px -14px rgba(16,20,26,.45);
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateY(-50%) translateX(8px);
      transition: opacity .34s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .34s;
    }
    .callhint::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: #fff; }
    .callhint__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: 0 0 auto; }
    .call.hint-on .callhint {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateY(-50%);
      animation: hintnudge 1.7s ease-in-out .45s infinite;
    }
    @keyframes hintnudge { 0%, 100% { translate: 0 0; } 50% { translate: -5px 0; } }

    .call__play {
      width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
      background: var(--live); color: var(--dark); display: grid; place-items: center;
      transition: transform .18s ease, filter .18s ease;
      box-shadow: 0 4px 14px -4px rgba(47, 182, 124, .55);
    }
    .call__play:hover { transform: scale(1.05); filter: brightness(1.08); }
    .call__play svg { width: 18px; height: 18px; }
    .call__play .ico--pause { display: none; }
    .call.is-playing .call__play .ico--play { display: none; }
    .call.is-playing .call__play .ico--pause { display: block; }
    .call.no-audio .call__playwrap, .call.no-audio .call__time { display: none; }
    .call.no-audio .call__player { grid-template-columns: minmax(0, 1fr); }
    .call__time { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: rgba(255,255,255,.5); white-space: nowrap; }

    .call__wavewrap { position: relative; cursor: pointer; }
    .wave { display: flex; align-items: center; gap: 1.5px; height: clamp(74px, 8.6vw, 104px); }
    .wave i {
      flex: 1 1 0; min-width: 1px; border-radius: 2px;
      background: #fff; height: 4%;
      transform-origin: center; will-change: transform;
      transition: height 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity .15s linear;
      animation: wv var(--wd) var(--wdl) ease-in-out infinite alternate;
    }
    @keyframes wv { from { transform: scaleY(1); } to { transform: scaleY(var(--ws)); } }
    /* once it is playing, the part already heard stays lit and the rest dims back */
    .call.is-playing .wave i { opacity: .28 !important; }
    .call.is-playing .wave i.on { opacity: 1 !important; }

    /* event marks, placed at their real time along the track */
    .call__marks { position: absolute; inset: 0; pointer-events: none; }
    .call__mk { position: absolute; top: -6px; bottom: -6px; width: 1px; background: rgba(255,255,255,.3); pointer-events: auto; cursor: pointer; }
    .call__mk::before { content: ""; position: absolute; top: -3px; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
    .call__mk:hover, .call__mk.is-now { background: var(--live); }
    .call__mk:hover::before, .call__mk.is-now::before { background: var(--live); }

    /* beat cards float on the panel's lower edge */
    .beats {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.5rem, 1vw, 0.8rem);
      margin: clamp(-2.6rem, -2.8vw, -2rem) clamp(1.2rem, 2.6vw, 2.1rem) 0;
    }
    /* leader lines: each mark on the waveform routes down into its own card */
    .beatlinks { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 3; overflow: visible; }
    .beatlinks path { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1; transition: stroke .2s ease; }
    .beatlinks path.is-now { stroke: var(--live); }

    .bcard {
      position: relative;
      background: var(--panel); border: 1px solid var(--line); border-radius: 15px;
      padding: 0.95rem clamp(0.85rem, 1.5vw, 1.15rem) 1.05rem;
      box-shadow:
        0 1px 2px rgba(16, 20, 26, 0.06),
        0 3px 8px -3px rgba(16, 20, 26, 0.07),
        0 12px 22px -10px rgba(16, 20, 26, 0.15),
        0 30px 46px -28px rgba(16, 20, 26, 0.22);
    }
    .bcard { cursor: pointer; text-align: left; width: 100%; transition: border-color .18s ease, transform .18s ease; }
    .bcard:hover { transform: translateY(-2px); border-color: rgba(0,0,0,.2); }
    .bcard.is-now { border-color: var(--live); }
    .bcard__t { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--faint); }
    .bcard__h { display: block; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.016em; margin-top: 0.42rem; }
    .bcard__s { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.45; margin-top: 0.22rem; }

    /* outcome pill floats clear of everything */
    .outcome { text-align: center; margin-top: clamp(1.1rem, 2vw, 1.5rem); }
    .outcome span {
      display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: center;
      background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
      padding: 0.6rem 1.25rem; font-size: 0.87rem; color: var(--muted);
      box-shadow: 0 1px 2px rgba(16, 20, 26, 0.06), 0 3px 8px -3px rgba(16, 20, 26, 0.07), 0 14px 26px -14px rgba(16, 20, 26, 0.2);
    }
    .outcome b { font-weight: 600; color: var(--ink); letter-spacing: -0.012em; }
    .outcome svg { width: 15px; height: 15px; color: var(--ink); flex: 0 0 auto; }
    .outcome em { font-style: normal; color: rgba(0, 0, 0, 0.2); padding: 0 0.1rem; }

    /* ==========================================================
       CALCULATOR
       ========================================================== */
    .calc { padding: clamp(3.4rem, 7vw, 6rem) 0; }
    .calc__head { max-width: 860px; margin: 0 auto; text-align: center; }
    .calc__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.85rem); text-wrap: nowrap; }
    .calc__head p { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.1rem); margin: 0.85rem auto 0; line-height: 1.6; max-width: 44ch; }

    .calc__box {
      margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
      background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
      overflow: hidden; box-shadow: 0 34px 70px -56px rgba(0, 0, 0, 0.3);
    }
    .calc__bar {
      display: flex; align-items: center; gap: 1rem;
      padding: 0.95rem clamp(1.3rem, 2.6vw, 2.1rem); border-bottom: 1px solid var(--line-2);
    }
    .calc__step { white-space: nowrap; }
    .calc__track { flex: 1; height: 2px; background: rgba(0, 0, 0, 0.08); border-radius: 2px; overflow: hidden; }
    .calc__fill { height: 100%; width: 33.33%; background: var(--ink); border-radius: 2px; transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
    .calc__back { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
    .calc__back:hover { color: var(--ink); }
    .calc__back[hidden] { display: none; }

    .calc__body { padding: clamp(1.8rem, 3.6vw, 3rem) clamp(1.3rem, 2.6vw, 2.1rem) clamp(1.6rem, 3vw, 2.4rem); }
    .calc__cols { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: clamp(1.6rem, 3.4vw, 3.2rem); align-items: start; }
    .calc__cols.is-done { grid-template-columns: minmax(0, 1fr); }

    /* running answers rail */
    .rail { border-left: 1px solid var(--line-2); padding-left: clamp(1.2rem, 2.4vw, 1.8rem); }
    .calc__cols.is-done .rail { display: none; }
    .rail > .mono { display: block; margin-bottom: 0.3rem; }
    .rail__row { display: grid; gap: 0.2rem; padding: 0.82rem 0; border-top: 1px solid var(--line-2); }
    .rail__row:first-of-type { border-top: 0; }
    .rail__k { font-size: 0.78rem; color: var(--faint); }
    .rail__v { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.012em; color: var(--faint); font-variant-numeric: tabular-nums; }
    .rail__row.is-set .rail__v { color: var(--ink); }
    .rail__row.is-now .rail__k { color: var(--ink); }
    .rail__row.is-now { position: relative; }
    .rail__row.is-now::before {
      content: ""; position: absolute; left: calc(-1 * clamp(1.2rem, 2.4vw, 1.8rem) - 1px);
      top: 0.9rem; width: 1px; height: 1.5rem; background: var(--ink);
    }

    .q { display: none; }
    .q.is-active { display: block; animation: qin 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes qin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .q__label { font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 600; letter-spacing: -0.026em; line-height: 1.18; max-width: 22ch; }
    .q__help { color: var(--muted); font-size: 0.92rem; margin-top: 0.6rem; max-width: 48ch; line-height: 1.55; }
    .q__opts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1.4rem, 2.4vw, 1.9rem); }
    .opt {
      background: var(--ink); color: #fff;
      border: 1px solid var(--ink); border-radius: 11px; padding: 0.82rem 1.3rem;
      font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em;
      transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease,
                  transform 0.16s ease, box-shadow 0.16s ease;
    }
    .opt:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(16, 20, 26, 0.5); }
    /* selected inverts, so the choice still reads once everything is black */
    .opt.is-on { background: var(--panel); color: var(--ink); border-color: var(--ink); }
    .opt.is-on:hover { background: var(--panel); }

    /* ---------- Q1 slider ---------- */
    .sl { margin-top: clamp(1.3rem, 2.2vw, 1.8rem); max-width: 520px; }
    .sl__out { display: flex; align-items: baseline; gap: .5rem; }
    .sl__out b { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
    .sl__out span { color: var(--muted); font-size: .95rem; }
    .rng {
      -webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin: 1.2rem 0 0;
      border-radius: 4px; outline: none; cursor: pointer;
      background: linear-gradient(90deg, var(--ink) 0 var(--p, 20%), rgba(0,0,0,.1) var(--p, 20%) 100%);
    }
    .rng::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
      background: var(--ink); border: 3px solid var(--panel); cursor: pointer;
      box-shadow: 0 1px 2px rgba(16,20,26,.2), 0 4px 10px -2px rgba(16,20,26,.35);
    }
    .rng::-moz-range-thumb {
      width: 24px; height: 24px; border-radius: 50%; background: var(--ink);
      border: 3px solid var(--panel); cursor: pointer;
      box-shadow: 0 1px 2px rgba(16,20,26,.2), 0 4px 10px -2px rgba(16,20,26,.35);
    }
    .sl__ends { display: flex; justify-content: space-between; margin-top: .55rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--faint); }
    .sl__go { margin-top: clamp(1.3rem, 2.2vw, 1.7rem); }

    .custom { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem; }
    .custom[hidden] { display: none; }
    .custom span { color: var(--muted); font-size: 1rem; }
    .custom input {
      font: inherit; font-size: 1rem; width: 180px; padding: 0.72rem 0.9rem;
      border: 1px solid var(--line); border-radius: 10px; background: #f4f4f6; color: var(--ink);
    }
    .custom input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

    /* ---------- Result ---------- */
    .res { display: none; }
    .res.is-active { display: block; animation: qin 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .res__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.6rem, 3.4vw, 3rem); align-items: center; }
    .res__big b {
      display: block; font-size: clamp(2.7rem, 6.4vw, 4.6rem); font-weight: 600;
      letter-spacing: -0.042em; line-height: 1; margin-top: 0.7rem; font-variant-numeric: tabular-nums;
    }
    .res__note { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; max-width: 40ch; line-height: 1.55; }
    .res__stats { display: grid; gap: 0.1rem; }
    .res__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line-2); }
    .res__stat:first-child { border-top: 0; }
    .res__stat i { font-style: normal; color: var(--muted); font-size: 0.9rem; }
    .res__stat b { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; }
    .res__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.6rem, 2.8vw, 2.2rem); padding-top: clamp(1.4rem, 2.4vw, 1.9rem); border-top: 1px solid var(--line-2); }
    .calc__fine { font-size: 0.8rem; color: var(--faint); line-height: 1.6; margin: 1.1rem auto 0; max-width: 74ch; text-align: center; }


    /* ==========================================================
       SHARED SECTION FURNITURE
       ========================================================== */
    section { padding: clamp(3.6rem, 7vw, 6.4rem) 0; }
    .sec__head { max-width: 860px; margin: 0 auto; text-align: center; }
    .sec__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.85rem); text-wrap: nowrap; }
    .sec__head p { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.1rem); margin: 0.9rem auto 0; max-width: 50ch; line-height: 1.6; }
    .sec__head--wrap h2 { text-wrap: balance; }


    .tint { background: #f5f6f8; }
    .dark { background: var(--dark); color: #fff; }
    .dark h2, .dark h3 { color: #fff; }
    .dark .mono { color: rgba(255,255,255,.42); }
    .dark .sec__head p { color: rgba(255,255,255,.62); }

    /* ==========================================================
       AGENT — the number is the object
       ========================================================== */
    .st { text-align: center; position: relative; overflow: hidden; }
    .st > .wrap { position: relative; z-index: 1; }
    /* sonar field + a wash so the number stays legible as rings pass under it */
    .st__sonar { position: absolute; inset: 0; z-index: 0; }
    .st__sonar canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
    .st__wash {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(ellipse 46% 42% at 50% 50%, var(--dark) 0%, rgba(13, 15, 17, 0) 100%);
    }
    .st h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -.038em; }

    /* brushed-chrome sweep on the two letters */
    .shine {
      display: inline-block;
      background: linear-gradient(104deg,
        #1f8f5f 0%, #2fb67c 16%, #5cf0a6 32%, #c9ffe4 46%,
        #5cf0a6 60%, #2fb67c 76%, #1f8f5f 100%);
      background-size: 280% 100%;
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
      animation: shine 11s linear infinite;
    }
    @keyframes shine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
    .st p.lede {
      color: rgba(255,255,255,.64); font-size: clamp(1rem,1.25vw,1.14rem);
      line-height: 1.6; margin: 1rem auto 0; max-width: 72ch; text-wrap: balance;
    }

    .st__live {
      display: inline-flex; align-items: center; gap: .55rem;
      margin-top: clamp(2.2rem,4vw,3.2rem);
      font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
      text-transform: uppercase; color: var(--live); font-weight: 600;
    }
    .st__num {
      display: block; margin-top: .9rem; color: #fff;
      font-size: clamp(2.6rem, 8vw, 5.6rem); font-weight: 600;
      letter-spacing: -.045em; line-height: 1; white-space: nowrap;
      font-variant-numeric: tabular-nums;
      transition: opacity .2s ease;
    }
    .st__num:hover { opacity: .72; }
    .st__alt {
      display: inline-flex; align-items: center; gap: .45rem;
      margin-top: clamp(1.4rem,2.4vw,1.9rem);
      font-size: .92rem; color: rgba(255,255,255,.6);
    }
    .st__alt:hover { color: #fff; }
    .st__alt u { text-underline-offset: .22em; text-decoration-thickness: .06em; }
    .st__alt svg { width: 14px; height: 14px; }

    /* ==========================================================
       HOW IT WORKS
       ========================================================== */
    /* the deck art is white-backed, so multiply drops the plate and keeps its own shadows */
    .blend { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

    .how__lead { max-width: 920px; margin: clamp(1.8rem,3.4vw,3rem) auto 0; }

    .how__steps {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: clamp(.9rem,1.8vw,1.6rem); margin-top: clamp(2rem,3.6vw,3rem);
    }
    .how__steps > div { border-top: 1px solid var(--line); padding-top: .95rem; }
    .step__n { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--faint); }
    .how__steps b { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.018em; margin-top: .45rem; }
    .how__steps span.s { display: block; font-size: .85rem; color: var(--muted); line-height: 1.48; margin-top: .25rem; }

    .how__pair {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(1.4rem,3vw,3rem); margin-top: clamp(2.4rem,4.4vw,3.6rem);
    }
    .how__cap { font-size: .86rem; color: var(--muted); line-height: 1.5; margin-top: .9rem; text-align: center; max-width: 36ch; margin-inline: auto; }

    /* ==========================================================
       WORKSPACE
       ========================================================== */
    .ws__grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: clamp(2rem,4.4vw,4rem); align-items: center; margin-top: clamp(2rem,3.6vw,3rem); }
    .ws__shot img { width: 100%; display: block; }
    .ws__list { display: grid; gap: .1rem; }
    .ws__list div { border-top: 1px solid var(--line-2); padding: .85rem 0; }
    .ws__list div:first-child { border-top: 0; padding-top: 0; }
    .ws__list b { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.016em; }
    .ws__list span { display: block; font-size: .88rem; color: var(--muted); line-height: 1.45; margin-top: .22rem; }

    /* ==========================================================
       MANAGED
       ========================================================== */
    .mg {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.4rem,2.6vw,2.4rem); margin-top: clamp(2.2rem,4vw,3.4rem);
    }
    .mg > div { padding-left: clamp(1.2rem,2.2vw,1.9rem); border-left: 1px solid var(--line); }
    .mg > div:first-child { padding-left: 0; border-left: 0; }
    .mg__ic {
      width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
      border: 1px solid var(--line); background: var(--panel); color: var(--ink);
      box-shadow: 0 1px 2px rgba(16,20,26,.04);
    }
    .mg__ic svg { width: 18px; height: 18px; }
    .mg b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.022em; margin-top: 1rem; }
    .mg p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin-top: .45rem; }
    .mg__note {
      margin-top: clamp(2.2rem,3.6vw,3rem); padding: clamp(1.1rem,2vw,1.5rem) clamp(1.5rem,2.8vw,2.2rem);
      background: var(--dark); color: #fff; border-radius: 16px; text-align: center;
      box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 18px 34px -18px rgba(16,20,26,.4);
    }
    .mg__note svg { display: none; }
    .mg__note b { display: block; font-size: 1rem; color: #fff; }
    .mg__note p { color: rgba(255,255,255,.66); font-size: .9rem; margin: .4rem auto 0; max-width: 88ch; }

    /* ==========================================================
       PRICING
       ========================================================== */
    .pricing__grid {
      display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.94fr);
      gap: clamp(1.6rem,3.4vw,3.2rem); align-items: center;
      max-width: 1060px; margin: clamp(2.2rem,4vw,3.2rem) auto 0;
    }

    /* return panel, fed by the calculator higher up the page */
    .roi { padding-left: clamp(0px,1.4vw,1.2rem); }
    .roi > .mono { display: block; }
    .roi__big { margin-top: 0.9rem; }
    .roi__big b {
      display: block; font-size: clamp(2.4rem,5vw,3.5rem); font-weight: 600;
      letter-spacing: -0.042em; line-height: 1; font-variant-numeric: tabular-nums;
    }
    .roi__big span { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin-top: 0.6rem; max-width: 30ch; }
    .roi__row {
      display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
      margin-top: clamp(1.3rem,2.4vw,1.9rem); padding-top: clamp(1.3rem,2.4vw,1.9rem);
      border-top: 1px solid var(--line);
    }
    .roi__row b { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
    .roi__row span { color: var(--muted); font-size: 0.93rem; line-height: 1.45; max-width: 24ch; }
    .roi__link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.3rem; font-size: 0.9rem; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 0.15rem; }
    .roi__link:hover { border-bottom-color: var(--ink); }
    .roi__fine { font-size: 0.8rem; color: var(--faint); line-height: 1.55; margin-top: 1.1rem; max-width: 40ch; }

    .plan {
      margin: 0;
      background: var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
      box-shadow: 0 1px 2px rgba(16,20,26,.06), 0 4px 10px -4px rgba(16,20,26,.07),
                  0 18px 34px -16px rgba(16,20,26,.17), 0 50px 80px -44px rgba(16,20,26,.26);
    }
    .plan__top { padding: clamp(1.6rem,2.8vw,2.2rem) clamp(1.5rem,2.8vw,2.2rem) 0; text-align: center; }
    .plan__price { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
    .plan__price b { font-size: clamp(2.6rem,5vw,3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
    .plan__price span { color: var(--muted); font-size: 1rem; }
    .plan__meter { font-size: .88rem; color: var(--muted); margin-top: .7rem; }
    .plan__list { padding: clamp(1.4rem,2.4vw,1.9rem) clamp(1.5rem,2.8vw,2.2rem); display: grid; gap: .1rem; }
    .plan__list div { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line-2); font-size: .93rem; }
    .plan__list div:first-child { border-top: 0; }
    .plan__list svg { width: 15px; height: 15px; color: #16764c; flex: 0 0 auto; margin-top: .2rem; }
    .plan__foot { padding: clamp(1.2rem,2.2vw,1.6rem) clamp(1.5rem,2.8vw,2.2rem); border-top: 1px solid var(--line-2); background: rgba(0,0,0,.015); }
    .plan__foot .btn { width: 100%; }
    .plan__foot p { font-size: .82rem; color: var(--faint); text-align: center; margin-top: .8rem; }


    /* ==========================================================
       COMPARISON
       ========================================================== */
    .cmp { margin-top: clamp(2.2rem, 4vw, 3.2rem); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
    .cmp__row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; }
    .cmp__row + .cmp__row { border-top: 1px solid var(--line-2); }
    .cmp__row > * { padding: clamp(.95rem, 1.7vw, 1.25rem) clamp(.9rem, 1.6vw, 1.3rem); }
    .cmp__row > * + * { border-left: 1px solid var(--line-2); }

    /* header */
    .cmp__head { background: rgba(0,0,0,.018); }
    .cmp__head > * { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; letter-spacing: -.01em; }
    .cmp__head .cmp__lbl { font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
    .cmp__head img { width: 17px; height: auto; }

    /* the GT Voice column reads as the answer */
    .cmp__row > .is-gt { background: var(--dark); color: #fff; }
    .cmp__row + .cmp__row > .is-gt { box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
    .cmp__row > .is-gt + * { border-left-color: var(--line); }
    .cmp__head > .is-gt { gap: .6rem; }
    .cmp__wm { font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: .78rem; }

    .cmp__k { font-size: .84rem; font-weight: 600; letter-spacing: -.012em; color: var(--ink); }
    .cmp__v { font-size: .84rem; line-height: 1.5; color: var(--muted); }
    .cmp__v.is-gt { color: rgba(255,255,255,.88); }
    .cmp__row--cost > * { padding-top: clamp(1.1rem, 2vw, 1.5rem); padding-bottom: clamp(1.1rem, 2vw, 1.5rem); }
    .cmp__big { display: block; font-size: clamp(1.05rem, 1.9vw, 1.4rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
    .cmp__v.is-gt .cmp__big { color: #fff; }
    .cmp__v.is-gt .cmp__sub { color: rgba(255,255,255,.5); }
    .cmp__sub { display: block; font-size: .8rem; color: var(--faint); margin-top: .4rem; line-height: 1.5; }

    /* sources tooltip */
    .info { position: relative; display: inline-flex; vertical-align: middle; margin-left: .4rem; }
    .info__btn {
      display: grid; place-items: center; width: 34px; height: 34px; margin: -8px;
      color: var(--faint); cursor: pointer; transition: color .16s ease;
    }
    .info__btn svg { width: 18px; height: 18px; }
    .info__btn:hover, .info__btn:focus-visible, .info.is-open .info__btn { color: var(--ink); }
    .info__tip {
      position: absolute; bottom: calc(100% + 10px); left: -8px; z-index: 20;
      width: max(240px, min(340px, 74vw));
      background: var(--dark); color: rgba(255,255,255,.72);
      font-family: var(--sans); font-size: .81rem; font-weight: 400; line-height: 1.55; letter-spacing: 0;
      border-radius: 12px; padding: .8rem .9rem;
      box-shadow: 0 10px 30px -12px rgba(16,20,26,.5);
      opacity: 0; visibility: hidden; transform: translateY(4px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
      pointer-events: none;
    }
    .info__tip b { display: block; color: #fff; font-weight: 600; margin-bottom: .35rem; }
    .info__tip::after { content: ""; position: absolute; top: 100%; left: 20px; border: 6px solid transparent; border-top-color: var(--dark); }
    .info:hover .info__tip, .info__btn:focus-visible + .info__tip, .info.is-open .info__tip { opacity: 1; visibility: visible; transform: none; }
    .info.is-open .info__tip { pointer-events: auto; }

    /* ==========================================================
       INDUSTRY CHOOSER — only on the neutral landing page
       ========================================================== */
    .inds { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
            margin-top: clamp(2.2rem, 4vw, 3.2rem); }
    .ind {
      position: relative; display: flex; flex-direction: column; text-align: left;
      background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
      padding: clamp(1.7rem, 3vw, 2.5rem);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      box-shadow: 0 1px 2px rgba(16,20,26,.05), 0 12px 28px -16px rgba(16,20,26,.2);
    }
    .ind:hover { transform: translateY(-4px); border-color: rgba(0,0,0,.22);
                 box-shadow: 0 2px 4px rgba(16,20,26,.06), 0 26px 46px -22px rgba(16,20,26,.3); }

    .ind__k { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--mono);
              font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
    .ind__k img { height: 14px; width: auto; }
    .ind h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -.034em;
              margin-top: 1rem; line-height: 1.05; text-align: center; }
    .ind > p { font-size: .93rem; color: var(--muted); line-height: 1.6; margin-top: .7rem;
               text-align: center; text-wrap: pretty; }

    .ind__list { margin-top: clamp(1.3rem, 2.2vw, 1.7rem); }
    .ind__list div { display: flex; align-items: flex-start; gap: .65rem;
                     padding: .62rem 0; border-top: 1px solid var(--line-2);
                     font-size: .88rem; letter-spacing: -.012em; }
    .ind__list div:last-child { border-bottom: 1px solid var(--line-2); }
    .ind__list svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .14rem; color: var(--live); }

    /* the live agent behind each industry */
    .ind__agent { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
                  margin-top: clamp(1.5rem, 2.6vw, 2rem); font-size: .85rem; color: var(--muted); }
    .ind__agent b { font-weight: 600; color: var(--ink); letter-spacing: -.014em; }
    .ind__agent a { position: relative; z-index: 1; font-family: var(--mono); font-size: .8rem;
                    letter-spacing: .02em; color: var(--ink); border-bottom: 1px solid var(--line);
                    padding-bottom: 1px; }
    .ind__agent a:hover { border-bottom-color: var(--ink); }

    /* black CTA, and it makes the whole card clickable */
    .ind__btn { width: 100%; margin-top: auto; padding-top: .9rem; }
    .ind__btn { margin-top: clamp(1.1rem, 2vw, 1.5rem); padding: .95rem 1.4rem; }
    .ind__btn::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
    .ind:hover .ind__btn { background: #000; }
    .ind__btn svg { transition: transform .18s ease; }
    .ind:hover .ind__btn svg { transform: translateX(3px); }

    .inds__more { text-align: center; font-size: .86rem; color: var(--faint);
                  margin-top: clamp(1.5rem, 2.6vw, 2.2rem); }
    .inds__more a { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
    .inds__more a:hover { border-bottom-color: var(--ink); }

    @media (max-width: 760px) { .inds { grid-template-columns: 1fr; } }

    /* pricing without the ROI panel (neutral page) */
    .pricing__grid--solo { grid-template-columns: minmax(0, 540px); justify-content: center; }

    .cmp__note { font-size: .8rem; color: var(--faint); line-height: 1.6; margin: clamp(1.4rem, 2.4vw, 2rem) auto 0; max-width: 92ch; text-align: center; text-wrap: pretty; }

    @media (max-width: 860px) {
      .cmp { border: 0; border-radius: 0; background: none; }
      .cmp__head { display: none; }
      .cmp__row { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); margin-bottom: .9rem; }
      .cmp__row + .cmp__row { border-top: 1px solid var(--line); }
      .cmp__row > * + * { border-left: 0; border-top: 1px solid var(--line-2); }
      .cmp__v::before { content: attr(data-col); display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem; }
      .cmp__row > .is-gt { box-shadow: none; }
      .cmp__v.is-gt::before { color: var(--live); }
    }


    /* ==========================================================
       FAQ
       ========================================================== */
    .faq { max-width: 820px; margin: clamp(2.2rem,4vw,3.2rem) auto 0; }
    .faq details { border-top: 1px solid var(--line); }
    .faq details:last-child { border-bottom: 1px solid var(--line); }
    .faq summary {
      list-style: none; cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0; position: relative;
      font-size: 1rem; font-weight: 500; letter-spacing: -.018em;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: ""; position: absolute; right: .35rem; top: 50%; width: 10px; height: 10px;
      border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
      transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
    }
    .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
    .faq p { color: var(--muted); font-size: .95rem; line-height: 1.62; padding: 0 2.4rem 1.3rem 0; max-width: 72ch; }

    /* ==========================================================
       FINAL CTA + FOOTER
       ========================================================== */
    .end { text-align: center; }
    .end h2 { font-size: clamp(2rem,4.4vw,3.4rem); letter-spacing: -.038em; }
    .end p { color: rgba(255,255,255,.62); font-size: clamp(1rem,1.25vw,1.14rem); margin: 1.1rem auto 0; max-width: 46ch; line-height: 1.6; }
    .end__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; }

    .foot { background: var(--dark); color: rgba(255,255,255,.6); padding: 0 0 clamp(2rem,3.4vw,2.8rem); }
    .foot__in { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; padding-top: clamp(2rem,3.4vw,2.8rem); border-top: 1px solid rgba(255,255,255,.1); }
    .foot__brand { display: inline-flex; align-items: center; gap: .62rem; }
    .foot__brand img { height: 28px; width: auto; filter: brightness(0) invert(1); }
    .foot__brand span { font-weight: 600; font-size: 1rem; letter-spacing: .34em; text-transform: uppercase; color: #fff; line-height: 1; }
    .foot__by { font-size: .85rem; margin-top: .7rem; }
    .foot__by a { color: #fff; }
    .foot__links { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .87rem; }
    .foot__links a:hover { color: #fff; }


    /* ==========================================================
       CHANNELS — many doors, one intake
       ========================================================== */
    /* one rendered mockup; white-plated so multiply drops the plate */
    .ch__shot { display: block; max-width: 800px; margin: clamp(2.8rem,4.6vw,4rem) auto 0; }
    .ch__shot img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

    .ch__rail {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: clamp(.8rem,1.6vw,1.2rem); max-width: 1000px;
      margin: clamp(2.2rem,4vw,3.2rem) auto 0;
    }
    .ch__item {
      background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
      padding: clamp(1rem,1.7vw,1.25rem);
      display: grid; grid-template-columns: auto minmax(0,1fr);
      gap: clamp(.8rem,1.4vw,1.05rem); align-items: start;
      box-shadow:
        0 1px 2px rgba(16,20,26,.06),
        0 3px 8px -3px rgba(16,20,26,.07),
        0 12px 22px -10px rgba(16,20,26,.15),
        0 30px 46px -28px rgba(16,20,26,.22);
    }
    .ch__ic {
      width: 46px; height: 46px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      background: var(--ink); color: #fff; flex: 0 0 auto;
    }
    .ch__ic svg { width: 22px; height: 22px; }
    .ch__txt { min-width: 0; }
    .ch__txt b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.022em; }
    .ch__txt span { display: block; font-size: .88rem; color: var(--muted); line-height: 1.48; margin-top: .25rem; }

    .ch__foot { text-align: center; margin-top: clamp(1.6rem,2.8vw,2.2rem); }
    .ch__foot span {
      display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: center;
      background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
      padding: .62rem 1.3rem; font-size: .89rem; color: var(--muted);
      box-shadow: 0 1px 2px rgba(16,20,26,.06), 0 3px 8px -3px rgba(16,20,26,.07), 0 14px 26px -14px rgba(16,20,26,.2);
    }
    .ch__foot b { font-weight: 600; color: var(--ink); }

    /* ==========================================================
       RESPONSIVE — page sections
       ========================================================== */
    @media (max-width: 980px) {
      .how__steps { grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; }
      .ws__grid { grid-template-columns: 1fr; gap: 2rem; }
      .ch__rail { grid-template-columns: 1fr; gap: 1.4rem; }
      .pricing__grid { grid-template-columns: 1fr; gap: 2.2rem; max-width: 620px; }
      .roi { padding-left: 0; }
      .mg { grid-template-columns: 1fr 1fr; gap: 2rem clamp(1.4rem,2.6vw,2.4rem); }
      .mg > div:nth-child(3) { padding-left: 0; border-left: 0; }
      .sec__head h2, .calc__head h2 { text-wrap: balance; }
    }
    @media (max-width: 680px) {
      .how__pair { grid-template-columns: 1fr; gap: 2rem; }
      .how__steps { grid-template-columns: 1fr 1fr; }
      .mg { grid-template-columns: 1fr; gap: 1.6rem; }
      .mg > div { padding-left: 0; border-left: 0; }
      .end__cta .btn { width: 100%; }
      .foot__in { flex-direction: column; align-items: flex-start; }
    }

    /* ==========================================================
       RESPONSIVE
       ========================================================== */
    @media (max-width: 980px) {
      .nav__links, .nav__right { display: none; }
      .nav__in { grid-template-columns: 1fr auto; }
      .nav__toggle { display: block; }
      .beats { grid-template-columns: 1fr 1fr; }
      .beatlinks { display: none; }
      .callhint { right: auto; left: 0; top: auto; bottom: calc(100% + 12px); transform: translateY(8px); }
      .callhint::after { left: 18px; top: 100%; margin-top: 0; border-left-color: transparent; border-top-color: #fff; }
      .call.hint-on .callhint { transform: none; }
      .res__grid { grid-template-columns: 1fr; gap: 1.8rem; }
      .calc__cols { grid-template-columns: 1fr; gap: 1.6rem; }
      .rail { border-left: 0; border-top: 1px solid var(--line-2); padding-left: 0; padding-top: 1.1rem; }
      .rail__row.is-now::before { display: none; }
    }
    @media (max-width: 560px) {
      .hero__sub { max-width: none; }
      .hero__cta .btn { width: 100%; }
      .calc__head h2 { text-wrap: balance; }
      .beats { grid-template-columns: 1fr; margin-top: -2.4rem; }
      .call { padding-bottom: 2.8rem; }
      .outcome span { border-radius: 16px; padding: 0.8rem 1rem; font-size: 0.82rem; }
      .q__opts .opt { flex: 1 1 calc(50% - 0.3rem); }
      .res__cta .btn { flex: 1 1 100%; }
      .ann__in { font-size: 0.75rem; }
      .ann__go { display: none; }
      .ann__link { gap: 0.45rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    }