:root {
    --bg: #f5f7fa;
    --bg2: #e8eef3;
    --ink: #172b3b;
    --mute: #566b7b;
    --moss: #173b56;
    --fern: #267a78;
    --lichen: #d6ad58;
    --line: #ccd8e1;
    --on-moss: #f5f7fa;
    --hh: 72px;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Manrope", system-ui, sans-serif
}

* {
    box-sizing: border-box;
    margin: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    overflow-x: clip
}

body {
    font: 400 1rem/1.7 var(--sans);
    color: var(--ink);
    background: var(--bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased
}

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

a {
    color: inherit
}

ul,
ol {
    list-style: none;
    padding: 0
}

h1,
h2,
h3 {
    font-family: var(--serif);
    line-height: 1.1;
    font-weight: 600;
    color: var(--moss)
}

h1 {
    font-size: clamp(2.8rem, 6.4vw, 5.4rem);
    letter-spacing: -.015em
}

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: .6rem
}

h3 {
    font-size: 1.5rem
}

p {
    max-width: 62ch
}

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

.skip {
    position: absolute;
    inset-inline-start: -999px;
    background: var(--moss);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100
}

.skip:focus {
    inset-inline-start: 0
}

section {
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4.5rem)
}

.announce {
    background: var(--moss);
    color: var(--on-moss);
    text-align: center;
    font-size: .82rem;
    padding: .5rem 1rem
}

.btn {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background: var(--moss);
    color: var(--on-moss);
    padding: .85rem 1.5rem;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid var(--moss);
    border-radius: 2px;
    transition: background .25s, color .25s;
    cursor: pointer;
    font-family: inherit;
    font-size: .95rem
}

.btn:hover {
    background: var(--lichen);
    color: var(--moss);
    border-color: var(--lichen)
}

.btn.ghost {
    background: transparent;
    color: var(--moss)
}

.btn.ghost:hover {
    background: var(--moss);
    color: var(--on-moss);
    border-color: var(--moss)
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s
}

.site-header.auth-header {
    background: linear-gradient(180deg, rgba(7, 25, 37, .98) 0%, rgba(7, 19, 30, .96) 100%);
    border-bottom: 1px solid rgba(131, 149, 165, .42);
    box-shadow: inset 0 -1px 0 rgba(133, 166, 188, .18), 0 10px 30px -18px rgba(3, 11, 18, .82)
}

.site-header.stuck {
    box-shadow: 0 8px 24px -16px rgba(23, 43, 59, .45)
}

.bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--hh);
    padding-inline: clamp(1.2rem, 5vw, 4.5rem)
}

.site-header.auth-header .bar {
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: 72px;
    padding-inline: clamp(1.2rem, 5vw, 4.5rem);
    gap: 1rem
}

.site-header.auth-header .logo {
    color: #edf5f8;
    gap: .6rem;
    margin-inline-end: auto
}

.site-header.auth-header .logo .brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--fern)
}

.site-header.auth-header .logo b {
    display: block;
    font: 700 1.6rem/1 var(--serif)
}

.site-header.auth-header .logo small {
    display: block;
    color: rgba(237, 245, 248, .74);
    letter-spacing: .02em
}

.site-header.auth-header .tools {
    margin-inline-start: 0;
    gap: .3rem
}

.site-header.auth-header .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .01);
    border-color: rgba(190, 205, 214, .42);
    color: #edf5f8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
    display: grid;
    place-items: center
}

.site-header.auth-header .icon-btn:hover {
    background: rgba(214, 173, 88, .1)
}

.site-header.auth-header .icon-btn.txt {
    width: 42px;
    height: 42px;
    padding-inline: 0;
    font-size: .68rem;
    letter-spacing: .04em;
    /* background: rgba(214, 173, 88, .15); */
    /* border-color: rgba(214, 173, 88, .85); */
    /* color: #f5d57a; */
    box-shadow: inset 0 0 0 1px rgba(214, 173, 88, .12)
}

.site-header.auth-header .logout-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    text-decoration: none;
    font-size: 1.15rem
}

.site-header.auth-header .icon-btn[aria-current="page"] {
    background: rgba(214, 173, 88, .12);
    border-color: rgba(214, 173, 88, .8)
}

.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--moss)
}

.logo .brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    color: var(--fern)
}

.logo b {
    display: block;
    font: 700 1.6rem/1 var(--serif)
}

.logo small {
    font-size: .68rem;
    color: var(--mute)
}

.nav {
    margin-inline-start: auto
}

.nav>ul {
    display: flex;
    gap: .2rem
}

.nav a,
.sub-btn {
    display: block;
    padding: .6rem .8rem;
    text-decoration: none;
    font: 500 .93rem var(--sans);
    background: none;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    position: relative
}

.nav>ul>li>a::after,
.sub-btn::after {
    content: "";
    position: absolute;
    inset-inline: .8rem;
    bottom: .2rem;
    height: 2px;
    background: var(--fern);
    transform: scaleX(0);
    transition: transform .25s
}

.nav a.active::after,
.nav .sub-btn.active::after,
.nav>ul>li>a:hover::after,
.sub-btn:hover::after {
    transform: scaleX(1)
}

.nav a.active,
.sub-btn.active {
    color: var(--moss);
    font-weight: 700
}

.sub-btn i {
    font-size: .65rem
}

.has-sub {
    position: relative
}

.sub {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    min-width: 230px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: .4rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s
}

.has-sub:hover>.sub,
.has-sub.open>.sub {
    opacity: 1;
    visibility: visible;
    transform: none
}

.sub a:hover {
    background: var(--bg2)
}

.tools {
    display: flex;
    gap: .3rem;
    align-items: center
}

.icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--moss);
    font-size: 1.15rem;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .2s
}

.icon-btn:hover {
    background: var(--bg2)
}

.icon-btn.txt {
    font-size: .72rem;
    font-weight: 800;
    width: auto;
    padding-inline: .7rem
}

.burger {
    display: none
}

/* hero */
.hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 5rem)
}

.kicker {
    color: var(--fern);
    font-weight: 700;
    margin-bottom: 1rem
}

.lead {
    font-size: 1.15rem;
    color: var(--mute);
    margin: 1.4rem 0 2rem
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--mute);
    font-size: .9rem
}

.hero-facts b {
    display: block;
    font: 600 2rem/1 var(--serif);
    color: var(--moss)
}

.hero-art {
    position: relative;
    margin: 0
}

.hero-art img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 999px 999px 0 0
}

.hero-art figcaption {
    position: absolute;
    inset-inline-start: -2rem;
    bottom: 2.5rem;
    background: var(--moss);
    color: var(--on-moss);
    padding: 1rem 1.3rem;
    font-weight: 700;
    line-height: 1.4
}

.hero-art small {
    font-weight: 400;
    opacity: .85
}

/* plans */
.plans {
    display: grid;
    grid-template-columns: .8fr 1.4fr;
    gap: clamp(2rem, 6vw, 6rem);
    background: var(--bg2)
}

.plans-intro {
    position: sticky;
    top: 130px;
    align-self: start
}

.plans-intro p {
    color: var(--mute)
}

.plan-list li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    padding-block: 1.6rem;
    border-top: 1px solid var(--line);
    align-items: center
}

.plan-list li:last-child {
    border-bottom: 1px solid var(--line)
}

.plan-list li:nth-child(even) {
    margin-inline-start: clamp(0rem, 4vw, 3.5rem)
}

.plan-list img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0 40px 0 0;
    transition: transform .5s
}

.plan-list li:hover img {
    transform: scale(1.03)
}

.plan-list h3 i {
    color: var(--fern);
    margin-inline-end: .4rem
}

.plan-list p {
    color: var(--mute);
    margin: .3rem 0 .6rem
}

.plan-list a {
    font-weight: 700;
    color: var(--moss);
    text-underline-offset: 4px
}

/* why */
.why {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem)
}

.why-lead p {
    color: var(--mute)
}

.why-list li {
    padding: 1.4rem 0 1.4rem 4.2rem;
    border-bottom: 1px solid var(--line);
    position: relative
}

.why-list li:nth-child(odd) {
    margin-inline-start: 2rem
}

.why-list i {
    position: absolute;
    inset-inline-start: 0;
    top: 1.5rem;
    font-size: 2rem;
    color: var(--fern)
}

.why-list li:nth-child(odd) i {
    inset-inline-start: 0
}

.why-list h3 {
    font-size: 1.4rem
}

.why-list p {
    color: var(--mute)
}

/* compare */
.compare {
    background: var(--moss);
    color: var(--on-moss)
}

.compare h2,
.compare h3 {
    color: var(--on-moss)
}

.compare .sec-head p {
    opacity: .8
}

.table-wrap {
    overflow-x: auto;
    margin: 2rem 0
}

table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    text-align: start
}

th,
td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(245, 247, 250, .2);
    text-align: start
}

thead th {
    font: 600 1.5rem var(--serif)
}

.pick {
    background: var(--bg);
    color: var(--moss)
}

thead .pick {
    font-size: 1.5rem
}

.pick span {
    display: block;
    font: 700 .72rem var(--sans);
    color: var(--fern)
}

tbody .pick {
    font-weight: 700
}

.compare .btn {
    background: var(--lichen);
    color: var(--moss);
    border-color: var(--lichen)
}

.compare .btn:hover {
    background: transparent;
    color: var(--on-moss);
    border-color: var(--on-moss)
}

/* how */
.how h2 {
    text-align: center;
    margin-bottom: 3rem
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 1.5rem
}

.steps::before {
    content: "";
    position: absolute;
    top: 22px;
    inset-inline: 4%;
    border-top: 2px dashed var(--fern)
}

.steps li {
    position: relative
}

.steps li:nth-child(even) {
    margin-top: 2.5rem
}

.n {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--lichen);
    color: var(--moss);
    font: 700 1.3rem var(--serif);
    border-radius: 50% 0 50% 50%;
    margin-bottom: 1rem;
    position: relative
}

.steps p {
    color: var(--mute);
    font-size: .95rem
}

/* partners */
.partners {
    background: var(--bg2);
    text-align: center;
    padding-block: 3.5rem
}

.partners h2 {
    font-size: 1.8rem
}

.partners ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin-top: 1.5rem
}

.partners img {
    width: 170px;
    mix-blend-mode: multiply;
    filter: grayscale(1);
    opacity: .75;
    transition: .3s
}

.partners img:hover {
    filter: none;
    opacity: 1
}

/* claims */
.claims {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    align-items: stretch
}

.claims>img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover
}

.claims-copy {
    padding: clamp(2.5rem, 6vw, 5rem)
}

.claims-copy p {
    color: var(--mute);
    margin-bottom: 1.5rem
}

.track {
    margin-bottom: 2rem;
    border-inline-start: 2px solid var(--line);
    padding-inline-start: 1.2rem
}

.track li {
    padding: .4rem 0;
    color: var(--mute)
}

.track i {
    margin-inline-end: .5rem
}

.track .done {
    color: var(--moss)
}

.track .done i {
    color: var(--fern)
}

.track .now {
    font-weight: 700;
    color: var(--moss)
}

.track .now i {
    animation: spin 3s linear infinite;
    display: inline-block
}

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

/* dashboard */
.dash {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.dash-copy li {
    padding: .6rem 0;
    display: flex;
    gap: .8rem;
    align-items: center
}

.dash-copy li i {
    color: var(--fern);
    font-size: 1.3rem
}

.dash-copy ul {
    margin: 1.2rem 0 2rem
}

.dash figure {
    margin: 0;
    position: relative
}

.dash figure img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover
}

.dash figcaption {
    position: absolute;
    inset-inline-start: -1.5rem;
    bottom: -1.5rem;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1rem 1.4rem;
    display: grid;
    font-size: .88rem;
    box-shadow: 12px 12px 0 var(--lichen)
}

.dash figcaption b {
    font: 700 1.3rem var(--serif);
    color: var(--moss)
}

/* voices */
.voices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    background: var(--bg2)
}

blockquote {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: .3rem 1rem;
    padding: 1.3rem 0;
    border-top: 1px solid var(--line)
}

blockquote img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    grid-row: span 2
}

blockquote p {
    font: 500 1.25rem/1.4 var(--serif);
    color: var(--moss)
}

cite {
    font-size: .85rem;
    color: var(--mute);
    font-style: normal
}

.quotes h2,
.faq h2 {
    margin-bottom: 1rem
}

details {
    border-top: 1px solid var(--line);
    padding: 1rem 0
}

summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

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

summary::after {
    content: "+";
    font-size: 1.4rem;
    line-height: 1;
    color: var(--fern);
    transition: transform .25s
}

details[open] summary::after {
    transform: rotate(45deg)
}

details p {
    color: var(--mute);
    margin-top: .6rem
}

/* contact */
.contact {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem)
}

address {
    font-style: normal;
    display: grid;
    gap: .8rem;
    margin-top: 1.5rem
}

address i {
    color: var(--fern);
    margin-inline-end: .6rem
}

.enquiry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-content: start
}

.enquiry label {
    display: grid;
    gap: .3rem;
    font-weight: 700;
    font-size: .88rem
}

.enquiry .wide,
.enquiry .btn,
.form-msg {
    grid-column: 1/-1
}

input,
select,
textarea {
    font: inherit;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 2px;
    width: 100%
}

input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #173b56
}

.enquiry .btn {
    justify-content: center
}

.form-msg {
    font-weight: 700;
    color: var(--fern);
    min-height: 1.5em
}

/* footer */
.site-footer {
    --footer-bg: #071d2b;
    --footer-text: #e7eff3;
    --footer-muted: #a9bac5;
    --footer-accent: #32b7c8;
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: clamp(3.2rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4.5rem) 1.2rem;
    border-top: 1px solid rgba(245, 247, 250, .12)
}

.foot-top {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(140px, .8fr)) minmax(220px, 1fr);
    gap: 2.5rem clamp(1.5rem, 3.5vw, 3.5rem);
    align-items: start;
    max-width: 80rem;
    margin-inline: auto
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--footer-text);
    text-decoration: none
}

.footer-brand .brand-mark {
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    color: var(--footer-accent)
}

.footer-brand b {
    display: block;
    font: 700 1.65rem/1 var(--serif)
}

.footer-brand small {
    display: block;
    margin-top: .3rem;
    color: var(--footer-muted);
    font-size: .72rem
}

.foot-top .footer-description {
    max-width: 32ch;
    margin: 1.15rem 0 1.35rem;
    color: var(--footer-muted);
    font-size: .94rem;
    line-height: 1.8
}

.foot-top h3 {
    font: 700 1.05rem var(--sans);
    color: var(--footer-text);
    margin: .35rem 0 1.15rem
}

.foot-top nav a {
    display: block;
    width: fit-content;
    padding: .3rem 0;
    color: var(--footer-muted);
    text-decoration: none;
    transition: color .2s, transform .2s
}

.foot-top nav a:hover {
    color: var(--footer-accent);
    transform: translateX(3px)
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem
}

.social a {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(231, 239, 243, .25);
    border-radius: 50%;
    color: var(--footer-text);
    font-size: 1rem;
    text-decoration: none;
    transition: color .2s, background .2s, border-color .2s, transform .2s
}

.social a:hover {
    color: var(--footer-bg);
    background: var(--footer-accent);
    border-color: var(--footer-accent);
    transform: translateY(-2px)
}

.footer-contact address {
    display: grid;
    gap: 1rem;
    font-style: normal
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    color: var(--footer-muted);
    font-size: .88rem;
    line-height: 1.6;
    overflow-wrap: anywhere
}

.footer-contact-icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(50, 183, 200, .12);
    color: var(--footer-accent)
}

.footer-contact-item b,
.footer-contact-item span span,
.footer-contact-item a {
    display: block
}

.footer-contact-item b {
    margin-bottom: .1rem;
    color: var(--footer-text);
    font-size: .83rem
}

.footer-contact-item a {
    color: var(--footer-muted);
    text-decoration: none
}

.footer-contact-item a:hover {
    color: var(--footer-accent)
}

.footer-bottom {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 80rem;
    margin: 3.2rem auto 0;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(231, 239, 243, .18)
}

.footer-bottom .legal {
    flex: 1 1 auto;
    margin: 0;
    color: var(--footer-muted);
    font-size: .78rem;
    line-height: 1.6
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.15rem
}

.footer-meta a {
    color: var(--footer-muted);
    font-size: .78rem;
    text-decoration: none
}

.footer-meta a:hover {
    color: var(--footer-accent)
}

.footer-to-top {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #e7a83e;
    color: #071d2b;
    font-size: 1.15rem;
    text-decoration: none;
    transition: transform .2s, background .2s
}

.footer-to-top:hover {
    background: #f1ba5d;
    transform: translateY(-3px)
}

/* tablet */
@media(max-width:1100px) {
    .burger {
        display: grid
    }

    .nav {
        position: fixed;
        inset: var(--hh) 0 0;
        background: var(--bg);
        padding: 1rem 1.2rem 3rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .35s, visibility .35s;
        margin: 0
    }

    .nav.open {
        transform: none;
        visibility: visible
    }

    .nav>ul {
        flex-direction: column;
        gap: 0
    }

    .nav a,
    .sub-btn {
        padding: 1rem .4rem;
        width: 100%;
        text-align: start;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        font-size: 1.05rem
    }

    .nav a::after,
    .sub-btn::after {
        display: none
    }

    .sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height .3s
    }

    .has-sub.open>.sub {
        max-height: 400px
    }

    .has-sub:hover>.sub {
        opacity: 1
    }

    .sub a {
        padding-inline-start: 1.5rem
    }

    .tools {
        margin-inline-start: auto
    }

    .logo {
        margin-inline-end: 0
    }

    .hero,
    .plans,
    .why,
    .dash,
    .voices,
    .contact {
        grid-template-columns: 1fr
    }

    .plans-intro {
        position: static
    }

    .hero-art {
        max-width: 520px
    }

    .hero-art figcaption {
        inset-inline-start: 1rem
    }

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

    .steps::before {
        display: none
    }

    .steps li:nth-child(even) {
        margin-top: 0
    }

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

    .claims>img {
        min-height: 280px;
        max-height: 340px
    }

    .foot-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.2rem 2rem
    }

    .dash figcaption {
        inset-inline-start: 1rem
    }
}

@media(max-width:600px) {
    .bar {
        gap: .5rem;
        padding-inline: clamp(.75rem, 4vw, 1.2rem)
    }

    .logo small {
        display: none
    }

    .logo {
        gap: .4rem
    }

    .logo .brand-mark {
        width: 1.75rem;
        height: 1.75rem
    }

    .logo b {
        font-size: 1.35rem
    }

    .tools {
        gap: .2rem
    }

    .icon-btn {
        width: 36px;
        height: 36px
    }

    .icon-btn.txt {
        padding-inline: .35rem;
        font-size: .65rem
    }

    .plan-list li {
        grid-template-columns: 1fr
    }

    .plan-list li:nth-child(even) {
        margin-inline-start: 0
    }

    .plan-list img {
        max-width: 320px
    }

    .why-list li:nth-child(odd) {
        margin-inline-start: 0
    }

    .steps,
    .enquiry {
        grid-template-columns: 1fr
    }

    .foot-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8rem 1rem
    }

    .footer-about,
    .footer-contact {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 1rem
    }

    .footer-bottom .legal {
        flex-basis: calc(100% - 4rem)
    }

    .footer-meta {
        flex: 1 1 auto;
        gap: .5rem 1rem
    }

    .footer-to-top {
        width: 2.5rem;
        height: 2.5rem
    }

    .hero-facts {
        gap: 1rem 1.5rem
    }
}

@media(max-width:767px) {
    .foot-top {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* ===== Compare Plans page ===== */
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}

fieldset {
    border: 0;
    padding: 0;
    min-width: 0
}

legend {
    font-weight: 700;
    margin-bottom: .8rem;
    padding: 0
}

.cp-hero {
    background: var(--moss);
    color: var(--on-moss);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    padding: 0;
    min-height: 560px;
    overflow: hidden
}

.cp-hero-copy {
    padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 5vw, 4.5rem);
    align-self: center
}

.cp-hero h1 {
    color: var(--on-moss)
}

.cp-hero .lead {
    color: var(--on-moss);
    opacity: .85
}

.cp-hero .btn {
    background: var(--lichen);
    color: #172b3b;
    border-color: var(--lichen)
}

.cp-hero .btn:hover {
    background: transparent;
    color: var(--on-moss);
    border-color: var(--on-moss)
}

.cp-hero-note {
    margin-top: 2.5rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--lichen);
    font-size: .9rem;
    opacity: .85
}

.cp-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%)
}

.cp-needs {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start
}

.cp-profile {
    position: sticky;
    top: 130px;
    border-block: 2px solid var(--moss);
    padding: 1.2rem 0
}

.cp-profile h2 {
    font-size: 1.9rem
}

.cp-profile dl {
    display: grid;
    gap: .5rem;
    margin: 1rem 0
}

.cp-profile dt {
    font-size: .8rem;
    color: var(--mute);
    font-weight: 700
}

.cp-profile dd {
    margin: 0;
    font: 600 1.25rem var(--serif);
    color: var(--moss)
}

.cp-q {
    display: grid;
    gap: 2.2rem
}

.cp-tiles,
.cp-seg {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(5, 1fr)
}

.cp-seg {
    grid-template-columns: repeat(4, 1fr)
}

.cp-tiles label,
.cp-seg label {
    position: relative;
    cursor: pointer
}

.cp-tiles input,
.cp-seg input,
.cp-sw input {
    position: absolute;
    opacity: 0
}

.cp-tiles span {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 1.1rem .5rem;
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: .9rem;
    transition: .2s
}

.cp-tiles i {
    font-size: 1.6rem;
    color: var(--fern)
}

.cp-seg span {
    display: block;
    text-align: center;
    padding: .9rem .4rem;
    border: 1px solid var(--line);
    font-weight: 700;
    transition: .2s
}

.cp-tiles input:checked+span,
.cp-seg input:checked+span {
    background: var(--moss);
    color: var(--on-moss);
    border-color: var(--moss)
}

.cp-tiles input:checked+span i {
    color: var(--lichen)
}

.cp-tiles input:focus-visible+span,
.cp-seg input:focus-visible+span,
.cp-sw input:focus-visible+span {
    outline: 3px solid var(--fern);
    outline-offset: 2px
}

.cp-sw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: relative
}

.cp-sw span {
    width: 46px;
    height: 24px;
    background: var(--line);
    position: relative;
    transition: .2s;
    flex: none
}

.cp-sw span::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    background: var(--bg);
    transition: .2s
}

.cp-sw input:checked+span {
    background: var(--fern)
}

.cp-sw input:checked+span::after {
    inset-inline-start: 25px
}

.cp-rail-sec {
    background: var(--bg2);
    padding-inline: 0
}

.cp-rail-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    padding-inline: clamp(1.2rem, 5vw, 4.5rem);
    margin-bottom: 2rem
}

.cp-rail-head p {
    color: var(--mute)
}

.cp-arrows {
    display: flex;
    gap: .4rem;
    flex: none
}

.cp-rail {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .5rem clamp(1.2rem, 5vw, 4.5rem) 1.5rem;
    scroll-padding-inline: clamp(1.2rem, 5vw, 4.5rem)
}

.cp-ticket {
    flex: 0 0 min(300px, 80vw);
    scroll-snap-align: start;
    background: var(--bg);
    padding: 1.5rem;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    gap: .9rem
}

.cp-ticket.best {
    outline: 0;
    box-shadow: inset 0 5px 0 var(--lichen)
}

.cp-ticket .tg {
    font-size: .8rem;
    font-weight: 700;
    color: var(--fern)
}

.cp-ticket h3 {
    font-size: 1.7rem
}

.cp-price {
    font: 600 2.6rem/1 var(--serif);
    color: var(--moss)
}

.cp-price small {
    font: 500 .85rem var(--sans);
    color: var(--mute)
}

.cp-ticket dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 1rem;
    margin: 0;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
    font-size: .92rem
}

.cp-ticket dd {
    margin: 0;
    font-weight: 700;
    text-align: end
}

.cp-ticket dt {
    color: var(--mute)
}

.cp-ticket .yes {
    color: var(--fern)
}

.cp-ticket .no {
    color: var(--mute)
}

.cp-ticket .row {
    display: flex;
    gap: .5rem;
    margin-top: auto;
    flex-wrap: wrap
}

.cp-ticket .btn {
    padding: .6rem 1rem;
    font-size: .85rem
}

.cp-flag {
    display: inline-block;
    background: var(--lichen);
    color: #172b3b;
    font: 700 .72rem var(--sans);
    padding: .1rem .6rem;
    align-self: start
}

.cp-empty {
    padding: 2rem clamp(1.2rem, 5vw, 4.5rem);
    color: var(--mute)
}

.cp-ben-tabs {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    margin: 1.5rem 0 2.5rem
}

.cp-ben-tabs button {
    background: none;
    border: 0;
    border-bottom: 4px solid transparent;
    font: 600 1.3rem var(--serif);
    color: var(--mute);
    padding: .5rem 0;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px
}

.cp-ben-tabs button[aria-selected="true"] {
    color: var(--moss);
    border-color: var(--lichen)
}

.cp-ben-body {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.cp-fig {
    font: 600 clamp(3rem, 7vw, 5.5rem)/1 var(--serif);
    color: var(--moss)
}

.cp-fig small {
    display: block;
    font: 500 1rem var(--sans);
    color: var(--mute);
    margin-top: .6rem
}

.cp-inc li {
    display: flex;
    gap: .8rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
    align-items: center
}

.cp-inc i {
    color: var(--fern);
    font-size: 1.3rem
}

.cp-inc .off {
    color: var(--mute);
    text-decoration: line-through;
    text-decoration-color: var(--line)
}

.cp-inc .off i {
    color: var(--mute)
}

.cp-gaps {
    background: var(--bg2)
}

.cp-axis {
    display: grid;
    grid-template-columns: minmax(110px, 190px) 1fr;
    gap: .4rem 1rem;
    margin: 2rem 0;
    align-items: center
}

.cp-ticks {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--mute);
    border-bottom: 1px solid var(--moss)
}

.cp-trk {
    height: 26px;
    position: relative;
    background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 33.33%)
}

.cp-trk i {
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    background: var(--fern);
    display: block;
    width: 0;
    transition: width .7s
}

.cp-trk b {
    position: absolute;
    inset-inline-start: var(--x);
    top: 0;
    height: 26px;
    width: 3px;
    background: var(--lichen);
    box-shadow: 0 0 0 1px var(--moss)
}

.cp-fine details {
    background: var(--bg);
    padding: 1rem 1.2rem;
    margin-bottom: .5rem
}

.cp-fine details+details {
    border-top: 0
}

.cp-fine p {
    margin-top: .6rem;
    color: var(--mute);
    font-size: .92rem
}

.cp-fine b {
    color: var(--ink)
}

.cp-val {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start
}

.cp-val>div:first-child>p {
    color: var(--mute);
    margin-bottom: 1.2rem
}

#scatter {
    width: 100%;
    height: auto;
    background: var(--bg2)
}

#scatter text {
    font: 600 11px var(--sans);
    fill: var(--ink)
}

#scatter .ax {
    fill: var(--mute);
    font-weight: 500
}

