: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 {
      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 .nav-in {
        height: 64px;
        flex-wrap: nowrap;
        gap: 12px
      }

      .nav .navburger {
        display: flex
      }

      .nav .navmenu {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 30px rgba(12, 26, 34, .10);
        padding: 6px 24px 20px;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s
      }

      .nav[data-open] .navmenu {
        opacity: 1;
        visibility: visible;
        transform: none
      }

      .nav .navtabs {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible
      }

      .nav .navtabs li+li {
        border-top: 1px solid var(--line)
      }

      .nav .navtabs a {
        padding: 15px 2px;
        font-size: .78rem;
        letter-spacing: .045em
      }

      .nav .navtabs li.navcursor {
        display: none
      }

      .nav .nav-cta {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 16px;
        padding: 14px 16px;
        font-size: .85rem
      }

      .nav .brand {
        font-size: 1rem
      }
    }

    @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
      }

      .cd-wrap {
        padding: 22px
      }

      .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;
      overflow-wrap: anywhere;
      word-break: normal;
      line-height: 1.35
    }

    .cbox .cv.email {
      font-size: .85rem;
      letter-spacing: -.005em
    }

    /* 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
    }

    .navmenu {
      display: contents
    }

    .navburger {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      padding: 0;
      border: 1.5px solid var(--ink);
      border-radius: 11px;
      background: #fff;
      cursor: pointer
    }

    .navburger span {
      display: block;
      width: 17px;
      height: 2px;
      border-radius: 2px;
      background: var(--ink);
      transition: transform .25s ease, opacity .18s ease
    }

    .nav[data-open] .navburger span:nth-child(1) {
      transform: translateY(6px) rotate(45deg)
    }

    .nav[data-open] .navburger span:nth-child(2) {
      opacity: 0
    }

    .nav[data-open] .navburger span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg)
    }

    @media(max-width:1080px) {
      .nav .nav-cta {
        padding: 10px 14px;
        font-size: .8rem
      }
    }


    /* 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)
    }

    .vert {
      position: relative;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
    }

    .vert:hover,
    .vert:focus-within {
      transform: translateY(-3px);
      border-color: var(--accent-bright);
      box-shadow: 0 10px 26px rgba(12, 26, 34, .09)
    }

    .vert h3 a::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--r)
    }

    .vert:hover h3 a,
    .vert:focus-within h3 a {
      border-color: var(--ink)
    }

    .vico {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 15px;
      border-radius: 11px;
      background: var(--accent-wash);
      color: var(--accent);
      transition: background .25s ease, transform .35s cubic-bezier(.34, 1.4, .5, 1)
    }

    .vico svg {
      width: 23px;
      height: 23px;
      display: block;
      overflow: visible
    }

    .vert:hover .vico,
    .vert:focus-within .vico {
      background: #F6E2C0;
      transform: translateY(-2px)
    }

    .vi-draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 0
    }

    @keyframes viDraw {
      from {
        stroke-dashoffset: 1
      }

      to {
        stroke-dashoffset: 0
      }
    }

    .vert:hover .vi-draw,
    .vert:focus-within .vi-draw {
      animation: viDraw .6s ease
    }

    .vi-cap {
      transform-origin: 12px 12px;
      transition: transform .4s cubic-bezier(.34, 1.4, .5, 1)
    }

    .vert:hover .vi-cap,
    .vert:focus-within .vi-cap {
      transform: rotate(-9deg)
    }

    .vi-bag {
      transform-origin: 12px 20px;
      transition: transform .4s cubic-bezier(.34, 1.4, .5, 1)
    }

    .vert:hover .vi-bag,
    .vert:focus-within .vi-bag {
      transform: translateY(-2px)
    }

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

      .vert,
      .vico,
      .vi-cap,
      .vi-bag {
        transition: none
      }

      .vert:hover,
      .vert:focus-within {
        transform: none
      }

      .vert:hover .vico,
      .vert:focus-within .vico,
      .vert:hover .vi-cap,
      .vert:focus-within .vi-cap,
      .vert:hover .vi-bag,
      .vert:focus-within .vi-bag {
        transform: none
      }

      .vert:hover .vi-draw,
      .vert:focus-within .vi-draw {
        animation: none
      }
    }

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

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

    /* the 30-minute session — dial infographic */
    .cd-wrap {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 40px;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 48px;
      align-items: center
    }

    .cd-clock {
      position: relative;
      width: 260px;
      height: 260px;
      margin: 0 auto
    }

    .cd-clock svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg)
    }

    .cd-clock .cd-track {
      fill: none;
      stroke: var(--line);
      stroke-width: 14
    }

    .cd-clock .cd-arc {
      fill: none;
      stroke-width: 14;
      stroke-linecap: butt;
      stroke-dasharray: 0 999;
      transition: stroke-dasharray 700ms cubic-bezier(.4, 0, .2, 1)
    }

    .cd-clock .cd-a1 {
      stroke: #F6C67A
    }

    .cd-clock .cd-a2 {
      stroke: var(--accent-bright)
    }

    .cd-clock .cd-a3 {
      stroke: var(--accent)
    }

    .cd-clock .cd-mid {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center
    }

    .cd-clock .cd-big {
      display: block;
      font-family: var(--display);
      font-weight: 700;
      font-size: 3rem;
      line-height: 1;
      font-variant-numeric: tabular-nums
    }

    .cd-clock .cd-lab {
      display: block;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 6px
    }

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

    .cd-list li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      opacity: .45;
      transition: opacity 450ms
    }

    .cd-list li:last-child {
      border-bottom: 0
    }

    .cd-list li.on {
      opacity: 1
    }

    .cd-num {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-weight: 700;
      font-size: .95rem;
      color: #fff;
      background: var(--line);
      transition: background 450ms
    }

    .cd-list li.on .cd-num {
      background: var(--accent)
    }

    .cd-list h3 {
      font-size: 1.06rem;
      font-weight: 700;
      margin: 0 0 4px
    }

    .cd-list p {
      margin: 0;
      color: var(--muted);
      font-size: .93rem
    }

    .cd-list .cd-take {
      display: block;
      margin-top: 8px;
      color: var(--pos);
      font-size: .85rem;
      font-weight: 600
    }

    .sess-fine {
      margin-top: 24px;
      max-width: 70ch;
      font-size: .94rem;
      color: var(--muted)
    }

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

    @media(max-width:820px) {
      .cd-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px
      }

      .cd-clock {
        width: 210px;
        height: 210px
      }
    }

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

      .cd-clock .cd-arc,
      .cd-num,
      .cd-list li {
        transition: none
      }

      .cd-list li {
        opacity: 1
      }
    }

    /* 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}
    .tier .was{font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--muted);text-decoration:line-through;opacity:0;transition:opacity .3s}
    .tier .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}


/* ================= scroll depth and reveals =================
   Everything here is opt-in per element via data-reveal / data-para,
   so no existing class picks it up and no other page is affected.
   The hiding rule is gated on .js-scrollfx, which the script only adds
   once it is running — if the JS fails or is blocked, nothing is hidden. */

