/* ---------- hero ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        background: var(--navy);
        padding-block: clamp(56px, 8vw, 112px) clamp(56px, 8vw, 100px);
      }
      .hero-card {
        position: absolute;
        background: var(--blue);
        border-radius: 68px;
        left: -51%;
        top: clamp(64px, 8vw, 104px);
        width: 92%;
        height: 132%;
        transform: rotate(var(--tilt));
        transform-origin: 50% 0;
        z-index: 0;
      }
      .hero .shell {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        gap: clamp(34px, 5vw, 64px);
        align-items: center;
      }
      .hero-brand {
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2.4vw, 28px);
        padding-top: clamp(24px, 6vw, 86px);
        padding-bottom: clamp(10px, 2vw, 24px);
      }
      .hero-logo {
        width: 100%;
        max-width: 340px;
        color: var(--bone);
        display: block;
      }
      .brand-label {
        display: flex;
        align-items: center;
        gap: 14px;
        color: #d4e6fa;
      }
      .hero-tag {
        font-family: var(--ui);
        font-weight: 600;
        font-size: clamp(19px, 2.5vw, 28px);
        line-height: 1.22;
        letter-spacing: -0.02em;
        color: #fff;
        max-width: 20ch;
      }
      .hero-offer {
        display: flex;
        flex-direction: column;
        gap: 22px;
      }
      .hero-offer .lede {
        font-size: clamp(15.5px, 1.6vw, 17.5px);
        line-height: 1.6;
        color: #cbddf0;
        max-width: 40ch;
      }
      .hero-offer .cta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .hero-offer .strip {
        display: flex;
        flex-wrap: wrap;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
      }
      .hero-offer .strip span {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #9fc2e4;
        padding-right: 15px;
        margin-right: 15px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }
      .hero-offer .strip span:last-child {
        border-right: 0;
        margin-right: 0;
        padding-right: 0;
      }

      /* ---------- sections ---------- */
      section {
        padding-block: clamp(56px, 7.5vw, 100px);
        background: var(--navy);
      }
      section.alt {
        background: var(--navy-2);
      }
      .shead {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 38px;
        max-width: 60ch;
      }
      .shead .micro {
        color: var(--blue-lt);
      }
      .shead h2 {
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(26px, 3.6vw, 42px);
        line-height: 1.06;
        color: var(--bone);
      }
      .shead p {
        color: var(--t2);
        font-size: clamp(16px, 1.6vw, 18px);
      }

      .topics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: 2px solid var(--line-2);
      }
      .topic {
        border-bottom: 1px solid var(--line);
        border-right: 1px solid var(--line);
        padding: 28px 30px 30px;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .topic:nth-child(2n) {
        border-right: 0;
      }
      .topic:last-child {
        grid-column: 1/-1;
        border-right: 0;
        background: var(--blue);
        border-bottom-color: var(--blue);
      }
      .topic:last-child .num {
        color: #bbd8f5;
      }
      .topic:last-child p {
        color: #dceaf8;
      }
      .topic .num {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        color: var(--blue-lt);
      }
      .topic h3 {
        font-family: var(--disp);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 20px;
        letter-spacing: 0.02em;
        color: var(--bone);
      }
      .topic p {
        color: var(--t2);
        font-size: 15.5px;
        line-height: 1.55;
      }

      .people {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 2px solid var(--line-2);
      }
      .person {
        border-bottom: 1px solid var(--line);
        border-right: 1px solid var(--line);
        padding: 24px 26px 26px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .person:nth-child(3n) {
        border-right: 0;
      }
      .person img {
        width: 58px;
        height: 58px;
        object-fit: cover;
        flex: 0 0 58px;
        background: var(--navy-3);
      }
      .person .who {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
      }
      .person h3 {
        font-family: var(--disp);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 17px;
        letter-spacing: 0.02em;
        color: var(--bone);
        margin: 0;
      }
      .person .role {
        color: var(--t2);
        font-size: 14.5px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .person .followers {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.06em;
        color: var(--t3);
      }
      .person .followers b {
        color: var(--bone);
        font-weight: 500;
      }
      .person a {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--blue-lt);
        text-decoration: none;
        align-self: flex-start;
      }
      .person a:hover {
        color: var(--yellow);
      }

      .aud {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--line);
      }
      .aud > div {
        padding: 30px 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .aud > div:first-child {
        border-right: 1px solid var(--line);
      }
      .aud h3 {
        font-family: var(--disp);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 0.08em;
        color: var(--bone);
      }
      .aud ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .aud li {
        display: grid;
        grid-template-columns: 18px 1fr;
        gap: 11px;
        font-size: 16px;
        color: var(--t2);
        line-height: 1.5;
      }
      .aud .y {
        color: var(--yellow);
        font-weight: 700;
      }
      .aud .n {
        color: var(--t3);
      }

      .price {
        display: grid;
        grid-template-columns: 1fr 1.12fr;
        border: 1px solid var(--line-2);
      }
      .pcard {
        padding: clamp(26px, 3.4vw, 40px);
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .pcard:first-child {
        border-right: 1px solid var(--line-2);
        background: var(--navy);
      }
      .pcard.paid {
        background: var(--blue);
      }
      .pcard .ptitle {
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 21px;
        letter-spacing: 0.05em;
        color: var(--bone);
      }
      .pcard.paid .ptitle {
        color: #fff;
      }
      .pcard .amount {
        font-family: var(--disp);
        font-weight: 700;
        font-size: clamp(38px, 5vw, 58px);
        line-height: 1;
        color: var(--bone);
      }
      .pcard.paid .amount {
        color: #fff;
      }
      .pcard .amount small {
        font-family: var(--ui);
        font-weight: 500;
        font-size: 16px;
        text-transform: none;
        color: var(--t3);
      }
      .pcard.paid .amount small {
        color: #bbd8f5;
      }
      .pcard ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .pcard li {
        display: grid;
        grid-template-columns: 16px 1fr;
        gap: 10px;
        font-size: 15.5px;
        line-height: 1.5;
        color: var(--t2);
      }
      .pcard.paid li {
        color: #dceaf8;
      }
      .pcard li b {
        color: var(--bone);
        font-weight: 600;
      }
      .pcard.paid li b {
        color: #fff;
      }
      .pcard .dot {
        color: var(--blue-lt);
        font-weight: 700;
      }
      .pcard.paid .dot {
        color: var(--yellow);
      }
      .pcard .was {
        font-family: var(--ui);
        font-weight: 500;
        font-size: 20px;
        text-decoration: line-through;
        color: #8fb6dc;
        margin-right: 10px;
        vertical-align: middle;
      }
      .pcard .tag {
        display: inline-block;
        align-self: flex-start;
        font-family: var(--ui);
        font-weight: 600;
        font-size: 12.5px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--navy);
        background: var(--yellow);
        padding: 5px 10px;
      }
      .pcard .note {
        font-size: 13.5px;
        color: var(--t3);
      }
      .pcard.paid .note {
        color: #a8cbec;
      }

      /* Prepaid packages, under the monthly card. Each one is a link into the
     bot's checkout for that plan. */
      .packs {
        margin-top: 34px;
      }
      .packs-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px 14px;
        margin-bottom: 16px;
      }
      .packs-head h3 {
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 21px;
        letter-spacing: 0.05em;
        color: var(--bone);
        margin: 0;
      }
      .packs-head p {
        color: var(--t2);
        font-size: 14.5px;
      }
      .packs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 2px solid var(--line-2);
      }
      .pack {
        border-bottom: 1px solid var(--line);
        border-right: 1px solid var(--line);
        padding: 22px 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 7px;
        transition: background 0.18s ease;
      }
      .pack:nth-child(3n) {
        border-right: 0;
      }
      .pack:hover,
      .pack:focus-visible {
        background: var(--navy-2);
      }
      .pack:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: -2px;
      }
      .pack .term {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--blue-lt);
      }
      .pack .sum {
        font-family: var(--disp);
        font-weight: 700;
        line-height: 0.96;
        font-size: clamp(34px, 4vw, 42px);
        color: var(--bone);
      }
      .pack.best .sum {
        color: var(--yellow);
      }
      .pack .each {
        color: var(--t3);
        font-size: 13px;
      }
      .pack .parts {
        margin-top: 8px;
        padding-top: 11px;
        border-top: 1px solid var(--line);
        color: var(--t2);
        font-size: 13px;
        line-height: 1.5;
      }
      .pack .parts b {
        color: var(--bone);
        font-weight: 600;
      }
      .pack .go {
        margin-top: auto;
        padding-top: 13px;
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t2);
      }
      .pack:hover .go,
      .pack:focus-visible .go {
        color: var(--yellow);
      }
      .packs-note {
        margin-top: 15px;
        font-size: 13px;
        line-height: 1.55;
        color: var(--t3);
      }
      .packs-note a {
        color: var(--t2);
        text-decoration: underline;
      }
      .packs-note a:hover {
        color: var(--yellow);
      }

      /* ---------- band with tilt ---------- */
      .band {
        background: var(--navy);
        padding-block: clamp(50px, 7vw, 92px);
      }
      .band .shell {
        position: relative;
      }
      .band-slab {
        position: absolute;
        left: var(--gut);
        right: var(--gut);
        top: 0;
        bottom: 0;
        background: var(--blue);
        border-radius: 30px;
        transform: rotate(-2.2deg);
        z-index: 0;
      }
      .band-content {
        position: relative;
        z-index: 1;
        padding: clamp(34px, 4.6vw, 56px) clamp(26px, 3.4vw, 46px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        flex-wrap: wrap;
      }
      .band h3 {
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(20px, 2.7vw, 32px);
        line-height: 1.08;
        max-width: 20ch;
        color: #fff;
      }
      .band p {
        font-size: 15.5px;
        max-width: 38ch;
        color: #cfe3f7;
        margin-top: 10px;
      }

      /* ---------- faq ---------- */
      .faq {
        border-top: 2px solid var(--line-2);
      }
      .faq details {
        border-bottom: 1px solid var(--line);
      }
      .faq summary {
        padding: 20px 0;
        cursor: pointer;
        font-family: var(--disp);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 16.5px;
        letter-spacing: 0.04em;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;
        color: var(--bone);
      }
      .faq summary::-webkit-details-marker {
        display: none;
      }
      .faq summary::after {
        content: "+";
        font-family: var(--disp);
        color: var(--yellow);
        font-size: 22px;
        line-height: 1;
      }
      .faq details[open] summary::after {
        content: "-";
      }
      .faq .ans {
        padding: 0 0 22px;
        color: var(--t2);
        font-size: 16px;
        line-height: 1.62;
        max-width: 66ch;
      }

      /* ---------- footer ---------- */
      footer {
        position: relative;
        overflow: hidden;
        background: var(--navy-3);
        padding-block: clamp(48px, 6vw, 76px);
      }
      .foot-slab {
        position: absolute;
        background: var(--navy-2);
        border-radius: 52px;
        right: -16%;
        bottom: -62%;
        width: 66%;
        height: 140%;
        transform: rotate(var(--tilt));
        z-index: 0;
      }
      footer .shell {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;
      }
      .ftop {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
      footer .logo {
        height: 56px;
        width: auto;
        color: var(--bone);
      }
      .flinks {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
        font-size: 14px;
        color: var(--t2);
      }
      .flinks a:hover {
        color: var(--yellow);
      }
      .fbot {
        border-top: 1px solid var(--line);
        padding-top: 22px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
      }
      .fbot p {
        font-size: 13px;
        color: var(--t3);
        max-width: 58ch;
      }

      :focus-visible {
        outline: 3px solid var(--yellow);
        outline-offset: 2px;
      }

      @media (max-width: 900px) {
        .hero .shell {
          grid-template-columns: 1fr;
        }
        .hero-card {
          left: -30%;
          width: 150%;
          height: 112%;
          top: 4%;
        }
        .topics,
        .aud,
        .price {
          grid-template-columns: 1fr;
        }
        .people {
          grid-template-columns: 1fr;
        }
        .packs-grid {
          grid-template-columns: 1fr;
        }
        .pack {
          border-right: 0;
        }
        .person {
          border-right: 0;
        }
        .topic {
          border-right: 0;
        }
        .aud > div:first-child {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
        .pcard:first-child {
          border-right: 0;
          border-bottom: 1px solid var(--line-2);
        }
      }
      @media (min-width: 901px) and (max-width: 1080px) {
        .people {
          grid-template-columns: repeat(2, 1fr);
        }
        .person:nth-child(3n) {
          border-right: 1px solid var(--line);
        }
        .person:nth-child(2n) {
          border-right: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          transition: none !important;
          animation: none !important;
        }
      }