#scatter line {
    stroke: var(--line)
}

#scatter circle {
    fill: var(--fern);
    stroke: var(--bg);
    stroke-width: 2
}

#scatter .top circle {
    fill: var(--lichen);
    stroke: var(--moss)
}

.cp-rank {
    counter-reset: r
}

.cp-rank li {
    counter-increment: r;
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: .6rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline
}

.cp-rank li::before {
    content: counter(r);
    font: 700 1.4rem var(--serif);
    color: var(--fern)
}

.cp-rank small {
    display: block;
    color: var(--mute)
}

.cp-rank b {
    font: 600 1.3rem var(--serif);
    color: var(--moss)
}

.cp-expert {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    background: var(--moss);
    color: var(--on-moss)
}

.cp-expert>img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover
}

.cp-expert-body {
    padding: clamp(2.5rem, 6vw, 5rem)
}

.cp-expert h2 {
    color: var(--on-moss)
}

.cp-topics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0
}

.cp-topics button {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(245, 247, 250, .5);
    padding: .55rem 1rem;
    font: 700 .88rem var(--sans);
    cursor: pointer
}

.cp-topics button[aria-expanded="true"] {
    background: var(--lichen);
    color: #172b3b;
    border-color: var(--lichen)
}

#ans {
    min-height: 5.5rem;
    max-width: 52ch;
    opacity: .92
}

.cp-expert .btn {
    background: var(--lichen);
    color: #172b3b;
    border-color: var(--lichen)
}

.cp-expert .btn.ghost {
    background: transparent;
    color: var(--on-moss);
    border-color: var(--on-moss)
}

.cp-decide {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.cp-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem .8rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer
}

.cp-row input {
    accent-color: var(--fern);
    width: 1.1rem;
    height: 1.1rem
}

.cp-row b {
    font: 600 1.4rem var(--serif);
    color: var(--moss)
}

.cp-row small {
    display: block;
    color: var(--mute)
}

.cp-row:has(input:checked) {
    background: var(--bg2)
}

.cp-pass {
    position: sticky;
    top: 130px;
    background: var(--moss);
    color: var(--on-moss);
    padding: 1.8rem;
    border-inline-start: 2px dashed var(--lichen)
}

.cp-pass h3 {
    color: var(--on-moss);
    margin-bottom: 1rem
}

.cp-pass dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    margin: 0 0 1.5rem
}

.cp-pass dd {
    margin: 0;
    text-align: end;
    font-weight: 700
}

.cp-pass .btn {
    background: var(--lichen);
    color: #172b3b;
    border-color: var(--lichen);
    width: 100%;
    justify-content: center
}

.cp-pass .btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none
}

@media(max-width:1100px) {
    .cp-hero {
        grid-template-columns: 1fr
    }

    .cp-hero img {
        height: 300px;
        clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%)
    }

    .cp-needs,
    .cp-val,
    .cp-decide,
    .cp-expert,
    .cp-ben-body {
        grid-template-columns: 1fr
    }

    .cp-profile,
    .cp-pass {
        position: static
    }

    .cp-expert>img {
        max-height: 320px
    }
}

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

    .cp-seg {
        grid-template-columns: repeat(2, 1fr)
    }

    .cp-axis {
        grid-template-columns: 90px 1fr
    }

    .cp-arrows {
        display: none
    }
}

/* ===== Contact page ===== */
:root {
    --cx-deep: #173b56;
    --cx-deep2: #285b73;
    --cx-on: #f5f7fa;
    --cx-ink: #173b56;
    --cx-r: 22px;
    --cx-sh: 0 26px 50px -30px rgba(23, 43, 59, .55)
}

.cx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: 700 .78rem var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: 1rem
}

.cx-sec-head {
    max-width: 720px;
    margin-bottom: clamp(1.8rem, 4vw, 3rem)
}

.cx-sec-head p:not(.cx-eyebrow),
.cx-side-p {
    color: var(--mute)
}

[hidden] {
    display: none !important
}

/* shared dark panel */
.cx-dark {
    background: var(--cx-deep);
    color: var(--cx-on)
}

.cx-dark h1,
.cx-dark h2,
.cx-dark h3 {
    color: var(--cx-on)
}

.cx-dark .cx-eyebrow {
    color: var(--lichen)
}

.cx-dark .lead,
.cx-dark .cx-side-p {
    color: var(--cx-on);
    opacity: .82
}

.cx-dark .btn {
    background: var(--lichen);
    color: var(--cx-ink);
    border-color: var(--lichen)
}

.cx-dark .btn:hover {
    background: transparent;
    color: var(--cx-on);
    border-color: var(--cx-on)
}

.cx-dark .btn.ghost {
    background: transparent;
    color: var(--cx-on);
    border-color: rgba(245, 247, 250, .55)
}

.cx-dark .btn.ghost:hover {
    background: var(--cx-on);
    color: var(--cx-deep);
    border-color: var(--cx-on)
}

/* 1 hero */
.cx-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    border-radius: 0 0 clamp(28px, 6vw, 80px) clamp(28px, 6vw, 80px);
    padding-block: clamp(3rem, 7vw, 6rem)
}

.cx-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -12%;
    bottom: -40%;
    width: 75vmin;
    height: 75vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 210, 107, .24), transparent 65%);
    pointer-events: none
}

.cx-hero>* {
    position: relative
}

.cx-hero h1 {
    font-size: clamp(3rem, 7.4vw, 6.2rem)
}

.cx-hero h1 em {
    color: var(--lichen);
    font-style: italic;
    display: block
}

.cx-hero .lead {
    max-width: 52ch
}

.cx-trust {
    display: grid;
    gap: .45rem;
    margin-top: 2rem;
    font-size: .92rem
}

.cx-trust i {
    color: var(--lichen);
    margin-inline-end: .4rem
}

.cx-live,
.cx-state {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .88rem
}

.cx-live {
    margin-top: 1.8rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(245, 247, 250, .32);
    border-radius: 999px
}

.cx-live i,
.cx-state i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9aa59a;
    flex: none
}

.cx-live.on i,
.cx-state.on i {
    background: var(--lichen);
    box-shadow: 0 0 0 5px rgba(200, 210, 107, .28)
}

.cx-emblem {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 400/440;
    justify-self: center
}

.cx-emblem svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.cx-ring {
    fill: none;
    stroke: rgba(245, 247, 250, .2);
    stroke-width: 1.3
}

.cx-ring.d {
    stroke-dasharray: 3 10
}

.cx-shield {
    fill: rgba(245, 247, 250, .08);
    stroke: var(--lichen);
    stroke-width: 3
}

.cx-leaf {
    fill: var(--lichen)
}

.cx-pulse {
    fill: none;
    stroke: var(--lichen);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cx-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--moss);
    font: 700 .85rem var(--sans);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55);
    white-space: nowrap
}

.cx-chip i {
    color: var(--fern)
}

.cx-chip.c1 {
    top: 9%;
    inset-inline-start: 0
}

.cx-chip.c2 {
    top: 46%;
    inset-inline-end: 0
}

.cx-chip.c3 {
    bottom: 8%;
    inset-inline-start: 6%
}

@media(prefers-reduced-motion:no-preference) {
    .cx-orbit {
        transform-origin: 200px 224px;
        animation: cxspin 70s linear infinite
    }

    .cx-pulse {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: cxdraw 2.4s ease-out .6s forwards
    }

    .cx-chip {
        animation: cxfloat 5s ease-in-out infinite
    }

    .cx-chip.c2 {
        animation-delay: -1.7s
    }

    .cx-chip.c3 {
        animation-delay: -3.2s
    }
}

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

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

@keyframes cxfloat {
    50% {
        transform: translateY(-9px)
    }
}

/* 2 team cards */
.cx-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem
}

.cx-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--cx-r);
    padding: 1.8rem;
    transition: transform .3s, box-shadow .3s
}

.cx-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cx-sh)
}

.cx-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -46px;
    top: -46px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--lichen);
    opacity: .38;
    pointer-events: none
}

.cx-card>* {
    position: relative;
    z-index: 1
}

.cx-card p {
    color: var(--mute)
}

.cx-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--cx-deep);
    color: var(--lichen);
    font-size: 1.4rem;
    flex: none
}

.cx-big {
    font: 600 clamp(1.35rem, 2.1vw, 1.75rem)/1.2 var(--serif);
    overflow-wrap: anywhere;
    color: var(--moss);
    text-decoration: none;
    word-break: break-word;
    unicode-bidi: isolate
}

.cx-big:hover {
    text-decoration: underline;
    text-underline-offset: 5px
}

.cx-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: auto;
    padding-top: .6rem
}

.cx-copy {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 2px solid var(--line);
    border-radius: 2px;
    color: var(--moss);
    padding: .85rem 1.1rem;
    font: 700 .9rem var(--sans);
    cursor: pointer
}

.cx-copy:hover {
    background: var(--bg)
}

.cx-hours {
    min-width: 0;
    width: 100%;
    font-size: .93rem
}

.cx-hours td {
    padding: .55rem 0;
    border-bottom: 1px solid var(--line)
}

.cx-hours td:last-child {
    text-align: end;
    white-space: nowrap
}

.cx-hours tr.today td {
    font-weight: 700;
    color: var(--moss)
}

.cx-hours tr.today td:first-child::after {
    content: "Today";
    margin-inline-start: .6rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--lichen);
    color: var(--cx-ink);
    font-size: .7rem
}

.cx-state {
    color: var(--moss)
}

/* 3 help */
.cx-help {
    background: var(--bg2)
}

.cx-help-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: stretch
}

.cx-tabs {
    display: grid;
    gap: .9rem;
    align-content: start
}

.cx-tab {
    all: unset;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--cx-r);
    background: var(--bg);
    cursor: pointer;
    transition: background .25s, margin .25s, color .25s
}

.cx-tab:focus-visible {
    outline: 3px solid var(--fern);
    outline-offset: 3px
}

.cx-tab>i {
    display: inline-block;
    color: var(--fern)
}

.cx-tab>i:first-child {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bg2);
    font-size: 1.3rem
}

.cx-tab b {
    display: block;
    font: 600 1.5rem/1.1 var(--serif);
    color: var(--moss)
}

.cx-tab small {
    color: var(--mute);
    font-size: .85rem
}

.cx-tab[aria-selected="true"] {
    background: var(--cx-deep);
    border-color: var(--cx-deep);
    margin-inline-start: 14px
}

.cx-tab[aria-selected="true"] b {
    color: var(--cx-on)
}

.cx-tab[aria-selected="true"] small {
    color: var(--cx-on);
    opacity: .78
}

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

.cx-tab[aria-selected="true"]>i:first-child {
    background: var(--lichen)
}

.cx-tab[aria-selected="true"]>i:last-child {
    color: var(--lichen)
}

.cx-panels {
    min-width: 0
}

.cx-panel {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--cx-r);
    padding: clamp(1.6rem, 4vw, 2.8rem)
}

.cx-panel h3 {
    font-size: clamp(2rem, 3.4vw, 2.7rem)
}

.cx-panel p {
    color: var(--mute)
}

.cx-panel-num {
    position: absolute;
    inset-inline-end: 1.4rem;
    top: .2rem;
    font: 600 6.5rem/1 var(--serif);
    color: var(--lichen);
    opacity: .55;
    pointer-events: none
}

.cx-checks li {
    display: flex;
    gap: .7rem;
    padding: .65rem 0;
    border-top: 1px dashed var(--line)
}

.cx-checks i {
    color: var(--fern);
    flex: none
}

.cx-panel .cta {
    margin-top: auto;
    padding-top: 1rem
}

/* 4 advisor */
.cx-advisor {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.cx-adv-side {
    position: sticky;
    top: 130px
}

.cx-pass {
    margin-top: 2rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--cx-r);
    background: rgba(245, 247, 250, .08);
    border: 1px dashed rgba(245, 247, 250, .4)
}

.cx-pass-t {
    font-weight: 700;
    color: var(--lichen);
    margin-bottom: .8rem
}

.cx-pass-t i {
    margin-inline-end: .4rem
}

.cx-pass dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1.2rem
}

.cx-pass dt {
    opacity: .7;
    font-size: .87rem
}

.cx-pass dd {
    margin: 0;
    font-weight: 700;
    text-align: end
}

.cx-form {
    display: grid;
    gap: 1.9rem
}

.cx-fs {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

.cx-fs legend {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0;
    margin-bottom: .9rem;
    font: 600 1.4rem var(--serif)
}

.cx-fs legend b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lichen);
    color: var(--cx-ink);
    font: 700 .85rem var(--sans)
}

.cx-opts {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem
}

.cx-opts label {
    position: relative;
    cursor: pointer
}

.cx-opts input {
    position: absolute;
    opacity: 0;
    inset: 0
}

.cx-opts span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    border: 1px solid rgba(245, 247, 250, .4);
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    transition: .2s
}

.cx-opts label:hover span {
    border-color: var(--lichen)
}

.cx-opts input:checked+span {
    background: var(--lichen);
    border-color: var(--lichen);
    color: var(--cx-ink)
}

.cx-opts input:focus-visible+span {
    outline: 3px solid var(--cx-on);
    outline-offset: 2px
}

.cx-opts input:disabled+span {
    opacity: .35;
    text-decoration: line-through;
    cursor: not-allowed
}

.cx-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.cx-f {
    display: grid;
    gap: .4rem;
    font-weight: 700;
    font-size: .86rem
}

.cx-f.wide {
    grid-column: 1/-1
}

.cx-f input,
.cx-f select,
.cx-f textarea {
    width: 100%;
    font: 400 1rem var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: .85rem 1rem;
    transition: border-color .2s, box-shadow .2s
}

.cx-f textarea {
    resize: vertical;
    min-height: 130px
}

.cx-f input:focus,
.cx-f select:focus,
.cx-f textarea:focus {
    outline: 0;
    border-color: var(--fern);
    box-shadow: 0 0 0 4px rgba(84, 115, 85, .22)
}

.cx-f.bad input,
.cx-f.bad select,
.cx-f.bad textarea {
    border-color: #b33
}

.cx-err {
    min-height: 1.1em;
    color: #b33;
    font-weight: 600;
    font-size: .8rem
}

.cx-dark .cx-err {
    color: #f3b3a8
}

.cx-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.cx-cnt {
    color: var(--mute);
    font-weight: 400;
    font-size: .78rem;
    white-space: nowrap
}

.cx-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem
}

.cx-out {
    font-weight: 700;
    max-width: 52ch
}

.cx-done {
    display: none;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    border-radius: var(--cx-r);
    background: rgba(245, 247, 250, .08);
    border: 1px solid rgba(245, 247, 250, .3)
}

.cx-done.show {
    display: grid;
    gap: .8rem;
    justify-items: start
}

.cx-done>i {
    font-size: 2.6rem;
    color: var(--lichen)
}

.cx-msg-card .cx-done {
    background: var(--bg);
    border-color: var(--line);
    color: var(--ink)
}

.cx-msg-card .cx-done>i {
    color: var(--fern)
}

.cx-ref {
    font-size: .95rem
}

.cx-done:focus {
    outline: 0
}

/* 5 message */
.cx-message {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start
}

.cx-note {
    margin: 1.2rem 0 0;
    padding: .8rem 1.1rem;
    border-radius: 14px;
    border-inline-start: 4px solid var(--lichen);
    background: var(--bg2);
    font-weight: 700;
    font-size: .92rem
}

.cx-promise {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem
}

.cx-promise li {
    display: flex;
    gap: 1rem;
    align-items: flex-start
}

.cx-promise i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--fern);
    font-size: 1.15rem;
    flex: none
}

.cx-promise b {
    display: block;
    color: var(--moss)
}

.cx-promise small {
    color: var(--mute);
    font-size: .88rem
}

.cx-msg-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 2.8rem)
}

.cx-msg-card::before {
    content: "";
    position: absolute;
    inset-inline: 2rem;
    top: -1px;
    height: 5px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--fern), var(--lichen))
}

/* 6 process */
.cx-process {
    background: var(--bg2)
}

.cx-rail {
    --g: 1.2rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--g)
}

.cx-rail::before,
.cx-rail::after {
    content: "";
    position: absolute;
    top: 28px;
    inset-inline-start: 29px;
    height: 3px;
    border-radius: 3px
}

.cx-rail::before {
    width: calc((100% + var(--g)) * .8);
    background: var(--line)
}

.cx-rail::after {
    width: calc((100% + var(--g)) * .8 * var(--p, 0));
    background: var(--fern);
    transition: width 1.4s ease
}

.cx-rail li {
    position: relative;
    padding-top: 4.6rem;
    opacity: .4;
    transform: translateY(12px);
    transition: opacity .6s, transform .6s
}

.cx-rail li.on {
    opacity: 1;
    transform: none
}

.cx-dot {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--line);
    color: var(--fern);
    font-size: 1.4rem;
    transition: background .5s, color .5s, border-color .5s
}

.cx-rail li.on .cx-dot {
    background: var(--fern);
    border-color: var(--fern);
    color: var(--bg)
}

.cx-rail h3 {
    font-size: 1.45rem;
    margin-bottom: .4rem
}

.cx-rail p {
    color: var(--mute);
    font-size: .93rem
}

.cx-time {
    display: inline-block;
    margin-top: .8rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--lichen);
    color: var(--cx-ink);
    font: 700 .74rem var(--sans)
}

/* 7 visit */
.cx-visit-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 1.4rem
}

.cx-mapbox {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--line)
}

.cx-mapbox iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.75)
}

.cx-addr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.6rem, 3vw, 2.2rem);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 28px
}

.cx-addr address {
    margin: 0;
    font: 600 1.8rem/1.2 var(--serif);
    color: var(--moss)
}

.cx-ways {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.cx-way {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--moss);
    font: 700 .87rem var(--sans);
    cursor: pointer;
    transition: .2s
}

.cx-way[aria-pressed="true"] {
    background: var(--cx-deep);
    border-color: var(--cx-deep);
    color: var(--cx-on)
}

.cx-way-text {
    color: var(--mute);
    font-size: .94rem;
    min-height: 4.4em
}

/* 8 faq */
.cx-faq {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    background: var(--bg2)
}

.cx-faq-side {
    position: sticky;
    top: 130px
}

.cx-faq-side .btn {
    margin-top: 1.6rem
}

.cx-q {
    padding: 0;
    margin-bottom: .8rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--bg);
    transition: box-shadow .25s
}

.cx-q[open] {
    box-shadow: var(--cx-sh)
}

.cx-q summary {
    padding: 1.2rem 1.4rem;
    font-size: 1.02rem
}

.cx-q p {
    margin: 0;
    padding: 0 1.4rem 1.3rem
}

/* tablet */
@media(max-width:1100px) {

    .cx-hero,
    .cx-help-grid,
    .cx-advisor,
    .cx-message,
    .cx-visit-grid,
    .cx-faq {
        grid-template-columns: 1fr
    }

    .cx-emblem {
        max-width: 380px
    }

    .cx-adv-side,
    .cx-faq-side {
        position: static
    }

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

    .cx-hrs {
        grid-column: 1/-1
    }

    .cx-mapbox {
        min-height: 360px
    }

    .cx-way-text {
        min-height: 0
    }
}

@media(max-width:900px) {
    .cx-rail {
        grid-template-columns: 1fr;
        gap: 1.8rem
    }

    .cx-rail::before,
    .cx-rail::after {
        top: 29px;
        inset-inline-start: 27px;
        width: 3px
    }

    .cx-rail::before {
        height: calc(100% - 58px)
    }

    .cx-rail::after {
        height: calc((100% - 58px) * var(--p, 0));
        transition: height 1.4s ease
    }

    .cx-rail li {
        padding: 0 0 0 5.2rem;
        padding-inline: 5.2rem 0;
        min-height: 58px
    }
}

@media(max-width:600px) {

    .cx-cards,
    .cx-grid2 {
        grid-template-columns: 1fr
    }

    .cx-hero h1 {
        font-size: clamp(2.8rem, 14vw, 3.6rem)
    }

    .cx-chip {
        font-size: .75rem;
        padding: .45rem .8rem
    }

    .cx-panel-num {
        font-size: 4.5rem
    }

    .cx-tab {
        padding: 1rem;
        gap: .8rem
    }

    .cx-tab b {
        font-size: 1.3rem
    }

    .cx-tab[aria-selected="true"] {
        margin-inline-start: 8px
    }

    .cx-opts span {
        padding: .55rem .9rem
    }

    .cx-mapbox {
        min-height: 300px
    }

    .cx-act .btn,
    .cx-row .btn {
        flex: 1 1 auto;
        justify-content: center
    }
}

/* ===== About page ===== */
:root {
    --ab-d: var(--moss);
    --ab-on: var(--on-moss)
}

.ab-dark {
    background-color: #3a648f;
    color: var(--ab-on)
}

.ab-dark h2,
.ab-dark h3 {
    color: var(--ab-on)
}

.ab-dark p {
    opacity: .85
}

.ab-dark .btn {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.ab-dark .btn:hover {
    background: transparent;
    color: var(--lichen)
}

.ab-dark .btn.ghost {
    background: transparent;
    color: var(--ab-on);
    border-color: var(--ab-on)
}

.ab-dark .btn.ghost:hover {
    background: var(--ab-on);
    color: var(--ab-d)
}

.ab-sub {
    color: var(--mute)
}

/* hero */
.ab-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: clamp(1rem, 4vw, 4rem);
    min-height: min(86vh, 780px)
}

.ab-hero h1 {
    font-size: clamp(3rem, 7.2vw, 6.4rem);
    max-width: 10.5ch;
    margin-bottom: 1.6rem
}

.ab-hero .lead {
    margin: 0 0 2rem;
    max-width: 48ch
}

.ab-rings {
    width: min(100%, 600px);
    /* justify-self: end; */
    margin-inline-end: clamp(-9rem, -8vw, 0rem);
    color: var(--fern);
    overflow: visible
}

.ab-rings .r {
    stroke-dasharray: 1
}

.ab-rings .dot {
    fill: var(--lichen);
    stroke: var(--bg);
    stroke-width: 3
}

.ab-ring-n {
    font: 600 40px var(--serif);
    fill: #173b56;
    text-anchor: middle
}

.ab-ring-s {
    font: 700 11px var(--sans);
    fill: #173b56;
    text-anchor: middle
}

@media(prefers-reduced-motion:no-preference) {
    .ab-rings .r {
        animation: abdraw 1.6s cubic-bezier(.3, .7, .2, 1) both;
        animation-delay: calc(var(--i) * .16s)
    }

    .ab-rings .dot {
        animation: abfade .6s 1.9s both
    }

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

    @keyframes abfade {
        from {
            opacity: 0
        }
    }
}

/* story */
.ab-story {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    background: var(--bg2)
}

.ab-story-head p {
    color: var(--mute)
}

.ab-years {
    display: flex;
    align-items: flex-end;
    gap: clamp(.4rem, 1.6vw, 1.2rem);
    margin-bottom: 2.2rem
}

.ab-yr {
    width: var(--s);
    height: var(--s);
    flex: none;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--fern);
    background: transparent;
    color: var(--moss);
    font: 600 clamp(.85rem, 1.5vw, 1.1rem) var(--serif);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s
}

.ab-yr:hover {
    background: var(--bg)
}

.ab-yr[aria-selected="true"] {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.ab-chap {
    border-inline-start: 3px solid var(--lichen);
    padding-inline-start: 1.4rem
}

.ab-chap h3 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin-bottom: .5rem
}

.ab-chap p {
    color: var(--mute)
}

.ab-chap[hidden],
.ab-epanel[hidden],
.ab-crew li[hidden] {
    display: none
}

/* mission & vision */
.ab-mv {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr
}

.ab-mv>div {
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4.5rem)
}

.ab-stmt {
    font: 500 clamp(1.6rem, 2.7vw, 2.3rem)/1.25 var(--serif);
    color: var(--moss);
    max-width: 24ch;
    margin-top: 1rem
}

.ab-dark .ab-stmt {
    color: var(--ab-on);
    opacity: 1
}

.ab-goals {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.3rem
}

.ab-goals li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: .6rem
}

.ab-goals i {
    font-size: 1.5rem;
    color: var(--fern)
}

.ab-goals p {
    color: var(--mute)
}

.ab-vision {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 34px, rgba(233, 239, 224, .08) 34px 36px)
}

/* different */
.ab-diff-list {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem
}

.ab-pan {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 25rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: flex-grow .55s ease, background .4s, color .4s
}

.ab-pan.on {
    flex-grow: 2.6;
    background: var(--ab-d);
    border-color: var(--ab-d);
    color: var(--ab-on)
}

.ab-pan>i {
    font-size: 2.2rem;
    color: var(--fern)
}

.ab-pan.on>i {
    color: var(--lichen)
}

.ab-pan h3 {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem)
}

.ab-pan.on h3 {
    color: var(--ab-on)
}

.ab-pan h3 button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-align: start;
    cursor: pointer
}

.ab-pan h3 button::after {
    content: "";
    position: absolute;
    inset: 0
}

.ab-pan:has(button:focus-visible) {
    outline: 3px solid var(--fern);
    outline-offset: 3px
}

.ab-pan-body {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows .55s ease, opacity .4s, visibility .55s
}

.ab-pan.on .ab-pan-body {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1
}

.ab-pan-body>div {
    overflow: hidden
}

.ab-pan-body p {
    margin-top: .8rem;
    opacity: .9
}

.ab-pan-body ul {
    margin-top: .9rem;
    display: grid;
    gap: .35rem
}

.ab-pan-body li i,
.ab-epanel li i {
    color: var(--lichen);
    margin-inline-end: .4rem
}

/* expertise */
.ab-exp {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 6vw, 6rem);
    background: var(--bg2);
    align-items: start
}

.ab-etabs {
    margin-top: 2rem;
    border-top: 1px solid var(--line)
}

.ab-etab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--mute);
    font: 600 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif);
    text-align: start;
    cursor: pointer;
    transition: color .25s, padding .3s
}

.ab-etab i {
    margin-inline-start: auto;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity .25s
}

.ab-etab:hover {
    color: var(--moss)
}

.ab-etab[aria-selected="true"] {
    color: var(--moss);
    padding-inline-start: 1.2rem;
    box-shadow: inset 4px 0 0 var(--lichen)
}

[dir="rtl"] .ab-etab[aria-selected="true"] {
    box-shadow: inset -4px 0 0 var(--lichen)
}

.ab-etab[aria-selected="true"] i {
    opacity: 1
}

.ab-epanel {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: clamp(1.6rem, 4vw, 3rem)
}

.ab-eico {
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: var(--lichen);
    color: #173b56;
    font-size: 1.7rem;
    margin-bottom: 1.2rem
}

.ab-epanel h3 {
    font-size: clamp(1.8rem, 3vw, 2.4rem)
}

.ab-epanel p {
    color: var(--mute);
    margin: .5rem 0 1.2rem
}

.ab-epanel ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 1.5rem;
    margin-bottom: 1.6rem
}

.ab-epanel li i {
    color: var(--fern)
}

.ab-link {
    font-weight: 700;
    color: var(--moss);
    text-underline-offset: 4px
}

.ab-link i {
    font-size: .85rem
}