.js-scrollfx [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1) var(--rd, 0ms),
              transform .65s cubic-bezier(.22, .61, .36, 1) var(--rd, 0ms);
}

.js-scrollfx [data-reveal].shown {
  opacity: 1;
  transform: none;
}

.js-scrollfx .verts [data-reveal]:nth-child(2) { --rd: 70ms }
.js-scrollfx .verts [data-reveal]:nth-child(3) { --rd: 140ms }
.js-scrollfx .verts [data-reveal]:nth-child(4) { --rd: 210ms }
.js-scrollfx .proof-grid [data-reveal]:nth-child(3) { --rd: 110ms }

[data-para] { backface-visibility: hidden }

/* founder portrait: the image drifts inside a fixed crop */
.portrait-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 520 / 650;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}

.portrait-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -6%;
  bottom: -6%;
  display: block;
}

.portrait-frame .portrait {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

/* closing section: a soft amber wash that drifts against the content */
.final { position: relative; overflow: hidden }
.final > .wrap { position: relative; z-index: 1 }

.final-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -14%;
  width: 920px;
  height: 640px;
  margin-left: -460px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240, 160, 42, .17), rgba(240, 160, 42, 0) 70%);
}

@media (max-width: 900px) {
  .final-glow { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .js-scrollfx [data-reveal] { opacity: 1; transform: none; transition: none }
}

    /* ================= v2 CONTENT ADDITIONS (Sep 2026) ================= */
  /* the hero demo button is now the primary; .glow-btn>.btn forces a white
     fill, which made btn-primary white-on-white. Restore the dark fill. */
  .glow-btn > .btn.btn-primary { background: var(--ink); color: #fff; border-color: transparent }
  .glow-btn > .btn.btn-primary:hover { background: var(--ink-2) }

  .final h2 { max-width: 24ch }

  /* "answer" is a longer word than the old "miss" — the circle geometry that
     suited a 4-letter word swallowed the em dash and both neighbouring lines. */
  .hero .circled svg { left: -6%; top: -18%; width: 112%; height: 138% }
  .hero .circled { margin-right: .12em }


  .steps-3 { grid-template-columns: repeat(3, 1fr) }
  .steps-6 { grid-template-columns: repeat(3, 1fr) }
  .steps-6 .step:nth-child(3n) { border-right: 0; padding-right: 0 }
  .steps-6 .step:nth-child(3n+1) { padding-left: 0 }
  .steps-6 .step:nth-child(n+4) { border-top: 1px solid var(--line) }

  .v2-note {
    margin-top: 28px; padding-left: 16px; border-left: 3px solid var(--accent-bright);
    color: var(--muted); font-size: .95rem; max-width: 72ch
  }

  .safety {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px
  }
  .safety li {
    position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line);
    color: var(--muted); font-size: .95rem
  }
  .safety li b { color: var(--ink); font-weight: 600 }
  .safety li::before {
    content: ""; position: absolute; left: 0; top: 20px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--pos-wash);
    box-shadow: inset 0 0 0 1.5px var(--pos)
  }
  .safety li::after {
    content: ""; position: absolute; left: 5.5px; top: 25px; width: 7px; height: 4px;
    border-left: 1.8px solid var(--pos); border-bottom: 1.8px solid var(--pos);
    transform: rotate(-45deg)
  }

  .incl { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0 }
  .incl li {
    font-size: .82rem; color: var(--muted); background: var(--paper-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px
  }

  .tier-sub {
    display: block; font-family: var(--body); font-size: .78rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-top: 5px
  }

  .proof-cta { margin-top: 42px; text-align: center }

  /* Live work CTA: the site's animated signal ring, on a dark section.
     .glow-btn forces a white fill (it was built for the light hero), so the
     fill and the ring's base colour are both re-tuned for the dark panel. */
  .proof-cta .glow { background-color: var(--line-dark) }
  .proof-cta .glow-btn > .btn {
    background: var(--ink-2); color: #fff; border-color: transparent;
    padding: 15px 30px
  }
  .proof-cta .glow-btn > .btn:hover { background: #1A3A47; transform: translateY(-2px) }
  .on-dark-btn { color: #fff; border-color: rgba(255, 255, 255, .34); background: transparent }
  .on-dark-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .07) }

  .final-list {
    list-style: none; margin: 20px auto 0; max-width: 620px; text-align: left;
    display: grid; gap: 10px
  }
  .final-list li {
    position: relative; padding-left: 26px; color: var(--muted-dark); font-size: .98rem
  }
  .final-list li::before {
    content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--accent-bright)
  }
  .final-honest { margin-top: 22px; color: #fff; font-weight: 600 }
  .final-actions {
    margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap
  }

  @media(max-width:900px) {
    .steps-3, .steps-6 { grid-template-columns: 1fr }
    .steps-6 .step:nth-child(n+4) { border-top: 0 }
    .steps-3 .step, .steps-6 .step { padding-left: 0; padding-right: 0 }
    .safety { grid-template-columns: 1fr }
  }

    /* ---- homepage price band (full pricing lives on /pricing/) ---- */
    .priceband {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 30px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: #fff;
      padding: 34px 36px
    }

    .priceband h2 {
      margin-top: 12px;
      font-size: 1.62rem
    }

    .priceband p {
      margin-top: 12px;
      color: var(--muted);
      font-size: .95rem;
      max-width: 62ch
    }

    @media(max-width:820px) {
      .priceband {
        grid-template-columns: 1fr;
        padding: 26px 22px
      }

      .priceband .btn {
        width: 100%;
        justify-content: center
      }
    }

/* ================= PRICING PAGE SIMPLIFICATION (Sep 2026) ================= */

/* 1 · intro */
.page-hero .reassure{margin-top:14px;font-size:.98rem;font-weight:600;color:var(--pos);
  background:var(--pos-wash);border:1px solid rgba(11,107,80,.22);border-radius:999px;
  padding:9px 18px;display:inline-block}
.page-hero .factrow{margin:34px 0 0}
.factrow-3 div{flex:1 1 190px}

/* 2 · controls */
#pricing .controls{margin-top:0}
#pricing{padding-top:34px}
.ctrl{flex-wrap:wrap}
.ctrl-lbl{font-size:.72rem;letter-spacing:.1em;color:var(--ink);font-weight:700}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctrl-note{margin:0 0 22px;font-size:.85rem;color:var(--muted)}

/* 3 · included in every plan */
.incl-block{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;margin:0 0 26px}
.incl-block h2{font-family:var(--display);font-size:1.16rem;font-weight:700;
  letter-spacing:-.01em;margin:0 0 16px;color:var(--ink)}
.incl2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:11px 32px}
.incl2 li{position:relative;padding-left:26px;font-size:.94rem;color:var(--muted);line-height:1.5}
.incl2 li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;
  border-radius:50%;background:var(--pos-wash);box-shadow:inset 0 0 0 1.5px var(--pos)}
