:root {
      --ink: #0C1A22;
      /* body text / dark sections */
      --ink-2: #132B37;
      --paper: #FBFBFC;
      --paper-2: #F1F3F4;
      --line: #DFE4E6;
      --line-dark: rgba(255, 255, 255, .12);
      --muted: #4A5F6B;
      /* 7:1 on paper */
      --muted-dark: #93A9B4;
      /* 6:1 on ink */
      --accent: #8F5407;
      /* amber, dark enough for text on light */
      --accent-bright: #F0A02A;
      /* fills, and text on dark only */
      --accent-wash: #FBF1E0;
      --pos: #0B6B50;
      /* green for text on light */
      --pos-bright: #4ED6A8;
      /* green on dark */
      --pos-wash: #E4F4EE;
      --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --wrap: 1160px;
      --r: 12px;
      --logo: url("/assets/aurabotix-logo.png");
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: inherit
    }

    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px
    }

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

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--display);
      margin: 0;
      letter-spacing: -.015em;
      line-height: 1.08;
      font-weight: 600
    }

    h1 {
      font-size: clamp(2.3rem, 5vw, 3.9rem);
      font-weight: 700;
      letter-spacing: -.025em
    }

    h2 {
      font-size: clamp(1.8rem, 3.4vw, 2.6rem);
      font-weight: 600;
      letter-spacing: -.02em
    }

    h3 {
      font-size: 1.14rem;
      line-height: 1.3;
      letter-spacing: -.005em;
      font-weight: 600
    }

    p {
      margin: 0
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: .7rem;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent)
    }

    .eyebrow.on-dark {
      color: var(--accent-bright)
    }

    .section {
      padding: 86px 0
    }

    .section-head {
      max-width: 680px;
      margin-bottom: 44px
    }

    .section-head .eyebrow {
      display: block;
      margin-bottom: 14px
    }

    .section-head p {
      margin-top: 15px;
      color: var(--muted);
      font-size: 1.05rem
    }

    .alt {
      background: var(--paper-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .dark {
      background: var(--ink);
      color: #fff
    }

    .dark .section-head p {
      color: var(--muted-dark)
    }

    /* Manrope's default figures are proportional — force tabular where numbers
   sit in columns or change on the fly, so nothing shifts width. */
    .log-time,
    .calc-num,
    .tier-price,
    .tier-billed,
    .tier-setup,
    .field input,
    .mins .m,
    .tab .tm {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
    }

    /* ---- slide-tab navigation ---- */
    .navtabs {
      position: relative;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 3px;
      width: fit-content;
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      background: #fff
    }

    .navtabs li {
      position: relative;
      z-index: 2
    }

    .navtabs a {
      display: block;
      padding: 9px 15px;
      font-size: .73rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--muted);
      white-space: nowrap;
      transition: color .2s ease
    }

    .navtabs li.on a {
      color: #fff
    }

    .navtabs li.navcursor {
      position: absolute;
      z-index: 1;
      top: 3px;
      height: calc(100% - 6px);
      border-radius: 999px;
      background: var(--ink);
      opacity: 0;
      transition: left .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s
    }

    @media(max-width:1080px) {
      .navtabs a {
        padding: 9px 11px;
        font-size: .68rem
      }
    }

    @media(max-width:880px) {
      .nav-in {
        height: auto;
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 10px
      }

      .navtabs {
        order: 3;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        border-radius: 999px;
        justify-content: flex-start
      }

      .navtabs::-webkit-scrollbar {
        display: none
      }

      .navtabs a {
        padding: 8px 13px;
        font-size: .66rem
      }

      .nav-cta {
        padding: 9px 15px;
        font-size: .8rem
      }

      .brand {
        font-size: .98rem
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .navtabs li.navcursor {
        transition: opacity .2s
      }
    }

    /* ---- hand-drawn circle on a word ---- */
    .circled {
      position: relative;
      display: inline-block;
      white-space: nowrap
    }

    .circled svg {
      position: absolute;
      left: -16%;
      top: -34%;
      width: 132%;
      height: 172%;
      overflow: visible;
      pointer-events: none
    }

    .circled path {
      stroke: var(--accent-bright);
      stroke-width: 3.2;
      fill: none;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
      stroke-dasharray: 1;
      stroke-dashoffset: 1
    }

    .circled.drawn path {
      animation: draw 1.15s cubic-bezier(.45, .05, .3, 1) forwards
    }

    @keyframes draw {
      to {
        stroke-dashoffset: 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .circled path {
        stroke-dashoffset: 0;
        animation: none
      }
    }

    /* ---- portrait + portfolio button ---- */
    .cred {
      align-items: center
    }

    .portrait-wrap {
      position: relative
    }

    .portrait {
      width: 100%;
      height: auto;
      aspect-ratio: 520/650;
      object-fit: cover;
      object-position: 50% 22%;
      border-radius: var(--r);
      border: 1px solid var(--line);
      background: #fff;
      filter: grayscale(1) contrast(1.04);
      display: block
    }

    .portrait-cap {
      margin-top: 14px;
      font-size: .86rem;
      color: var(--muted);
      line-height: 1.45
    }

    .portrait-cap b {
      display: block;
      color: var(--ink);
      font-family: var(--display);
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 3px
    }

    .cred-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 26px;
      align-items: center
    }

    .icon-link {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1.5px solid #B9C3C7;
      border-radius: 8px;
      color: var(--muted);
      transition: border-color .18s, color .18s, transform .18s
    }

    .icon-link:hover {
      border-color: var(--ink);
      color: var(--ink);
      transform: translateY(-2px)
    }

    .icon-link svg {
      width: 19px;
      height: 19px;
      fill: currentColor
    }

    /* ---- pricing reveal + hover ---- */
    .tier {
      transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s, border-color .28s;
      opacity: 0;
      transform: translateY(22px)
    }

    .tier.in {
      opacity: 1;
      transform: none
    }

    .tiers:hover .tier:not(:hover) {
      opacity: .72
    }

    .tier:hover {
      transform: translateY(-7px);
      border-color: var(--ink);
      box-shadow: 0 26px 50px -30px rgba(12, 26, 34, .55)
    }

    .tier .btn {
      transition: transform .18s, background .18s, border-color .18s
    }

    .tier:hover .btn-outline {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff
    }

    @media(prefers-reduced-motion:reduce) {
      .tier {
        opacity: 1;
        transform: none;
        transition: none
      }

      .tier:hover {
        transform: none
      }

      .tiers:hover .tier:not(:hover) {
        opacity: 1
      }
    }


    /* ================= CAPABILITY ICONS ================= */
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 26px;
      transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .25s, box-shadow .25s
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: var(--ink);
      box-shadow: 0 22px 44px -30px rgba(12, 26, 34, .5)
    }

    .card h3 {
      margin-bottom: 9px
    }

    .card p {
      color: var(--muted);
      font-size: .94rem
    }

    .card p b {
      color: var(--ink);
      font-weight: 600
    }

    .cap-ico {
      width: 56px;
      height: 56px;
      margin-bottom: 18px;
      border-radius: 12px;
      background: var(--paper-2);
      display: grid;
      place-items: center
    }

    .cap-ico svg {
      width: 38px;
      height: 38px;
      overflow: visible
    }

    .cap-ico svg * {
      fill: none;
      stroke: var(--ink);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .cap-ico .dot,
    .cap-ico .pivot {
      fill: var(--accent-bright);
      stroke: none
    }

    .cap-ico .ln,
    .cap-ico .tl,
    .cap-ico .slot {
      fill: var(--line);
      stroke: none
    }

    .cap-ico .tick {
      stroke: var(--pos);
      stroke-width: 2.6
    }

    .cap-ico .node {
      fill: #fff
    }

    /* idle motion, faster + fuller on hover */
    .cw {
      opacity: 0;
      transform-origin: 14px 24px
    }

    .card.on .cw {
      animation: ping 2.6s ease-out infinite
    }

    .card.on .c2 {
      animation-delay: .5s
    }

    .card.on .c3 {
      animation-delay: 1s
    }

    @keyframes ping {
      0% {
        opacity: .55;
        transform: scale(.35)
      }

      70% {
        opacity: 0;
        transform: scale(1)
      }

      100% {
        opacity: 0
      }
    }

    .card.on .ln {
      animation: fillin .5s ease forwards;
      transform-origin: left center;
      transform: scaleX(0)
    }

    .card.on .l2 {
      animation-delay: .15s
    }

    .card.on .l3 {
      animation-delay: .3s
    }

    @keyframes fillin {
      to {
        transform: scaleX(1)
      }
    }

    .card.on .tick {
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
      animation: drawtick .5s .25s ease forwards
    }

    @keyframes drawtick {
      to {
        stroke-dashoffset: 0
      }
    }

    .card.on .wire {
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
      animation: drawtick .6s ease forwards
    }

    .card.on .w2 {
      animation-delay: .2s
    }

    .card.on .mh {
      transform-origin: 24px 24px;
      animation: spin 4s linear infinite
    }

    .card.on .hh {
      transform-origin: 24px 24px;
      animation: spin 24s linear infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .card.on .tl {
      animation: fillin .5s ease forwards;
      transform-origin: left center;
      transform: scaleX(0)
    }

    .card.on .t2 {
      animation-delay: .18s
    }

    .card:hover .cw {
      animation-duration: 1.5s
    }

    .card:hover .mh {
      animation-duration: 1.6s
    }

    /* ================= DELIVERED WORK ================= */
    .proof-grid {
      display: grid;
      grid-template-columns: 1fr 88px 1fr;
      gap: 0;
      align-items: stretch
    }

    .pcard {
      background: rgba(255, 255, 255, .045);
      border: 1px solid var(--line-dark);
      border-radius: var(--r);
      padding: 28px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .5s ease, transform .5s ease, border-color .25s
    }

    .pcard.in {
      opacity: 1;
      transform: none
    }

    .pcard:hover {
      border-color: var(--accent-bright)
    }

    .pcard-h {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px
    }

    .pcard-logo {
      width: 104px;
      height: 58px;
      flex-shrink: 0;
      background: #fff;
      border-radius: 8px;
      display: grid;
      place-items: center;
      padding: 9px 11px;
      overflow: hidden
    }

    .pcard-logo img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block
    }

    .logo-fallback {
      font-family: var(--display);
      font-weight: 800;
      font-size: .74rem;
      letter-spacing: -.02em;
      color: var(--ink);
      line-height: 1;
      text-align: center
    }

    .logo-fallback em {
      display: block;
      font-style: normal;
      font-weight: 600;
      font-size: .62rem;
      letter-spacing: .06em;
      color: var(--muted);
      margin-top: 2px
    }

    .pcard-name {
      display: block;
      font-family: var(--display);
      font-size: 1.32rem;
      font-weight: 700;
      letter-spacing: -.02em;
      color: #fff
    }

    .pcard-tag {
      display: block;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-top: 4px
    }

    .pcard-who {
      font-size: .9rem;
      color: var(--muted-dark);
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line-dark)
    }

    .pcard-who b {
      color: #fff;
      font-weight: 600
    }

    .ba {
      list-style: none;
      margin: 18px 0 0;
      padding: 0;
      display: grid;
      gap: 14px
    }

    .ba-row {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 14px;
      align-items: baseline
    }

    .ba-lbl {
      font-size: .65rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--muted-dark)
    }

    .ba-val {
      font-size: .97rem;
      color: #fff;
      line-height: 1.4
    }

    .ba-val.was {
      color: var(--accent-bright)
    }

    .ba-val.now {
      color: var(--pos-bright)
    }

    .proof-mid {
      display: grid;
      place-items: center;
      position: relative
    }

    .pm-core {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 1.5px solid var(--accent-bright);
      background: var(--ink);
      display: grid;
      place-items: center;
      text-align: center;
      z-index: 2;
      position: relative
    }

    .pm-label {
      font-size: .5rem;
      letter-spacing: .1em;
      color: var(--accent-bright);
      line-height: 1.2;
      padding: 0 6px
    }

    .pm-link {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .pm-link path {
      stroke: var(--line-dark);
      stroke-width: 1.2;
      fill: none
    }

    .pmdot {
      fill: var(--accent-bright)
    }

    .proof-note {
      margin-top: 34px;
      font-size: 1rem;
      color: #fff;
      max-width: 72ch
    }

    .proof-note span {
      color: var(--muted-dark);
      font-size: .94rem
    }

    /* ================= RESPONSIVE ================= */
    @media(max-width:1000px) {
      .proof-grid {
        grid-template-columns: 1fr;
        gap: 16px
      }

      .proof-mid {
        height: 74px
      }

      .pm-link {
        transform: rotate(0deg)
      }
    }

    @media(max-width:900px) {
      .cards {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:620px) {
      body {
        font-size: 16px
      }

      .section {
        padding: 58px 0
      }

      .wrap {
        padding: 0 18px
      }

      .cards {
        grid-template-columns: 1fr
      }

      .section-head {
        margin-bottom: 30px
      }

      .hero {
        padding: 44px 0 52px
      }

      .hero-actions .btn,
      .hero-actions .glow-btn {
        width: 100%
      }

      .hero-actions .glow-btn>.btn {
        width: 100%;
        justify-content: center
      }

      .hero-actions .btn {
        justify-content: center
      }

      .stepper {
        padding: 20px
      }

      .pcard {
        padding: 22px
      }

      .cred {
        gap: 30px
      }

      .calc-out {
        padding: 26px
      }

      .final {
        padding: 64px 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .card.on * {
        animation: none !important
      }

      .pcard {
        opacity: 1;
        transform: none
      }

      .pmdot {
        display: none
      }

      .card:hover {
        transform: none
      }
    }


    /* ---- ElevenLabs agent widget ---- */
    elevenlabs-convai {
      --elevenlabs-convai-widget-width: 390px;
      --elevenlabs-convai-widget-height: 600px;
    }

    #tryAgent {
      font-family: var(--body)
    }

    .agent-hint {
      position: fixed;
      right: 22px;
      bottom: 104px;
      z-index: 80;
      max-width: 250px;
      background: var(--ink);
      color: #fff;
      border-radius: 10px;
      padding: 13px 15px;
      font-size: .84rem;
      line-height: 1.45;
      box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .3s, transform .3s;
      pointer-events: none
    }

    .agent-hint.show {
      opacity: 1;
      transform: none
    }

    .agent-hint b {
      color: var(--accent-bright);
      font-weight: 600
    }

    @media(max-width:620px) {
      .agent-hint {
        right: 14px;
        left: 14px;
        max-width: none;
        bottom: 96px
      }
    }

    /* ---- contact block in the final section ---- */
    .final-cta {
      margin-top: 30px
    }

    .or-line {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 660px;
      margin: 44px auto 24px;
      color: var(--muted-dark);
      font-size: .76rem;
      letter-spacing: .13em;
      text-transform: uppercase
    }

    .or-line::before,
    .or-line::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line-dark)
    }

    .contact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      max-width: 660px;
      margin: 0 auto
    }

    .cbox {
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--line-dark);
      border-radius: 12px;
      padding: 20px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 16px;
      text-align: left;
      transition: border-color .2s, background .2s, transform .2s
    }

    .cbox:hover {
      border-color: var(--accent-bright);
      background: rgba(255, 255, 255, .09);
      transform: translateY(-3px)
    }

    .cico {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 10px;
      background: rgba(240, 160, 42, .14);
      display: grid;
      place-items: center
    }

    .cico svg {
      width: 26px;
      height: 26px;
      overflow: visible
    }

    .cico svg * {
      fill: none;
      stroke: var(--accent-bright);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .ctxt {
      display: block;
      min-width: 0
    }

    .cbox .cl {
      display: block;
      font-size: .63rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--muted-dark);
      margin-bottom: 5px
    }

    .cbox .cv {
      display: block;
      font-size: .93rem;
      color: #fff;
      font-weight: 600;
      word-break: break-word
    }

    /* animated icons — idle nudge, full motion on hover */
    .handset {
      transform-origin: 16px 16px;
      animation: shake 4.5s ease-in-out infinite
    }

    .cbox:hover .handset {
      animation-duration: 1.1s
    }

    @keyframes shake {

      0%,
      72%,
      100% {
        transform: rotate(0)
      }

      76% {
        transform: rotate(-11deg)
      }

      80% {
        transform: rotate(9deg)
      }

      84% {
        transform: rotate(-7deg)
      }

      88% {
        transform: rotate(5deg)
      }

      92% {
        transform: rotate(0)
      }
    }

    .ring {
      opacity: 0;
      stroke-dasharray: 14;
      animation: rings 4.5s ease-out infinite
    }

    .r2 {
      animation-delay: .18s
    }

    .cbox:hover .ring {
      animation-duration: 1.1s
    }

    @keyframes rings {

      0%,
      72% {
        opacity: 0;
        transform: translateX(-3px)
      }

      80% {
        opacity: 1;
        transform: translateX(0)
      }

      94% {
        opacity: 0;
        transform: translateX(2px)
      }

      100% {
        opacity: 0
      }
    }

    .flap {
      stroke-dasharray: 30;
      stroke-dashoffset: 0;
      transition: stroke-dashoffset .45s ease
    }

    .env {
      transition: transform .35s cubic-bezier(.4, 0, .2, 1)
    }

    .cbox:hover .flap {
      stroke-dashoffset: 30
    }

    .cbox:hover .env {
      transform: translateY(-1.5px)
    }

    @media(max-width:700px) {
      .contact {
        grid-template-columns: 1fr
      }

      .or-line {
        margin: 32px auto 18px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .handset,
      .ring {
        animation: none
      }

      .ring {
        opacity: 1
      }

      .cbox:hover {
        transform: none
      }
    }

    /* ---- footer ---- */
    .foot-in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 22px;
      flex-wrap: wrap
    }

    .foot-brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .foot-mark {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      display: block;
      background: var(--logo) center/contain no-repeat;
      filter: brightness(0) invert(1);
      opacity: .9
    }

    .foot-brand b {
      display: block;
      font-family: var(--display);
      font-size: 1rem;
      color: #fff;
      font-weight: 700;
      letter-spacing: -.01em
    }

    .foot-brand span {
      display: block;
      font-size: .8rem;
      color: var(--muted-dark);
      margin-top: 2px
    }

    .foot-links {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap
    }

    .foot-links a {
      font-size: .85rem;
      color: var(--muted-dark);
      text-decoration: none;
      transition: color .18s
    }

    .foot-links a:hover {
      color: #fff
    }

    .foot-li {
      display: grid;
      place-items: center
    }

    .foot-copy {
      font-size: .8rem;
      color: var(--muted-dark)
    }

    @media(max-width:820px) {
      .foot-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px
      }

      .foot-links {
        gap: 16px
      }
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: var(--body);
      font-size: .95rem;
      font-weight: 600;
      padding: 14px 24px;
      border-radius: 8px;
      border: 1.5px solid transparent;
      text-decoration: none;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease
    }

    .btn-primary {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink)
    }

    .btn-primary:hover {
      transform: translateY(-2px)
    }

    .btn-outline {
      background: transparent;
      color: var(--ink);
      border-color: #B9C3C7
    }

    .btn-outline:hover {
      border-color: var(--ink)
    }

    .btn-amber {
      background: var(--accent-bright);
      color: #26170A;
      border-color: var(--accent-bright)
    }

    .btn-amber:hover {
      transform: translateY(-2px)
    }

    .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, .34)
    }

    .btn-ghost:hover {
      border-color: #fff
    }

    /* ---- animated signal border ----
   Amber -> green sweep: the same two colours the rest of the page uses for
   "unanswered" and "landed". Reads as a live line, not as decoration. */
    @property --turn {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false
    }

    .glow {
      position: relative;
      isolation: isolate;
      border-radius: 12px;
      padding: 1.6px;
      background-color: var(--line);
      background-image: conic-gradient(from var(--turn),
          transparent 0%, rgba(224, 138, 18, 0) 6%,
          #E08A12 13%, #C9791A 20%,
          #0B6B50 29%, #2FA98A 37%,
          rgba(47, 169, 138, 0) 45%, transparent 58%);
      animation: turn 4.5s linear infinite;
    }

    .glow>* {
      position: relative;
      z-index: 2;
      border-radius: 10.4px
    }

    .glow::after {
      content: "";
      position: absolute;
      inset: -26%;
      z-index: 0;
      border-radius: inherit;
      background-image: inherit;
      filter: blur(26px);
      opacity: .32;
      pointer-events: none;
      mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 46%, black 100%);
      -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 46%, black 100%);
    }

    @keyframes turn {
      to {
        --turn: 360deg
      }
    }

    /* fast + bright on the demo button */
    .glow-btn {
      display: inline-flex;
      border-radius: 9px;
      animation-duration: 3s
    }

    .glow-btn>.btn {
      border-color: transparent;
      background: #fff;
      border-radius: 7.4px
    }

    .glow-btn>.btn:hover {
      background: var(--paper-2)
    }

    .glow-btn::after {
      opacity: .45;
      filter: blur(18px)
    }

    /* slow + faint on the hero card, so the button still wins the eye */
    .glow-card {
      border-radius: 13px;
      animation-duration: 11s;
      padding: 1.4px
    }

    .glow-card>* {
      border-radius: 11.6px
    }

    .glow-card::after {
      opacity: .16;
      filter: blur(34px)
    }

    .glow-card .log {
      border: 0;
      box-shadow: none
    }

    @media(prefers-reduced-motion:reduce) {
      .glow {
        animation: none;
        --turn: 118deg
      }

      .glow::after {
        display: none
      }
    }

    /* graceful fallback where @property is unsupported: a plain quiet border */
    @supports not (background:conic-gradient(from var(--turn), red, blue)) {
      .glow {
        background-image: none;
        background-color: var(--line);
        animation: none
      }

      .glow::after {
        display: none
      }
    }

    /* nav */
    .nav {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(251, 251, 252, .93);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line)
    }

    .nav-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-family: var(--display);
      font-weight: 700;
      font-size: 1rem
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      display: block;
      background: var(--logo) center/contain no-repeat
    }

    .brand {
      font-size: 1.06rem;
      letter-spacing: -.015em;
      gap: 9px
    }

    .nav-cta {
      padding: 10px 18px;
      font-size: .88rem;
      color: #fff !important
    }


    /* hero */
    .hero {
      padding: 74px 0 78px;
      border-bottom: 1px solid var(--line)
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 60px;
      align-items: start
    }

    .hero .eyebrow {
      display: block;
      margin-bottom: 18px
    }

    .hero-sub {
      margin-top: 22px;
      font-size: 1.1rem;
      color: var(--muted);
      max-width: 36ch
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px
    }

    .hero-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 26px
    }

    .pill {
      font-family: var(--mono);
      font-size: .7rem;
      letter-spacing: .05em;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: #fff
    }

    @media(max-width:940px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 44px
      }

      .hero-sub {
        max-width: none
      }
    }

    /* call log */
    .log {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: 0 12px 30px -24px rgba(12, 26, 34, .4)
    }

    .log-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--line);
      flex-wrap: wrap
    }

    .log-title {
      font-family: var(--mono);
      font-size: .7rem;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .toggle {
      display: inline-flex;
      background: var(--paper-2);
      border-radius: 8px;
      padding: 3px
    }

    .toggle button {
      font-family: var(--body);
      font-size: .78rem;
      font-weight: 600;
      color: var(--muted);
      background: none;
      border: 0;
      padding: 7px 13px;
      border-radius: 6px;
      cursor: pointer
    }

    .toggle button[aria-pressed="true"] {
      background: var(--ink);
      color: #fff
    }

    .log-rows {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .log-rows li {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      font-family: var(--mono);
      font-size: .78rem;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      letter-spacing: .01em;
      opacity: 0;
      transform: translateY(5px);
      animation: rowIn .3s ease forwards
    }

    .log-rows li:last-child {
      border-bottom: 0
    }

    @keyframes rowIn {
      to {
        opacity: 1;
        transform: none
      }
    }

    .log-time {
      color: var(--muted)
    }

    .log-status {
      font-size: .7rem;
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap
    }

    .s-miss {
      background: var(--accent-wash);
      color: var(--accent)
    }

    .s-live {
      background: var(--pos-wash);
      color: var(--pos)
    }

    .log-foot {
      padding: 13px 16px;
      font-family: var(--mono);
      font-size: .72rem;
      color: var(--muted);
      background: var(--paper-2)
    }

    .log-foot b {
      color: var(--ink);
      font-weight: 500
    }

    @media(max-width:520px) {
      .log-rows li {
        grid-template-columns: 50px 1fr;
        font-size: .71rem
      }

      .log-status {
        grid-column: 2;
        justify-self: start
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .log-rows li {
        animation: none;
        opacity: 1;
        transform: none
      }

      * {
        scroll-behavior: auto !important
      }

      .btn:hover {
        transform: none
      }
    }

    /* flow map */
    .flow-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 26px
    }

    .flow-badges span {
      font-family: var(--mono);
      font-size: .68rem;
      letter-spacing: .06em;
      padding: 6px 12px;
      border: 1px solid var(--line-dark);
      border-radius: 999px;
      color: var(--muted-dark)
    }

    .flow-svg {
      width: 100%;
      height: auto;
      display: block
    }

    .flow-list {
      display: none;
      list-style: none;
      margin: 0;
      padding: 0
    }

    .flow-list li {
      padding: 16px 0;
      border-top: 1px solid var(--line-dark)
    }

    .flow-list .fl-q {
      font-family: var(--mono);
      font-size: .8rem;
      color: #fff
    }

    .flow-list .fl-meta {
      font-family: var(--mono);
      font-size: .66rem;
      letter-spacing: .1em;
      color: var(--muted-dark);
      margin-top: 4px
    }

    .flow-list .fl-do {
      font-size: .9rem;
      color: var(--muted-dark);
      margin-top: 8px
    }

    .flow-list .fl-do b {
      color: var(--accent-bright);
      font-weight: 500
    }

    @media(max-width:800px) {
      .flow-svg {
        display: none
      }

      .flow-list {
        display: block
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .flow-svg .pt {
        display: none
      }
    }

    .flow-note {
      margin-top: 26px;
      font-size: .92rem;
      color: var(--muted-dark);
      max-width: 70ch
    }

    /* cards */


    /* calculator */
    .calc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 52px;
      align-items: center
    }

    .calc-fields {
      display: grid;
      gap: 18px;
      max-width: 400px;
      margin-top: 26px
    }

    .field label {
      display: block;
      font-size: .83rem;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 7px
    }

    .field input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      font-family: var(--mono);
      font-size: 1rem;
      color: var(--ink);
      background: #fff
    }

    .calc-out {
      background: var(--ink);
      color: #fff;
      border-radius: var(--r);
      padding: 34px
    }

    .calc-out .eyebrow {
      display: block;
      margin-bottom: 12px
    }

    .calc-num {
      font-family: var(--display);
      font-size: clamp(2rem, 4.6vw, 3rem);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1;
      word-break: break-word
    }

    .calc-out p {
      margin-top: 14px;
      color: var(--muted-dark);
      font-size: .92rem
    }

    .cur {
      display: inline-flex;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 3px
    }

    .cur button {
      font-family: var(--body);
      font-size: .8rem;
      font-weight: 600;
      color: var(--muted);
      background: none;
      border: 0;
      padding: 7px 15px;
      border-radius: 6px;
      cursor: pointer
    }

    .cur button[aria-pressed="true"] {
      background: var(--ink);
      color: #fff
    }

    @media(max-width:880px) {
      .calc {
        grid-template-columns: 1fr;
        gap: 32px
      }
    }

    /* proof */
    .case {
      display: grid;
      grid-template-columns: 190px 1fr 1fr;
      gap: 32px;
      padding: 32px 0;
      border-top: 1px solid var(--line-dark);
      align-items: start
    }

    .case:last-of-type {
      border-bottom: 1px solid var(--line-dark)
    }

    .case-name {
      font-family: var(--display);
      font-size: 1.25rem;
      font-weight: 700
    }

    .case-meta {
      font-family: var(--mono);
      font-size: .7rem;
      color: var(--muted-dark);
      margin-top: 7px;
      letter-spacing: .06em
    }

    .case h4 {
      font-family: var(--mono);
      font-size: .69rem;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--accent-bright);
      margin: 0 0 10px;
      font-weight: 500
    }

    .case p {
      color: var(--muted-dark);
      font-size: .95rem
    }

    .stack {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 15px
    }

    .chip {
      font-family: var(--mono);
      font-size: .67rem;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line-dark);
      color: var(--muted-dark)
    }

    @media(max-width:860px) {
      .case {
        grid-template-columns: 1fr;
        gap: 18px
      }
    }

    /* verticals */
    .verts {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .vert {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 24px
    }

    .vert h3 {
      font-size: 1rem;
      margin-bottom: 9px
    }

    .vert p {
      font-size: .89rem;
      color: var(--muted)
    }

    @media(max-width:900px) {
      .verts {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:540px) {
      .verts {
        grid-template-columns: 1fr
      }
    }

    /* the 30-minute session — interactive stepper */
    .stepper {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 34px
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .tab {
      text-align: left;
      background: none;
      border: 0;
      padding: 0 0 14px;
      cursor: pointer;
      font-family: var(--body)
    }

    .tab .tm {
      display: block;
      font-family: var(--mono);
      font-size: .68rem;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 7px
    }

    .tab .tt {
      display: block;
      font-family: var(--display);
      font-size: 1rem;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: -.01em;
      line-height: 1.25
    }

    .tab[aria-selected="true"] .tm {
      color: var(--accent)
    }

    .tab[aria-selected="true"] .tt {
      color: var(--ink)
    }

    .track {
      position: relative;
      height: 3px;
      background: var(--line);
      border-radius: 2px;
      overflow: hidden
    }

    .track-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      background: var(--accent-bright);
      border-radius: 2px
    }

    .stage {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 36px;
      align-items: start;
      padding-top: 30px;
      min-height: 170px
    }

    .stage-in {
      opacity: 0;
      transform: translateY(8px);
      animation: stageIn .35s ease forwards
    }

    @keyframes stageIn {
      to {
        opacity: 1;
        transform: none
      }
    }

    .stage-q {
      font-family: var(--display);
      font-size: clamp(1.3rem, 2.5vw, 1.75rem);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.18
    }

    .stage-p {
      margin-top: 14px;
      color: var(--muted);
      font-size: 1rem;
      max-width: 46ch
    }

    .stage-take {
      background: var(--pos-wash);
      border-radius: 10px;
      padding: 20px
    }

    .stage-take .stl {
      font-family: var(--mono);
      font-size: .66rem;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--pos);
      display: block;
      margin-bottom: 9px
    }

    .stage-take .stv {
      font-family: var(--display);
      font-size: 1.02rem;
      font-weight: 700;
      line-height: 1.3
    }

    .sess-fine {
      margin-top: 26px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      font-size: .94rem;
      color: var(--muted)
    }

    .sess-fine b {
      color: var(--ink);
      font-weight: 600
    }

    @media(max-width:820px) {
      .stepper {
        padding: 24px
      }

      .tabs {
        grid-template-columns: 1fr;
        gap: 0
      }

      .tab {
        padding: 14px 0;
        border-bottom: 1px solid var(--line)
      }

      .track {
        display: none
      }

      .stage {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 24px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .stage-in {
        animation: none;
        opacity: 1;
        transform: none
      }
    }

    /* steps */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
      gap: 0
    }

    .step {
      padding: 28px 26px;
      border-right: 1px solid var(--line)
    }

    .step:first-child {
      padding-left: 0
    }

    .step:last-child {
      border-right: 0;
      padding-right: 0
    }

    .step-n {
      font-family: var(--mono);
      font-size: .72rem;
      color: var(--accent);
      letter-spacing: .1em
    }

    .step h3 {
      margin: 13px 0 9px;
      font-size: 1.02rem
    }

    .step p {
      font-size: .89rem;
      color: var(--muted)
    }

    .step-when {
      display: block;
      margin-top: 13px;
      font-family: var(--mono);
      font-size: .71rem;
      color: var(--muted)
    }

    @media(max-width:900px) {
      .steps {
        grid-template-columns: 1fr
      }

      .step {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 22px 0
      }

      .step:last-child {
        border-bottom: 0
      }
    }

    /* credibility */
    .cred {
      display: grid;
      grid-template-columns: 1.4fr minmax(240px, 340px);
      gap: 52px;
      align-items: center
    }

    .cred blockquote {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(1.2rem, 2.3vw, 1.65rem);
      font-weight: 500;
      line-height: 1.28;
      letter-spacing: -.015em
    }

    .cred-body {
      margin-top: 18px;
      color: var(--muted);
      font-size: .96rem
    }

    .logos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .logo {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 8px;
      padding: 18px;
      text-align: center;
      font-family: var(--mono);
      font-size: .76rem;
      color: var(--muted);
      letter-spacing: .05em
    }

    @media(max-width:860px) {
      .cred {
        grid-template-columns: 1fr;
        gap: 28px
      }
    }

    /* pricing */
    .price-head{max-width:660px;margin-bottom:30px}
    .price-head .eyebrow{display:block;margin-bottom:13px}
    .price-head p{margin-top:14px;color:var(--muted);font-size:1.04rem}

    /* one control bar: billing term + region */
    .controls{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:22px}
    .ctrl{display:flex;align-items:center;gap:13px}
    .ctrl-lbl{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
    .seg{position:relative;display:inline-flex;background:var(--paper-2);border-radius:9px;padding:4px}
    .seg button{position:relative;z-index:2;font-family:var(--body);font-size:.83rem;font-weight:600;color:var(--muted);background:none;border:0;padding:9px 16px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:color .22s}
    .seg button[aria-pressed="true"]{color:#fff}
    .seg .thumb{position:absolute;z-index:1;top:4px;height:calc(100% - 8px);background:var(--ink);border-radius:7px;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
    .seg .save{display:inline-block;margin-left:7px;font-size:.66rem;font-weight:700;color:var(--pos);background:var(--pos-wash);padding:2px 7px;border-radius:999px;transition:.22s}
    .seg button[aria-pressed="true"] .save{color:var(--ink);background:var(--accent-bright)}

    /* savings banner */
    .saved{overflow:hidden;max-height:0;opacity:0;transition:max-height .34s ease,opacity .3s ease,margin .34s ease;margin-bottom:0}
    .saved.show{max-height:90px;opacity:1;margin-bottom:22px}
    .saved-in{background:var(--pos-wash);border:1px solid rgba(11,107,80,.22);border-radius:10px;padding:13px 18px;font-size:.92rem;color:var(--pos);font-weight:600;display:flex;align-items:center;gap:10px}
    .saved-in svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--pos);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

    /* tiers */
    .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
    .tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;display:flex;flex-direction:column}
    .tier.featured{border:1.5px solid var(--ink)}
    #pricing .tier h3{font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.01em;margin:0}
    .tier-tag{position:absolute;top:-11px;left:28px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:999px}
    .tier-for{font-size:.87rem;color:var(--muted);margin-top:8px;min-height:88px}
    .tier-price{margin:20px 0 0;font-family:var(--display);font-size:2.05rem;font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
    .tier-price small{font-family:var(--body);font-size:.76rem;font-weight:500;color:var(--muted);letter-spacing:0}
    .was{font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--muted);text-decoration:line-through;opacity:0;transition:opacity .3s}
    .was.show{opacity:1}
    .tier-billed{font-size:.78rem;color:var(--muted);margin-top:8px;min-height:20px;font-variant-numeric:tabular-nums}
    .tier-setup{font-size:.84rem;color:var(--muted);margin-top:12px;padding-bottom:18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
    .tier-setup b{color:var(--ink)}
    .allow{background:var(--paper-2);border-radius:9px;padding:15px 16px;margin:18px 0 0}
    .allow .al{display:block;font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
    .allow .av{display:flex;gap:22px;flex-wrap:wrap}
    .allow .av div{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
    .allow .av span{display:block;font-family:var(--body);font-size:.69rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:1px}
    .tier ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:11px;flex:1;align-content:start}
    .tier li{font-size:.9rem;padding-left:23px;position:relative;color:var(--muted)}
    .tier li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--pos-wash);border:1.5px solid var(--pos)}
    .tier li b{color:var(--ink);font-weight:700}
    .tier li.addon::before{background:#fff;border-color:var(--accent-bright);border-radius:2px}
    .tier .btn{width:100%;justify-content:center}

    /* top-up band */
    .topup{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
    .topup-l{flex:1;min-width:260px}
    .topup-l .tl{display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
    .topup-l h4{font-family:var(--display);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin:0 0 7px}
    .topup-l p{font-size:.88rem;color:var(--muted);max-width:56ch}
    .topup-r{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
    .topup-pack{text-align:right}
    .topup-price{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
    .topup-gets{font-size:.82rem;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
    @media(max-width:820px){.topup{flex-direction:column;align-items:flex-start}.topup-pack{text-align:left}}

    /* 30-day pilot */
    .pilot{margin-top:18px;background:var(--ink);color:#fff;border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
    .pilot.in{opacity:1;transform:none}
    .pilot-l{padding:32px 34px}
    .pilot-r{padding:32px 34px;background:rgba(255,255,255,.045);border-left:1px solid var(--line-dark);display:flex;flex-direction:column;justify-content:center}
    #pricing .pilot h3{color:#fff;font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
    #pricing .pilot .pilot-sub{color:var(--accent-bright);font-family:var(--body);font-size:1.06rem;font-weight:600;line-height:1.35;margin-top:12px;max-width:40ch}
    .pilot p{color:var(--muted-dark);font-size:.94rem;margin-top:13px;max-width:52ch}
    .pilot-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
    .pilot-amt{font-family:var(--display);font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
    .pilot-per{font-size:.82rem;color:var(--muted-dark)}
    .pilot-credit{font-size:.86rem;color:var(--pos-bright);font-weight:600;margin-bottom:20px}
    .pilot ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
    .pilot li{font-size:.88rem;color:var(--muted-dark);padding-left:22px;position:relative}
    .pilot li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:rgba(240,160,42,.18);border:1.5px solid var(--accent-bright)}
    .pilot li b{color:#fff;font-weight:600}
    .pilot .btn-amber{background:var(--accent-bright);color:#26170A;border-color:var(--accent-bright);width:100%;justify-content:center}
    .pilot .btn-amber:hover{transform:translateY(-2px)}
    .pilot-fine{font-size:.78rem;color:var(--muted-dark);margin-top:14px;line-height:1.5}
    @media(max-width:900px){.pilot{grid-template-columns:1fr}.pilot-r{border-left:0;border-top:1px solid var(--line-dark)}.pilot-l,.pilot-r{padding:26px 24px}}

    .price-fine{margin-top:26px;font-size:.88rem;color:var(--muted);max-width:none;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;line-height:1.6}
    .price-fine b{color:var(--ink)}

    @media(max-width:900px){
      .tiers{grid-template-columns:1fr}
      .tier-for{min-height:0}
      .controls{flex-direction:column;align-items:stretch;gap:14px}
      .ctrl{justify-content:space-between}
      .seg{width:100%}
      .seg button{flex:1;padding:9px 8px;font-size:.78rem}
      .seg .save{display:block;margin:3px 0 0}
    }
    @media(prefers-reduced-motion:reduce){
      .pilot{opacity:1;transform:none}
      .seg .thumb{transition:none}
    }

    /* faq */
    .faq {
      max-width: 840px
    }

    .q {
      border-bottom: 1px solid var(--line)
    }

    .q summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 0;
      cursor: pointer;
      font-family: var(--display);
      font-size: 1.03rem;
      font-weight: 700;
      letter-spacing: -.01em
    }

    .q summary::-webkit-details-marker {
      display: none
    }

    .q-mark {
      font-family: var(--mono);
      font-size: 1.15rem;
      color: var(--accent);
      flex-shrink: 0;
      transition: transform .2s
    }

    .q[open] .q-mark {
      transform: rotate(45deg)
    }

    .q .a {
      padding: 0 0 22px;
      color: var(--muted);
      font-size: .95rem;
      max-width: 68ch
    }

    /* final */
    .final {
      text-align: center;
      padding: 92px 0
    }

    .final h2 {
      max-width: 17ch;
      margin: 0 auto
    }

    .final p {
      margin: 20px auto 0;
      max-width: 54ch;
      color: var(--muted-dark)
    }

    .final .btn {
      margin-top: 30px
    }

    .final-fine {
      margin-top: 22px;
      font-family: var(--mono);
      font-size: .73rem;
      color: var(--muted-dark)
    }

    footer {
      background: var(--ink);
      color: var(--muted-dark);
      border-top: 1px solid var(--line-dark);
      padding: 28px 0;
      font-size: .85rem
    }

    .foot-in {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap
    }

    footer a {
      color: rgba(255, 255, 255, .75);
      text-decoration: none
    }

    footer a:hover {
      color: #fff
    }
  

/* ---- widget / late styles ---- */

            .fq {
              fill: #132B37;
              stroke: #2A4756
            }

            .ft {
              fill: #FFFFFF;
              font-family: 'Manrope', sans-serif;
              font-size: 13px
            }

            .fm {
              fill: #93A9B4;
              font-family: 'Manrope', sans-serif;
              font-size: 9.5px;
              letter-spacing: .09em
            }

            .fl {
              fill: none;
              stroke: #2A4756;
              stroke-width: 1.2
            }

            .fn {
              fill: #0C1A22;
              stroke: #F0A02A;
              stroke-width: 1.6
            }

            .fnl {
              fill: #F0A02A;
              font-family: 'Manrope', sans-serif;
              font-size: 9.5px;
              letter-spacing: .09em
            }

            .fo {
              fill: #0C1A22;
              stroke: #4ED6A8;
              stroke-width: 1.6
            }

            .fol {
              fill: #FFFFFF;
              font-family: 'Manrope', sans-serif;
              font-size: 13px
            }

            .col {
              fill: #93A9B4;
              font-family: 'Manrope', sans-serif;
              font-size: 9.5px;
              letter-spacing: .14em
            }
          
/* ================= SUB-PAGE COMPONENTS ================= */
.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.page-hero{padding:64px 0 8px}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0}
.page-hero .lede{margin-top:18px;max-width:62ch;font-size:1.06rem;color:var(--muted);line-height:1.65}
.page-hero .hero-actions{margin-top:26px}
.prose{max-width:74ch}
.prose p{margin:0 0 16px;color:var(--muted);font-size:1rem;line-height:1.7}
.prose h3{font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.01em;margin:32px 0 10px;color:var(--ink)}
.prose ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.prose li{font-size:.95rem;color:var(--muted);padding-left:23px;position:relative;line-height:1.6}
.prose li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--pos-wash);border:1.5px solid var(--pos)}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.ansq{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin:0 0 14px}
.ansq h3{margin:0 0 8px;font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ansq p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
.pagegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.pagecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;display:block;transition:border-color .2s,transform .2s,box-shadow .2s}
.pagecard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(12,26,34,.5)}
.pagecard b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.pagecard span{display:block;font-size:.88rem;color:var(--muted);line-height:1.55}
.factrow{display:flex;gap:28px;flex-wrap:wrap;background:var(--paper-2);border-radius:var(--r);padding:20px 24px;margin:0 0 26px}
.factrow div{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.factrow span{display:block;font-family:var(--body);font-size:.7rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-variant-numeric:tabular-nums;min-width:640px}
.ptable th,.ptable td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--muted);vertical-align:top}
.ptable thead th{font-family:var(--body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper-2)}
.ptable tbody th{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ptable tbody th span{display:block;font-family:var(--body);font-size:.76rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:4px}
.ptable td b{color:var(--ink)}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable-note{margin-top:18px;font-size:.86rem;color:var(--muted);line-height:1.65;max-width:80ch}
.vert h3 a,.pcard-name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.vert h3 a:hover{border-color:var(--ink)}
.pcard-name a{border-bottom-color:var(--line-dark)}
.pcard-name a:hover{border-bottom-color:#fff}
.morelink{margin-top:14px;font-size:.92rem}
.morelink a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-wash)}
.morelink a:hover{border-bottom-color:var(--accent)}
/* prose inside a wrap keeps the page grid: full wrap width, 74ch measure, left aligned */
.wrap.prose{max-width:var(--wrap)}
.wrap.prose>*{max-width:74ch}