/* approach */
.ab-path {
    --pad: clamp(2.5rem, 5vw, 4rem);
    --p: 0;
    position: relative;
    margin-top: 3rem;
    padding-inline-start: var(--pad);
    display: grid;
    gap: 2.8rem;
    /* max-width: 58rem */
}

.ab-path::before,
.ab-path::after {
    content: "";
    position: absolute;
    inset-inline-start: .9rem;
    top: .6rem;
    bottom: .6rem;
    width: 2px;
    background: var(--line)
}

.ab-path::after {
    background: var(--fern);
    transform-origin: top;
    transform: scaleY(var(--p))
}

.ab-path li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: 1rem 2rem;
    align-items: start
}

.ab-path li::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline-start: calc(.4rem - var(--pad));
    top: .5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--line);
    transition: background .3s, border-color .3s
}

.ab-path li.on::before {
    background: var(--lichen);
    border-color: var(--fern)
}

.ab-path p {
    color: var(--mute)
}

.ab-got {
    border: 1px solid var(--line);
    padding: .7rem .9rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--moss)
}

.ab-got i {
    color: var(--fern);
    margin-inline-end: .4rem
}

/* team */
.ab-team {
    background: var(--bg2)
}

.ab-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2rem 0 .8rem
}

.ab-chip {
    border: 1px solid var(--fern);
    background: transparent;
    color: var(--ink);
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font: 700 .85rem var(--sans);
    cursor: pointer;
    transition: background .2s
}

.ab-chip:hover {
    background: var(--bg)
}

.ab-chip[aria-pressed="true"] {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.ab-count {
    font-size: .85rem;
    color: var(--mute);
    margin-bottom: 1.5rem
}

.ab-crew {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem
}

.ab-crew li {
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: 1.6rem;
    background: var(--bg);
    border: 1px solid var(--line)
}

.ab-mono {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: .8rem;
    border-radius: 50%;
    background: conic-gradient(from var(--a), var(--lichen), var(--fern), var(--lichen))
}

.ab-mono img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: cover;
    border-radius: 50%
}

.ab-crew h3 {
    font-size: 1.6rem
}

.ab-crew b {
    font-size: .85rem;
    color: var(--fern)
}

.ab-crew p,
.ab-crew small {
    color: var(--mute)
}

.ab-crew small {
    margin-top: .5rem;
    font-size: .82rem
}

/* commitment */
.ab-commit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 34px, rgba(233, 239, 224, .08) 34px 36px)
}

.ab-commit .cta {
    margin-top: 2rem
}

.ab-promises {
    display: grid;
    gap: 1.6rem
}

.ab-promises li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .8rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(233, 239, 224, .22)
}

.ab-promises li:last-child {
    border: 0;
    padding: 0
}

.ab-promises i {
    font-size: 1.5rem;
    color: var(--lichen)
}

.ab-promises h3 {
    font-size: 1.6rem
}

/* tablet */
@media(max-width:1100px) {

    .ab-hero,
    .ab-story,
    .ab-exp,
    .ab-commit {
        grid-template-columns: 1fr
    }

    .ab-hero {
        min-height: 0
    }

    .ab-rings {
        justify-self: center;
        width: min(100%, 440px);
        margin-inline-end: 0
    }
}

@media(max-width:900px) {

    .ab-mv {
        grid-template-columns: 1fr
    }

    .ab-diff-list {
        flex-direction: column
    }

    .ab-pan {
        flex: none;
        min-height: 0;
        gap: 1rem
    }

    .ab-pan>i {
        font-size: 1.8rem
    }
}

/* mobile */
@media(max-width:600px) {
    .ab-yr {
        width: calc(var(--s) * .6);
        height: calc(var(--s) * .6);
        font-size: .72rem
    }

    .ab-years {
        gap: .4rem
    }

    .ab-epanel ul,
    .ab-path li {
        grid-template-columns: 1fr
    }

    .ab-path {
        gap: 2.2rem
    }

    .ab-hero .cta .btn {
        flex: 1 1 auto;
        justify-content: center
    }
}

/* ===== Claims Assistance page ===== */
.as-dark {
    background-color: var(--ab-d, var(--moss));
    color: var(--ab-on, var(--on-moss))
}

.as-dark h1,
.as-dark h2,
.as-dark h3 {
    color: var(--ab-on, var(--on-moss))
}

.as-dark>div>p,
.as-hero-copy .lead {
    opacity: .85
}

.as-dark .btn {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.as-dark .btn:hover {
    background: transparent;
    color: var(--lichen)
}

.as-dark .btn.ghost {
    background: transparent;
    color: var(--ab-on, var(--on-moss));
    border-color: var(--ab-on, var(--on-moss))
}

.as-dark .btn.ghost:hover {
    background: var(--ab-on, var(--on-moss));
    color: var(--ab-d, var(--moss))
}

.as-sub {
    color: var(--mute)
}

.as-fine,
.as-note {
    font-size: .85rem;
    color: var(--mute)
}

.as-err {
    display: block;
    min-height: 1.2em;
    font-size: .8rem;
    font-weight: 700;
    color: #a33
}

.as-seg {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.as-chip {
    border: 1px solid var(--fern);
    background: transparent;
    color: inherit;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font: 700 .85rem var(--sans);
    cursor: pointer;
    transition: background .2s, color .2s
}

.as-chip[aria-pressed="true"] {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

/* hero */
.as-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding-bottom: clamp(7rem, 12vw, 10rem)
}

.as-hero h1 {
    font-size: clamp(3rem, 6.8vw, 6rem);
    max-width: 11ch;
    margin-bottom: 1.5rem
}

.as-hero .lead {
    margin: 0 0 2rem;
    max-width: 50ch;
    color: inherit
}

.as-desk {
    background: var(--bg);
    color: var(--ink);
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-top: 6px solid var(--lichen);
    display: grid;
    gap: .5rem
}

.as-desk p {
    opacity: 1;
    color: var(--mute);
    font-size: .92rem
}

.as-desk-st {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--moss) !important;
    font-size: .88rem !important
}

.as-led {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--mute)
}

.as-led.on {
    background: #4f9d4a;
    box-shadow: 0 0 0 4px rgba(79, 157, 74, .25)
}

.as-desk-l {
    margin-top: 1rem
}

.as-desk-n {
    font: 600 clamp(2rem, 3.4vw, 2.7rem)/1.1 var(--serif);
    color: var(--moss);
    text-decoration: none;
    unicode-bidi: isolate
}

.as-desk-m {
    margin-top: .6rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--moss);
    text-underline-offset: 4px
}

.as-pulse {
    position: absolute;
    inset-inline: 0;
    bottom: 1.5rem;
    width: 100%;
    height: 80px;
    direction: ltr;
    pointer-events: none
}

.as-pulse path {
    fill: none;
    stroke: var(--lichen);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1
}

@media(prefers-reduced-motion:no-preference) {
    .as-pulse path {
        animation: aspulse 2.8s cubic-bezier(.4, .1, .2, 1) .3s both
    }

    .as-led.on {
        animation: asblink 2.4s ease-in-out infinite
    }

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

    @keyframes asblink {
        50% {
            box-shadow: 0 0 0 7px rgba(79, 157, 74, 0)
        }
    }
}

/* help tiles */
.as-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 2.5rem
}

.as-tile {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .25s, transform .25s
}

.as-tile:hover {
    border-color: var(--fern);
    transform: translateY(-3px)
}

.as-tile>i {
    font-size: 1.9rem;
    color: var(--fern)
}

.as-tile p {
    color: var(--mute)
}

.as-go {
    margin-top: auto;
    padding-top: .8rem;
    font-weight: 700;
    color: var(--moss)
}

.as-go i {
    font-size: .85rem
}

.as-big {
    grid-column: span 4;
    grid-row: span 2;
    background: var(--lichen);
    border-color: var(--lichen);
    min-height: 20rem;
    justify-content: flex-end
}

.as-big>i,
.as-big h3,
.as-big p,
.as-big .as-go {
    color: #173b56
}

.as-big>i {
    font-size: 3rem;
    margin-bottom: auto
}

.as-big h3 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem)
}

.as-big:hover {
    border-color: #173b56
}

.as-wide {
    grid-column: span 6;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .3rem 1.4rem
}

.as-wide h3 {
    grid-column: 2
}

.as-wide p {
    grid-column: 2
}

.as-wide>i {
    grid-row: span 2
}

.as-wide .as-go {
    grid-column: 3;
    grid-row: 1/span 2;
    margin: 0;
    padding: 0
}

/* journey */
.as-journey {
    background: var(--bg2)
}

.as-stages {
    --j: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 3rem 0 2.5rem
}

.as-stages::before,
.as-stages::after {
    content: "";
    position: absolute;
    top: 1.3rem;
    inset-inline-start: 10%;
    width: 80%;
    height: 2px;
    background: var(--line);
    transform-origin: left center
}

.as-stages::after {
    background: var(--fern);
    transform: scaleX(var(--j));
    transition: transform .5s ease
}

[dir="rtl"] .as-stages::after,
[dir="rtl"] .as-stages::before {
    transform-origin: right center
}

.as-st {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 0 .3rem;
    background: none;
    border: 0;
    color: var(--mute);
    font: 700 .95rem var(--sans);
    cursor: pointer
}

.as-node {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid var(--fern);
    background: var(--bg2);
    color: var(--moss);
    font: 600 1.2rem var(--serif);
    transition: background .3s, color .3s, transform .3s
}

.as-st.done .as-node {
    background: var(--moss);
    border-color: var(--moss);
    color: var(--bg)
}

.as-st[aria-selected="true"] {
    color: var(--moss)
}

.as-st[aria-selected="true"] .as-node {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56;
    transform: scale(1.18)
}

.as-sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem clamp(1.5rem, 5vw, 4rem);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 4px solid var(--lichen)
}

.as-sp[hidden] {
    display: none
}

.as-sp h3 {
    grid-column: 1/-1;
    font-size: clamp(1.8rem, 3vw, 2.4rem)
}

.as-sp h4,
.as-cols h4 {
    font: 700 .85rem var(--sans);
    color: var(--fern);
    margin-bottom: .3rem
}

.as-sp p {
    color: var(--mute)
}

/* checklist */
.as-docs {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.as-prog {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 1.4rem;
    justify-items: start
}

.as-ringbox {
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.as-ring {
    --pct: 0;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--lichen) calc(var(--pct) * 1%), var(--line) 0);
    position: relative
}

.as-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--bg)
}

.as-ring span {
    position: relative;
    font: 600 1.6rem var(--serif);
    color: var(--moss);
    unicode-bidi: isolate
}

.as-acts {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}

.as-list {
    display: grid;
    gap: .7rem;
    margin-bottom: 1.2rem
}

.as-list label {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background .25s, border-color .25s
}

.as-list label:hover {
    border-color: var(--fern)
}

.as-list input,
.as-chk input {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    accent-color: var(--fern);
    margin-top: .2rem
}

.as-list b {
    display: block
}

.as-list small {
    color: var(--mute)
}

.as-list li.ok label {
    background: var(--bg2);
    border-color: var(--bg2)
}

.as-list li.ok b {
    text-decoration: line-through;
    text-decoration-color: var(--fern);
    color: var(--mute)
}

/* track */
.as-track {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 6rem);
    background: var(--bg2);
    align-items: start
}

.as-tf label {
    display: block;
    font-weight: 700;
    font-size: .88rem;
    margin: 1.6rem 0 .3rem
}

.as-tfrow {
    display: flex;
    gap: .6rem
}

.as-tfrow input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase
}

.as-demo {
    font-size: .85rem;
    color: var(--mute);
    margin-top: 1rem
}

.as-demo button {
    background: none;
    border: 0;
    padding: 0;
    margin-inline-end: .6rem;
    font: 700 .85rem var(--sans);
    color: var(--moss);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    unicode-bidi: isolate
}

.as-res {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    min-height: 18rem
}

.as-empty {
    color: var(--mute);
    display: flex;
    gap: .7rem;
    align-items: center;
    min-height: 14rem
}

.as-empty i {
    font-size: 1.6rem;
    color: var(--fern)
}

.as-rh {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 1rem;
    align-items: flex-start;
    margin-bottom: 1.4rem
}

.as-rh h3 {
    font-size: 1.9rem;
    unicode-bidi: isolate
}

.as-rh small {
    color: var(--mute)
}

.as-pill {
    padding: .35rem .9rem;
    border-radius: 999px;
    font: 700 .8rem var(--sans);
    border: 1px solid var(--fern);
    color: var(--moss)
}

.as-pill.ok {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.as-pill.warn {
    background: #f3d9d3;
    border-color: #f3d9d3;
    color: #7a2417
}

.as-mini {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .4rem;
    margin-bottom: 1.6rem
}

.as-mini li {
    border-top: 4px solid var(--line);
    padding-top: .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mute)
}

.as-mini li.done {
    border-color: var(--fern);
    color: var(--moss)
}

.as-mini li.now {
    border-color: var(--lichen);
    color: var(--moss)
}

.as-res h4 {
    font: 700 .9rem var(--sans);
    margin-bottom: .5rem
}

.as-res ul {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.2rem
}

.as-res li i {
    color: var(--fern);
    margin-inline-end: .5rem
}

.as-res .warn-i {
    color: #a33
}

.as-res .as-fine {
    margin-bottom: 1rem
}

/* challenges */
.as-chal {
    background: var(--bg)
}

.as-acc {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line)
}

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

.as-it h3 {
    font-size: inherit
}

.as-it h3 button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    color: var(--moss);
    text-align: start;
    cursor: pointer;
    font: inherit
}

.as-it h3 button>i:first-child {
    font-size: 1.8rem;
    color: var(--fern)
}

.as-it h3 b {
    display: block;
    font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--serif)
}

.as-it h3 small {
    display: block;
    font: 400 .92rem var(--sans);
    color: var(--mute);
    margin-top: .2rem
}

.as-pm {
    margin-inline-start: auto;
    font-size: 1.1rem;
    transition: transform .35s
}

.as-it.on .as-pm {
    transform: rotate(45deg)
}

.as-body {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .45s ease, visibility .45s
}

.as-it.on .as-body {
    grid-template-rows: 1fr;
    visibility: visible
}

.as-body>div {
    overflow: hidden
}

.as-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem clamp(1.5rem, 5vw, 4rem);
    padding: 0 0 2rem 0;
    padding-inline-start: 3rem
}

.as-cols ul {
    display: grid;
    gap: .5rem
}

.as-cols li {
    padding-inline-start: 1.2rem;
    position: relative;
    color: var(--mute)
}

.as-cols li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .7em;
    width: .5rem;
    height: 2px;
    background: var(--fern)
}

.as-cols .as-fine {
    margin-top: .8rem
}

/* advisor */
.as-adv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 34px, rgba(233, 239, 224, .08) 34px 36px)
}

.as-q {
    margin: 2rem 0 .8rem;
    font-weight: 700
}

.as-card {
    background: var(--bg);
    color: var(--ink);
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    display: grid;
    gap: .4rem;
    justify-items: start
}

.as-card p {
    opacity: 1;
    color: var(--mute)
}

.as-card h3 {
    color: var(--moss);
    font-size: 2rem
}

.as-card b {
    color: var(--fern);
    font-size: .88rem
}

.as-card small {
    color: var(--mute)
}

.as-card .as-acts {
    margin-top: 1.2rem
}

.as-card .btn {
    background: var(--moss);
    color: var(--bg);
    border-color: var(--moss)
}

.as-card .btn:hover {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.as-card .btn.ghost {
    background: transparent;
    color: var(--moss)
}

.as-card .btn.ghost:hover {
    background: var(--moss);
    color: var(--bg);
    border-color: var(--moss)
}

.as-mono {
    display: grid;
    place-items: center;
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: .6rem;
    border-radius: 50%;
    background: conic-gradient(var(--lichen), var(--fern), var(--lichen))
}

.as-mono span {
    display: grid;
    place-items: center;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    background: var(--bg);
    color: var(--moss);
    font: 600 1.7rem var(--serif)
}

/* contact */
.as-contact {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
    background: var(--bg2)
}

.as-info ul {
    display: grid;
    gap: 1.2rem;
    margin: 2rem 0
}

.as-info li {
    display: grid;
    grid-template-columns: 2.8rem 1fr;
    gap: .8rem;
    align-items: center
}

.as-info li>i {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--lichen);
    color: #173b56;
    font-size: 1.1rem
}

.as-info b {
    display: block;
    font-size: .8rem;
    color: var(--mute)
}

.as-info a {
    text-underline-offset: 4px;
    unicode-bidi: isolate
}

.as-tip {
    padding: 1rem 1.2rem;
    border-inline-start: 4px solid var(--lichen);
    background: var(--bg);
    font-size: .9rem
}

.as-tip i {
    color: var(--fern);
    margin-inline-end: .4rem
}

.as-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.2rem;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: clamp(1.4rem, 3.5vw, 2.6rem)
}

.as-f {
    display: grid;
    gap: .3rem;
    align-content: start;
    font-weight: 700;
    font-size: .88rem
}

.as-w {
    grid-column: 1/-1
}

.as-f input[aria-invalid="true"] {
    border-color: #a33
}

.as-chk {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .9rem
}

.as-form .btn {
    justify-content: center
}

.as-done {
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 6px solid var(--lichen);
    padding: clamp(1.6rem, 4vw, 3rem);
    display: grid;
    gap: .8rem;
    justify-items: start
}

.as-done[hidden] {
    display: none
}

.as-done>i {
    font-size: 2.4rem;
    color: var(--fern)
}

.as-done p {
    color: var(--mute)
}

/* tablet */
@media(max-width:1100px) {

    .as-hero,
    .as-docs,
    .as-track,
    .as-adv,
    .as-contact {
        grid-template-columns: 1fr
    }

    .as-prog {
        position: static
    }

    .as-desk {
        max-width: 28rem
    }

    .as-tiles {
        grid-template-columns: 1fr 1fr
    }

    .as-tile {
        grid-column: auto
    }

    .as-big,
    .as-wide {
        grid-column: 1/-1
    }

    .as-big {
        grid-row: auto;
        min-height: 15rem
    }
}

@media(max-width:700px) {

    .as-sp,
    .as-cols,
    .as-form {
        grid-template-columns: 1fr
    }

    .as-cols {
        padding-inline-start: 0
    }

    .as-tiles {
        grid-template-columns: 1fr
    }

    .as-wide {
        display: flex
    }

    .as-wide .as-go {
        padding-top: .8rem
    }

    .as-wide>i {
        margin-bottom: .3rem
    }
}

/* mobile */
@media(max-width:600px) {
    .as-stages {
        grid-template-columns: 1fr;
        gap: .9rem;
        margin: 2rem 0
    }

    .as-stages::before,
    .as-stages::after {
        top: 1.3rem;
        bottom: 1.3rem;
        height: auto;
        width: 2px;
        inset-inline-start: 1.3rem;
        transform-origin: top
    }

    .as-stages::after {
        transform: scaleY(var(--j))
    }

    .as-st {
        flex-direction: row;
        gap: 1rem;
        padding: 0
    }

    .as-tfrow {
        flex-direction: column
    }

    .as-mini {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        font-size: .7rem
    }

    .as-mini li {
        font-size: .68rem
    }

    .as-hero .cta .btn,
    .as-acts .btn {
        flex: 1 1 auto;
        justify-content: center
    }

    .as-it h3 button {
        gap: .8rem
    }
}

/* ===== User Dashboard page ===== */
:root {
    --ud-d: #173b56;
    --ud-on: #f5f7fa;
    --ud-card: #ffffff;
    --ud-sh: 0 26px 50px -36px rgba(23, 43, 59, .55)
}

.ud-hero {
    position: relative;
    overflow: hidden;
    background: var(--ud-d);
    color: var(--ud-on);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 4.5rem) 0
}

.ud-hero::before,
.ud-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.ud-hero::before {
    width: 540px;
    height: 540px;
    inset-inline-end: -150px;
    top: -230px;
    background: radial-gradient(circle, rgba(200, 210, 107, .3), transparent 68%)
}

.ud-hero::after {
    width: 360px;
    height: 360px;
    inset-inline-start: -170px;
    bottom: -190px;
    border: 1px solid rgba(245, 247, 250, .14);
    box-shadow: 0 0 0 40px rgba(245, 247, 250, .04), 0 0 0 80px rgba(245, 247, 250, .03)
}

.ud-hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center
}

.ud-hero h1 {
    color: var(--ud-on);
    font-size: clamp(2.4rem, 5vw, 4.3rem)
}

.ud-hero h1 em {
    color: var(--lichen)
}

.ud-eyebrow {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lichen);
    margin-bottom: 1rem
}

.ud-sub {
    color: rgba(245, 247, 250, .8);
    font-size: 1.1rem;
    margin-top: 1rem
}

.ud-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.7rem
}

.ud-hero .btn {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen);
    border-radius: 99px
}

.ud-hero .btn:hover {
    background: transparent;
    color: var(--ud-on);
    border-color: var(--ud-on)
}

.ud-hero .btn.ghost {
    background: transparent;
    color: var(--ud-on);
    border-color: rgba(245, 247, 250, .5)
}

.ud-hero .btn.ghost:hover {
    background: var(--ud-on);
    color: #173b56
}

.ud-ring {
    width: min(100%, 290px);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--lichen) 0 100%)
}

.ud-ring>div {
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ud-d);
    display: grid;
    place-content: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(245, 247, 250, .12)
}

.ud-ring small {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, .7)
}

.ud-ring b {
    font: 600 clamp(1.9rem, 4vw, 2.6rem)/1.1 var(--serif);
    color: var(--lichen)
}

.ud-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(2rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(245, 247, 250, .18)
}

.ud-stats li {
    display: grid;
    gap: .15rem;
    align-content: start;
    padding: 1.4rem 1.2rem 1.7rem;
    border-inline-start: 1px solid rgba(245, 247, 250, .18)
}

.ud-stats li:first-child {
    border-inline-start: 0;
    padding-inline-start: 0
}

.ud-stats i {
    color: var(--lichen);
    font-size: 1.3rem
}

.ud-stats small {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 247, 250, .7)
}

.ud-stats b {
    font: 600 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--serif)
}

.ud-stats span {
    font-size: .85rem;
    color: rgba(245, 247, 250, .75)
}

.ud-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding: 2.5rem clamp(1.2rem, 5vw, 4.5rem) 5rem
}

.ud-side {
    position: sticky;
    top: calc(var(--hh) + 1.2rem)
}

.ud-side ul {
    display: grid;
    border-inline-start: 2px solid var(--line)
}

.ud-side a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    margin-inline-start: -2px;
    border-inline-start: 2px solid transparent;
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    color: var(--mute);
    transition: .2s
}

.ud-side a:hover {
    color: var(--moss);
    background: var(--bg2)
}

.ud-side a[aria-current="true"] {
    color: var(--moss);
    font-weight: 700;
    border-inline-start-color: var(--fern);
    background: var(--bg2)
}

.ud-badge {
    margin-inline-start: auto;
    min-width: 1.4rem;
    height: 1.4rem;
    padding-inline: .4rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--fern);
    color: var(--bg);
    font-size: .72rem;
    font-weight: 800
}

.ud-p {
    background: var(--ud-card);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    margin-bottom: 1.6rem;
    box-shadow: var(--ud-sh)
}

.ud-ph {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem
}

.ud-ph>div {
    flex: 1 1 240px
}

.ud-ph h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin: 0
}

.ud-ph p {
    color: var(--mute);
    font-size: .95rem
}

.ud-n {
    margin-top: .55rem;
    padding: .15rem .7rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fern)
}

.ud-sm {
    padding: .6rem 1.1rem;
    font-size: .85rem;
    border-radius: 99px
}

.ud-pi {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lichen);
    color: #173b56;
    font-size: 1.2rem
}

.ud-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem
}

.ud-pol {
    display: grid;
    gap: .55rem;
    text-align: start;
    padding: 1.3rem;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    background: var(--bg);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: .25s
}

.ud-pol:hover {
    transform: translateY(-3px)
}

.ud-pol[aria-pressed="true"] {
    border-color: var(--fern);
    box-shadow: inset 0 0 0 1px var(--fern), var(--ud-sh)
}

.ud-pn {
    font: 600 1.45rem/1.1 var(--serif);
    color: var(--moss)
}

.ud-pol small,
.ud-card small,
.ud-c small {
    color: var(--mute);
    font-size: .8rem
}

.ud-big {
    font: 600 2rem/1.1 var(--serif);
    color: var(--moss)
}

.ud-kv {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    font-size: .88rem;
    text-align: end
}

.ud-kv small {
    text-align: start
}

.ud-bar {
    display: block;
    height: 6px;
    border-radius: 9px;
    background: var(--line);
    overflow: hidden
}

.ud-bar i {
    display: block;
    height: 100%;
    border-radius: 9px;
    background: var(--fern)
}

.ud-pill {
    display: inline-block;
    padding: .25rem .75rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--bg2);
    color: var(--moss);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap
}

.ud-pill.ok {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.ud-pill.warn {
    background: #f6e0da;
    border-color: #f6e0da;
    color: #8a2f20
}

.ud-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1.2rem;
    padding: .3rem;
    border-radius: 99px;
    background: var(--bg2)
}

.ud-seg button {
    border: 0;
    background: none;
    padding: .5rem 1.1rem;
    border-radius: 99px;
    font: 700 .86rem var(--sans);
    color: var(--mute);
    cursor: pointer
}

.ud-seg button[aria-pressed="true"] {
    background: var(--ud-d);
    color: var(--ud-on)
}

.ud-row {
    display: grid;
    grid-template-columns: auto 1.4fr 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid var(--line)
}

.ud-c {
    display: grid
}

.ud-empty {
    padding: 1.5rem 0;
    color: var(--mute)
}

.ud-bgrid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 1rem
}

.ud-bc {
    display: grid;
    gap: .5rem;
    align-content: start;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg)
}

.ud-bc>i {
    font-size: 1.6rem;
    color: var(--fern)
}

.ud-bc small {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute)
}

.ud-bc b {
    font: 600 1.6rem/1.2 var(--serif);
    color: var(--moss)
}

.ud-bc.big {
    background: var(--ud-d);
    border-color: var(--ud-d);
    color: var(--ud-on)
}

.ud-bc.big>i,
.ud-bc.big b {
    color: var(--lichen)
}

.ud-bc.big small,
.ud-bc.big span {
    color: rgba(245, 247, 250, .75)
}

.ud-bc li {
    display: flex;
    gap: .5rem;
    font-size: .92rem;
    padding: .3rem 0
}

.ud-bc li i {
    color: var(--fern)
}

.ud-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1rem
}

.ud-card {
    padding: 1.3rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg)
}

.ud-ch {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    align-items: flex-start
}

.ud-ch b {
    display: block;
    font: 600 1.25rem/1.2 var(--serif);
    color: var(--moss)
}

.ud-card>p {
    font-size: .9rem;
    color: var(--mute)
}

.ud-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1.3rem 0 .8rem;
    counter-reset: s
}

.ud-steps li {
    position: relative;
    padding-top: 2.1rem;
    text-align: center;
    font-size: .76rem;
    color: var(--mute);
    counter-increment: s
}