.incl2 li::after{content:"";position:absolute;left:4.5px;top:10px;width:6px;height:3px;
  border-left:1.7px solid var(--pos);border-bottom:1.7px solid var(--pos);transform:rotate(-45deg)}

/* 4 · cards */
.tier-setup{font-variant-numeric:tabular-nums}
.tier-diff{display:block;margin:20px 0 -6px;font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.addon-box{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:0 0 20px}
.addon-box .ab-t{display:block;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:9px}
.ab-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.85rem;color:var(--muted);padding:5px 0}
.ab-row>span{flex:1 1 auto;min-width:0}
.ab-p{flex:0 0 auto;font-style:normal;white-space:nowrap}
.ab-p b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ab-p i{font-style:normal;font-size:.76rem;color:var(--muted);margin-left:3px}
.sip-note{margin:22px 0 0;font-size:.87rem;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.sip-note b{color:var(--ink)}

/* 5 · how payment works */
.pay-note{margin:26px 0 0;font-size:.87rem;color:var(--muted)}

/* 6 · top-ups */
.reassure-strong{margin:0 0 24px;font-size:.98rem;font-weight:700;color:var(--pos);
  background:var(--pos-wash);border:1px solid rgba(11,107,80,.22);border-radius:10px;
  padding:14px 18px}
.topup-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tup{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.tup-name{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:10px}
.tup .topup-price{font-size:2rem;color:var(--ink)}
.tup ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.tup li{position:relative;padding-left:22px;font-size:.92rem;color:var(--muted)}
.tup li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--pos-wash);border:1.5px solid var(--pos)}