.ud-steps li::before {
    content: counter(s);
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--bg);
    font-size: .72rem;
    font-weight: 800
}

.ud-steps li::after {
    content: "";
    position: absolute;
    top: .8rem;
    height: 2px;
    inset-inline: -50% 50%;
    background: var(--line)
}

.ud-steps li:first-child::after {
    display: none
}

.ud-steps li.done::before {
    background: var(--fern);
    border-color: var(--fern);
    color: var(--bg)
}

.ud-steps li.now::before {
    background: var(--lichen);
    border-color: var(--fern);
    color: #173b56
}

.ud-steps li.done::after,
.ud-steps li.now::after {
    background: var(--fern)
}

.ud-steps li.now {
    color: var(--moss);
    font-weight: 800
}

.ud-nl li {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 0;
    border-top: 1px solid var(--line)
}

.ud-nl {
    margin: 1rem 0
}

.ud-av {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ud-d);
    color: var(--ud-on);
    font-weight: 800
}

.ud-nl .ud-c {
    flex: 1;
    min-width: 0
}

.ud-sh {
    width: 84px;
    display: grid;
    gap: .3rem;
    text-align: end
}

.ud-ib {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    color: var(--moss);
    cursor: pointer
}

.ud-ib:hover {
    background: var(--bg2)
}

.ud-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
    padding: 1.4rem;
    border: 1.5px dashed var(--fern);
    border-radius: 20px
}

.ud-form[hidden] {
    display: none
}

.ud-form h3,
.ud-err,
.ud-acts {
    grid-column: 1/-1
}

.ud-form label {
    display: grid;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700
}

.ud-form input,
.ud-form select {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    font: 500 .95rem var(--sans)
}

.ud-err {
    min-height: 1.3rem;
    color: #a33;
    font-size: .88rem
}

.ud-acts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.ud-nlist {
    display: grid;
    gap: .6rem
}

.ud-note {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    text-align: start;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    color: inherit;
    font: inherit;
    cursor: pointer
}

.ud-note .ud-c {
    flex: 1;
    min-width: 0
}

.ud-note.unread {
    border-inline-start: 4px solid var(--lichen)
}

.ud-note.unread b {
    font-weight: 800
}

.ud-note:not(.unread) {
    opacity: .75
}

.ud-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fern)
}

.ud-sup {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
    margin-top: 1.6rem;
    padding: 1.5rem;
    border-radius: 22px;
    background: var(--ud-d);
    color: var(--ud-on)
}

.ud-sup h3 {
    color: var(--lichen)
}

.ud-sup p {
    font-size: .9rem;
    color: rgba(245, 247, 250, .8)
}

.ud-sup a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(245, 247, 250, .3);
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    transition: .2s
}

.ud-sup a:hover {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.ud-go {
    margin-inline-start: auto
}

.ud-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 1.2rem;
    z-index: 90;
    width: max-content;
    max-width: 90vw;
    margin-inline: auto;
    padding: .8rem 1.3rem;
    border-radius: 99px;
    background: var(--ud-d);
    color: var(--ud-on);
    font-size: .9rem;
    opacity: 0;
    translate: 0 20px;
    pointer-events: none;
    transition: .3s
}

.ud-toast.on {
    opacity: 1;
    translate: 0
}

@media(max-width:1100px) {
    .ud-hero-in {
        grid-template-columns: 1fr
    }

    .ud-ring {
        width: min(100%, 230px);
        order: -1;
        margin-inline: 0
    }

    .ud-stats {
        grid-template-columns: 1fr 1fr
    }

    .ud-stats li:nth-child(odd) {
        border-inline-start: 0;
        padding-inline-start: 0
    }

    .ud-stats li:nth-child(n+3) {
        border-top: 1px solid rgba(245, 247, 250, .18)
    }

    .ud-shell {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 0
    }

    .ud-side {
        top: var(--hh);
        z-index: 20;
        margin-inline: calc(-1*clamp(1.2rem, 5vw, 4.5rem));
        padding: .6rem clamp(1.2rem, 5vw, 4.5rem);
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        scrollbar-width: none
    }

    .ud-side ul {
        display: flex;
        gap: .4rem;
        border: 0;
        width: max-content
    }

    .ud-side a {
        margin: 0;
        padding: .5rem .9rem;
        border: 1px solid var(--line);
        border-radius: 99px;
        white-space: nowrap
    }

    .ud-side a[aria-current="true"] {
        background: var(--ud-d);
        color: var(--ud-on);
        border-color: var(--ud-d)
    }

    .ud-p {
        margin-top: 1.6rem;
        scroll-margin-top: 60px
    }

    .ud-main>.ud-p:first-child {
        margin-top: 1.6rem
    }

    .ud-bgrid {
        grid-template-columns: 1fr 1fr
    }

    .ud-bc.big {
        grid-column: 1/-1
    }

    .ud-sup {
        grid-template-columns: 1fr 1fr
    }

    .ud-sup>div {
        grid-column: 1/-1
    }
}

@media(max-width:700px) {
    .ud-row {
        grid-template-columns: auto 1fr;
        gap: .4rem 1rem
    }

    .ud-row>:nth-child(n+3) {
        grid-column: 2;
        justify-self: start
    }

    .ud-bgrid,
    .ud-sup {
        grid-template-columns: 1fr
    }

    .ud-p {
        border-radius: 20px
    }

    .ud-steps li {
        font-size: .68rem
    }

    .ud-cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

/* ===== Admin Dashboard page ===== */
:root {
    --ad-d: #173b56;
    --ad-on: #f5f7fa;
    --ad-card: #ffffff;
    --ad-sh: 0 22px 44px -34px rgba(23, 43, 59, .55)
}

.ad-head {
    padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 5vw, 4.5rem) clamp(1.4rem, 3vw, 2rem);
    background: var(--bg2) repeating-linear-gradient(90deg, transparent 0 59px, rgba(84, 115, 85, .1) 59px 60px);
    border-bottom: 1px solid var(--line)
}

.ad-head-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem
}

.ad-head h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem)
}

.ad-eyebrow {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: .6rem
}

.ad-meta {
    display: grid;
    gap: .1rem;
    text-align: end;
    font-weight: 700;
    color: var(--moss)
}

.ad-meta small {
    font-weight: 500;
    color: var(--mute)
}

.ad-led {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-inline-end: .5rem;
    border-radius: 50%;
    background: var(--lichen);
    box-shadow: 0 0 0 4px rgba(200, 210, 107, .35)
}

.ad-dock {
    position: sticky;
    top: var(--hh);
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--line)
}

.ad-tabs {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding-inline: clamp(1.2rem, 5vw, 4.5rem)
}

.ad-tabs button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .9rem .4rem;
    border: 0;
    background: none;
    color: var(--mute);
    font: 600 .82rem var(--sans);
    cursor: pointer;
    transition: .2s
}

.ad-tabs button i {
    font-size: 1.3rem
}

.ad-tabs button::after {
    content: "";
    position: absolute;
    inset-inline: .6rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--fern);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: .25s
}

.ad-tabs button:hover {
    color: var(--moss);
    background: var(--bg2)
}

.ad-tabs button[aria-selected="true"] {
    color: var(--moss);
    font-weight: 800
}

.ad-tabs button[aria-selected="true"]::after {
    transform: scaleY(1)
}

.ad-bd {
    position: absolute;
    top: .5rem;
    inset-inline-end: calc(50% - 2rem);
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: .35rem;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: var(--fern);
    color: var(--bg);
    font-size: .68rem
}

.ad-wrap {
    padding: 2rem clamp(1.2rem, 5vw, 4.5rem) 5rem
}

.ad-view[hidden] {
    display: none
}

.ad-view>h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0
}

.ad-sub {
    color: var(--mute);
    margin-bottom: 1.4rem
}

.ad-card {
    background: var(--ad-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(1.1rem, 2.5vw, 1.7rem);
    box-shadow: var(--ad-sh)
}

.ad-card>h3 {
    font-size: 1.45rem;
    margin-bottom: .8rem
}

.ad-note {
    font-size: .85rem;
    color: var(--mute);
    margin-bottom: .6rem
}

.ad-two {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.2rem;
    margin-top: 1.2rem
}

.ad-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem
}

.ad-k {
    position: relative;
    display: grid;
    gap: .2rem;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--fern);
    border-radius: 6px;
    background: var(--ad-card);
    box-shadow: var(--ad-sh)
}

.ad-k:first-child {
    background: var(--ad-d);
    color: var(--ad-on);
    border-color: var(--ad-d);
    border-top-color: var(--lichen)
}

.ad-k small {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute)
}

.ad-k:first-child small {
    color: rgba(241, 243, 236, .7)
}

.ad-k b {
    font: 600 clamp(2rem, 3.2vw, 2.8rem)/1.1 var(--serif);
    font-variant-numeric: tabular-nums;
    color: var(--moss)
}

.ad-k:first-child b {
    color: var(--lichen)
}

.ad-k svg {
    width: 100%;
    height: 34px;
    margin-top: .4rem
}

.ad-k svg path {
    fill: none;
    stroke: var(--fern);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ad-k:first-child svg path {
    stroke: var(--lichen)
}

.ad-pill {
    display: inline-block;
    padding: .22rem .7rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--bg2);
    color: var(--moss);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap
}

.ad-pill.ok {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.ad-pill.warn {
    background: #f7ecc8;
    border-color: #f7ecc8;
    color: #6b5410
}

.ad-pill.bad {
    background: #f6e0da;
    border-color: #f6e0da;
    color: #8a2f20
}

.ad-att li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-top: 1px solid var(--line)
}

.ad-att li:first-child {
    border-top: 0
}

.ad-att b {
    font: 600 2rem/1 var(--serif);
    min-width: 2.2rem;
    color: var(--moss)
}

.ad-att span {
    flex: 1;
    font-size: .93rem
}

.ad-tb {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    margin-bottom: 1.1rem
}

.ad-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg)
}

.ad-seg button {
    border: 0;
    background: none;
    padding: .45rem .9rem;
    border-radius: 4px;
    font: 700 .82rem var(--sans);
    color: var(--mute);
    cursor: pointer
}

.ad-seg button[aria-pressed="true"] {
    background: var(--ad-d);
    color: var(--ad-on)
}

.ad-in,
.ad-f input,
.ad-f select,
.ad-f textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font: 500 .93rem var(--sans)
}

.ad-q {
    flex: 1 1 220px;
    max-width: 340px
}

.ad-sm {
    padding: .5rem .9rem;
    font-size: .8rem
}

.ad-rows li {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr .9fr .9fr auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem 0;
    border-top: 1px solid var(--line);
    font-size: .92rem
}

.ad-rows li.ad-rh {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    border-top: 0;
    padding-block: .3rem
}

.ad-rows b {
    display: block;
    color: var(--moss)
}

.ad-rows small,
.ad-card small {
    color: var(--mute);
    font-size: .8rem
}

.ad-acts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.ad-empty {
    padding: 1.4rem 0;
    color: var(--mute)
}

.ad-ms {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start
}

.ad-pick {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr auto;
    gap: .8rem;
    align-items: center;
    padding: .8rem;
    text-align: start;
    border: 1px solid transparent;
    border-bottom-color: var(--line);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer
}

.ad-pick:hover {
    background: var(--bg2)
}

.ad-pick[aria-pressed="true"] {
    background: var(--bg2);
    border-color: var(--fern);
    border-radius: 6px
}

.ad-av {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ad-d);
    color: var(--ad-on);
    font-weight: 800
}

.ad-pick b {
    display: block;
    color: var(--moss)
}

.ad-det {
    position: sticky;
    top: calc(var(--hh) + 5rem)
}

.ad-det h3 {
    margin-bottom: .1rem
}

.ad-dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin: 1rem 0
}

.ad-dl div {
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg)
}

.ad-dl small {
    display: block
}

.ad-sec {
    font: 700 .74rem var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fern);
    margin: 1.1rem 0 .3rem
}

.ad-mini li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-top: 1px solid var(--line);
    font-size: .9rem
}

.ad-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem
}

.ad-plan {
    display: grid;
    gap: .5rem;
    align-content: start
}

.ad-plan .ad-ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--lichen);
    color: #173b56;
    font-size: 1.3rem
}

.ad-plan.off {
    opacity: .65
}

.ad-plan h3 {
    margin: 0
}

.ad-plan dl {
    display: grid;
    gap: .3rem;
    margin-block: .4rem
}

.ad-plan dl div {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    border-top: 1px dashed var(--line);
    padding-top: .3rem
}

.ad-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem
}

.ad-form[hidden] {
    display: none
}

.ad-form h3,
.ad-fw {
    grid-column: 1/-1
}

.ad-f {
    display: grid;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 700
}

.ad-f textarea {
    min-height: 110px;
    resize: vertical
}

.ad-err {
    min-height: 1.2rem;
    color: #a33;
    font-size: .88rem
}

.ad-stat3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 1.2rem
}

.ad-stat3 .ad-k:first-child {
    background: var(--ad-card);
    color: inherit;
    border-color: var(--line);
    border-top-color: var(--fern)
}

.ad-stat3 .ad-k:first-child b {
    color: var(--moss)
}

.ad-stat3 .ad-k:first-child small {
    color: var(--mute)
}

.ad-docs li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 0;
    border-top: 1px solid var(--line)
}

.ad-chk {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: transparent;
    cursor: pointer
}

.ad-chk[aria-pressed="true"] {
    background: var(--fern);
    border-color: var(--fern);
    color: var(--bg)
}

.ad-chs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem
}

.ad-chs .wide {
    grid-column: 1/-1
}

.ad-ch {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.ad-ch text {
    font: 600 10px var(--sans);
    fill: var(--mute)
}

.ad-ch .g {
    stroke: var(--line);
    stroke-dasharray: 3 4
}

.ad-ch .ln {
    fill: none;
    stroke: var(--fern);
    stroke-width: 2.5;
    stroke-linejoin: round
}

.ad-ch .ar {
    fill: var(--fern);
    opacity: .16
}

.ad-ch circle {
    fill: var(--bg);
    stroke: var(--fern);
    stroke-width: 2
}

.ad-s0 {
    fill: var(--lichen)
}

.ad-s1 {
    fill: var(--fern)
}

.ad-s2 {
    fill: var(--moss)
}

.ad-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .82rem;
    margin-top: .5rem
}

.ad-lg i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    margin-inline-end: .4rem
}

.ad-lg .a {
    background: var(--lichen)
}

.ad-lg .b {
    background: var(--fern)
}

.ad-lg .c {
    background: var(--moss)
}

.ad-cnt {
    text-align: end;
    font-size: .78rem;
    color: var(--mute)
}

.ad-toast {
    position: fixed;
    inset-inline: 0;
    bottom: 1.2rem;
    z-index: 90;
    width: max-content;
    max-width: 90vw;
    margin-inline: auto;
    padding: .8rem 1.3rem;
    border-radius: 6px;
    background: var(--ad-d);
    color: var(--ad-on);
    font-size: .9rem;
    opacity: 0;
    translate: 0 20px;
    pointer-events: none;
    transition: .3s
}

.ad-toast.on {
    opacity: 1;
    translate: 0
}

@media(max-width:1100px) {
    .ad-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none
    }

    .ad-tabs button {
        flex: 0 0 auto;
        min-width: 92px
    }

    .ad-bd {
        inset-inline-end: .7rem
    }

    .ad-kpis {
        grid-template-columns: 1fr 1fr
    }

    .ad-two,
    .ad-ms,
    .ad-chs {
        grid-template-columns: 1fr
    }

    .ad-det {
        position: static
    }

    .ad-meta {
        text-align: start
    }
}

@media(max-width:700px) {

    .ad-kpis,
    .ad-stat3 {
        grid-template-columns: 1fr
    }

    .ad-rows li.ad-rh {
        display: none
    }

    .ad-rows li {
        grid-template-columns: 1fr auto;
        gap: .3rem .8rem
    }

    .ad-rows li>:nth-child(n+3) {
        grid-column: 1/-1
    }

    .ad-dl {
        grid-template-columns: 1fr
    }

    .ad-q {
        max-width: none
    }
}

/* ===== 404 page ===== */
.nf {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--hh) - 2.4rem);
    padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4.5rem);
    text-align: center;
    background: radial-gradient(circle at 50% 40%, rgba(200, 210, 107, .3), transparent 46%), var(--bg)
}

.nf::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(1100px, 160vw);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 46px, rgba(84, 115, 85, .16) 46px 47px);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    pointer-events: none
}

.nf-in {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 1.2rem;
    max-width: 720px
}

.nf-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--bg2);
    color: var(--fern);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase
}

.nf-num {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .03em;
    font: 700 clamp(6.2rem, 25vw, 17rem)/.9 var(--serif);
    letter-spacing: -.03em;
    color: var(--moss);
    user-select: none
}

.nf-num .o {
    color: transparent;
    -webkit-text-stroke: 2px var(--fern)
}

.nf-num svg {
    height: .8em;
    width: auto;
    overflow: visible;
    transform: translate(calc(var(--mx, 0)*6px), calc(var(--my, 0)*6px));
    transition: transform .25s ease-out
}

.nf-orbit {
    fill: none;
    stroke: var(--fern);
    stroke-width: 2;
    stroke-dasharray: 3 11;
    stroke-linecap: round;
    transform-origin: 80px 95px;
    animation: nf-spin 30s linear infinite
}

.nf-shield {
    fill: var(--lichen);
    stroke: var(--moss);
    stroke-width: 5;
    stroke-linejoin: round;
    filter: drop-shadow(0 16px 20px rgba(23, 43, 59, .28))
}

.nf-shine {
    fill: none;
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 4;
    stroke-linecap: round
}

.nf-q {
    font: 700 100px var(--serif);
    fill: #173b56;
    transform-origin: 80px 100px;
    animation: nf-wob 3.6s ease-in-out infinite
}

.nf h1 {
    font-size: clamp(2.1rem, 5.4vw, 3.8rem)
}

.nf-lead {
    color: var(--mute);
    font-size: clamp(1rem, 2vw, 1.15rem)
}

.nf-path {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .4rem .9rem;
    border: 1px dashed var(--fern);
    border-radius: 6px;
    font-size: .85rem;
    color: var(--mute)
}

.nf-path[hidden] {
    display: none
}

.nf-path code {
    font-family: ui-monospace, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr
}

.nf-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: .4rem
}

.nf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .88rem
}

.nf-links span {
    color: var(--mute);
    margin-inline-end: .3rem
}

.nf-links a {
    padding: .35rem .9rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    color: var(--moss);
    transition: .2s
}

.nf-links a:hover {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.nf-lf {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 0;
    font-size: var(--s);
    color: var(--fern);
    opacity: .55;
    transform: translate(calc(var(--mx, 0)*var(--k)*1px), calc(var(--my, 0)*var(--k)*1px));
    pointer-events: none
}

.nf-lf::before {
    display: inline-block;
    animation: nf-fl var(--d) ease-in-out infinite
}

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

@keyframes nf-wob {

    0%,
    100% {
        transform: rotate(-6deg)
    }

    50% {
        transform: rotate(6deg) translateY(-3px)
    }
}

@keyframes nf-fl {

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

    50% {
        transform: translateY(-16px) rotate(24deg)
    }
}

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

    .nf-orbit,
    .nf-q,
    .nf-lf::before {
        animation: none
    }

    .nf-num svg {
        transition: none
    }
}

@media(max-width:1100px) {
    .nf {
        min-height: 70vh
    }
}

@media(max-width:600px) {
    .nf-num .o {
        -webkit-text-stroke-width: 1.5px
    }

    .nf-cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .nf-links span {
        flex: 1 1 100%;
        text-align: center;
        margin: 0 0 .2rem
    }

    .nf-lf:nth-of-type(n+5) {
        display: none
    }
}

/* ===== Login page ===== */
.si {
    --si-band: #173b56;
    --si-on: #f5f7fa;
    --si-paper: #ffffff;
    --si-stub: #e8eef3;
    --si-acc: #267a78;
    --si-btn: #173b56;
    --si-btn-on: #f5f7fa;
    --si-sweep: #d6ad58;
    --si-sweep-on: #172b3b;
    --si-knob: #d6ad58;
    --si-err: #a33;
    --si-ok: #267a78;
    --si-cut: 3.6rem;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 40rem;
    min-height: max(40rem, calc(100vh - var(--hh) - 2.4rem));
    background: var(--bg);
    overflow: hidden
}

/* welcome band with an angled edge */
.si-top {
    position: relative;
    padding: clamp(2.8rem, 6vw, 4.6rem) clamp(1rem, 4vw, 3rem) calc(var(--si-cut) + 7.2rem);
    background: var(--si-band);
    background-image: radial-gradient(55% 90% at 50% 0, rgba(200, 210, 107, .2), transparent 72%), repeating-linear-gradient(118deg, rgba(245, 247, 250, .055) 0 1px, transparent 1px 26px);
    color: var(--si-on);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--si-cut)), 0 100%)
}

.si-top::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--si-cut);
    background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(200, 210, 107, .75) 50%, transparent calc(50% + 1px));
    pointer-events: none
}

.si-welcome {
    position: relative;
    max-width: 40rem;
    margin-inline: auto;
    text-align: center
}

.si-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lichen)
}

.si-kicker::before,
.si-kicker::after {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: currentColor;
    opacity: .7
}

.si-welcome h1 {
    font-size: clamp(2.9rem, 7.4vw, 5rem);
    color: var(--si-on)
}

.si-welcome h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--lichen)
}

.si-lede {
    max-width: 34rem;
    margin: 1.1rem auto 0;
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
    color: var(--si-on);
    opacity: .86
}

/* form paper */
.si-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 33rem;
    margin: calc(-1 * (var(--si-cut) + 4.2rem)) auto 0;
    padding: 0 1rem clamp(2.6rem, 6vw, 4.5rem)
}

.si-paper {
    position: relative;
    background: var(--si-paper);
    border: 1px solid var(--line);
    box-shadow: 0 36px 60px -40px rgba(23, 43, 59, .6)
}

.si-paper::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 5px;
    background: linear-gradient(90deg, var(--moss), var(--fern), var(--lichen))
}

.si-seal {
    position: absolute;
    inset-block-start: -2.4rem;
    inset-inline-end: -1.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 5.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--si-band);
    color: var(--lichen);
    box-shadow: 0 0 0 4px var(--si-paper), 0 14px 26px -12px rgba(0, 0, 0, .55)
}

.si-seal>svg:not(.brand-mark) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    direction: ltr;
    fill: currentColor;
    font: 800 8.6px var(--sans);
    animation: si-turn 28s linear infinite
}

.si-seal .brand-mark {
    position: relative;
    width: 1.55rem;
    height: 1.55rem
}

.si-body {
    padding: clamp(1.9rem, 4vw, 2.7rem) clamp(1.3rem, 4vw, 2.5rem) clamp(1.6rem, 3vw, 2.2rem)
}

.si-view[hidden] {
    display: none
}

.si-view h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.2rem);
    line-height: 1.15
}

.si-sub {
    margin: .35rem 0 1.9rem;
    font-size: .92rem;
    color: var(--mute)
}

/* ruled fields with floating labels */
.si-f {
    margin-bottom: 1.3rem
}

.si-box {
    position: relative
}

.si-box input {
    display: block;
    width: 100%;
    padding: 1.55rem 0 .5rem;
    padding-inline-end: 2.8rem;
    border: 0;
    border-bottom: 1.5px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 500 1rem/1.4 var(--sans);
    outline: 0;
    transition: border-color .25s
}

.si-box input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--line)
}

.si-box label {
    position: absolute;
    inset-inline-start: 0;
    top: 1.05rem;
    display: block;
    color: var(--mute);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .22s ease, color .22s ease
}

.si-box input:focus+label,
.si-box input:not(:placeholder-shown)+label {
    transform: translateY(-1.05rem) scale(.78);
    color: var(--si-acc);
    font-weight: 700
}

.si-box::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--si-acc);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease
}

.si-box:focus-within::after {
    transform: scaleX(1)
}

.si-fi {
    position: absolute;
    inset-inline-end: 0;
    bottom: .6rem;
    color: var(--fern);
    font-size: 1.1rem;
    pointer-events: none
}

.si-eye {
    position: absolute;
    inset-inline-end: -.4rem;
    bottom: .05rem;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fern);
    font-size: 1.15rem;
    cursor: pointer;
    transition: color .2s
}

.si-eye:hover {
    color: var(--moss)
}

.si-box input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    box-shadow: 0 0 0 40rem var(--si-paper) inset;
    transition: background-color 9999s
}

.si-box[data-bad] input,
.si-box[data-bad] input:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--si-err)
}

.si-box[data-bad]::after {
    background: var(--si-err);
    transform: scaleX(1)
}

.si-box[data-bad] label {
    color: var(--si-err)
}

.si-err,
.si-caps {
    margin-top: .4rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4
}

.si-err {
    color: var(--si-err)
}

.si-err:empty {
    display: none
}

.si-caps {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--fern)
}

.si-caps[hidden] {
    display: none
}

/* remember me switch + forgot link */
.si-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem 1.2rem;
    margin: 1.7rem 0 1.5rem
}

.si-sw {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink)
}

.si-sw input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none
}

.si-track {
    position: relative;
    flex: none;
    width: 2.7rem;
    height: 1.45rem;
    border: 1.5px solid var(--fern);
    border-radius: 2px;
    background: transparent;
    transition: background .25s, border-color .25s
}

.si-track i {
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 2px;
    width: 1.05rem;
    background: var(--fern);
    transition: inset-inline-start .25s ease, background .25s
}

.si-sw input:checked+.si-track {
    background: var(--moss);
    border-color: var(--moss)
}

.si-sw input:checked+.si-track i {
    inset-inline-start: calc(100% - 1.05rem - 2px);
    background: var(--si-knob)
}

.si-sw input:focus-visible+.si-track {
    outline: 3px solid var(--fern);
    outline-offset: 3px
}

.si-link {
    font-size: .9rem;
    font-weight: 700;
    color: var(--moss);
    text-decoration: none;
    border-bottom: 1.5px solid var(--lichen);
    transition: color .2s, border-color .2s
}

.si-link:hover {
    color: var(--fern);
    border-color: var(--fern)
}

/* login button with a sweeping fill */
.si-go {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    padding: 1rem 1.4rem;
    border: 2px solid var(--si-btn);
    border-radius: 2px;
    background: var(--si-btn);
    color: var(--si-btn-on);
    font: 800 .95rem var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s, border-color .3s
}

.si-go::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--si-sweep);
    transform: translateX(-101%);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1)
}

.si-go:hover,
.si-go:focus-visible {
    color: var(--si-sweep-on);
    border-color: var(--si-sweep)
}

.si-go:hover::before,
.si-go:focus-visible::before {
    transform: none
}

.si-go i {
    display: inline-block;
    transition: transform .25s
}

.si-go:hover i {
    transform: translateX(5px)
}

.si-go[aria-busy="true"] {
    cursor: progress;
    opacity: .85
}

.si-go[aria-busy="true"] i {
    display: none
}

.si-go[aria-busy="true"]::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: si-spin .7s linear infinite
}

.si-msg {
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--mute)
}

.si-msg:empty {
    display: none
}

.si-msg[data-s] {
    padding: .65rem .9rem;
    border-inline-start: 3px solid currentColor;
    background: var(--bg)
}

.si-msg[data-s="ok"] {
    color: var(--si-ok)
}

.si-msg[data-s="bad"] {
    color: var(--si-err)
}

.si-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--moss);
    font: 700 .88rem var(--sans);
    cursor: pointer
}

.si-back:hover {
    color: var(--fern)
}

/* register: tear-off stub */
.si-stub {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.4rem;
    padding: 1.5rem clamp(1.3rem, 4vw, 2.5rem) 1.7rem;
    border-top: 2px dashed var(--line);
    background: var(--si-stub)
}

.si-stub::before,
.si-stub::after {
    content: "";
    position: absolute;
    top: -.9rem;
    width: 1.8rem;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg)
}

.si-stub::before {
    left: -.9rem;
    clip-path: inset(0 0 0 50%)
}

.si-stub::after {
    right: -.9rem;
    clip-path: inset(0 50% 0 0)
}

.si-stub p {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mute)
}

.si-stub b {
    display: block;
    font: 600 1.4rem/1.15 var(--serif);
    color: var(--moss)
}

.si-reg {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.2rem;
    border: 2px solid var(--moss);
    border-radius: 2px;
    color: var(--moss);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s, color .25s
}

.si-reg:hover {
    background: var(--moss);
    color: var(--on-moss)
}

.si-reg i {
    display: inline-block;
    transition: transform .25s
}

.si-reg:hover i {
    transform: translateX(4px)
}

.icon-btn[aria-current="page"] {
    background: var(--moss);
    color: var(--on-moss)
}

@keyframes si-turn {
    to {
        transform: rotate(360deg)
    }
}

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

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

    .si-seal>svg:not(.brand-mark),
    .si-go[aria-busy="true"]::after {
        animation: none
    }

    .si-go::before,
    .si-box::after,
    .si-box label,
    .si-track i {
        transition: none
    }
}

/* tablet */
@media(max-width:1100px) {
    .si-wrap {
        max-width: 35rem
    }
}

/* mobile */
@media(max-width:600px) {
    .si {
        --si-cut: 2.2rem;
        min-height: 0
    }

    .si-top {
        padding-top: 2.2rem
    }

    .si-kicker {
        font-size: .68rem;
        letter-spacing: .14em
    }

    .si-kicker::before,
    .si-kicker::after {
        width: 1rem
    }

    .si-wrap {
        padding-inline: .8rem
    }

    .si-seal {
        width: 4.4rem;
        inset-block-start: -1.9rem;
        inset-inline-end: -.3rem
    }

    .si-seal .brand-mark {
        width: 1.25rem;
        height: 1.25rem
    }

    .si-row {
        flex-direction: column;
        align-items: flex-start
    }

    .si-stub {
        flex-direction: column;
        align-items: stretch
    }

    .si-reg {
        justify-content: center
    }
}

/* ===== Register page ===== */
.rg {
    --rg-deep: #173b56;
    --rg-on: #f5f7fa;
    --rg-acc: #d6ad58;
    --rg-ok: #267a78;
    --rg-err: #a33;
    --rg-field: #ffffff;
    --rg-sel: #173b56;
    --rg-sel-on: #f5f7fa;
    --rg-tint: #eef4f4;
    display: grid;
    grid-template-columns: minmax(21rem, 29rem) minmax(0, 1fr);
    min-height: max(42rem, calc(100vh - var(--hh) - 2.4rem));
    background: var(--bg);
    padding: 0
}

.rg [hidden] {
    display: none !important
}

/* side panel */
.rg-side {
    position: relative;
    isolation: isolate;
    background: var(--rg-deep);
    color: var(--rg-on);
    padding: clamp(2.4rem, 4vw, 3.8rem) clamp(1.4rem, 3vw, 2.8rem)
}

.rg-side::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(110% 55% at 0 0, rgba(214, 173, 88, .22), transparent 62%), repeating-radial-gradient(circle at 0 100%, transparent 0 38px, rgba(245, 247, 250, .06) 38px 39px)
}

.rg-side-in {
    position: sticky;
    top: calc(var(--hh) + 1.6rem)
}

.rg-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--rg-acc)
}

.rg-kicker::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: currentColor
}

.rg-intro h1 {
    font-size: clamp(2.4rem, 3.6vw, 3.4rem);
    color: var(--rg-on)
}

.rg-intro h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--rg-acc)
}

.rg-lede {
    margin-top: 1rem;
    opacity: .86
}

/* vertical step rail */
.rg-rail {
    position: relative;
    display: grid;
    margin-top: 2.2rem
}

.rg-rail li {
    position: relative
}

.rg-rail li:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.35rem;
    margin-inline-start: -1px;
    top: 3.15rem;
    bottom: -.4rem;
    width: 2px;
    background: rgba(245, 247, 250, .24);
    transition: background .3s
}

.rg-rail li.done:not(:last-child)::before {
    background: var(--rg-acc)
}

.rg-rail button {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .4rem 0 .9rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer
}

.rg-rail button:disabled {
    cursor: default
}

.rg-rail button:focus-visible {
    outline-color: var(--rg-acc)
}

.rg-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 2.7rem;
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(245, 247, 250, .38);
    background: var(--rg-deep);
    font-weight: 800;
    transition: background .3s, border-color .3s, color .3s
}

.rg-dot i {
    display: none
}

.rg-rail li.done .rg-dot {
    border-color: var(--rg-acc);
    color: var(--rg-acc)
}

.rg-rail li.done .rg-dot b {
    display: none
}

.rg-rail li.done .rg-dot i {
    display: block
}

.rg-rail li.on .rg-dot {
    background: var(--rg-acc);
    border-color: var(--rg-acc);
    color: #173b56
}

.rg-rt b {
    display: block;
    font-size: 1.02rem
}

.rg-rt small {
    display: block;
    font-size: .8rem;
    opacity: .72
}

.rg-rail li:not(.on):not(.done) .rg-rt {
    opacity: .7
}

/* live member card */
.rg-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.1rem;
    max-width: 23rem;
    min-height: 12.8rem;
    margin: 1.8rem 0 0;
    padding: 1.25rem 1.4rem;
    border-radius: 1rem;
    color: #f5f7fa;
    background: linear-gradient(135deg, #2f7f94 0%, #1d5870 48%, #173b56 100%);
    border: 1px solid rgba(245, 247, 250, .24);
    box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .65)
}

.rg-card::before {
    content: "";
    position: absolute;
    inset-block-end: -55%;
    inset-inline-end: -20%;
    z-index: -1;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(214, 173, 88, .45);
    box-shadow: 0 0 0 22px rgba(214, 173, 88, .07), 0 0 0 44px rgba(214, 173, 88, .05)
}

.rg-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: rg-shine 7s ease-in-out infinite
}

.rg-card-top {
    display: flex;
    align-items: center;
    gap: .6rem
}

.rg-card .brand-mark {
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    color: var(--rg-acc)
}

.rg-card-top span b {
    display: block;
    font: 700 1.15rem/1 var(--serif)
}

.rg-card-top span small {
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8
}

.rg-chip {
    margin-inline-start: auto;
    width: 2.3rem;
    height: 1.7rem;
    border-radius: .35rem;
    background: repeating-linear-gradient(90deg, transparent 0 .5rem, rgba(23, 59, 86, .35) .5rem calc(.5rem + 1px)), linear-gradient(135deg, #efd28a, #b88f3c)
}

.rg-card-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 1.75rem/1.15 var(--serif);
    color: #fff
}

.rg-card [data-empty] {
    opacity: .5
}

.rg-card-d {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: .8rem;
    margin: 0
}

.rg-card-d div {
    min-width: 0
}

.rg-card-d dt {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rg-acc)
}

.rg-card-d dd {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem
}

.rg-card-no {
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--rg-acc)
}

.rg-trust {
    display: grid;
    gap: .5rem;
    margin-top: 1.8rem;
    font-size: .86rem;
    opacity: .86
}

.rg-trust i {
    color: var(--rg-acc);
    margin-inline-end: .4rem
}

/* form area */
.rg-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.2rem, 5vw, 4.5rem) clamp(2.6rem, 6vw, 5rem)
}

.rg-form,
.rg-done {
    width: 100%;
    max-width: 45rem
}

.rg-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1.6rem;
    font-size: .88rem;
    color: var(--mute)
}

.rg-stepno {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fern)
}

.rg-have a {
    color: var(--moss);
    font-weight: 700;
    text-underline-offset: 3px
}

.rg-have a:hover {
    color: var(--fern)
}

.rg-bar {
    display: none;
    flex-basis: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--line)
}

.rg-bar i {
    display: block;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, var(--fern), var(--lichen));
    transition: width .4s
}

.rg-step {
    position: relative;
    isolation: isolate;
    min-width: 0
}

.rg-step::before {
    content: attr(data-n);
    position: absolute;
    inset-block-start: -1.4rem;
    inset-inline-end: 0;
    z-index: -1;
    font: 600 clamp(5.5rem, 13vw, 9rem)/1 var(--serif);
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line);
    pointer-events: none
}

.rg.rg-js .rg-step:not(.on) {
    display: none
}

.rg-eyebrow {
    margin-bottom: .7rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fern)
}

.rg-step h2,
.rg-done h2 {
    font-size: clamp(2.1rem, 4vw, 3rem);
    outline: 0
}

.rg-sub {
    margin: .7rem 0 1.9rem;
    color: var(--mute)
}

.rg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem
}

.rg-f {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0
}

.rg-f.wide {
    grid-column: 1/-1
}

.rg-f>label:not(.rg-chk),
.rg-lab {
    font-size: .86rem;
    font-weight: 700;
    color: var(--moss)
}

.rg-lab em,
.rg-chk em {
    font-style: normal;
    font-weight: 500;
    color: var(--mute)
}

.rg-in {
    display: flex;
    align-items: stretch;
    background: var(--rg-field);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    transition: border-color .2s, box-shadow .2s
}

.rg-in:focus-within {
    border-color: var(--fern);
    box-shadow: 0 0 0 4px rgba(38, 122, 120, .16)
}

.rg-ic {
    display: grid;
    place-items: center;
    flex: 0 0 3rem;
    color: var(--fern);
    font-size: 1.1rem;
    border-inline-end: 1px solid var(--line)
}

.rg-cc {
    display: grid;
    place-items: center;
    padding-inline: .9rem .1rem;
    font-weight: 700;
    color: var(--moss);
    direction: ltr;
    unicode-bidi: isolate
}

.rg-in input {
    flex: 1;
    min-width: 0;
    padding: .95rem 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    border-radius: inherit;
    font: 500 1rem var(--sans);
    color: var(--ink)
}

.rg-in input::placeholder {
    color: var(--mute);
    opacity: .7
}

.rg-cc+input {
    padding-inline-start: .5rem
}

.rg-tick {
    display: none;
    align-self: center;
    margin-inline-end: .9rem;
    color: var(--rg-ok)
}

.rg-f[data-ok] .rg-tick {
    display: block
}

.rg-f[data-ok] .rg-in {
    border-color: var(--rg-ok)
}

.rg-f[data-bad] .rg-in {
    border-color: var(--rg-err)
}

.rg-eye {
    flex: 0 0 3rem;
    border: 0;
    background: none;
    color: var(--mute);
    font-size: 1.1rem;
    cursor: pointer
}

.rg-eye:hover {
    color: var(--fern)
}

.rg-hint {
    font-size: .8rem;
    color: var(--mute)
}

.rg-err {
    font-size: .82rem;
    font-weight: 600;
    color: var(--rg-err)
}

.rg-err:empty {
    display: none
}

/* password strength */
.rg-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: .4rem;
    align-items: center
}

.rg-meter span {
    height: 5px;
    border-radius: 3px;
    background: var(--line);
    transition: background .25s
}

.rg-meter b {
    min-width: 7rem;
    margin-inline-start: .5rem;
    font-size: .78rem;
    color: var(--mute)
}

.rg-meter[data-lv="1"] span:nth-child(-n+1) {
    background: var(--rg-err)
}

.rg-meter[data-lv="2"] span:nth-child(-n+2) {
    background: var(--lichen)
}

.rg-meter[data-lv="3"] span:nth-child(-n+3) {
    background: var(--fern)
}

.rg-meter[data-lv="4"] span:nth-child(-n+4) {
    background: var(--rg-ok)
}

.rg-rules {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.rg-rules li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: .78rem;
    color: var(--mute);
    transition: .2s
}

.rg-rules li.ok {
    color: var(--rg-ok);
    border-color: var(--rg-ok);
    background: var(--rg-tint)
}

/* choices */
.rg-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem
}

.rg-seg label,
.rg-tiles label {
    position: relative;
    cursor: pointer
}

.rg-seg input,
.rg-tiles input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.rg-seg span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: .5rem .4rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    background: var(--rg-field);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    transition: .2s
}

.rg-seg label:hover span,
.rg-tiles label:hover span {
    border-color: var(--fern)
}

.rg-seg input:checked+span {
    background: var(--rg-sel);
    color: var(--rg-sel-on);
    border-color: var(--rg-sel)
}

.rg-seg input:focus-visible+span,
.rg-tiles input:focus-visible+span {
    outline: 3px solid var(--fern);
    outline-offset: 3px
}

.rg-f[data-bad] .rg-seg span {
    border-color: var(--rg-err)
}

.rg-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem
}

.rg-tiles span {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: .8rem;
    align-items: center;
    padding: .8rem 1rem;
    background: var(--rg-field);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    transition: .2s
}

.rg-tiles span>i:first-child {
    grid-column: 1;
    grid-row: 1/3;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--rg-tint);
    color: var(--fern);
    font-size: 1.2rem
}

.rg-tiles b {
    grid-column: 2;
    font-size: .93rem
}

.rg-tiles small {
    grid-column: 2;
    font-size: .78rem;
    color: var(--mute)
}

.rg-tiles .rg-tk {
    grid-column: 3;
    grid-row: 1/3;
    color: var(--rg-ok);
    opacity: 0;
    transform: scale(.5);
    transition: .2s
}

.rg-tiles input:checked+span {
    border-color: var(--lichen);
    background: var(--rg-tint)
}

.rg-tiles input:checked+span .rg-tk {
    opacity: 1;
    transform: none
}

/* terms */
.rg-glance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1.4rem
}

.rg-glance li {
    display: grid;
    gap: .25rem;
    align-content: start;
    padding: 1rem;
    background: var(--rg-tint);
    border: 1px solid var(--line);
    border-top: 3px solid var(--lichen)
}

.rg-glance i {
    font-size: 1.3rem;
    color: var(--fern)
}

.rg-glance b {
    font-size: .92rem;
    color: var(--moss)
}

.rg-glance small {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--mute)
}

.rg-tbox {
    max-height: 13rem;
    overflow: auto;
    padding: 1rem 1.2rem;
    background: var(--rg-field);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    font-size: .9rem;
    color: var(--mute)
}

.rg-tbox ol {
    display: grid;
    gap: .7rem;
    padding-inline-start: 1.2rem;
    list-style: decimal
}

.rg-tbox b {
    color: var(--moss)
}

.rg-checks {
    display: grid;
    gap: 1rem;
    margin-top: 1.4rem
}

.rg-chk {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    align-items: start;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1.5
}

.rg-chk input {
    position: absolute;
    inset-block-start: .1rem;
    inset-inline-start: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.rg-box {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
    background: var(--rg-field);
    border: 2px solid var(--moss);
    border-radius: 3px;
    color: transparent;
    transition: .2s
}

.rg-chk input:checked+.rg-box {
    background: var(--rg-sel);
    border-color: var(--rg-sel);
    color: var(--rg-sel-on)
}

.rg-chk input:focus-visible+.rg-box {
    outline: 3px solid var(--fern);
    outline-offset: 3px
}

.rg-f[data-bad] .rg-box {
    border-color: var(--rg-err)
}

.rg-chk a {
    color: var(--fern);
    font-weight: 700;
    text-underline-offset: 3px
}

/* review + CTA */
.rg-sum {
    margin: 0;
    border-top: 2px solid var(--moss)
}

.rg-sum>div {
    display: grid;
    grid-template-columns: 8.5rem 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line)
}

.rg-sum dt {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute)
}

.rg-sum dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere
}

.rg-edit {
    padding: .2rem 0;
    border: 0;
    background: none;
    color: var(--fern);
    font: 700 .85rem var(--sans);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px
}

.rg-edit:hover {
    color: var(--moss)
}

.rg-next-note {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: 1.2rem;
    font-size: .9rem;
    color: var(--mute)
}

.rg-next-note i {
    color: var(--fern);
    font-size: 1.1rem
}

.rg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    margin-top: 2rem
}

.rg-nav .rg-next {
    margin-inline-start: auto
}

.rg-cta {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.8rem
}

.rg-go {
    justify-content: center;
    padding: 1.05rem 1.8rem;
    font-size: 1.02rem
}

.rg-go i {
    transition: transform .25s
}

.rg-go:hover i {
    transform: translateX(4px)
}

.rg-go[aria-busy="true"] {
    opacity: .85;
    pointer-events: none
}

.rg-go[aria-busy="true"]::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: rg-spin .7s linear infinite
}

.rg-msg {
    max-width: none;
    font-size: .9rem;
    font-weight: 600
}

.rg-msg:empty {
    display: none
}

.rg-msg[data-s="bad"] {
    color: var(--rg-err)
}

.rg-msg[data-s="ok"] {
    color: var(--rg-ok)
}

.rg-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    padding: 1rem 1.2rem;
    background: var(--rg-tint);
    border: 1px solid var(--line);
    font-weight: 600
}

.rg-login .btn {
    padding: .6rem 1.1rem
}

.rg-backlink {
    justify-self: center
}

/* success */
.rg-done {
    position: relative
}

.rg-seal {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.4rem;
    border-radius: 50%;
    background: var(--rg-deep);
    color: var(--rg-acc);
    font-size: 2rem;
    box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--rg-acc)
}

.rg-done h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--fern)
}

.rg-done .rg-sub b {
    overflow-wrap: anywhere
}

.rg-id {
    display: inline-grid;
    gap: .2rem;
    padding: 1rem 1.6rem;
    border: 2px dashed var(--lichen);
    background: var(--rg-tint)
}

.rg-id span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute)
}

.rg-id b {
    font: 600 2rem/1 var(--serif);
    letter-spacing: .1em;
    color: var(--moss);
    direction: ltr;
    unicode-bidi: isolate
}

.rg:not(.rg-js) .rg-next,
.rg:not(.rg-js) .rg-back,
.rg:not(.rg-js) .rg-backlink,
.rg:not(.rg-js) .rg-edit {
    display: none
}

@keyframes rg-shine {

    0%,
    60% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

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

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

    .rg-card::after,
    .rg-go[aria-busy="true"]::after {
        animation: none
    }

    .rg-dot,
    .rg-in,
    .rg-bar i,
    .rg-meter span,
    .rg-tiles span,
    .rg-seg span,
    .rg-box {
        transition: none
    }
}

@media(max-height:760px) and (min-width:1101px) {
    .rg-side-in {
        position: static
    }
}

/* tablet */
@media(max-width:1100px) {
    .rg {
        grid-template-columns: minmax(0, 1fr)
    }

    .rg-side {
        padding: 2.4rem clamp(1.2rem, 5vw, 3rem) 1.8rem
    }

    .rg-side-in {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: 1.6rem 2.5rem;
        align-items: center
    }

    .rg-intro {
        grid-column: 1;
        grid-row: 1
    }

    .rg-card {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0;
        justify-self: end
    }

    .rg-rail {
        grid-column: 1/-1;
        grid-row: 2;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0
    }

    .rg-rail li:not(:last-child)::before {
        inset-inline-start: 50%;
        margin-inline-start: 0;
        top: 1.75rem;
        bottom: auto;
        width: 100%;
        height: 2px
    }

    .rg-rail button {
        flex-direction: column;
        gap: .5rem;
        padding: .4rem .2rem .2rem;
        text-align: center
    }

    .rg-rt small,
    .rg-trust {
        display: none
    }

    .rg-rt b {
        font-size: .88rem
    }

    .rg-bar {
        display: block
    }

    .rg-main {
        padding-top: 2rem
    }
}

/* mobile */
@media(max-width:600px) {
    .rg-side {
        padding: 1.8rem 1.1rem 1.4rem
    }

    .rg-side-in {
        display: block
    }

    .rg-card,
    .rg-lede {
        display: none
    }

    .rg-intro h1 {
        font-size: 2.3rem
    }

    .rg-rail {
        margin-top: 1.4rem
    }

    .rg-dot {
        flex-basis: 2.3rem;
        width: 2.3rem;
        height: 2.3rem;
        font-size: .88rem
    }

    .rg-rail li:not(:last-child)::before {
        top: 1.55rem
    }

    .rg-rt b {
        font-size: .76rem
    }

    .rg-main {
        padding: 1.6rem 1.1rem 2.6rem
    }

    .rg-grid,
    .rg-tiles,
    .rg-glance {
        grid-template-columns: minmax(0, 1fr)
    }

    .rg-seg {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .rg-step::before {
        font-size: 4.6rem;
        inset-block-start: -.6rem
    }

    .rg-meter b {
        min-width: 0
    }

    .rg-sum>div {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .2rem 1rem
    }

    .rg-sum dt {
        grid-column: 1/-1
    }

    .rg-nav {
        flex-direction: column-reverse;
        align-items: stretch
    }

    .rg-nav .btn,
    .rg-login .btn {
        justify-content: center;
        width: 100%
    }

    .rg-nav .rg-next {
        margin-inline-start: 0
    }

    .rg-login {
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }

    .rg-id b {
        font-size: 1.6rem
    }
}

/* ===== Coming Soon page ===== */
.cs {
    --cs-bg: #173b56;
    --cs-on: #f5f7fa;
    --cs-mute: #b9c9d5;
    --cs-acc: #d6ad58;
    --cs-teal: #7fc4bb;
    --cs-line: rgba(245, 247, 250, .2);
    --cs-card: rgba(245, 247, 250, .07);
    --cs-err: #f3b3a8;
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 0;
    min-height: max(42rem, calc(100vh - var(--hh) - 2.4rem));
    background: var(--cs-bg);
    color: var(--cs-on)
}

.cs::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(48% 62% at 78% 46%, rgba(214, 173, 88, .2), transparent 70%), repeating-linear-gradient(90deg, transparent 0 79px, rgba(245, 247, 250, .045) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(245, 247, 250, .045) 79px 80px)
}

.cs::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: -1;
    height: 38%;
    background: linear-gradient(to top, rgba(8, 24, 38, .55), transparent);
    pointer-events: none
}

.cs-in {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.2rem, 5vw, 4.5rem)
}

.cs-copy {
    min-width: 0
}

.cs-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.8rem
}

.cs-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--cs-on);
    text-decoration: none
}

.cs-logo .brand-mark {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    color: var(--cs-acc)
}

.cs-logo b {
    display: block;
    font: 700 1.9rem/1 var(--serif)
}

.cs-logo small {
    font-size: .7rem;
    color: var(--cs-mute)
}

.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 1rem;
    border: 1px solid var(--cs-line);
    border-radius: 99px;
    background: var(--cs-card);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-acc)
}

.cs-pill::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    animation: cs-pulse 1.8s ease-out infinite
}

.cs h1 {
    font-size: clamp(2.8rem, 5.6vw, 4.9rem);
    line-height: 1.02;
    color: var(--cs-on)
}

.cs h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--cs-acc)
}

.cs-lead {
    max-width: 34rem;
    margin-top: 1.2rem;
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    color: var(--cs-mute)
}

.cs-date {
    margin: 2rem 0 .8rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-teal)
}

.cs-date time {
    color: var(--cs-on)
}

/* countdown */
.cs-clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.45rem, 1.6vw, .9rem);
    max-width: 34rem;
    direction: ltr
}

.cs-unit {
    position: relative;
    isolation: isolate;
    padding: 1rem .3rem .8rem;
    text-align: center;
    background: var(--cs-card);
    border: 1px solid var(--cs-line);
    border-radius: 10px;
    overflow: hidden
}

.cs-unit::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 1rem);
    z-index: -1;
    height: 1px;
    background: var(--cs-line)
}

.cs-unit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 0 calc(50% - 1rem), var(--cs-bg) 0 5px, transparent 5.5px), radial-gradient(circle at 100% calc(50% - 1rem), var(--cs-bg) 0 5px, transparent 5.5px)
}

.cs-unit b {
    display: block;
    font: 600 clamp(2.1rem, 6vw, 3.5rem)/1 var(--serif);
    font-variant-numeric: tabular-nums;
    color: var(--cs-on)
}

.cs-unit b.tick {
    animation: cs-tick .45s ease-out
}

.cs-unit small {
    display: block;
    margin-top: .45rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-acc)
}

/* notify form */
.cs-form {
    position: relative;
    max-width: 34rem;
    margin-top: 1.8rem
}

.cs-row {
    display: flex;
    gap: .5rem;
    padding: .4rem;
    background: var(--cs-card);
    border: 1.5px solid var(--cs-line);
    border-radius: 4px;
    transition: border-color .2s, box-shadow .2s
}

.cs-row:focus-within {
    border-color: var(--cs-teal);
    box-shadow: 0 0 0 4px rgba(127, 196, 187, .2)
}

.cs-row>i {
    align-self: center;
    padding-inline: .8rem .1rem;
    font-size: 1.15rem;
    color: var(--cs-teal)
}

.cs-row input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: .8rem .5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cs-on);
    font: 500 1rem var(--sans)
}

.cs-row input::placeholder {
    color: var(--cs-mute);
    opacity: .85
}

.cs-row[data-bad] {
    border-color: var(--cs-err)
}

.cs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.cs-hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0
}

.cs .btn {
    background: var(--cs-acc);
    border-color: var(--cs-acc);
    color: #173b56
}

.cs .btn:hover {
    background: transparent;
    border-color: var(--cs-acc);
    color: var(--cs-acc)
}

.cs .btn.ghost {
    background: transparent;
    border-color: rgba(245, 247, 250, .45);
    color: var(--cs-on)
}

.cs .btn.ghost:hover {
    background: var(--cs-on);
    border-color: var(--cs-on);
    color: #173b56
}

.cs-go {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 2px
}

.cs-go[aria-busy="true"] {
    opacity: .85
}

.cs-go[aria-busy="true"]::after {
    content: "";
    width: .95rem;
    height: .95rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: cs-spin-b .7s linear infinite
}

.cs-msg {
    max-width: none;
    margin-top: .7rem;
    font-size: .9rem;
    font-weight: 600
}

.cs-msg:empty {
    display: none
}

.cs-msg[data-s="bad"] {
    color: var(--cs-err)
}

.cs-msg[data-s="ok"] {
    color: var(--cs-teal)
}

.cs-fine {
    max-width: none;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--cs-mute)
}

.cs-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.8rem
}

.cs-back i {
    transition: transform .25s
}

.cs-back:hover i {
    transform: translateX(-4px)
}

/* illustration */
.cs-art {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0
}

.cs-art>svg {
    width: min(100%, 31rem);
    height: auto;
    overflow: visible;
    direction: ltr;
    transform: translate(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 12px));
    transition: transform .3s ease-out
}