/* 7 · pilot — was scoped to #pricing, the card now lives in its own section */
#pilot-section .pilot{margin-top:0}
#pilot-section .pilot h2{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}
#pilot-section .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:44ch}

@media(max-width:820px){
  .incl2{grid-template-columns:1fr}
  .topup-cards{grid-template-columns:1fr}
  .page-hero .reassure{display:block}
}

    /* ================= HERO ANIMATION (Sep 2026) ================= */
    /* the demo sits inside .glow, which supplies the ring and the 10.4px radius */
    #aurabotix-hero-demo{border-radius:10.4px;overflow:hidden;display:block}
    #aurabotix-hero-demo{--au-paper:#fff;--au-ink:var(--ink);--au-muted:var(--muted);--au-line:var(--line);--au-soft:var(--paper-2);--au-orange:var(--accent-bright);--au-green:var(--pos);--au-success:var(--pos-wash);font-family:var(--body);color:var(--au-ink);width:100%;max-width:100%;margin:0;box-sizing:border-box;font-size:14px;line-height:1.5}
    #aurabotix-hero-demo *{box-sizing:border-box}
    
    #aurabotix-hero-demo .au-shell{background:var(--au-paper);border:0;border-radius:0;overflow:hidden}
    #aurabotix-hero-demo .au-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:19px 24px;border-bottom:1px solid var(--au-line)}
    #aurabotix-hero-demo .au-brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:-.5px}
    #aurabotix-hero-demo .au-symbol{display:flex;align-items:center;justify-content:center;background:var(--au-orange);color:#26170a;width:28px;height:28px;border-radius:8px}
    #aurabotix-hero-demo .au-online{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--au-muted)}
    #aurabotix-hero-demo .au-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--au-green)}
    #aurabotix-hero-demo .au-content{padding:22px 24px 0}
    #aurabotix-hero-demo .au-context{display:flex;justify-content:space-between;gap:10px;color:var(--au-muted);font-size:12px;margin-bottom:15px}
    #aurabotix-hero-demo .au-context span{display:flex;align-items:center;gap:6px}
    #aurabotix-hero-demo .au-call{background:var(--ink);color:#fff;border-radius:10px;padding:22px;display:flex;align-items:center;gap:16px}
    #aurabotix-hero-demo .au-phone{width:48px;height:48px;flex:none;border-radius:50%;background:rgba(255,255,255,.09);color:var(--au-orange);display:flex;align-items:center;justify-content:center;position:relative}
    #aurabotix-hero-demo[data-stage="0"] .au-phone:after{content:'';position:absolute;inset:0;border:1px solid var(--au-orange);border-radius:50%;animation:au-ring 1.6s ease-out infinite}
    #aurabotix-hero-demo .au-caller{flex:1;min-width:0}
    #aurabotix-hero-demo .au-call-label{font-size:11px;color:var(--muted-dark);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}
    #aurabotix-hero-demo .au-number{font-size:19px;font-weight:600;letter-spacing:.2px}
    #aurabotix-hero-demo .au-wave{height:34px;display:flex;align-items:center;gap:3px;color:var(--au-orange)}
    #aurabotix-hero-demo .au-wave b{width:3px;height:var(--au-h);display:block;background:currentColor;border-radius:3px;animation:au-wave .85s ease-in-out infinite alternate;animation-delay:var(--au-delay)}
    #aurabotix-hero-demo[data-stage="0"] .au-wave,#aurabotix-hero-demo[data-stage="3"] .au-wave{opacity:.25}
    #aurabotix-hero-demo .au-scenes{display:grid;margin-top:20px;min-height:254px}
    #aurabotix-hero-demo .au-scene{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease,visibility .4s;pointer-events:none;min-width:0;padding-bottom:20px}
    #aurabotix-hero-demo .au-scene.au-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
    #aurabotix-hero-demo .au-waiting{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px}
    #aurabotix-hero-demo .au-large{font-family:var(--display);font-size:22px;letter-spacing:-.6px;font-weight:600}
    #aurabotix-hero-demo .au-sub{font-size:13px;color:var(--au-muted)}
    #aurabotix-hero-demo .au-pickup{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--au-green);margin-top:12px;background:var(--au-success);padding:8px 12px;border-radius:8px}
    #aurabotix-hero-demo .au-message{max-width:91%;margin-bottom:13px}
    #aurabotix-hero-demo .au-who{font-size:11px;color:var(--au-muted);margin-bottom:5px;display:flex;align-items:center;gap:6px}
    #aurabotix-hero-demo .au-bubble{padding:12px 15px;background:var(--au-soft);border-radius:4px 12px 12px;font-size:15px;line-height:1.65}
    #aurabotix-hero-demo .au-agent{margin-left:auto}
    #aurabotix-hero-demo .au-agent{opacity:0;transform:translateY(6px);visibility:hidden}
    #aurabotix-hero-demo .au-word{opacity:0;position:relative}
    #aurabotix-hero-demo .au-word.au-current:after{content:'';position:absolute;right:-5px;top:3px;height:15px;width:2px;background:var(--au-orange)}
    #aurabotix-hero-demo .au-transcript-status{color:var(--au-muted);font-size:11px;margin-top:6px;min-height:17px}
    #aurabotix-hero-demo[data-stage="3"] .au-wave b{animation:none;transform:scaleY(.15)}
    #aurabotix-hero-demo .au-agent .au-bubble{border-radius:12px 4px 12px 12px;background:var(--accent-wash)}
    #aurabotix-hero-demo .au-agent .au-who{justify-content:flex-end}
    #aurabotix-hero-demo .au-source{font-size:11px;color:var(--au-green);display:flex;align-items:center;gap:6px;margin-top:7px}
    #aurabotix-hero-demo .au-success-title{display:flex;align-items:center;gap:12px;margin:9px 0 16px}
    #aurabotix-hero-demo .au-check{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--au-success);color:var(--au-green);width:42px;height:42px;flex:none}
    #aurabotix-hero-demo .au-record{background:var(--au-soft);border-radius:10px;padding:13px 16px;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px}
    #aurabotix-hero-demo .au-record dt{color:var(--au-muted)}
    #aurabotix-hero-demo .au-record dd{margin:0;text-align:right}
    #aurabotix-hero-demo .au-delivery{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--au-green);margin-top:13px}
    #aurabotix-hero-demo .au-progress{display:flex;gap:6px;margin:0 24px}
    #aurabotix-hero-demo .au-step{height:3px;flex:1;background:var(--au-line);border-radius:4px;overflow:hidden}
    #aurabotix-hero-demo .au-step-fill{display:block;width:100%;height:100%;background:var(--au-orange);transform:scaleX(0);transform-origin:left}
    #aurabotix-hero-demo .au-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:12px 24px 16px;font-size:11px;color:var(--au-muted)}
    #aurabotix-hero-demo .au-stage-label{font-size:12px;color:var(--au-ink)}
    #aurabotix-hero-demo .au-footer-right{display:flex;align-items:center;gap:8px}
    #aurabotix-hero-demo .au-toggle{font:inherit;cursor:pointer;color:var(--au-muted);border:1px solid var(--au-line);border-radius:7px;padding:6px 9px;background:var(--au-paper);min-height:32px}
    #aurabotix-hero-demo .au-toggle:hover{color:var(--au-ink);background:var(--au-soft)}
    #aurabotix-hero-demo[data-paused="true"] .au-wave b,#aurabotix-hero-demo[data-paused="true"] .au-phone:after{animation-play-state:paused}
    @keyframes au-ring{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.65);opacity:0}}
    @keyframes au-wave{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
    @media(max-width:420px){#aurabotix-hero-demo .au-top{padding:16px}#aurabotix-hero-demo .au-content{padding:18px 16px 0}#aurabotix-hero-demo .au-call{padding:17px 14px;gap:10px}#aurabotix-hero-demo .au-number{font-size:16px}#aurabotix-hero-demo .au-phone{width:38px;height:38px}#aurabotix-hero-demo .au-wave{gap:2px}#aurabotix-hero-demo .au-wave b:nth-child(n+8){display:none}#aurabotix-hero-demo .au-progress{margin:0 16px}#aurabotix-hero-demo .au-bottom{padding:12px 16px}#aurabotix-hero-demo .au-message{max-width:96%}#aurabotix-hero-demo .au-scenes{min-height:272px}#aurabotix-hero-demo .au-demo-label{display:none}}
    @media(pointer:coarse){#aurabotix-hero-demo .au-toggle{min-height:44px}}
    @media(prefers-reduced-motion:reduce){#aurabotix-hero-demo .au-scene{transition:none}#aurabotix-hero-demo .au-wave b,#aurabotix-hero-demo .au-phone:after{animation:none}}

    /* The decorative blur behind .glow (inset:-26%) bleeds past the viewport and
       gave the site ~74px of horizontal scroll on phones. Ring stays, blur drops. */
    @media(max-width:900px){
      .glow::after{display:none}
    }


    /* ---- callback form popup (16 Sep 2026) ---- */
    .nav button.nav-cta { font-family: var(--body) }

    .cb-dialog {
      width: min(460px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      padding: 0;
      border: 0;
      border-radius: 16px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 30px 80px -30px rgba(12, 26, 34, .6);
      overflow: auto;
      overscroll-behavior: contain
    }

    .cb-dialog::backdrop {
      background: rgba(12, 26, 34, .62);
      backdrop-filter: blur(3px)
    }

    .cb-dialog[open] { animation: cbIn .22s ease-out }

    @keyframes cbIn {
      from { opacity: 0; transform: translateY(12px) }
      to { opacity: 1; transform: none }
    }

    .cb-body { padding: 30px 28px 24px }

    .cb-close {
      position: absolute;
      top: 10px;
      right: 12px;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--muted);
      font-size: 28px;
      line-height: 1;
      cursor: pointer
    }

    .cb-close:hover { background: var(--paper-2); color: var(--ink) }

    .cb-eyebrow {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px
    }

    .cb-dialog h2 {
      font-size: 1.6rem;
      margin: 0 36px 10px 0
    }

    .cb-sub {
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.55;
      margin: 0 0 18px
    }

    .cb-nowrap { white-space: nowrap; color: var(--ink) }

    .cb-field {
      display: block;
      margin-bottom: 14px
    }

    .cb-field > span,
    .cb-field > label {
      display: block;
      font-size: .85rem;
      font-weight: 600;
      margin-bottom: 6px
    }

    .cb-field em {
      font-style: normal;
      font-weight: 500;
      color: var(--muted)
    }

    .cb-dialog input[type="text"],
    .cb-dialog input[type="tel"],
    .cb-dialog select {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;
      font: 500 16px/1.3 var(--body);
      color: var(--ink);
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 8px
    }

    .cb-dialog input:focus,
    .cb-dialog select:focus {
      outline: none;
      border-color: var(--accent-bright);
      box-shadow: 0 0 0 3px var(--accent-wash)
    }

    .cb-phone {
      display: flex;
      gap: 8px
    }

    .cb-phone select {
      width: 132px;
      min-width: 0;
      flex: 0 0 132px
    }

    .cb-phone input { flex: 1; min-width: 0 }

    .cb-preview {
      display: block;
      min-height: 1.3em;
      margin-top: 5px;
      font-size: .8rem;
      color: var(--pos)
    }

    .cb-preview.bad { color: #A3271B }

    .cb-hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    .cb-consent {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: .82rem;
      line-height: 1.5;
      color: var(--muted);
      margin: 4px 0 14px;
      cursor: pointer
    }

    .cb-consent input {
      width: 20px;
      height: 20px;
      margin: 1px 0 0;
      flex: none;
      accent-color: var(--ink)
    }

    .cb-error {
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #FDECEA;
      color: #8A1F14;
      font-size: .86rem
    }

    .cb-submit {
      width: 100%;
      justify-content: center;
      font-size: 1rem;
      padding: 15px 24px
    }

    .cb-submit:disabled {
      opacity: .7;
      cursor: wait;
      transform: none
    }

    .cb-alt {
      margin: 14px 0 0;
      text-align: center;
      font-size: .82rem;
      color: var(--muted)
    }

    .cb-alt a { color: var(--accent); font-weight: 600 }

    .cb-done { text-align: center }

    .cb-done h2 { margin: 14px 0 10px }

    .cb-done h2:focus { outline: none }

    .cb-ring {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--pos-wash);
      color: var(--pos);
      animation: cbPulse 1.6s ease-out infinite
    }

    @keyframes cbPulse {
      0% { box-shadow: 0 0 0 0 rgba(11, 107, 80, .35) }
      100% { box-shadow: 0 0 0 18px rgba(11, 107, 80, 0) }
    }

    .cb-done-msg {
      font-size: 1rem;
      font-weight: 600;
      margin: 0 0 8px
    }

    .cb-done .btn { margin-top: 6px }

    @media(max-width:420px) {
      .cb-body { padding: 26px 18px 20px }
      .cb-phone select { flex-basis: 112px; width: 112px }
      .cb-dialog h2 { font-size: 1.4rem }
    }

    @media(prefers-reduced-motion:reduce) {
      .cb-dialog[open], .cb-ring { animation: none }
    }

/* ================= PRICING v3 (17 Sep 2026) ================= */
.region-note{margin-top:10px;font-size:.9rem;font-weight:600;color:var(--ink)}
#pilot-section .pilot .eyebrow{display:block;margin-bottom:12px}
.topup-cards.three{grid-template-columns:repeat(3,1fr)}
.topup-cards.compare .tup-pos{border-color:var(--pos);box-shadow:inset 0 0 0 1px var(--pos)}
.topup-cards.compare .tup-pos .tup-name{color:var(--pos)}
.tup ul.neg li::before{background:var(--paper-2);border-color:var(--muted)}
.after-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px}
.after-list li{position:relative;padding-left:26px;font-size:.96rem;color:var(--muted);line-height:1.5}
.after-list li b{color:var(--ink)}
.after-list li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;background:var(--pos-wash);box-shadow:inset 0 0 0 1.5px var(--pos)}
@media(max-width:900px){.topup-cards.three{grid-template-columns:1fr}}
@media(max-width:820px){.after-list{grid-template-columns:1fr}}

    /* ================= HERO — 8-SECOND SCAN (19 Sep 2026) ================= */

    /* keeps the full stop welded to the circled word so it can never orphan.
       .circled carries a right margin for the old 2-line headline; inside .nbend it
       would push the full stop away from the word, so it is cancelled here. */
    .nbend { white-space: nowrap }
    .nbend .circled { margin-right: 0 }

    /* this headline runs to three lines, so the hand-drawn ring has to sit tighter
       than the two-line version or its top arc crosses into the line above */
    .hero .circled svg { left: -6%; top: -8%; width: 107%; height: 118% }

    .hero-sub { max-width: 46ch }

    /* buying path: free fit call -> paid pilot -> live assistant */
    .hero-path { margin-top: 22px }

    .hp-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      font-family: var(--mono);
      font-size: .78rem;
      font-weight: 600;
      color: var(--ink)
    }

    .hp-steps li { display: flex; align-items: center; gap: 10px }

    .hp-steps li + li::before {
      content: "\2192";
      color: var(--accent);
      font-weight: 700
    }

    .hp-sub {
      margin-top: 7px;
      font-size: .82rem;
      color: var(--muted)
    }

    /* the proof point that carries real-world credibility */
    .pill-strong {
      border-color: var(--ink);
      color: var(--ink);
      font-weight: 700;
      background: var(--accent-wash)
    }

    /* always-visible value sequence on the demo card */
    #aurabotix-hero-demo .au-flow {
      list-style: none;
      margin: 0;
      padding: 11px 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 9px;
      border-bottom: 1px solid var(--au-line);
      background: var(--au-soft);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--au-muted)
    }

    #aurabotix-hero-demo .au-flow li { display: flex; align-items: center; gap: 9px }
    #aurabotix-hero-demo .au-flow li + li::before { content: "\2192"; color: var(--au-orange) }

    /* captured outcome reveals, then holds */
    #aurabotix-hero-demo .au-record {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .34s ease, transform .34s ease
    }

    #aurabotix-hero-demo .au-record.in { opacity: 1; transform: none }

    #aurabotix-hero-demo .au-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 13px
    }

    #aurabotix-hero-demo .au-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--au-green);
      background: var(--au-success);
      border-radius: 999px;
      padding: 6px 12px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .3s ease, transform .3s ease
    }

    #aurabotix-hero-demo .au-chip.in { opacity: 1; transform: none }

    #aurabotix-hero-demo .au-toggle:focus-visible {
      outline: 2px solid var(--au-orange);
      outline-offset: 2px
    }

    @media(prefers-reduced-motion:reduce) {
      #aurabotix-hero-demo .au-record,
      #aurabotix-hero-demo .au-chip {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    /* The decorative .glow halo (inset:-26%) bleeds past the right edge and made
       the page ~50-90px wider than the viewport from ~900px to ~1300px. Clipping the
       hero alone fixes it: `clip` creates no scroll box, so the sticky nav is safe,
       and nothing else on the page is affected. (body{overflow-x:clip} does NOT work
       here — the root element stays `visible`, so it never reaches the viewport.) */
    .hero { overflow: clip }

    @media(max-width:880px) {
      .hero-path { margin-top: 18px }
      .hp-steps { font-size: .74rem }
      /* pull the demo card up so its top edge is visible on a phone */
      .hero-grid { gap: 34px }
    }

    @media(max-width:420px) {
      #aurabotix-hero-demo .au-flow { padding: 10px 16px; font-size: 10px; gap: 3px 7px }
      #aurabotix-hero-demo .au-flow li { gap: 7px }
    }


/* ===========================================================
   STACKED STORY SECTIONS  --  2 Oct 2026
   The five panels inside .stack-wrap (#how, #flow, the
   missed-enquiry calculator, #does, #work) pin at the top of the
   viewport and the next one slides up over the last.
   - Desktop only (>=900px) and off under prefers-reduced-motion.
   - --stack-top is set in index.html: a panel taller than the
     viewport pins only once its bottom reaches the bottom, so
     nothing becomes unreachable.
   - The dim-and-settle is a CSS scroll-driven animation on the
     inner .wrap, so it costs no main-thread work and leaves the
     panel background full-bleed. Browsers without scroll-driven
     animations simply stack with no dim.
   =========================================================== */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stack-wrap { timeline-scope: --se1, --se2, --se3, --se4 }
  .stack-edge { height: 0 }
  .stack-wrap > .stack {
    position: sticky;
    top: var(--stack-top, 0px);
  }

  /* No background extension here. An absolutely positioned child of a sticky
     panel moves WITH the panel, so a 100vh extension hung 100vh past the end of
     the stack and covered the section after it. It was never needed: the next
     panel's layout box starts exactly where this one ends, so a pinned panel is
     always already overlapped by the one above it. */
  .stack-wrap > .stack:nth-of-type(1) { z-index: 1 }
  .stack-wrap > .stack:nth-of-type(2) { z-index: 2 }
  .stack-wrap > .stack:nth-of-type(3) { z-index: 3 }
  .stack-wrap > .stack:nth-of-type(4) { z-index: 4 }
  .stack-wrap > .stack:nth-of-type(5) { z-index: 5 }

  /* a pinned panel must be opaque or the panel beneath shows through */
  .stack-wrap > .stack:not(.dark):not(.alt) { background: var(--paper) }

  /* the incoming panel casts a soft shadow on the one it is covering */
  .stack-wrap > .stack-edge + .stack { box-shadow: 0 -18px 34px -22px rgba(10, 20, 26, .38) }

  /* The dim-and-settle is driven by a zero-height marker sitting between two
     panels, NOT by the panel itself: a pinned element's own view timeline
     freezes while it is stuck, so it would never progress. The marker stays in
     normal flow, so its travel from the bottom of the viewport to the top maps
     exactly onto the next panel covering the last one. */
  @supports (animation-timeline: view()) {
    .stack-wrap > .stack-edge:nth-of-type(1) { view-timeline-name: --se1 }
    .stack-wrap > .stack-edge:nth-of-type(2) { view-timeline-name: --se2 }
    .stack-wrap > .stack-edge:nth-of-type(3) { view-timeline-name: --se3 }
    .stack-wrap > .stack-edge:nth-of-type(4) { view-timeline-name: --se4 }

    .stack-wrap > .stack > .wrap {
      animation: stack-recede linear both;
      animation-range: cover 0% cover 100%;
    }
    .stack-wrap > .stack:nth-of-type(1) > .wrap { animation-timeline: --se1 }
    .stack-wrap > .stack:nth-of-type(2) > .wrap { animation-timeline: --se2 }
    .stack-wrap > .stack:nth-of-type(3) > .wrap { animation-timeline: --se3 }
    .stack-wrap > .stack:nth-of-type(4) > .wrap { animation-timeline: --se4 }
    /* nothing covers the last panel */
    .stack-wrap > .stack:last-of-type > .wrap { animation: none }
  }
}

@keyframes stack-recede {
  from { opacity: 1; transform: scale(1) }
  to   { opacity: .6; transform: scale(.975) }
}