.cs-spin {
    transform-origin: 200px 200px;
    animation: cs-rot 80s linear infinite
}

.cs-ring-d {
    transform-origin: 200px 200px;
    animation: cs-rot 120s linear infinite reverse
}

.cs-orbit {
    transform-origin: 200px 200px;
    animation: cs-rot 22s linear infinite
}

.cs-ringtext {
    font: 800 13px var(--sans);
    letter-spacing: .12em
}

.cs-prog {
    stroke-dashoffset: calc(879.65 * (1 - var(--p, .4)));
    transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1)
}

.cs-float {
    animation: cs-bob 6s ease-in-out infinite
}

.cs-heart {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: cs-draw 5s ease-in-out infinite
}

.cs-beat {
    transform-box: fill-box;
    transform-origin: center;
    animation: cs-beat 2.4s ease-in-out infinite
}

.cs-sp {
    transform-box: fill-box;
    transform-origin: center;
    animation: cs-twinkle 3.2s ease-in-out var(--d, 0s) infinite
}

.cs-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border: 1px solid var(--cs-line);
    border-radius: 99px;
    background: rgba(10, 30, 46, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    animation: cs-bob 6s ease-in-out infinite
}

.cs-chip i {
    color: var(--cs-acc)
}

.cs-chip.c1 {
    inset-block-start: 9%;
    inset-inline-start: -2%
}

.cs-chip.c2 {
    inset-block-start: 47%;
    inset-inline-end: -3%;
    animation-delay: -2s
}

.cs-chip.c3 {
    inset-block-end: 9%;
    inset-inline-start: 4%;
    animation-delay: -4s
}

/* launched state */
.cs[data-live] .cs-form,
.cs[data-live] .cs-clock,
.cs[data-live] .cs-date {
    display: none
}

@keyframes cs-rot {
    to {
        transform: rotate(360deg)
    }
}

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

@keyframes cs-bob {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

@keyframes cs-draw {
    0% {
        stroke-dashoffset: 100
    }

    45%,
    80% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: -100
    }
}

@keyframes cs-beat {

    0%,
    40%,
    100% {
        transform: scale(1)
    }

    10% {
        transform: scale(1.12)
    }

    22% {
        transform: scale(1.03)
    }

    30% {
        transform: scale(1.09)
    }
}

@keyframes cs-twinkle {

    0%,
    100% {
        opacity: .15;
        transform: scale(.6)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes cs-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 173, 88, .6)
    }

    100% {
        box-shadow: 0 0 0 .6rem rgba(214, 173, 88, 0)
    }
}

@keyframes cs-tick {
    from {
        transform: translateY(-30%);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

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

    .cs-spin,
    .cs-ring-d,
    .cs-orbit,
    .cs-float,
    .cs-heart,
    .cs-beat,
    .cs-sp,
    .cs-chip,
    .cs-pill::before,
    .cs-unit b.tick,
    .cs-go[aria-busy="true"]::after {
        animation: none
    }

    .cs-sp {
        opacity: .7
    }

    .cs-prog,
    .cs-art>svg,
    .cs-row,
    .cs-back i {
        transition: none
    }
}

/* tablet */
@media(max-width:1100px) {
    .cs {
        min-height: 0
    }

    .cs-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
        padding-block: 2.4rem 3.4rem;
        text-align: center
    }

    .cs-art {
        order: -1
    }

    .cs-art>svg {
        width: min(100%, 22rem)
    }

    .cs-top,
    .cs-act {
        justify-content: center
    }

    .cs-lead,
    .cs-clock,
    .cs-form {
        margin-inline: auto
    }

    .cs-chip.c1 {
        inset-inline-start: 6%
    }

    .cs-chip.c2 {
        inset-inline-end: 4%
    }

    .cs-chip.c3 {
        inset-inline-start: 10%
    }

    .cs::before {
        background: radial-gradient(60% 40% at 50% 18%, rgba(214, 173, 88, .2), transparent 70%), repeating-linear-gradient(90deg, transparent 0 79px, rgba(245, 247, 250, .045) 79px 80px), repeating-linear-gradient(0deg, transparent 0 79px, rgba(245, 247, 250, .045) 79px 80px)
    }
}

/* mobile */
@media(max-width:600px) {
    .cs-in {
        padding: 1.6rem 1.1rem 2.6rem;
        gap: 1.2rem
    }

    .cs-art>svg {
        width: min(78%, 15rem)
    }

    .cs-chip {
        display: none
    }

    .cs-top {
        flex-direction: column;
        gap: .9rem;
        margin-bottom: 1.2rem
    }

    .cs h1 {
        font-size: 2.6rem
    }

    .cs-date {
        margin-top: 1.6rem;
        font-size: .68rem
    }

    .cs-unit {
        padding: .8rem .2rem .65rem
    }

    .cs-unit small {
        font-size: .56rem;
        letter-spacing: .1em
    }

    .cs-row {
        flex-direction: column;
        padding: .5rem
    }

    .cs-row>i {
        display: none
    }

    .cs-row input[type="email"] {
        padding: .85rem .8rem;
        text-align: start
    }

    .cs-go,
    .cs-back {
        justify-content: center;
        width: 100%
    }

    .cs-act {
        margin-top: 1.4rem
    }
}

/* ===== Home 2 – Life Insurance page ===== */
:root {
    --h2-deep: #173b56;
    --h2-deep2: #1f4d6e;
    --h2-on: #f5f7fa;
    --h2-card: #fff;
    --h2-c1: #173b56;
    --h2-c2: #3f6f93;
    --h2-c3: #d6ad58;
    --h2-c4: #8a9fb0;
    --h2-c5: #b9c7d2;
    --h2-hv1: #267a78;
    --h2-hv2: #7fb7b2;
    --h2-sh: 0 28px 54px -34px rgba(23, 43, 59, .55)
}

.h2-in {
    max-width: 1240px;
    margin-inline: auto
}

.h2-num {
    unicode-bidi: isolate
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font: 800 .74rem/1 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: 1.1rem
}

.h2-eyebrow::before {
    content: "";
    width: 2.2rem;
    height: 2px;
    background: var(--lichen)
}

.h2-sec-head {
    max-width: 48rem;
    margin-bottom: clamp(2rem, 4.5vw, 3.6rem)
}

.h2-sec-head h2 {
    margin-bottom: 1rem
}

.h2-sec-head p:not(.h2-eyebrow) {
    color: var(--mute);
    font-size: 1.08rem
}

.h2-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: .93rem;
    color: var(--moss);
    text-decoration: none;
    border-bottom: 2px solid var(--lichen);
    padding-bottom: .15rem;
    transition: gap .25s
}

.h2-link:hover {
    gap: .8rem
}

.h2-fine {
    font-size: .8rem;
    color: var(--mute);
    line-height: 1.55
}

.h2-round {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition: background .2s, color .2s, opacity .2s
}

.h2-round:hover:not(:disabled) {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.h2-round:disabled {
    opacity: .35;
    cursor: not-allowed
}

.h2-plan :focus-visible,
.h2-calc :focus-visible,
.h2-cta :focus-visible {
    outline-color: var(--lichen)
}

/* shared range slider */
.h2-rng {
    --rt: var(--line);
    --rf: var(--fern);
    --p: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer
}

.h2-rng::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--rf) var(--p), var(--rt) var(--p))
}

.h2-rng::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 1.45rem;
    height: 1.45rem;
    margin-top: -.53rem;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--rf);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}

.h2-rng::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: var(--rt)
}

.h2-rng::-moz-range-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--rf)
}

.h2-rng::-moz-range-thumb {
    box-sizing: border-box;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--rf);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}

/* ---- 1. Milestone planner ---- */
.h2-plan {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--h2-deep);
    color: var(--h2-on);
    padding-block: clamp(3rem, 7vw, 6rem)
}

.h2-plan h1,
.h2-plan h2,
.h2-plan h3 {
    color: var(--h2-on)
}

.h2-plan .h2-eyebrow,
.h2-calc .h2-eyebrow {
    color: var(--lichen)
}

.h2-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    color: rgba(245, 247, 250, .11);
    pointer-events: none
}

.h2-arcs circle {
    vector-effect: non-scaling-stroke;
    stroke-width: 1.2px
}

.h2-plan-head {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(1.5rem, 5vw, 5rem);
    align-items: end
}

.h2-plan h1 {
    font-size: clamp(2.7rem, 6vw, 5.2rem)
}

.h2-plan h1 em {
    font-style: italic;
    color: var(--lichen)
}

.h2-lead {
    color: rgba(245, 247, 250, .82);
    font-size: 1.1rem;
    margin-bottom: 1.6rem
}

.h2-plan .btn,
.h2-calc .btn,
.h2-cta .btn {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.h2-plan .btn:hover,
.h2-calc .btn:hover,
.h2-cta .btn:hover {
    background: transparent;
    color: var(--lichen)
}

.h2-plan .btn.ghost,
.h2-cta .btn.ghost {
    background: transparent;
    color: var(--h2-on);
    border-color: rgba(245, 247, 250, .5)
}

.h2-plan .btn.ghost:hover,
.h2-cta .btn.ghost:hover {
    background: var(--h2-on);
    color: #173b56;
    border-color: var(--h2-on)
}

.h2-ms {
    margin-top: clamp(2.2rem, 5vw, 4rem);
    background: rgba(245, 247, 250, .06);
    border: 1px solid rgba(245, 247, 250, .18);
    backdrop-filter: blur(6px)
}

.h2-rail {
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 1.8rem 1rem 0
}

.h2-rail::-webkit-scrollbar {
    display: none
}

.h2-rail-in {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(7.6rem, 1fr));
    min-width: 46rem
}

.h2-rail-line {
    position: absolute;
    top: 1.6rem;
    inset-inline: calc(100% / 12);
    height: 2px;
    background: rgba(245, 247, 250, .2)
}

.h2-rail-line i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lichen);
    transition: width .6s cubic-bezier(.3, .7, .2, 1)
}

.h2-ms-tab {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .2rem;
    padding: 0 .4rem 1.4rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: center;
    text-align: center
}

.h2-ms-tab b {
    margin-top: .55rem;
    font-size: .93rem;
    font-weight: 700
}

.h2-ms-tab small {
    font-size: .76rem;
    opacity: .68
}

.h2-dot {
    width: 3.2rem;
    height: 3.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--h2-deep);
    border: 2px solid rgba(245, 247, 250, .3);
    font-size: 1.2rem;
    transition: transform .3s, background .3s, border-color .3s, box-shadow .3s, color .3s
}

.h2-ms-tab:hover .h2-dot {
    border-color: var(--lichen)
}

.h2-ms-tab.done .h2-dot {
    border-color: var(--lichen);
    color: var(--lichen)
}

.h2-ms-tab[aria-selected="true"] .h2-dot {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(214, 173, 88, .2)
}

.h2-ms-tab[aria-selected="true"] small {
    opacity: 1;
    color: var(--lichen)
}

.h2-ms-pan {
    display: grid;
    grid-template-columns: minmax(11rem, .55fr) 1.4fr minmax(14rem, .8fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding: clamp(1.6rem, 4vw, 3rem);
    border-top: 1px solid rgba(245, 247, 250, .14)
}

.h2-ms-pan[hidden] {
    display: none
}

.h2-ms-pan:not([hidden]) {
    animation: h2-rise .5s cubic-bezier(.3, .7, .2, 1)
}

@keyframes h2-rise {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

.h2-ms-age small {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .4rem
}

.h2-ms-age span {
    display: block;
    font: 600 clamp(3rem, 5.2vw, 4.8rem)/.95 var(--serif);
    color: var(--lichen);
    white-space: nowrap
}

.h2-ms-body h3 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin-bottom: .8rem
}

.h2-ms-body p {
    color: rgba(245, 247, 250, .82)
}

.h2-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 1.8rem 0 0
}

.h2-facts div {
    border-top: 1px solid rgba(245, 247, 250, .25);
    padding-top: .8rem
}

.h2-facts dt {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lichen);
    margin-bottom: .3rem
}

.h2-facts dd {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.45
}

.h2-focus {
    display: grid;
    gap: 1.1rem
}

.h2-focus li {
    display: grid;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.h2-focus i {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: rgba(245, 247, 250, .16);
    position: relative;
    overflow: hidden
}

.h2-focus i::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--w);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--fern), var(--lichen));
    animation: h2-grow .9s cubic-bezier(.3, .7, .2, 1)
}

@keyframes h2-grow {
    from {
        width: 0
    }
}

.h2-ms-foot {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem clamp(1.6rem, 4vw, 3rem);
    border-top: 1px solid rgba(245, 247, 250, .14)
}

.h2-ms-count {
    font-size: .82rem;
    font-weight: 700;
    opacity: .8
}

.h2-ms-nav {
    display: flex;
    gap: .5rem
}

.h2-ms-foot .h2-link {
    margin-inline-start: auto;
    color: var(--h2-on)
}

/* ---- 2. Coverage gap ---- */
.h2-gap {
    background: var(--bg)
}

.h2-gap-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start
}

.h2-ledger h3 {
    font-size: 1.4rem;
    margin-bottom: .3rem
}

.h2-have-h {
    margin-top: 2.4rem
}

.h2-need {
    --c: var(--h2-c1);
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0 1rem 0;
    padding-inline-start: 1.3rem;
    border-bottom: 1px solid var(--line);
    transition: opacity .25s
}

.h2-need::before {
    content: "";
    position: absolute;
    inset-block: .9rem;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
    background: var(--c)
}

.h2-need.off {
    opacity: .5
}

.h2-need-l {
    display: flex;
    align-items: center;
    gap: .9rem;
    cursor: pointer
}

span.h2-need-l {
    cursor: default
}

.h2-need-l b {
    display: block;
    font-size: 1rem
}

.h2-need-l small {
    display: block;
    color: var(--mute);
    font-size: .82rem;
    line-height: 1.4
}

.h2-sw {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 2.7rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: var(--line);
    position: relative;
    cursor: pointer;
    transition: background .25s
}

.h2-sw::after {
    content: "";
    position: absolute;
    top: .2rem;
    inset-inline-start: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: inset-inline-start .25s
}

.h2-sw:checked {
    background: var(--fern)
}

.h2-sw:checked::after {
    inset-inline-start: calc(100% - 1.3rem)
}

.h2-amt {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding-inline: .7rem;
    border: 1px solid var(--line);
    background: var(--h2-card);
    border-radius: 2px;
    color: var(--mute);
    font-weight: 700
}

.h2-amt i {
    font-style: normal
}

.h2-amt input {
    width: 4.6rem;
    padding: .6rem .2rem;
    border: 0;
    background: transparent;
    text-align: end;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield
}

.h2-amt input::-webkit-outer-spin-button,
.h2-amt input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.h2-amt:focus-within {
    outline: 3px solid var(--fern);
    outline-offset: 2px
}

.h2-amt input:focus-visible {
    outline: none
}

.h2-bal {
    position: sticky;
    top: 130px;
    background: var(--h2-card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--lichen);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: var(--h2-sh)
}

.h2-bal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem
}

.h2-bal-top b {
    font: 600 2.8rem/1 var(--serif);
    color: var(--moss)
}

.h2-chip {
    padding: .35rem .85rem;
    border-radius: 99px;
    font: 800 .74rem var(--sans);
    letter-spacing: .06em;
    background: rgba(214, 173, 88, .22);
    color: var(--moss)
}

.h2-chip[data-s="low"] {
    background: var(--moss);
    color: var(--on-moss)
}

.h2-chip[data-s="ok"] {
    background: var(--fern);
    color: #fff
}

.h2-bal-chart {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    height: 21rem
}

.h2-bcol {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0
}

.h2-bstack {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    border-bottom: 2px solid var(--moss);
    background: linear-gradient(var(--bg2), var(--bg2)) no-repeat
}

.h2-seg {
    display: block;
    flex: var(--v, 0) 1 0;
    min-height: 0;
    background: var(--c);
    box-shadow: inset 0 2px 0 var(--h2-card);
    transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1)
}

.h2-seg.gap {
    background: repeating-linear-gradient(135deg, var(--lichen) 0 5px, transparent 5px 10px);
    outline: 2px dashed var(--lichen);
    outline-offset: -2px;
    box-shadow: none
}

.h2-seg.sur {
    background: repeating-linear-gradient(135deg, var(--h2-hv2) 0 5px, transparent 5px 10px);
    outline: 2px dashed var(--fern);
    outline-offset: -2px;
    box-shadow: none
}

.h2-bcol>span {
    text-align: center;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute)
}

.h2-bcol>b {
    text-align: center;
    font: 600 1.6rem/1 var(--serif);
    color: var(--moss)
}

.h2-key {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin: 1.2rem 0 0;
    font-size: .78rem;
    color: var(--mute)
}

.h2-key i {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    vertical-align: -.1rem;
    margin-inline-end: .35rem
}

.h2-key .k-gap {
    background: repeating-linear-gradient(135deg, var(--lichen) 0 3px, transparent 3px 6px);
    outline: 1.5px dashed var(--lichen);
    outline-offset: -1.5px
}

.h2-key .k-sur {
    background: repeating-linear-gradient(135deg, var(--h2-hv2) 0 3px, transparent 3px 6px);
    outline: 1.5px dashed var(--fern);
    outline-offset: -1.5px
}

.h2-gtext {
    margin: 1.2rem 0 1.4rem;
    font-weight: 600;
    min-height: 3.4em
}

/* ---- 3. Calculator ---- */
.h2-calc {
    background: var(--h2-deep);
    color: var(--h2-on)
}

.h2-calc h2,
.h2-calc h3 {
    color: var(--h2-on)
}

.h2-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.h2-calc-lead {
    color: rgba(245, 247, 250, .8);
    margin-bottom: 2rem
}

.h2-cf {
    display: grid;
    gap: 1.5rem
}

.h2-fld {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2rem 1rem;
    align-items: center
}

.h2-fld label,
.h2-fld>label {
    font-weight: 700;
    font-size: .93rem
}

.h2-fld output {
    font: 600 1.35rem/1 var(--serif);
    color: var(--lichen)
}

.h2-fld .h2-rng {
    grid-column: 1/-1;
    --rt: rgba(245, 247, 250, .22);
    --rf: var(--lichen)
}

.h2-step {
    display: flex;
    align-items: center;
    gap: .9rem
}

.h2-step output {
    min-width: 1.6rem;
    text-align: center;
    font-size: 1.6rem
}

.h2-step .h2-round {
    width: 2.4rem;
    height: 2.4rem
}

.h2-res {
    --on: var(--ink);
    background: var(--bg);
    color: var(--ink);
    padding: clamp(1.6rem, 3.5vw, 2.8rem);
    border-top: 4px solid var(--lichen);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .6);
    position: sticky;
    top: 130px
}

.h2-res .btn {
    background: var(--moss);
    color: var(--on-moss);
    border-color: var(--moss)
}

.h2-res .btn:hover {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.h2-res-k {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fern)
}

.h2-total {
    font: 600 clamp(3.4rem, 7vw, 5.2rem)/1 var(--serif);
    color: var(--moss);
    margin: .4rem 0
}

.h2-res-sub {
    color: var(--mute);
    font-weight: 600;
    min-height: 1.7em
}

.h2-res-mid {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 1.8rem 0;
    padding-block: 1.6rem;
    border-block: 1px solid var(--line)
}

.h2-donut {
    flex: 0 0 auto;
    width: 9.5rem;
    height: 9.5rem
}

.h2-donut circle {
    fill: none;
    stroke-width: 14
}

.h2-donut .bg {
    stroke: var(--line)
}

.h2-donut .sg {
    stroke-dasharray: 0 100;
    transition: stroke-dasharray .7s cubic-bezier(.3, .7, .2, 1), stroke-dashoffset .7s cubic-bezier(.3, .7, .2, 1)
}

.h2-brk {
    flex: 1;
    display: grid;
    gap: .7rem;
    font-size: .88rem
}

.h2-brk li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    color: var(--mute)
}

.h2-brk li:not(.less) span::before {
    content: "";
    display: inline-block;
    width: .7rem;
    height: .7rem;
    margin-inline-end: .5rem;
    border-radius: 2px;
    background: var(--c)
}

.h2-brk b {
    color: var(--ink);
    white-space: nowrap
}

.h2-brk .less {
    padding-top: .7rem;
    border-top: 1px dashed var(--line)
}

.h2-prem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    font-weight: 600
}

.h2-prem i {
    color: var(--lichen);
    font-size: 1.2rem
}

.h2-prem b {
    font: 600 1.5rem/1 var(--serif);
    color: var(--moss)
}

.h2-res .h2-fine {
    margin-top: 1.2rem
}

/* ---- 4. Policy types ---- */
.h2-types {
    background: var(--bg2)
}

.h2-tgrid {
    display: grid;
    grid-template-columns: minmax(15rem, .6fr) 1.5fr;
    gap: clamp(1.4rem, 4vw, 3.5rem);
    align-items: start
}

.h2-tlist {
    display: grid;
    border-top: 1px solid var(--line)
}

.h2-tlist button {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: 1.15rem 1.1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-inline-start: 4px solid transparent;
    color: var(--ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, padding .25s
}

.h2-tlist button b {
    font: 600 1.45rem/1.1 var(--serif);
    color: inherit
}

.h2-tn {
    font: 700 .78rem var(--sans);
    letter-spacing: .08em;
    color: var(--fern)
}

.h2-tlist button i {
    opacity: 0;
    transform: translateX(-6px);
    transition: .25s
}

.h2-tlist button:hover {
    background: var(--bg)
}

.h2-tlist button[aria-selected="true"] {
    background: var(--h2-deep);
    color: var(--h2-on);
    border-inline-start-color: var(--lichen);
    padding-inline-start: 1.5rem
}

.h2-tlist button[aria-selected="true"] .h2-tn {
    color: var(--lichen)
}

.h2-tlist button[aria-selected="true"] i {
    opacity: 1;
    transform: none;
    color: var(--lichen)
}

.h2-tcard {
    background: var(--h2-card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--lichen);
    padding: clamp(1.6rem, 4vw, 3rem);
    box-shadow: var(--h2-sh)
}

.h2-tcard.h2-fade {
    animation: h2-rise .45s cubic-bezier(.3, .7, .2, 1)
}

.h2-ttag {
    display: inline-block;
    padding: .3rem .8rem;
    margin-bottom: 1rem;
    border-radius: 99px;
    background: rgba(38, 122, 120, .14);
    color: var(--fern);
    font: 800 .72rem var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase
}

.h2-tcard h3 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    margin-bottom: .8rem
}

.h2-tp {
    color: var(--mute);
    font-size: 1.05rem
}

.h2-meters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .2rem 2.4rem;
    margin: 1.8rem 0;
    padding-block: .8rem;
    border-block: 1px solid var(--line)
}

.h2-meters li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: .55rem;
    font-weight: 700;
    font-size: .9rem
}

.h2-pips {
    display: inline-flex;
    gap: 4px
}

.h2-pips i {
    width: 1.35rem;
    height: .6rem;
    border-radius: 2px;
    background: var(--line)
}

.h2-pips i.on {
    background: var(--fern)
}

.h2-tcard.h2-fade .h2-pips i.on {
    animation: h2-pip .5s both
}

.h2-pips i:nth-child(2) {
    animation-delay: .05s !important
}

.h2-pips i:nth-child(3) {
    animation-delay: .1s !important
}

.h2-pips i:nth-child(4) {
    animation-delay: .15s !important
}

.h2-pips i:nth-child(5) {
    animation-delay: .2s !important
}

@keyframes h2-pip {
    from {
        transform: scaleY(0);
        opacity: 0
    }
}

.h2-tcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 2.4rem;
    margin-bottom: 1.8rem
}

.h2-tcols h4 {
    font: 800 .76rem var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: .45rem
}

.h2-tcols h4 i {
    color: var(--fern);
    margin-inline-end: .3rem
}

.h2-tcols p {
    color: var(--mute);
    font-size: .95rem
}

/* ---- 5. Life stage ---- */
.h2-stage {
    background: var(--bg)
}

.h2-st-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: stretch
}

.h2-st {
    --h2-in: var(--h2-card);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 2.2rem 1.9rem 2rem;
    margin-top: 2.6rem;
    background: var(--h2-card);
    box-shadow: inset 0 0 0 1px var(--line);
    clip-path: polygon(0 0, calc(100% - 2.2rem) 0, 100% 2.2rem, 100% 100%, 0 100%);
    transition: transform .35s
}

.h2-st:hover {
    transform: translateY(-6px)
}

.h2-st.hl {
    --h2-in: var(--h2-deep);
    margin-top: 0;
    background: var(--h2-deep);
    color: var(--h2-on);
    box-shadow: none;
    padding-top: 2.8rem
}

.h2-st.hl h3 {
    color: var(--h2-on)
}

.h2-st.hl>p:not(.h2-st-k),
.h2-st.hl .h2-legend,
.h2-st.hl .h2-ticks {
    color: rgba(245, 247, 250, .84)
}

.h2-st.hl .h2-link {
    color: var(--h2-on)
}

.h2-flag {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1.9rem;
    font: 800 .68rem var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lichen)
}

.h2-ring {
    position: relative;
    width: 5.6rem;
    height: 5.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--h2-c1) 0 var(--a), var(--h2-c2) var(--a) var(--b), var(--h2-c3) var(--b) 100%);
    font-size: 1.8rem;
    color: var(--fern);
    margin-bottom: .6rem
}

.h2-st.hl .h2-ring {
    color: var(--lichen);
    background: conic-gradient(#9fc3d8 0 var(--a), var(--h2-c2) var(--a) var(--b), var(--h2-c3) var(--b) 100%)
}

.h2-ring::before {
    content: "";
    position: absolute;
    inset: .5rem;
    border-radius: 50%;
    background: var(--h2-in)
}

.h2-ring i {
    position: relative
}

.h2-st-k {
    font: 800 .74rem var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fern)
}

.h2-st.hl .h2-st-k {
    color: var(--lichen)
}

.h2-st h3 {
    font-size: 1.85rem
}

.h2-st>p:not(.h2-st-k) {
    color: var(--mute)
}

.h2-legend {
    display: grid;
    gap: .4rem;
    padding-block: 1rem;
    border-block: 1px solid var(--line);
    font-size: .88rem;
    color: var(--mute)
}

.h2-st.hl .h2-legend {
    border-color: rgba(245, 247, 250, .22)
}

.h2-legend li {
    display: flex;
    justify-content: space-between
}

.h2-legend li::before {
    content: "";
    width: .7rem;
    height: .7rem;
    margin-inline-end: .55rem;
    margin-top: .35rem;
    border-radius: 2px;
    background: var(--c);
    flex: 0 0 auto
}

.h2-legend li b {
    margin-inline-start: auto;
    color: inherit
}

.h2-st.hl .h2-legend li:first-child::before {
    background: #9fc3d8
}

.h2-ticks {
    display: grid;
    gap: .5rem;
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: .6rem
}

.h2-ticks li {
    display: flex;
    gap: .6rem
}

.h2-ticks li::before {
    content: "\F26A";
    font-family: "bootstrap-icons";
    color: var(--fern)
}

.h2-st.hl .h2-ticks li::before {
    color: var(--lichen)
}

.h2-st .h2-link {
    align-self: flex-start;
    margin-top: auto
}

/* ---- 6. Nominee planning ---- */
.h2-nom {
    background: var(--bg2)
}

.h2-nom-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start
}

.h2-nom-copy {
    position: sticky;
    top: 130px
}

.h2-nom-copy>p:not(.h2-eyebrow):not(.h2-fine) {
    color: var(--mute)
}

.h2-tips {
    counter-reset: t;
    margin: 2rem 0 1.4rem;
    display: grid
}

.h2-tips li {
    counter-increment: t;
    position: relative;
    padding: 1.1rem 0;
    padding-inline-start: 3.6rem;
    border-top: 1px solid var(--line);
    color: var(--mute);
    font-size: .95rem
}

.h2-tips li::before {
    content: counter(t, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: .7rem;
    font: 600 2rem/1 var(--serif);
    color: var(--lichen)
}

.h2-tips b {
    display: block;
    color: var(--moss);
    font-size: 1rem
}

.h2-alloc {
    background: var(--h2-card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--fern);
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    box-shadow: var(--h2-sh)
}

.h2-alloc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin-bottom: 1.2rem
}

.h2-alloc-top h3 {
    font-size: 1.7rem
}

.h2-status {
    padding: .3rem .8rem;
    border-radius: 99px;
    font: 800 .76rem var(--sans);
    background: rgba(214, 173, 88, .25);
    color: var(--moss)
}

.h2-status[data-s="ok"] {
    background: var(--fern);
    color: #fff
}

.h2-status[data-s="bad"] {
    background: var(--moss);
    color: var(--on-moss)
}

.h2-nbar {
    display: flex;
    height: 1.5rem;
    margin-bottom: 1.4rem;
    background: var(--bg2);
    overflow: hidden
}

.h2-nbar i {
    flex: var(--v, 0) 1 0;
    min-width: 0;
    background: var(--c);
    box-shadow: inset -2px 0 0 var(--h2-card);
    transition: flex-grow .4s
}

.h2-nbar i.rest {
    background: repeating-linear-gradient(135deg, var(--line) 0 5px, transparent 5px 10px);
    box-shadow: none
}

.h2-nrows {
    display: grid;
    gap: 1rem
}

.h2-nrow {
    --c: var(--h2-c1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1rem;
    padding: 1.1rem 1.2rem;
    background: var(--bg);
    border-inline-start: 4px solid var(--c)
}

.h2-f {
    display: grid;
    gap: .25rem
}

.h2-f span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute)
}

.h2-nrow input[type="text"],
.h2-nrow select {
    padding: .65rem .8rem;
    background: var(--h2-card)
}

.h2-nshare {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .1rem 1rem
}

.h2-nshare label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute)
}

.h2-nshare output {
    font: 600 1.5rem/1 var(--serif);
    color: var(--moss)
}

.h2-nshare .h2-rng {
    grid-column: 1/-1;
    --rf: var(--c)
}

.h2-nfoot {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.h2-chk {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600
}

.h2-chk input {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    accent-color: var(--fern)
}

.h2-rm {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--mute);
    cursor: pointer;
    transition: .2s
}

.h2-rm:hover:not(:disabled) {
    background: var(--moss);
    color: var(--on-moss);
    border-color: var(--moss)
}

.h2-rm:disabled {
    opacity: .35;
    cursor: not-allowed
}

.h2-hint {
    grid-column: 1/-1;
    padding: .7rem .9rem;
    background: rgba(214, 173, 88, .2);
    font-size: .85rem;
    font-weight: 600;
    color: var(--moss)
}

.h2-hint[hidden] {
    display: none
}

.h2-nact {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 1.4rem 0 1rem
}

.h2-nact .btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

/* ---- 7. Myths vs facts ---- */
.h2-myth {
    background: var(--bg)
}

.h2-myth-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem 3rem;
    flex-wrap: wrap
}

.h2-myth-head .btn {
    margin-bottom: clamp(2rem, 4.5vw, 3.6rem)
}

.h2-flips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.4vw, 1.8rem)
}

.h2-flip {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    perspective: 1400px
}

.h2-flip-in {
    display: grid;
    transform-style: preserve-3d;
    transition: transform .75s cubic-bezier(.3, .7, .2, 1)
}

.h2-flip.on .h2-flip-in {
    transform: rotateY(180deg)
}

.h2-flip:hover .h2-flip-in {
    box-shadow: 0 24px 40px -30px rgba(23, 43, 59, .55)
}

.h2-face {
    grid-area: 1/1;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 16.5rem;
    padding: 1.8rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--line)
}

.h2-front {
    background: var(--h2-card)
}

.h2-back {
    transform: rotateY(180deg);
    background: var(--h2-deep);
    border-color: var(--h2-deep);
    color: var(--h2-on)
}

.h2-tag {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    align-self: flex-start;
    font: 800 .72rem var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fern)
}

.h2-front .h2-tag {
    color: #8a6516
}

.h2-back .h2-tag {
    color: var(--lichen)
}

.h2-face>b {
    font: 600 1.6rem/1.2 var(--serif);
    color: var(--moss)
}

.h2-back>b {
    color: var(--h2-on)
}

.h2-front em {
    margin-top: auto;
    font-style: normal;
    font-size: .84rem;
    font-weight: 700;
    color: var(--fern)
}

.h2-fp {
    color: rgba(245, 247, 250, .86);
    font-size: .96rem;
    line-height: 1.6
}

/* ---- 8. Build your plan ---- */
.h2-build {
    background: var(--bg)
}

.h2-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    background: var(--h2-deep);
    color: var(--h2-on);
    padding: clamp(2rem, 5vw, 4.5rem);
    border-top: 4px solid var(--lichen)
}

.h2-cta h2,
.h2-cta h3 {
    color: var(--h2-on)
}

.h2-cta .h2-eyebrow {
    color: var(--lichen)
}

.h2-cta-copy>p:not(.h2-eyebrow) {
    color: rgba(245, 247, 250, .82);
    margin-bottom: 1.8rem
}

.h2-who {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    border: 0;
    padding: 0;
    margin: 0 0 2rem;
    min-width: 0
}

.h2-who legend {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lichen);
    margin-bottom: .8rem;
    padding: 0;
    float: left;
    width: 100%
}

.h2-who label {
    position: relative;
    cursor: pointer
}

.h2-who input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    padding: 0
}

.h2-who span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    border: 1px solid rgba(245, 247, 250, .4);
    border-radius: 99px;
    font-weight: 700;
    font-size: .92rem;
    transition: .25s
}

.h2-who input:checked+span {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.h2-who input:focus-visible+span {
    outline: 3px solid var(--lichen);
    outline-offset: 3px
}

.h2-sketch {
    background: var(--bg);
    color: var(--ink);
    padding: 2rem 1.8rem 1.6rem;
    position: relative;
    -webkit-mask: radial-gradient(circle .7rem at 0 5.7rem, transparent 98%, #000), radial-gradient(circle .7rem at 100% 5.7rem, transparent 98%, #000);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle .7rem at 0 5.7rem, transparent 98%, #000), radial-gradient(circle .7rem at 100% 5.7rem, transparent 98%, #000);
    mask-composite: intersect
}

.h2-sketch h3 {
    color: var(--moss);
    font-size: 1.8rem;
    padding-bottom: 1.6rem;
    margin-bottom: .4rem;
    border-bottom: 2px dashed var(--line)
}

.h2-sketch dl {
    margin: 0
}

.h2-sketch dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line)
}

.h2-sketch dt {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    padding-top: .2rem
}

.h2-sketch dd {
    margin: 0;
    font-weight: 700;
    text-align: end
}

.h2-sketch .h2-fine {
    margin-top: 1rem
}

/* ---- tablet ---- */
@media(max-width:1100px) {

    .h2-plan-head,
    .h2-gap-grid,
    .h2-calc-grid,
    .h2-nom-grid,
    .h2-cta {
        grid-template-columns: 1fr
    }

    .h2-bal,
    .h2-res,
    .h2-nom-copy {
        position: static
    }

    .h2-ms-pan {
        grid-template-columns: minmax(8rem, .4fr) 1fr
    }

    .h2-focus {
        grid-column: 1/-1;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem
    }

    .h2-st-grid {
        grid-template-columns: 1fr;
        max-width: 40rem;
        margin-inline: auto
    }

    .h2-st,
    .h2-st.hl {
        margin-top: 0
    }

    .h2-flips {
        grid-template-columns: repeat(2, 1fr)
    }

    .h2-bal-chart {
        height: 18rem
    }

    .h2-sketch {
        max-width: 30rem
    }
}

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

    .h2-tlist {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        border-top: 0;
        gap: .5rem;
        padding-bottom: .4rem
    }

    .h2-tlist::-webkit-scrollbar {
        display: none
    }

    .h2-tlist button {
        flex: 0 0 auto;
        grid-template-columns: auto;
        padding: .75rem 1.2rem;
        border: 1px solid var(--line);
        border-inline-start-width: 1px;
        border-radius: 99px;
        white-space: nowrap
    }

    .h2-tlist button[aria-selected="true"] {
        padding-inline-start: 1.2rem;
        border-color: var(--h2-deep)
    }

    .h2-tlist button b {
        font-size: 1.15rem
    }

    .h2-tn,
    .h2-tlist button i {
        display: none
    }

    .h2-ms-pan {
        grid-template-columns: 1fr
    }

    .h2-ms-age span {
        font-size: 3.6rem
    }

    .h2-facts {
        grid-template-columns: 1fr 1fr
    }
}

/* ---- mobile ---- */
@media(max-width:600px) {
    .h2-plan h1 {
        font-size: 2.6rem
    }

    .h2-rail {
        padding: 1.4rem .4rem 0
    }

    .h2-ms-pan {
        padding: 1.4rem 1.1rem
    }

    .h2-facts,
    .h2-focus,
    .h2-meters,
    .h2-tcols {
        grid-template-columns: 1fr
    }

    .h2-ms-foot {
        flex-wrap: wrap;
        padding: 1rem 1.1rem
    }

    .h2-ms-foot .h2-link {
        margin-inline-start: 0;
        width: 100%
    }

    .h2-need {
        grid-template-columns: 1fr;
        gap: .6rem
    }

    .h2-amt {
        justify-self: start;
        margin-inline-start: 3.6rem
    }

    .h2-have .h2-amt {
        margin-inline-start: 0
    }

    .h2-bal-chart {
        height: 16rem;
        gap: .9rem
    }

    .h2-bal-top b {
        font-size: 2.2rem
    }

    .h2-res-mid {
        flex-direction: column;
        align-items: stretch
    }

    .h2-donut {
        align-self: center
    }

    .h2-nrow {
        grid-template-columns: 1fr;
        padding: 1rem
    }

    .h2-nact .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .h2-flips {
        grid-template-columns: 1fr
    }

    .h2-face {
        min-height: 14.5rem;
        padding: 1.4rem
    }

    .h2-myth-head .btn {
        margin-bottom: 1.6rem;
        width: 100%;
        justify-content: center
    }

    .h2-cta {
        padding: 1.6rem 1.2rem
    }

    .h2-cta .cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .h2-plan .cta .btn,
    .h2-cta-copy .cta .btn {
        justify-content: center
    }

    .h2-sketch {
        max-width: none;
        padding-inline: 1.2rem
    }

    .h2-st {
        padding-inline: 1.4rem
    }

    .h2-st.hl .h2-flag {
        inset-inline-start: 1.4rem
    }
}

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

    .h2-flip-in,
    .h2-seg,
    .h2-rail-line i,
    .h2-donut .sg,
    .h2-focus i::after,
    .h2-ms-pan:not([hidden]),
    .h2-tcard.h2-fade,
    .h2-pips i {
        animation: none !important;
        transition: none !important
    }
}

/* ===== Life Insurance page ===== */
.lp-hero,
.lp-calc {
    background: radial-gradient(60% 80% at 85% 20%, rgba(38, 122, 120, .45), transparent 70%), linear-gradient(160deg, #173b56, #0f2a3f);
    color: #f5f7fa
}

.lp-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem) 0;
    overflow: hidden
}

.lp-hero h1,
.lp-calc h2,
.lp-calc h3 {
    color: #f5f7fa
}

.lp-hero h1 em {
    font-style: italic;
    color: var(--lichen)
}

.lp-eyebrow,
.lp-tag {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: .9rem
}

.lp-eyebrow,
.lp-on-dark .lp-tag {
    color: #79b9b0
}

.lp-lead {
    font-size: 1.15rem;
    color: #c9d7e0;
    margin: 1.4rem 0 2rem
}

.lp-gold {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.lp-gold:hover {
    background: transparent;
    color: var(--lichen)
}

.lp-line {
    background: transparent;
    border-color: rgba(245, 247, 250, .45);
    color: #f5f7fa
}

.lp-line:hover {
    background: #f5f7fa;
    border-color: #f5f7fa;
    color: #173b56
}

.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(245, 247, 250, .2);
    font-size: .88rem;
    color: #c9d7e0
}

.lp-trust b {
    display: block;
    font: 600 2rem/1 var(--serif);
    color: #f5f7fa
}

.lp-hero-art {
    position: relative;
    align-self: end;
    max-width: 30rem;
    width: 100%;
    justify-self: center
}

.lp-hero-art img {
    width: 100%;
    aspect-ratio: 12/13;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 48% 48% 0 0
}

.lp-hero-art figcaption {
    position: absolute;
    inset-block-start: 14%;
    inset-inline-start: -6%;
    display: flex;
    gap: .7rem;
    align-items: center;
    background: #f5f7fa;
    color: #173b56;
    padding: .8rem 1.1rem;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3;
    box-shadow: 0 18px 40px -18px #000
}

.lp-hero-art figcaption i {
    font-size: 1.5rem;
    color: #267a78
}

.lp-hero-art small {
    display: block;
    font-weight: 500;
    color: #566b7b;
    font-size: .74rem
}

.lp-head {
    max-width: 46rem;
    margin: 0 auto 3rem;
    text-align: center
}

.lp-head p:not(.lp-tag) {
    margin-inline: auto;
    color: var(--mute)
}

.lp-on-dark p:not(.lp-tag) {
    color: #c9d7e0
}

.lp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    max-width: 74rem;
    margin: 0 auto;
    align-items: stretch
}

.lp-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--line);
    padding: 0 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    transition: transform .3s, box-shadow .3s
}

.lp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -26px rgba(23, 43, 59, .6)
}

.lp-feat {
    border: 2px solid var(--lichen);
    background: var(--bg)
}

.lp-flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 1.2rem;
    background: var(--lichen);
    color: #173b56;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    z-index: 1
}

.lp-arch {
    height: 8.5rem;
    margin: 0 -1.8rem .6rem;
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: #f5f7fa;
    background: linear-gradient(160deg, #267a78, #173b56);
    border-radius: 0 0 50% 50%/0 0 2.5rem 2.5rem
}

.lp-card dl {
    border-block: 1px solid var(--line);
    padding-block: .4rem
}

.lp-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 0;
    font-size: .9rem
}

.lp-card dt {
    color: var(--mute)
}

.lp-card dd {
    font-weight: 700;
    margin: 0;
    text-align: end
}

.lp-card ul {
    display: grid;
    gap: .35rem;
    font-size: .92rem;
    flex: 1
}

.lp-card li i {
    color: var(--fern);
    margin-inline-end: .4rem
}

.lp-more {
    font-weight: 700;
    color: var(--moss);
    text-decoration: none;
    border-bottom: 2px solid var(--lichen);
    align-self: flex-start;
    padding-bottom: .1rem
}

.lp-more:hover {
    color: var(--fern)
}

.lp-why {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    background: var(--bg2);
    align-items: start
}

.lp-why-head {
    position: sticky;
    top: 7.5rem
}

.lp-reasons li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.6rem;
    align-items: center;
    padding: 1.8rem 0;
    border-top: 1px solid var(--line)
}

.lp-reasons li:last-child {
    border-bottom: 1px solid var(--line)
}

.lp-reasons span {
    font: 600 3.4rem/1 var(--serif);
    color: var(--lichen)
}

.lp-reasons h3 {
    margin-bottom: .3rem
}

.lp-reasons p {
    color: var(--mute)
}

.lp-reasons li>i {
    font-size: 2rem;
    color: var(--fern)
}

.lp-calc-box {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    max-width: 72rem;
    margin: 0 auto;
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 30px 60px -30px #000
}

.lp-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    align-content: start
}

.lp-inputs label {
    display: grid;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mute)
}

.lp-wide {
    grid-column: 1/-1
}

.lp-inputs input[type=number],
.lp-form input,
.lp-form select,
.lp-form textarea {
    width: 100%;
    padding: .75rem .9rem;
    font: 500 1rem var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 2px
}

.lp-inputs input:focus,
.lp-form :is(input, select, textarea):focus {
    outline: 3px solid var(--fern);
    outline-offset: 1px
}

.lp-inputs output {
    color: var(--moss);
    font-size: 1.1rem
}

.lp-rng {
    --p: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--fern) var(--p), var(--line) var(--p));
    padding: 0 !important;
    border: 0 !important;
    margin-top: .6rem
}

.lp-rng::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--moss);
    border: 3px solid var(--lichen);
    cursor: pointer
}

.lp-rng::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--moss);
    border: 3px solid var(--lichen);
    cursor: pointer
}

.lp-result {
    background: #173b56;
    color: #f5f7fa;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.lp-result>p {
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #79b9b0;
    font-weight: 800
}

.lp-result>b {
    font: 600 clamp(3rem, 6vw, 4.4rem)/1 var(--serif);
    color: var(--lichen)
}

.lp-bar {
    display: flex;
    height: 12px;
    background: rgba(245, 247, 250, .15);
    overflow: hidden
}

.lp-bar i {
    display: block;
    height: 100%;
    width: 0;
    transition: width .5s
}

.lp-bar i:nth-child(1),
.lp-k1 {
    background: #79b9b0
}

.lp-bar i:nth-child(2),
.lp-k2 {
    background: #d6ad58
}

.lp-bar i:nth-child(3),
.lp-k3 {
    background: #f5f7fa
}

.lp-k4 {
    background: transparent;
    border: 2px solid #c9d7e0
}

.lp-result ul {
    display: grid;
    gap: .5rem;
    font-size: .92rem;
    flex: 1
}

.lp-result li {
    display: flex;
    align-items: center;
    gap: .6rem
}

.lp-result li i {
    width: 12px;
    height: 12px;
    flex: 0 0 auto
}

.lp-result li span {
    margin-inline-start: auto;
    font-weight: 700
}

.lp-result .btn {
    justify-content: center
}

.lp-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.lp-steps {
    display: grid;
    gap: .8rem;
    margin: 1.6rem 0
}

.lp-steps li {
    display: flex;
    gap: .9rem;
    align-items: center
}

.lp-steps b {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lichen);
    color: #173b56;
    flex: 0 0 auto
}

.lp-guide address {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    font-style: normal;
    font-weight: 700;
    color: var(--moss)
}

.lp-guide address i {
    color: var(--fern)
}

.lp-form {
    display: grid;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: var(--bg2);
    border-top: 4px solid var(--lichen);
    border: 1px solid var(--line);
    border-top: 4px solid var(--lichen)
}

.lp-form label {
    display: grid;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mute)
}

.lp-form .btn {
    justify-content: center
}

.lp-form .form-msg {
    min-height: 1.4rem;
    font-weight: 700;
    color: var(--fern)
}

@media(max-width:1100px) {
    .lp-hero {
        grid-template-columns: 1fr 1fr
    }

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

    .lp-feat {
        order: -1;
        grid-column: 1/-1
    }

    .lp-why {
        grid-template-columns: 1fr
    }

    .lp-why-head {
        position: static
    }

    .lp-calc-box,
    .lp-guide {
        grid-template-columns: 1fr
    }
}

@media(max-width:767px) {
    .lp-hero {
        grid-template-columns: 1fr;
        padding-bottom: 0
    }

    .lp-hero-art {
        max-width: 20rem
    }

    .lp-hero-art figcaption {
        inset-inline-start: 0;
        inset-block-start: 6%
    }

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

    .lp-feat {
        grid-column: auto
    }

    .lp-reasons li {
        grid-template-columns: auto 1fr;
        gap: 1rem
    }

    .lp-reasons li>i {
        display: none
    }

    .lp-reasons span {
        font-size: 2.4rem
    }

    .lp-inputs {
        grid-template-columns: 1fr
    }

    .lp-cta,
    .lp-hero .cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

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

    .lp-card,
    .lp-bar i {
        transition: none
    }

    .lp-card:hover {
        transform: none
    }
}

/* ===== Health Insurance page ===== */
.hl-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    background: linear-gradient(180deg, var(--bg2), var(--bg))
}

.hl-tag {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: .9rem
}

.hl-hero h1 em {
    font-style: italic;
    color: var(--fern)
}

.hl-lead {
    font-size: 1.15rem;
    color: var(--mute);
    margin: 1.4rem 0 2rem
}

.hl-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin-top: 2.6rem;
    color: var(--mute);
    font-size: .88rem
}

.hl-stats b {
    display: block;
    font: 600 2rem/1 var(--serif);
    color: var(--moss)
}

.hl-hero-art {
    position: relative;
    max-width: 30rem;
    width: 100%;
    justify-self: center
}

.hl-disc {
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -36px rgba(23, 43, 59, .6);
    overflow: hidden;
    aspect-ratio: 1
}

.hl-disc img,
.hl-img img,
.hl-claim-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.hl-hero-art figcaption {
    position: absolute;
    inset-block-end: 6%;
    inset-inline-end: -4%;
    display: flex;
    gap: .7rem;
    align-items: center;
    background: var(--moss);
    color: var(--on-moss);
    padding: .8rem 1.1rem;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3
}

.hl-hero-art figcaption i {
    font-size: 1.5rem;
    color: var(--lichen)
}

.hl-hero-art small {
    display: block;
    font-weight: 500;
    font-size: .74rem;
    opacity: .8
}

.hl-head {
    max-width: 44rem;
    margin: 0 auto 3rem;
    text-align: center
}

.hl-plan {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    max-width: 70rem;
    margin: 0 auto 2rem;
    border: 1px solid var(--line);
    background: var(--bg2)
}

.hl-alt {
    grid-template-columns: 1.1fr .9fr
}

.hl-alt .hl-img {
    order: 2
}

.hl-img {
    min-height: 16rem;
    overflow: hidden
}

.hl-img svg {
    object-fit: cover;
    height: 100%
}

.hl-info {
    padding: clamp(1.4rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    justify-content: center
}

.hl-pill {
    align-self: flex-start;
    background: var(--lichen);
    color: #173b56;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .7rem
}

.hl-info ul {
    display: grid;
    gap: .4rem
}

.hl-info li i {
    color: var(--fern);
    margin-inline-end: .5rem
}

.hl-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    color: var(--mute)
}

.hl-foot b {
    font: 600 1.9rem/1 var(--serif);
    color: var(--moss)
}

.hl-ben {
    background: var(--bg2)
}

.hl-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto
}

.hl-bento>div {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1.5rem;
    transition: transform .3s, border-color .3s
}

.hl-bento>div:hover {
    transform: translateY(-4px);
    border-color: var(--fern)
}

.hl-bento i {
    font-size: 1.8rem;
    color: var(--fern);
    display: block;
    margin-bottom: .6rem
}

.hl-bento h3 {
    font-size: 1.4rem;
    margin-bottom: .3rem
}

.hl-bento p {
    color: var(--mute);
    font-size: .93rem
}

.hl-bento .hl-big {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(160deg, #267a78, #173b56);
    border: 0;
    color: #f5f7fa;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.hl-bento .hl-big i {
    color: var(--lichen);
    font-size: 3rem
}

.hl-bento .hl-big b {
    font: 600 clamp(3.4rem, 7vw, 5.5rem)/1 var(--serif)
}

.hl-bento .hl-big p {
    color: #d5e3ea;
    font-size: 1.05rem
}

.hl-net {
    background: #173b56;
    color: #f5f7fa
}

.hl-net h2 {
    color: #f5f7fa
}

.hl-net .hl-tag {
    color: #79b9b0
}

.hl-net p {
    color: #c9d7e0
}

.hl-net-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 72rem;
    margin: 0 auto 1.6rem
}

.hl-search {
    position: relative;
    flex: 1 1 18rem;
    max-width: 26rem
}

.hl-search i {
    position: absolute;
    inset-inline-start: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #173b56
}

.hl-search input {
    width: 100%;
    padding: .85rem 1rem .85rem 2.6rem;
    padding-inline: 2.6rem 1rem;
    font: 500 1rem var(--sans);
    background: #f5f7fa;
    color: #172b3b;
    border: 0;
    border-radius: 2px
}

.hl-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}

.hl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 72rem;
    margin: 0 auto 1.6rem
}

.hl-chips button {
    font: 700 .85rem var(--sans);
    padding: .5rem 1rem;
    background: transparent;
    color: #f5f7fa;
    border: 1px solid rgba(245, 247, 250, .35);
    cursor: pointer;
    transition: .2s
}

.hl-chips button:hover {
    border-color: var(--lichen)
}

.hl-chips .on {
    background: var(--lichen);
    color: #173b56;
    border-color: var(--lichen)
}

.hl-hosp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto
}

.hl-hosp li {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: rgba(245, 247, 250, .07);
    border: 1px solid rgba(245, 247, 250, .16)
}

.hl-hosp li>i {
    font-size: 1.5rem;
    color: var(--lichen)
}

.hl-hosp b {
    display: block;
    line-height: 1.3
}

.hl-hosp small {
    color: #c9d7e0
}

.hl-hosp .ok {
    margin-inline-start: auto;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #79b9b0;
    white-space: nowrap
}

.hl-empty {
    max-width: 72rem;
    margin: 1.4rem auto 0
}

.hl-claim {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.hl-claim-art {
    margin: 0;
    border: 1px solid var(--line);
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0 0 50% 0/0 0 18% 0
}

.hl-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin: 1.6rem 0
}

.hl-flow li {
    display: grid;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 700;
    border-top: 3px solid var(--fern);
    padding-top: .7rem
}

.hl-flow b {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lichen);
    color: #173b56
}

@media(max-width:1100px) {

    .hl-hero,
    .hl-claim {
        grid-template-columns: 1fr 1fr
    }

    .hl-bento {
        grid-template-columns: repeat(2, 1fr)
    }

    .hl-hosp {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:760px) {

    .hl-hero,
    .hl-claim,
    .hl-plan,
    .hl-alt {
        grid-template-columns: 1fr
    }

    .hl-alt .hl-img {
        order: 0
    }

    .hl-img {
        min-height: 13rem
    }

    .hl-hero-art {
        max-width: 20rem
    }

    .hl-hero-art figcaption {
        inset-inline-end: 0
    }

    .hl-bento,
    .hl-hosp,
    .hl-flow {
        grid-template-columns: 1fr
    }

    .hl-bento .hl-big {
        grid-column: auto;
        grid-row: auto
    }

    .hl-hero .cta .btn,
    .hl-claim .cta .btn,
    .hl-foot .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

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

    .hl-bento>div,
    .hl-chips button {
        transition: none
    }

    .hl-bento>div:hover {
        transform: none
    }
}

/* ===== Term Life Insurance page ===== */
.tl-tag {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: .9rem
}

.tl-head {
    max-width: 44rem;
    margin: 0 auto 2.6rem;
    text-align: center
}

.tl-head p:not(.tl-tag) {
    margin-inline: auto;
    color: var(--mute)
}

.tl-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    background: radial-gradient(circle, var(--line) 1px, transparent 1.5px) 0 0/22px 22px, var(--bg)
}

.tl-hero h1 em {
    font-style: italic;
    color: var(--fern);
    display: block
}

.tl-lead {
    font-size: 1.15rem;
    color: var(--mute);
    margin: 1.4rem 0 2rem
}

.tl-chip {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    margin-top: 2rem;
    padding: .7rem 1.1rem;
    border: 1px solid var(--line);
    background: var(--bg);
    font-weight: 600
}

.tl-chip i {
    color: var(--fern);
    font-size: 1.3rem
}

.tl-chip b {
    font: 700 1.5rem/1 var(--serif);
    color: var(--moss)
}

.tl-hero-art {
    margin: 0;
    border: 1px solid var(--line);
    background: #e8eef3;
    border-radius: 50% 50% 0 0/38% 38% 0 0;
    overflow: hidden;
    max-width: 32rem;
    width: 100%;
    justify-self: center
}

.tl-hero-art img {
    display: block;
    width: 100%;
    aspect-ratio: 13/11;
    height: auto;
    object-fit: cover
}

.tl-seg {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 2.4rem;
    border: 1px solid var(--line);
    background: var(--bg2);
    padding: .3rem
}

.tl-seg button {
    font: 700 .92rem var(--sans);
    padding: .65rem 1.4rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: .25s
}

.tl-seg .on {
    background: var(--moss);
    color: var(--on-moss)
}

.tl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    max-width: 72rem;
    margin: 0 auto
}

.tl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 2rem 1.8rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 5px solid var(--fern)
}

.tl-hot {
    border-top-color: var(--lichen);
    box-shadow: 0 24px 44px -30px rgba(23, 43, 59, .7);
    transform: translateY(-10px)
}

.tl-n {
    font: 600 2.6rem/1 var(--serif);
    color: var(--lichen)
}

.tl-flag {
    position: absolute;
    inset-block-start: 1.2rem;
    inset-inline-end: 1.2rem;
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: var(--lichen);
    color: #173b56;
    padding: .25rem .6rem
}

.tl-price {
    font: 600 1.4rem/1 var(--serif);
    color: var(--mute)
}

.tl-price b {
    font-size: 3rem;
    color: var(--moss)
}

.tl-price small {
    font: 500 .85rem var(--sans)
}

.tl-plan ul {
    display: grid;
    gap: .4rem;
    flex: 1;
    border-top: 1px solid var(--line);
    padding-top: .9rem;
    font-size: .92rem
}

.tl-plan li i {
    color: var(--fern);
    margin-inline-end: .4rem
}

.tl-go {
    font-weight: 700;
    text-decoration: none;
    color: var(--moss);
    border-bottom: 2px solid var(--lichen);
    align-self: flex-start
}

.tl-go:hover {
    color: var(--fern)
}

.tl-why {
    background: var(--bg2)
}

.tl-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 68rem;
    margin: 0 auto
}

.tl-duo article {
    background: var(--bg);
    border: 1px solid var(--line);
    padding-bottom: 1.6rem
}

.tl-duo h3,
.tl-duo p {
    padding-inline: 1.6rem
}

.tl-duo h3 {
    margin: 1.2rem 0 .4rem
}

.tl-duo p {
    color: var(--mute)
}

.tl-pic img {
    display: block;
    width: 100%;
    aspect-ratio: 20/13;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid var(--line)
}

.tl-ben {
    background: linear-gradient(160deg, #173b56, #0f2a3f);
    color: #f5f7fa
}

.tl-ben h2,
.tl-ben h3 {
    color: #f5f7fa
}

.tl-lt .tl-tag {
    color: #79b9b0
}

.tl-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 72rem;
    margin: 0 auto
}

.tl-cols li {
    padding: 0 1.6rem;
    border-inline-start: 1px solid rgba(245, 247, 250, .2)
}

.tl-cols li:first-child {
    border-inline-start: 0
}

.tl-cols b {
    display: block;
    font: 600 clamp(2.8rem, 5vw, 4rem)/1 var(--serif);
    color: var(--lichen);
    margin-bottom: .5rem
}

.tl-cols p {
    color: #c9d7e0;
    font-size: .93rem
}

.tl-note {
    max-width: 72rem;
    margin: 2.4rem auto 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(245, 247, 250, .2);
    color: #c9d7e0
}

.tl-quote {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center
}

.tl-est {
    margin-top: 1.8rem;
    padding: 1.6rem;
    border: 2px solid var(--lichen);
    display: grid;
    gap: .3rem;
    background: var(--bg2)
}

.tl-est>span {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute)
}

.tl-est b {
    font: 600 3.6rem/1 var(--serif);
    color: var(--moss)
}

.tl-est i {
    font-style: normal
}

.tl-est small {
    font: 500 1rem var(--sans);
    color: var(--mute)
}

.tl-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: var(--bg2);
    border: 1px solid var(--line)
}

.tl-form label {
    display: grid;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mute)
}

.tl-form :is(input, select) {
    width: 100%;
    padding: .75rem .9rem;
    font: 500 1rem var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 2px
}

.tl-form :is(input, select):focus {
    outline: 3px solid var(--fern);
    outline-offset: 1px
}

.tl-w {
    grid-column: 1/-1
}

.tl-form .btn {
    justify-content: center
}

.tl-form .form-msg {
    min-height: 1.4rem;
    font-weight: 700;
    color: var(--fern)
}

@media(max-width:1100px) {

    .tl-hero,
    .tl-quote {
        grid-template-columns: 1fr 1fr
    }

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

    .tl-hot {
        transform: none;
        order: -1;
        grid-column: 1/-1
    }

    .tl-cols {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 0
    }

    .tl-cols li:nth-child(3) {
        border-inline-start: 0
    }
}

@media(max-width:700px) {

    .tl-hero,
    .tl-quote,
    .tl-duo,
    .tl-grid,
    .tl-cols,
    .tl-form {
        grid-template-columns: 1fr
    }

    .tl-hot {
        grid-column: auto
    }

    .tl-hero-art {
        max-width: 22rem
    }

    .tl-seg {
        width: 100%
    }

    .tl-seg button {
        flex: 1;
        padding-inline: .4rem
    }

    .tl-cols li,
    .tl-cols li:nth-child(3) {
        border-inline-start: 0;
        border-top: 1px solid rgba(245, 247, 250, .2);
        padding: 1.4rem 0 0
    }

    .tl-cols li:first-child {
        border-top: 0;
        padding-top: 0
    }

    .tl-hero .cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

/* ===== Family Health Insurance page ===== */
.fam {
    --fam-deep: #173b56;
    --fam-deep2: #0f2a3f;
    --fam-on: #f5f7fa;
    --fam-soft: #c9d7e0;
    --fam-card: #f5f7fa;
    --fam-card-ink: #173b56;
    --fam-sh: 0 34px 60px -38px rgba(23, 43, 59, .6);
    overflow-x: clip
}

.fam section {
    padding: clamp(4rem, 9vw, 7.5rem) clamp(1.2rem, 5vw, 4.5rem)
}

.fam-wrap {
    max-width: 76rem;
    margin-inline: auto
}

.fam-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fern);
    margin-bottom: 1rem
}

.fam-eyebrow::before {
    content: "";
    width: 2.2rem;
    height: 2px;
    background: currentColor
}

.fam-eyebrow-light {
    color: var(--lichen)
}

.fam-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.6rem 4rem;
    margin-bottom: clamp(2rem, 5vw, 3.4rem)
}

.fam-head>div {
    max-width: 40rem
}

.fam-head p {
    color: var(--mute)
}

.fam-head>p {
    max-width: 26rem
}

.fam-head .fam-eyebrow {
    color: var(--fern)
}

/* photo frames: gradient shows if a picture is missing */
.fam-img {
    background: radial-gradient(70% 60% at 80% 10%, rgba(38, 122, 120, .55), transparent 70%), linear-gradient(135deg, #1f5a73, #173b56 55%, #0f2a3f)
}

.fam-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fam-noimg img {
    display: none
}

/* shared stepper */
.fam-step {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    background: var(--bg)
}

.fam-step button {
    width: 2.8rem;
    border: 0;
    background: transparent;
    color: var(--moss);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s
}

.fam-step button:hover:not(:disabled) {
    background: var(--bg2)
}

.fam-step button:disabled {
    opacity: .35;
    cursor: not-allowed
}

.fam-step output {
    display: grid;
    place-items: center;
    min-width: 3rem;
    font: 600 1.6rem/1 var(--serif);
    color: var(--moss);
    border-inline: 1px solid var(--line)
}

/* 1. hero */
.fam .fam-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(52rem, calc(100svh - var(--hh)));
    padding: 0;
    color: var(--fam-on);
    background: var(--fam-deep2);
    overflow: hidden
}

.fam-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1
}

.fam-hero-media img {
    object-position: 62% 30%;
    animation: fam-zoom 20s ease-out both
}

.fam-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 42, 63, .94) 0, rgba(15, 42, 63, .72) 42%, rgba(15, 42, 63, .1) 80%), linear-gradient(0deg, rgba(15, 42, 63, .8), transparent 45%)
}

@keyframes fam-zoom {
    from {
        transform: scale(1.08)
    }

    to {
        transform: scale(1)
    }
}

.fam-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 2rem;
    align-items: end;
    padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4.5rem) clamp(2rem, 5vw, 3.5rem)
}

.fam-hero h1 {
    color: var(--fam-on);
    max-width: 15ch
}

.fam-hero h1 em {
    font-style: italic;
    color: var(--lichen)
}

.fam-lead {
    font-size: 1.15rem;
    color: var(--fam-soft);
    margin: 1.4rem 0 2.2rem;
    max-width: 38rem
}

.fam .btn.gold {
    background: var(--lichen);
    border-color: var(--lichen);
    color: #173b56
}

.fam .btn.gold:hover {
    background: transparent;
    color: var(--lichen)
}

.fam .btn.fam-btn-light {
    background: transparent;
    border-color: rgba(245, 247, 250, .55);
    color: var(--fam-on)
}

.fam .btn.fam-btn-light:hover {
    background: var(--fam-on);
    border-color: var(--fam-on);
    color: #173b56
}

.fam-badge {
    justify-self: end;
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: 19rem;
    padding: 1.2rem 1.4rem;
    background: var(--fam-card);
    color: var(--fam-card-ink);
    border-start-start-radius: 2rem;
    box-shadow: var(--fam-sh)
}

.fam-badge>i {
    font-size: 2.2rem;
    color: var(--fern)
}

.fam-badge small {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fern)
}

.fam-badge b {
    display: block;
    font: 600 1.6rem/1.1 var(--serif)
}

.fam-badge span {
    font-size: .8rem;
    opacity: .8;
    line-height: 1.4;
    display: block
}

.fam-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(15, 42, 63, .58);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(245, 247, 250, .18)
}

.fam-strip li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .9rem;
    align-items: center;
    padding: 1.3rem clamp(1.2rem, 3vw, 2.4rem);
    border-inline-start: 1px solid rgba(245, 247, 250, .14)
}

.fam-strip li:first-child {
    border-inline-start: 0;
    padding-inline-start: clamp(1.2rem, 5vw, 4.5rem)
}

.fam-strip i {
    grid-row: span 2;
    font-size: 1.7rem;
    color: var(--lichen)
}

.fam-strip b {
    font: 600 1.7rem/1 var(--serif)
}

.fam-strip span {
    font-size: .8rem;
    color: var(--fam-soft)
}

/* 2. plans */
.fam .fam-plans {
    background: var(--bg)
}

.fam-size {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.1rem;
    border: 1px solid var(--line);
    background: var(--bg2);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap
}

.fam-size-u {
    color: var(--mute);
    font-weight: 500
}

.fam-swipe {
    display: none;
    font-size: .82rem;
    color: var(--mute);
    margin-bottom: .6rem
}

.fam-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    align-items: stretch;
    padding-block: 1.2rem
}

.fam-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 2.2rem 1.9rem 1.9rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-start-end-radius: 3.2rem;
    transition: transform .35s, box-shadow .35s
}

.fam-plan:hover {
    transform: translateY(-6px);
    box-shadow: var(--fam-sh)
}

.fam-plan.top {
    background: var(--fam-deep);
    color: var(--fam-on);
    border-color: var(--fam-deep);
    margin-block: -1.2rem;
    padding-block: 3.4rem 2.4rem
}

.fam-plan.top h3,
.fam-plan.top .fam-sum b,
.fam-plan.top .fam-prem b {
    color: var(--fam-on)
}

.fam-idx {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1.6rem;
    font: 600 3.4rem/1 var(--serif);
    color: transparent;
    -webkit-text-stroke: 1px var(--line);
    pointer-events: none
}

.fam-plan.top .fam-idx {
    -webkit-text-stroke-color: rgba(245, 247, 250, .3)
}

.fam-flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 1.9rem;
    background: var(--lichen);
    color: #173b56;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem .8rem
}

.fam-tag {
    color: var(--mute);
    font-size: .92rem;
    margin-top: .2rem
}

.fam-plan.top .fam-tag,
.fam-plan.top .fam-sum small,
.fam-plan.top .fam-prem {
    color: var(--fam-soft)
}

.fam-sum small {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute)
}

.fam-sum b {
    font: 600 4.2rem/1 var(--serif);
    color: var(--moss)
}

.fam-sum b span {
    font-size: 1.5rem
}

.fam-prem {
    padding-block: .9rem;
    border-block: 1px solid var(--line);
    color: var(--mute);
    font-size: .92rem
}

.fam-plan.top .fam-prem {
    border-color: rgba(245, 247, 250, .25)
}

.fam-prem b {
    font: 600 1.9rem/1 var(--serif);
    color: var(--moss)
}

.fam-plan ul {
    display: grid;
    gap: .55rem;
    flex: 1;
    font-size: .94rem
}

.fam-plan li i {
    color: var(--fern);
    margin-inline-end: .5rem;
    font-weight: 700
}

.fam-plan.top li i {
    color: var(--lichen)
}

.fam-plan .btn {
    justify-content: center
}

.fam-note {
    margin-top: 1.4rem;
    font-size: .82rem;
    color: var(--mute)
}

.fam-incl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--line);
    background: var(--line)
}

.fam-incl li {
    display: grid;
    gap: .15rem;
    align-content: start;
    padding: 1.4rem;
    background: var(--bg)
}

.fam-incl i {
    font-size: 1.7rem;
    color: var(--fern);
    margin-bottom: .4rem
}

.fam-incl b {
    font-size: .98rem;
    color: var(--moss)
}

.fam-incl span {
    font-size: .86rem;
    color: var(--mute)
}

/* 3. who is covered */
.fam .fam-who {
    background: var(--bg2)
}

.fam-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem
}

.fam-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 16rem;
    padding: 1.9rem;
    background: var(--bg);
    border: 1px solid var(--line);
    transition: border-color .3s, transform .3s
}

.fam-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), rgba(38, 122, 120, .2), transparent 65%)
}

.fam-tile:hover {
    border-color: var(--fern);
    transform: translateY(-4px)
}

.fam-tile:hover::before {
    opacity: 1
}

.fam-t7 {
    grid-column: span 7;
    border-start-start-radius: 4rem
}

.fam-t5 {
    grid-column: span 5
}

.fam-wide {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    min-height: 0;
    border-style: dashed
}

.fam-wide p {
    color: var(--mute)
}

.fam-dark {
    background: var(--fam-deep);
    border-color: var(--fam-deep);
    color: var(--fam-on)
}

.fam-dark h3 {
    color: var(--fam-on)
}

.fam-dark p {
    color: var(--fam-soft)
}

.fam-ico {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: rgba(38, 122, 120, .14);
    color: var(--fern);
    font-size: 1.6rem;
    margin-bottom: .6rem
}

.fam-dark .fam-ico {
    background: rgba(214, 173, 88, .18);
    color: var(--lichen)
}

.fam-agebadge {
    position: absolute;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.6rem;
    padding: .3rem .75rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--mute)
}

.fam-dark .fam-agebadge {
    border-color: rgba(245, 247, 250, .3);
    color: var(--lichen)
}

.fam-tile>p {
    color: var(--mute);
    font-size: .96rem
}

.fam-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
    padding-top: .6rem
}

.fam-chips li {
    padding: .28rem .7rem;
    background: var(--bg2);
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--moss)
}

.fam-dark .fam-chips li {
    background: rgba(245, 247, 250, .12);
    color: var(--fam-on)
}

/* 4. cashless */
.fam .fam-cash {
    background: linear-gradient(160deg, var(--fam-deep), var(--fam-deep2));
    color: var(--fam-on);
    overflow: hidden
}

.fam-cash h2,
.fam-cash h3 {
    color: var(--fam-on)
}

.fam-cash-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
    max-width: 78rem;
    margin-inline: auto
}

.fam-cash-art {
    position: relative;
    margin: 0;
    aspect-ratio: 4/5;
    border-start-start-radius: 10rem;
    border-end-end-radius: 3rem
}

.fam-cash-art img {
    position: absolute;
    inset: 0;
    border-start-start-radius: inherit;
    border-end-end-radius: inherit
}

.fam-float {
    position: absolute;
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: .9rem 1.2rem;
    background: var(--fam-card);
    color: var(--fam-card-ink);
    box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .7)
}

.fam-float i {
    font-size: 1.7rem;
    color: var(--fern)
}

.fam-float b {
    display: block;
    font-size: .92rem;
    line-height: 1.25
}

.fam-float small {
    font-size: .76rem;
    opacity: .75
}

.fam-float-a {
    inset-inline-end: -1.6rem;
    inset-block-end: 3rem;
    border-start-start-radius: 1.4rem
}

.fam-float-b {
    inset-inline-start: -1.2rem;
    inset-block-start: 4rem
}

.fam-cash-p {
    color: var(--fam-soft);
    margin-top: .6rem
}

.fam-flow {
    margin: 2rem 0
}

.fam-flow li {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.1rem;
    padding-bottom: 1.5rem
}

.fam-flow li:last-child {
    padding-bottom: 0
}

.fam-flow li::before {
    content: "";
    position: absolute;
    inset-block: 3.2rem .2rem;
    inset-inline-start: calc(1.5rem - 1px);
    width: 2px;
    background: rgba(245, 247, 250, .22)
}

.fam-flow li:last-child::before {
    display: none
}

.fam-n {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--lichen);
    border-radius: 50%;
    font: 600 1.4rem/1 var(--serif);
    color: var(--lichen);
    background: transparent;
    transition: background .5s, color .5s
}

.fam-flow h3 {
    font-size: 1.35rem
}

.fam-flow p {
    color: var(--fam-soft);
    font-size: .93rem
}

.fam-js .fam-flow li:not(.on) {
    opacity: .5
}

.fam-flow li {
    transition: opacity .5s
}

.fam-flow li.on .fam-n {
    background: var(--lichen);
    color: #173b56
}

.fam-nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid rgba(245, 247, 250, .2)
}

.fam-nums li {
    padding: 1.2rem 1rem;
    border-inline-start: 1px solid rgba(245, 247, 250, .2)
}

.fam-nums li:first-child {
    border-inline-start: 0;
    padding-inline-start: 0
}

.fam-nums b {
    display: block;
    font: 600 2.6rem/1 var(--serif);
    color: var(--lichen)
}

.fam-nums span {
    font-size: .82rem;
    color: var(--fam-soft)
}

.fam-city {
    display: grid;
    gap: .5rem;
    margin-top: 1.8rem
}

.fam-city label {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fam-soft)
}

.fam-city select {
    width: 100%;
    max-width: 22rem;
    padding: .8rem 1rem;
    font: 500 1rem var(--sans);
    color: #172b3b;
    background: #f5f7fa;
    border: 1px solid transparent;
    border-radius: 2px
}

.fam-city p {
    font-size: .92rem;
    color: var(--fam-soft);
    min-height: 1.6rem
}

.fam-city p b {
    color: var(--lichen);
    font: 600 1.5rem var(--serif)
}

/* 5. get coverage */
.fam .fam-get {
    background: var(--bg)
}

.fam-panel {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    max-width: 76rem;
    margin-inline: auto;
    border: 1px solid var(--line);
    box-shadow: var(--fam-sh)
}

.fam-side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    padding: clamp(1.8rem, 4vw, 3.4rem);
    background: var(--fam-deep);
    color: var(--fam-on)
}

.fam-side::after {
    content: "";
    position: absolute;
    inset-inline-end: -5rem;
    inset-block-end: -5rem;
    width: 15rem;
    height: 15rem;
    border: 2px solid rgba(214, 173, 88, .4);
    border-radius: 50%;
    pointer-events: none
}

.fam-side h2 {
    color: var(--fam-on);
    font-size: clamp(2rem, 3.6vw, 2.9rem)
}

.fam-side-p {
    color: var(--fam-soft)
}

.fam-est {
    padding-block: 1.3rem;
    border-block: 1px solid rgba(245, 247, 250, .2)
}

.fam-est>span {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fam-soft)
}

.fam-est b {
    display: block;
    font: 600 clamp(3.4rem, 6vw, 4.8rem)/1.05 var(--serif);
    color: var(--lichen)
}

.fam-est i {
    font-style: normal
}

.fam-est small {
    font: 500 1rem var(--sans);
    color: var(--fam-soft)
}

.fam-est p {
    font-size: .88rem;
    color: var(--fam-soft)
}

.fam-trust {
    display: grid;
    gap: .8rem;
    font-size: .92rem;
    position: relative;
    z-index: 1
}

.fam-trust i {
    color: var(--lichen);
    margin-inline-end: .6rem
}

.fam-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    align-content: start;
    padding: clamp(1.8rem, 4vw, 3.2rem);
    background: var(--bg2)
}

.fam-form label,
.fam-field {
    display: grid;
    gap: .4rem;
    align-content: start;
    font-size: .85rem;
    font-weight: 700;
    color: var(--mute)
}

.fam-form :is(input:not([type=hidden]), select, textarea) {
    width: 100%;
    padding: .8rem .95rem;
    font: 500 1rem var(--sans);
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 2px
}

.fam-form :is(input, select, textarea):focus {
    outline: 3px solid var(--fern);
    outline-offset: 1px
}

.fam-form textarea {
    resize: vertical
}

.fam-field .fam-step {
    width: 100%
}

.fam-field .fam-step button {
    flex: 0 0 3.2rem;
    min-height: 3rem
}

.fam-field .fam-step output {
    flex: 1
}

.fam-w {
    grid-column: 1/-1
}

.fam-form .btn {
    justify-content: center
}

.fam-form .form-msg {
    min-height: 1.4rem;
    font-weight: 700;
    color: var(--fern)
}

/* tablet */
@media(max-width:1100px) {
    .fam-hero-in {
        grid-template-columns: 1fr
    }

    .fam-badge {
        justify-self: start
    }

    .fam-hero-media::after {
        background: linear-gradient(90deg, rgba(15, 42, 63, .92), rgba(15, 42, 63, .45)), linear-gradient(0deg, rgba(15, 42, 63, .85), transparent 50%)
    }

    .fam-swipe {
        display: block
    }

    .fam-rail {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * clamp(1.2rem, 5vw, 4.5rem));
        padding: 1.2rem clamp(1.2rem, 5vw, 4.5rem) 1.6rem;
        scroll-padding-inline: clamp(1.2rem, 5vw, 4.5rem);
        scrollbar-width: thin
    }

    .fam-plan {
        flex: 0 0 min(21rem, 80%);
        scroll-snap-align: start
    }

    .fam-plan.top {
        margin-block: 0
    }

    .fam-incl {
        grid-template-columns: 1fr 1fr
    }

    .fam-tile,
    .fam-t5 {
        grid-column: span 6
    }

    .fam-t7,
    .fam-wide {
        grid-column: span 12
    }

    .fam-cash-grid,
    .fam-panel {
        grid-template-columns: 1fr
    }

    .fam-cash-art {
        aspect-ratio: 16/11;
        max-width: 38rem;
        border-start-start-radius: 7rem
    }

    .fam-float-a {
        inset-inline-end: 1rem
    }

    .fam-float-b {
        inset-inline-start: 1rem
    }
}

/* mobile */
@media(max-width:760px) {
    .fam .fam-hero {
        min-height: 0
    }

    .fam-hero h1 {
        max-width: none
    }

    .fam-hero-media::after {
        background: linear-gradient(180deg, rgba(15, 42, 63, .75), rgba(15, 42, 63, .88))
    }

    .fam-hero .cta .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .fam-badge {
        max-width: none;
        width: 100%
    }

    .fam-strip {
        grid-template-columns: 1fr 1fr
    }

    .fam-strip li:nth-child(odd) {
        border-inline-start: 0
    }

    .fam-strip li:nth-child(n+3) {
        border-top: 1px solid rgba(245, 247, 250, .14)
    }

    .fam-strip li,
    .fam-strip li:first-child {
        padding: 1rem 1.2rem;
        grid-template-columns: 1fr
    }

    .fam-strip i {
        grid-row: auto;
        font-size: 1.4rem
    }

    .fam-size {
        width: 100%;
        justify-content: space-between
    }

    .fam-plan {
        flex-basis: 84%
    }

    .fam-sum b {
        font-size: 3.6rem
    }

    .fam-incl {
        grid-template-columns: 1fr
    }

    .fam-tile,
    .fam-t5,
    .fam-t7,
    .fam-wide {
        grid-column: span 12
    }

    .fam-t7 {
        border-start-start-radius: 2.6rem
    }

    .fam-tile {
        min-height: 0;
        padding: 1.5rem
    }

    .fam-wide {
        flex-direction: column;
        align-items: flex-start
    }

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

    .fam-cash-art {
        aspect-ratio: 4/5;
        border-start-start-radius: 6rem
    }

    .fam-nums b {
        font-size: 1.9rem
    }

    .fam-nums li {
        padding-inline: .6rem
    }

    .fam-form {
        grid-template-columns: 1fr
    }

    .fam-form .fam-w {
        grid-column: auto
    }
}

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

    .fam-plan,
    .fam-tile,
    .fam-n,
    .fam-flow li {
        transition: none
    }

    .fam-plan:hover,
    .fam-tile:hover {
        transform: none
    }
}


/* Keep hero heading size consistent in LTR and RTL */
.hero-title,
.hero h1 {
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.12;
    font-weight: 500;
    max-width: 100%;
    margin: 0;
}

/* RTL layout adjustments */
[dir="rtl"] .hero-title,
[dir="rtl"] .hero h1 {
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.12;
    text-align: right;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

/* Keep text and buttons aligned */
[dir="rtl"] .hero-content {
    direction: rtl;
    text-align: right;
}

/* Responsive font sizes */
@media (max-width: 768px) {
    .hero-title,
    .hero h1,
    [dir="rtl"] .hero-title,
    [dir="rtl"] .hero h1 {
        font-size: clamp(34px, 7vw, 48px);
        line-height: 1.15;
    }
}