/* ========== Theme Color System ==========
   The --dark-1..5 names are kept for backwards-compat with the ~100 usages
   below, but they now act as a *theme-relative surface scale* (1 = deepest
   section bg … 5 = borders). :root holds the LIGHT theme; [data-bs-theme="dark"]
   re-assigns the same tokens to the original dark values. This mirrors the
   light-base + dark-override pattern already used in the dashboard/wizard CSS.

   Accents (green/blue/yellow) are tuned per theme: the vivid values read well
   on dark surfaces but fail WCAG AA as text on white, so the light theme uses
   deeper variants. Yellow is a limited-use accent only. */
:root {
    /* Light surfaces — gray base with white cards for clear separation */
    --dark-1: #d7dfeb;       /* deepest section bands (clearly gray) */
    --dark-2: #e8edf4;       /* body / main bg (soft gray) */
    --dark-3: #ffffff;       /* cards / sections (white, pops on gray) */
    --dark-4: #dde5ef;       /* elevated cards / hover */
    --dark-5: #b9c5d6;       /* borders / dividers (stronger) */
    /* Accents — deepened for contrast on light backgrounds */
    --green: #16a34a;
    --green-dim: #15803d;
    --green-glow: rgba(34, 197, 94, 0.16);
    /* Green as *text*, which is a different job from green as a fill. --green on a pale green tint
       measures 2.5:1 — unreadable — and even --green-dim only reaches 3.8:1. This is the value that
       clears AA on the tinted chips and pills the site uses (≈6.9:1 on --green-glow). */
    --green-ink: #14532d;
    --blue: #2563eb;
    --blue-dim: #1d4ed8;
    --blue-glow: rgba(59, 130, 246, 0.14);
    /* Blue's equivalent of --green-ink: --blue on --blue-glow is 2.5:1. This is 6.4:1. */
    --blue-ink: #1e40af;
    --yellow: #b45309;
    --yellow-dim: #92400e;
    --yellow-glow: rgba(180, 83, 9, 0.14);
    /* Text — stronger contrast */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #56657a;
    /* The edge of an interactive control. --dark-5 is a divider colour: right for separating two
       pieces of content, far too quiet for the outline of something you are meant to click (1.3:1
       on the section bands). This clears the 3:1 WCAG asks of a control's boundary. */
    --control-edge: #6b7a91;
}

/* Strengthen Bootstrap light-theme borders so cards/controls read on gray.
   Scoped to [data-bs-theme="light"] (not :root) so it does NOT leak into dark
   — :root and Bootstrap's [data-bs-theme=dark] have equal specificity and this
   file loads later, which would otherwise override the dark border color. */
[data-bs-theme="light"] {
    --bs-border-color: #c2cdda;
}

[data-bs-theme="dark"] {
    /* Dark surfaces */
    --dark-1: #0b0f14;       /* deepest background */
    --dark-2: #111820;       /* body / main bg */
    --dark-3: #171f2a;       /* cards / sections */
    --dark-4: #1e2836;       /* elevated cards / hover */
    --dark-5: #263244;       /* borders / subtle dividers */
    /* Accents — vivid on dark surfaces */
    --green: #22c55e;
    --green-dim: #16a34a;
    --green-glow: rgba(34, 197, 94, 0.15);
    /* On dark the tint is nearly black, so green text goes lighter, not deeper (≈7.7:1). */
    --green-ink: #4ade80;
    --blue: #3b82f6;
    --blue-dim: #2563eb;
    --blue-glow: rgba(59, 130, 246, 0.15);
    /* As with green: on dark the tint is nearly black, so blue text goes lighter, not deeper. */
    --blue-ink: #93c5fd;
    --yellow: #fbbf24;
    --yellow-dim: #f59e0b;
    --yellow-glow: rgba(251, 191, 36, 0.15);
    /* Text */
    --text-primary: #e8edf4;
    --text-secondary: #8b95a5;
    /* Was #6b7585, which measured 3.8:1 on --dark-2 — under AA for text of any normal size, and it
       is used for real copy (the pricing card's "/month", step numbers, supporting lines under the
       hero), not just decoration. #7d8799 clears it at 4.9:1 and is still a clear step quieter than
       --text-secondary, so the three-level scale still reads as three levels. The light value was
       already fine at 5.1:1 and is unchanged. */
    --text-muted: #7d8799;
    /* Same job as the light value: 3.2:1 on the dark section bands, where --dark-5 gives 1.5. */
    --control-edge: #5b6678;
}

/* ========== Font size scale ==========
   The account setting sets data-rp-font on <html>; everything sized in rem/em follows from the
   root font-size below. Each step is 15% larger than the one before (1.15 × 1.15 = 1.3225), and
   these three values are the only definition of that scale — the server stores a token
   ("default" | "large" | "larger"), never a percentage.

   Caveat: type declared in px does not follow this (rem/em does). The dashboard is rem-based; the
   wizard CSS still has px sizes that will stay put until they are converted. */
:root {
    --rp-font-scale-default: 1;
    --rp-font-scale-large: 1.15;    /* +15% */
    --rp-font-scale-larger: 1.3225; /* +15% again */
    --rp-font-scale: var(--rp-font-scale-default);
}

:root[data-rp-font="large"] {
    --rp-font-scale: var(--rp-font-scale-large);
}

:root[data-rp-font="larger"] {
    --rp-font-scale: var(--rp-font-scale-larger);
}

html {
    font-size: calc(14px * var(--rp-font-scale));
}

@media (min-width: 768px) {
    html {
        font-size: calc(16px * var(--rp-font-scale));
    }
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    padding-top: 4.5rem;
    background-color: var(--dark-2) !important;
    color: var(--text-primary);
}

/* Offset anchor scroll for the fixed navbar. #faq is no longer a section of its own — it is the
   questions block inside #benefits — but it is still a link target, so it still needs the offset. */
#hero, #how, #pricing, #benefits, #faq, #testimonials, #start {
    scroll-margin-top: 5rem;
}

.bg-body {
    background-color: var(--dark-2) !important;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--dark-2), 0 0 0 0.25rem var(--blue);
}

.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

/* ---------- Skip link ----------
   Rendered first in the body (_Layout) and parked off-screen until it takes focus, at which point
   it drops in under the fixed navbar. Not display:none — a hidden element cannot be focused, and
   then the link exists for nobody. */
.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 1100;   /* above the fixed navbar (1030) */
    padding: 0.7rem 1.4rem;
    border-radius: 0 0 10px 10px;
    background: var(--green-dim);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translate(-50%, 0);
    color: #fff;
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* The skip link's target takes focus programmatically; it must not draw a ring around the whole
   page when it does. */
#main:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

/* ---------- Sidebar --------- */
@media (min-width: 768px) {
    .sidebar .offcanvas-lg {
        position: -webkit-sticky;
        position: sticky;
        top: 48px;
    }

    .navbar-search {
        display: block;
    }
}

.sidebar .nav-link {
    font-size: .875rem;
    font-weight: 500;
}

.sidebar .nav-link.active {
    color: var(--blue);
}

.sidebar-heading {
    font-size: .75rem;
}

/* ---------- Brand ----------
   The mark is an inline SVG (Views/Shared/_BrandMark.cshtml), so its size is set on the box and
   the artwork scales into it. Sized in px on purpose: the header is fixed-height chrome and must
   not grow with the account's font-size setting, or it eats the viewport on a phone. */
.brand-mark {
    display: inline-flex;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo:hover .brand-mark { transform: translateY(-1px); }
.brand-mark { transition: transform 0.18s ease; }

/* Set in the same tight, low-contrast-safe way on both themes: the wordmark is lower-case because
   the name is. */
.brand-word {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1;
    color: var(--text-primary);
}

@media (max-width: 400px) {
    .brand-mark { width: 30px; height: 30px; }
    .brand-word { font-size: 19px; }
}

/* ---------- Navbar ---------- */
.navbarbg {
    background-color: var(--dark-1) !important;
    border-bottom: 1px solid var(--dark-5);
}

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.navbar .form-control {
    padding: .75rem 1rem;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -6px;
    left: 0;
    background: linear-gradient(90deg, var(--green), var(--blue));
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-item:hover::after {
    visibility: visible;
    width: 100%;
}

/* ---------- Theme switch (visitors only) ---------- */
.navbar-nav .theme-menu::after { display: none; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    /* --control-edge, not --dark-5: on the near-black navbar the divider colour is a 1.5:1 edge and
       the chip is technically there and practically isn't. */
    border: 1.5px solid var(--control-edge);
    border-radius: 50%;
    /* A surface, not transparent. On the dark navbar a transparent chip with a --dark-5 border is
       very nearly the navbar, and the control has to be findable — it is the only way a visitor can
       change the theme. --dark-3 lifts it off the bar on both themes. */
    background: var(--dark-3);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

/* Bootstrap's dropdown caret would push the glyph off-centre in a round button. */
.theme-toggle.dropdown-toggle::after { display: none; }

/* The glyphs are <use> references to Bootstrap's icon paths, which carry no fill of their own —
   and an SVG shape with no fill paints black. On the light navbar that read as "a dark icon"; on
   the dark one it was black on #0b0f14, i.e. invisible, which is exactly where a visitor most
   needs to find the theme control. Inheriting the button's colour fixes both at once.
   The same applies to the icons inside the dropdown, which sit on a dark card in dark mode. */
.theme-toggle svg,
.theme-dropdown svg {
    fill: currentColor;
    flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle[aria-expanded="true"] {
    border-color: var(--green);
    color: var(--green-ink);
    background: var(--green-glow);
}

[data-bs-theme="dark"] .theme-toggle:hover,
[data-bs-theme="dark"] .theme-toggle[aria-expanded="true"] { border-color: var(--green); }

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-glow);
}

.theme-dropdown {
    --bs-dropdown-bg: var(--dark-3);
    --bs-dropdown-border-color: var(--dark-5);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-bg: var(--dark-4);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-active-bg: var(--green-glow);
    --bs-dropdown-link-active-color: var(--green-ink);
    min-width: 9rem;
    border-radius: 12px;
    padding: 0.35rem;
}

.theme-dropdown .dropdown-item { border-radius: 8px; font-size: 0.9rem; }

@media (max-width: 991.98px) {
    /* In the stacked menu it becomes a labelled row rather than a lone circle floating in a list. */
    .theme-menu { margin: 0.35rem 0; }
    .theme-toggle { width: auto; padding: 0.45rem 0.9rem; border-radius: 999px; }
    .theme-toggle::before { content: "Theme"; font-weight: 700; font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}


@media (prefers-reduced-motion: reduce) {
    .brand-mark { transition: none; }
    .logo:hover .brand-mark { transform: none; }
}

.usernav .active {
    background-color: var(--dark-4);
}

.form-control:focus {
    border-color: var(--blue);
    box-shadow: none;
}

.logged-user-style {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background-color: var(--green);
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
    color: #000 !important;
    font-weight: 600 !important;
    line-height: 1.5;
}

.logged-user-style:hover {
    background-color: var(--green-dim);
}

@media (max-width: 992px) {
    .logged-user-style {
        padding: 0.3rem 0.85rem;
        display: inline-block;
    }
}

/* ---------- Account menu (nav dropdown) ---------- */
.account-menu .logged-user-style.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.account-menu .logged-user-style.dropdown-toggle::after {
    margin-left: 0.15rem;
    vertical-align: 0.1em;
}

.account-menu-icon {
    flex-shrink: 0;
}

.account-menu-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown {
    min-width: 250px;
    padding: 0.35rem;
    background-color: var(--dark-2);
    border: 1px solid var(--dark-5);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.account-dropdown-head {
    padding: 0;
}

.account-dropdown-head-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--dark-3);
    border: 1px solid var(--dark-5);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.account-dropdown-head-link:hover,
.account-dropdown-head-link:focus {
    background-color: var(--dark-4);
    border-color: var(--green);
}

.account-dropdown-head-info {
    flex: 1;
    min-width: 0;
}

/* "Dashboard ›" call-to-action makes it obvious the header row is a clickable link */
.account-dropdown-head-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--green);
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.account-dropdown-head-link:hover .account-dropdown-head-cta,
.account-dropdown-head-link:focus .account-dropdown-head-cta {
    opacity: 1;
    transform: translateX(2px);
}

.account-dropdown-email {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-body-color, #e9ecef);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown .dropdown-item.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 7px;
    font-size: 0.86rem;
    color: var(--bs-body-color, #e9ecef);
}

.account-dropdown .dropdown-item.account-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.account-dropdown .dropdown-item.account-dropdown-item:hover,
.account-dropdown .dropdown-item.account-dropdown-item:focus {
    background-color: var(--dark-4);
    color: var(--text-primary);
}

.account-dropdown .dropdown-item.account-dropdown-subscribe {
    color: var(--green, #22c55e);
    font-weight: 600;
}

.account-dropdown .dropdown-item.account-dropdown-subscribe:hover {
    color: #fff;
    background-color: var(--green-dim, #16a34a);
}

.account-dropdown .dropdown-item.account-dropdown-logout {
    color: #fca5a5;
}

.account-dropdown .dropdown-item.account-dropdown-logout:hover {
    background-color: rgba(220, 38, 38, 0.18);
    color: #fecaca;
}

.account-dropdown .dropdown-item.account-dropdown-danger {
    color: #fca5a5;
}

.account-dropdown .dropdown-item.account-dropdown-danger:hover,
.account-dropdown .dropdown-item.account-dropdown-danger:focus {
    background-color: rgba(220, 38, 38, 0.18);
    color: #fecaca;
}

.account-dropdown .dropdown-divider {
    border-color: var(--dark-5);
    margin: 0.3rem 0.2rem;
}

/* Don't let the nav underline animation run across the account menu trigger */
.navbar-nav .nav-item.account-menu:hover::after {
    visibility: hidden;
    width: 0;
}

/* In the collapsed mobile navbar (navbar-expand-sm stacks below 576px) the account
   menu opens inline and expanded by default — needing a tap on the name to reveal it
   adds friction on touch. On desktop it stays a normal click-to-open dropdown.
   !important keeps the inline layout even if Bootstrap toggles .show / runs Popper. */
@media (max-width: 575.98px) {
    .account-menu .account-dropdown.dropdown-menu {
        display: block !important;
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.35rem;
        transform: none !important;
        box-shadow: none;
    }

    /* Menu is always open here, so the toggle's dropdown caret is meaningless. */
    .account-menu .logged-user-style.dropdown-toggle::after {
        display: none;
    }
}

/* ---------- Hero Section ----------
   Two columns: the pitch, and the picker that is the point of the page. The pitch is sized to be
   read in one pass — a label, a headline, three lines of prose, three checks — because on the right
   of it there is already something to do. */
#hero {
    background: var(--dark-2) !important;
    position: relative;
    overflow: hidden;
}

/* A soft wash behind the picker's side, so the hero has a horizon without a hard band across it.
   Decorative only, and it never sits over text. */
#hero::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 55%;
    height: 150%;
    background: radial-gradient(closest-side, var(--green-glow), transparent 72%);
    pointer-events: none;
    z-index: 0;
}

#hero > .container { position: relative; z-index: 1; }

/* Sized in rem so it follows the account's font-size setting, and clamped so it never runs to a
   line length nobody can track back from on a wide screen. */
.hero-title {
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3.15rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.hero-title-accent {
    /* --green-dim, not --green: at this size the threshold is 3:1 and --green measures 2.8 on the
       light hero. Dark overrides it back to the vivid green, which is the legible one there. */
    color: var(--green-dim);
    /* The coloured half of the sentence, with the underline sitting behind the baseline. */
    background: linear-gradient(180deg, transparent 62%, var(--green-glow) 62%);
}

[data-bs-theme="dark"] .hero-title-accent { color: var(--green); }

.hero-lead {
    color: var(--text-secondary);
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.text-lg-start .hero-lead { margin-left: 0; }
.hero-copy { margin-inline: auto; }

/* The row's own padding, which was .py-4 until the space over the picker became worth naming.
   THE ROOM ABOVE IS HALVED. The picker is the first thing under the header on a phone, so that
   room is the distance between a reader and the thing they came to do: it measured 54px there and
   39px on a wide screen, and it now measures about half of each. Only the top is cut — the bottom
   is still the 1.5rem .py-4 gave it, because that one separates the hero from the band below.

   Two rules do it, and both have to move together: this one, and #hero's own share of "reduce
   padding on mobile" at the foot of this file, which is where the other half of a phone's gap
   comes from (the hero band carries no top padding at all above 576px). */
.hero-row {
    padding-top: 0.6rem;
    padding-bottom: 1.5rem;
}

.hero-points {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.hero-points i {
    color: var(--green);
    width: unset;
    height: unset;
    flex-shrink: 0;
}

.hero-trial {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.hero-trial i { width: unset; height: unset; }

@media (max-width: 991.98px) {
    /* One column: the picker leads (order-* on the hero columns) and the pitch reads under it,
       centred. */
    .hero-points { align-items: center; }
    .hero-lead { margin-inline: auto; }
    #hero::before { display: none; }
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* ---------- How It Works Section ----------
   A self-playing flow diagram: three step boxes, four routed wires, and one caption underneath that
   carries whichever part is currently lit. The wires' geometry is computed in hiw-flow.js from the
   boxes' measured positions; everything below is what they look like once they are there. */

#how {
    background: var(--dark-1);
    position: relative;
    overflow: hidden;
}

#how .hiw {
    max-width: 1000px;
    margin: 0 auto;
}

/* ── The stage ──
   Positioned, because the wires and their labels are laid over it in stage coordinates. The extra
   room on the right and below is where the two loops route; without it they would be clipped. */
#how .hiw-stage {
    position: relative;
    /* The right gutter is where the feedback loop routes and where its label sits; the bottom one is
       for the edit return running under the boxes. Both are wide enough for the wire plus a centred
       label — the script clamps labels into the stage as a backstop if a longer one is authored. */
    padding: 0 8rem 6rem 0;
}

#how .hiw-wires {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

#how .hiw-wire-line,
#how .hiw-wire-head {
    fill: none;
    stroke: var(--dark-5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.35s ease, stroke-width 0.35s ease;
}

#how .hiw-wire-line { stroke-dasharray: 5 5; }

/* The lit wire. Its dashes travel, which is what makes an arrow read as a direction rather than a
   dotted line — and the two feedback wires spend their whole beat looking like they are flowing. */
#how .hiw-wire.is-active .hiw-wire-line,
#how .hiw-wire.is-active .hiw-wire-head {
    stroke: var(--green);
    stroke-width: 2.6;
}

#how .hiw-wire.is-active .hiw-wire-line { animation: hiwTravel 1.1s linear infinite; }

@keyframes hiwTravel { to { stroke-dashoffset: -20; } }

/* ── Steps ── */
#how .hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* The gap is sized for what goes in it: a forward wire with its label centred on it. At 4.5rem
       the labels were wider than the space and sat on top of the boxes either side, and 8rem — the
       first size that fit them — left the row looking tight. This is that plus 15%, then 5% again.
       Row-only: the stacked layout sets its own gap in the narrow block below. */
    column-gap: 9.7rem;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

#how .hiw-step {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 2.4rem 1.4rem 1.4rem;
    text-align: left;
    border-radius: 18px;
    background: var(--dark-3);
    border: 2px solid var(--dark-5);
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#how .hiw-step.is-active {
    border-color: var(--green);
    box-shadow: 0 8px 26px rgba(34, 197, 94, 0.16);
    transform: translateY(-3px);
}

#how .hiw-step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-glow);
}

#how .hiw-step-num {
    position: absolute;
    top: -0.9rem;
    left: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--dark-3);
    border: 2px solid var(--dark-5);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 800;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

#how .hiw-step.is-active .hiw-step-num {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

[data-bs-theme="dark"] #how .hiw-step.is-active .hiw-step-num { color: #04220f; }

#how .hiw-step-title {
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

#how .hiw-step-line {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Arrow labels ──
   Sat on the midpoint of their own wire by the script, so they move with the route. translate(-50%)
   centres them on that point; the script only supplies where the point is. */
#how .hiw-tag {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--dark-3);
    border: 1.5px solid var(--dark-5);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

#how .hiw-tag.is-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

[data-bs-theme="dark"] #how .hiw-tag.is-active { color: #04220f; }

#how .hiw-tag:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-glow);
}

/* Until the script has measured the wires the tags have no position worth showing. */
#how .hiw:not(.is-ready) .hiw-tag { opacity: 0; }
#how .hiw-tag { opacity: 1; transition-property: border-color, color, background, transform, opacity; }

/* ── Caption ──
   One panel that every part writes into. Fixed minimum height so the diagram above it does not
   jump each time a longer explanation comes round. */
#how .hiw-caption {
    max-width: 760px;
    margin: 0.5rem auto 0;
    min-height: 9.5rem;
    padding: 1.4rem 1.6rem;
    border-radius: 16px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    border-left: 3px solid var(--green);
    text-align: left;
}

#how .hiw-caption-kind {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--green-ink);
    margin-bottom: 0.3rem;
}

#how .hiw-caption-title {
    display: block;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 0.45rem;
}

#how .hiw-caption-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

#how .hiw-caption-text strong { color: var(--text-primary); font-weight: 700; }

#how .hiw-caption.is-swapping { animation: hiwCaptionIn 0.4s ease; }

@keyframes hiwCaptionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Prev/next is the shared .flow-nav component — see "Flow nav" further down. */
#how .hiw-nav { margin-top: 1.4rem; }

/* ── After-plan footer strip ── */
#how .how-footer {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

#how .how-footer-item { display: inline-flex; align-items: center; gap: 0.5rem; }
#how .how-footer-item i { color: var(--green); width: unset; height: unset; }

/* ── Narrow ──
   One column. The script notices the boxes are no longer on a shared top edge and routes both loops
   out to the right instead of around the bottom, so the stage reserves its spare room there. */
@media (max-width: 900px) {
    /* The gutter carries both loops, one outside the other, and the labels that sit on them; the
       floor is where the edit return drops out of step 3 before heading right. */
    #how .hiw-stage { padding: 0 8.5rem 3.25rem 0; }

    #how .hiw-steps {
        grid-template-columns: 1fr;
        /* Deliberately generous. In a column every arrow becomes a short vertical run, and at
           3.25rem they were stubs — a reader could see the boxes were connected but not read the
           connection or comfortably hit its label. This is the height the section needs to still be
           a diagram on a phone rather than a list with lines between it. */
        gap: 5.5rem;
    }

    #how .hiw-tag { font-size: 0.7rem; padding: 0.26rem 0.6rem; }
    #how .hiw-caption { min-height: 11.5rem; }
}

@media (max-width: 576px) {
    #how .hiw-stage { padding: 0 8rem 3.25rem 0; }
    #how .hiw-steps { gap: 5rem; }
    #how .hiw-step { padding: 2.2rem 1.1rem 1.2rem; }
    #how .hiw-caption { padding: 1.15rem 1.15rem; min-height: 13rem; }

    #how .how-footer {
        flex-direction: column;
        gap: 0.6rem;
        align-items: flex-start;
    }
}

/* Reduced motion: the diagram is still a diagram and every part still opens on hover, focus or
   click — it just stops walking itself, and nothing slides or travels to get here. */
@media (prefers-reduced-motion: reduce) {
    #how .hiw-step,
    #how .hiw-tag,
    #how .hiw-step-num,
    #how .hiw-wire-line,
    #how .hiw-wire-head { transition: none !important; }

    #how .hiw-step.is-active { transform: none; }
    #how .hiw-tag.is-active { transform: translate(-50%, -50%); }
    #how .hiw-wire.is-active .hiw-wire-line { animation: none; }
    #how .hiw-caption.is-swapping { animation: none; }
}

/* ---------- Pricing Section ---------- */
#pricing {
    background: var(--dark-2);
}

.pricing::before {
    position: absolute;
    content: "";
    height: 86px;
    width: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dim) 100%);
    transition: all 0.3s ease-out 0s;
    transform: translateZ(-1px);
    opacity: 0.2;
}

.pricing {
    margin: 30px auto 30px auto;
    width: 70px;
    height: 70px;
    background: var(--dark-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    transform-style: preserve-3d;
}

#pricing .card {
    background: var(--dark-3);
    border: 1px solid var(--dark-5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 16px;
}

#pricing .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

#pricing .card.card-popular {
    border: 2px solid var(--green) !important;
}

#pricing .card.card-popular:hover {
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.15);
}

#pricing .card-title {
    color: var(--text-primary);
    font-weight: 700;
}

#pricing h4 {
    color: var(--green);
    font-weight: 700;
    font-size: 2rem;
}

#pricing .list-unstyled li {
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

#pricing .list-unstyled .bi-check {
    font-weight: bold;
    margin-right: 0.5rem;
}

/* ---------- Why Plan (benefits + questions, one section) ----------
   Replaces three sections: the benefit cards, the without/with comparison strip and the FAQ. Each
   item below is one benefit stated twice — as the failure it prevents and the behaviour it puts
   there instead — which is the comparison folded into the benefit rather than restated under its
   own heading. */

#benefits { background: var(--dark-1); }

#benefits .wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 0 0 3rem;
    padding: 0;
}

#benefits .wp-item {
    position: relative;
    padding: 1.5rem 1.5rem 1.35rem;
    border-radius: 18px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

[data-bs-theme="dark"] #benefits .wp-item { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); }

#benefits .wp-item:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 10px 26px rgba(34, 197, 94, 0.12);
}

#benefits .wp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 0.9rem;
    border-radius: 13px;
    background: var(--green-glow);
    color: var(--green-ink);
}

#benefits .wp-icon svg { width: 1.4rem; height: 1.4rem; }

#benefits .wp-title {
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.85rem;
    color: var(--text-primary);
}

/* The pair. The "without" line is deliberately the quieter of the two — it is there to be
   recognised, not dwelt on; the line under it is the one doing the selling. */
#benefits .wp-without,
#benefits .wp-with {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.5;
}

/* The "without" line is the quieter of the two, but it is still a full sentence someone has to
   read, so it takes --text-secondary rather than the muted step. The hierarchy is carried by the
   weight and by the line under it being full-strength. */
#benefits .wp-without {
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px dashed var(--dark-5);
    color: var(--text-secondary);
}

#benefits .wp-with { color: var(--text-primary); font-weight: 500; }

/* The marks are drawn rather than typed: a glyph in the text would be read out by a screen reader
   as punctuation, and these two lines already say "without" and "with" in their own words. */
#benefits .wp-mark {
    position: relative;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.18rem;
    border-radius: 50%;
}

#benefits .wp-mark::before,
#benefits .wp-mark::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
}

#benefits .wp-mark--no {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
}

[data-bs-theme="dark"] #benefits .wp-mark--no { color: #f87171; }

#benefits .wp-mark--no::before,
#benefits .wp-mark--no::after {
    top: 50%;
    left: 50%;
    width: 0.52rem;
    height: 1.6px;
}

#benefits .wp-mark--no::before { transform: translate(-50%, -50%) rotate(45deg); }
#benefits .wp-mark--no::after  { transform: translate(-50%, -50%) rotate(-45deg); }

#benefits .wp-mark--yes {
    background: var(--green-glow);
    color: var(--green-ink);
}

#benefits .wp-mark--yes::before {
    top: 52%;
    left: 34%;
    width: 0.26rem;
    height: 1.7px;
    transform: translate(-50%, -50%) rotate(45deg);
}

#benefits .wp-mark--yes::after {
    top: 45%;
    left: 55%;
    width: 0.44rem;
    height: 1.7px;
    transform: translate(-50%, -50%) rotate(-50deg);
}

/* ── The questions ──
   Same section, its own visual block, so it reads as the tail of the argument rather than a fourth
   thing to scroll past. */
#benefits .wp-questions {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.75rem 1.5rem;
    border-radius: 22px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
}

#benefits .wp-questions-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Reveal: one .animate-on-scroll on the grid, children staggered off its .visible. */
.js-reveal #benefits .wp-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i, 0) * 80ms);
}

.js-reveal #benefits .wp-grid.visible .wp-item {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 576px) {
    #benefits .wp-grid { grid-template-columns: 1fr; margin-bottom: 2rem; }
    #benefits .wp-item { padding: 1.25rem; }
    #benefits .wp-questions { padding: 1.5rem 1.1rem 1rem; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #benefits .wp-item { transition: none; }
    #benefits .wp-item:hover { transform: none; }

    .js-reveal #benefits .wp-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Accordion ──
   #faq is now a block inside #benefits rather than a section of its own, so the items sit on the
   questions card instead of on the page. They take the body colour to read as insets on it — on
   white that is the page grey, on dark it is the deeper ground behind the card. */
#faq .accordion-item {
    background: var(--dark-2);
    border: 1px solid var(--dark-5);
    border-radius: 12px !important;
    overflow: hidden;
}

#faq .accordion-button {
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    border: none;
    box-shadow: none;
}

#faq .accordion-button:not(.collapsed) {
    background: var(--dark-4);
    color: var(--green-ink);
    box-shadow: none;
}

/* Dark theme: Bootstrap's accordion chevron SVG is dark by default, so invert
   it to stay visible on dark surfaces. Light theme keeps Bootstrap's default. */
[data-bs-theme="dark"] #faq .accordion-button::after {
    filter: invert(1) brightness(0.7);
}

[data-bs-theme="dark"] #faq .accordion-button:not(.collapsed)::after {
    filter: invert(1) brightness(1);
}

#faq .accordion-body {
    background: var(--dark-2);
    color: var(--text-secondary);
    border-top: 1px solid var(--dark-5);
}

/* ---------- Flow nav ----------
   The prev/next control for a section that plays itself — "How It Works" and the testimonials both
   use it, so the two behave and look the same.

   It replaces the row of chips those sections carried. The chips tried to be three things at once —
   a position readout, a countdown, and a jump control — and to do that they had to be small enough
   to fit seven across, which made them fiddly to hit and hard to read. Two arrows do the one job
   that actually matters (move me on, move me back) at a size you cannot miss.

   Deliberately large: 3rem circles with a 2px edge. These are the only controls in either section,
   so there is nothing for them to compete with and every reason to make them obvious.
   ---------------------------------------------------------------- */
.flow-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.flow-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--control-edge);
    background: var(--dark-3);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease,
                transform 0.14s ease, box-shadow 0.16s ease;
}

.flow-nav-btn svg { width: 1.35rem; height: 1.35rem; display: block; }

.flow-nav-btn:hover:not(:disabled) {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--green-glow);
}

[data-bs-theme="dark"] .flow-nav-btn:hover:not(:disabled) { color: #04220f; }

.flow-nav-btn:active:not(:disabled) { transform: translateY(0); }

.flow-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.flow-nav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--green-glow);
}

@media (max-width: 576px) {
    .flow-nav-btn { width: 2.75rem; height: 2.75rem; }
    .flow-nav-btn svg { width: 1.2rem; height: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-nav-btn { transition: none; }
    .flow-nav-btn:hover:not(:disabled) { transform: none; }
}

/* ---------- Closing call to action ----------
   One band, one button, at the point where the page has finished making its case. */
#start { background: var(--dark-2); }

.cta-band {
    position: relative;
    overflow: hidden;
    max-width: 780px;
    margin: 0 auto;
    padding: 2.75rem 1.75rem;
    text-align: center;
    border-radius: 24px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.07);
}

[data-bs-theme="dark"] .cta-band { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }

/* The green edge ties it to the picker at the top, which is the same offer. */
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green), var(--blue));
}

.cta-title {
    font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.cta-text {
    max-width: 34rem;
    margin: 0 auto 1.6rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.7rem;
    border-radius: 999px;
    background: var(--green);
    color: #04220f;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px var(--green-glow);
    transition: background 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}

[data-bs-theme="light"] .cta-button { color: #fff; background: var(--green-dim); }

.cta-button:hover,
.cta-button:focus {
    background: var(--green-dim);
    color: #04220f;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
}

[data-bs-theme="light"] .cta-button:hover,
[data-bs-theme="light"] .cta-button:focus { color: #fff; background: var(--green-ink); }

@media (max-width: 576px) {
    .cta-band { padding: 2rem 1.15rem; border-radius: 18px; }
    .cta-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-button { transition: none; }
    .cta-button:hover, .cta-button:focus { transform: none; }
}

/* ---------- Testimonials Section ----------
   One horizontally scrolling row. The scrolling itself is CSS — overflow-x plus scroll-snap — so
   drag, trackpad, touch and keyboard all work with no script; the arrows in the header are the only
   part that needs one. */

#testimonials { background: var(--dark-2); }

#testimonials .tm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* The arrows are the shared .flow-nav component — see "Flow nav". Only their placement in this
   section's header is local. */
#testimonials .tm-controls { flex-shrink: 0; }

/* The rail. Padding at the ends so a snapped card is not flush against the container edge, and
   negative margins so the row still lines up with the rest of the page's grid. */
#testimonials .tm-rail { position: relative; }

#testimonials .tm-track {
    display: flex;
    gap: 1rem;
    margin: 0 -0.5rem;
    padding: 0.35rem 0.5rem 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Snap inside the padding, not the border box. Without this the first card's snap position is
       the padding itself, so the rail sits at scrollLeft: 8 when it is at the start — and the
       "previous" arrow, which goes by scrollLeft, never believes it has reached the beginning. */
    scroll-padding-inline: 0.5rem;

    /* No scrollbar. The rail still scrolls by every means it did before — drag, swipe, wheel,
       keyboard, the dots, the arrows — this only removes the bar itself, which was a grey trough
       under a row of cards with a perfectly good position indicator already sitting beneath it.
       Three declarations because three engines each want their own. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
}

#testimonials .tm-track::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

#testimonials .tm-track:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--green-glow);
    border-radius: 18px;
}

/* Cards are a fixed width rather than a fraction of the row: the number visible should change with
   the screen, not the size of each card. */
#testimonials .tm-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(300px, 86vw, 470px);
    scroll-snap-align: start;
    padding: 1.9rem 1.9rem 1.6rem;
    border-radius: 20px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

[data-bs-theme="dark"] #testimonials .tm-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

#testimonials .tm-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 10px 26px rgba(34, 197, 94, 0.12);
}

/* Which plan the story came from — the reason the set is worth scrolling through. */
#testimonials .tm-plan {
    align-self: flex-start;
    margin-bottom: 1.05rem;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* The four areas of the catalogue, in the accents the activity selector already gives them
   (ActivitySelector.cshtml's palette), so a badge here reads as the same area a reader will meet
   in the picker. Local variables rather than site tokens: only green has a --*-glow/--*-ink pair
   that matches, and keeping all four together is what stops them drifting apart from the picker.
   Each accent is one rgb triple plus the ink that clears AA on its own 15% tint. */
#testimonials {
    --tm-fitness: 34, 197, 94;
    --tm-eating: 245, 158, 11;
    --tm-mind: 139, 92, 246;
    --tm-habits: 14, 165, 233;

    --tm-fitness-ink: #15803d;
    --tm-eating-ink: #b45309;
    --tm-mind-ink: #6d28d9;
    --tm-habits-ink: #0369a1;
}

[data-bs-theme="dark"] #testimonials {
    --tm-fitness-ink: #4ade80;
    --tm-eating-ink: #fbbf24;
    --tm-mind-ink: #c4b5fd;
    --tm-habits-ink: #7dd3fc;
}

#testimonials .tm-plan--fitness { background: rgba(var(--tm-fitness), 0.15); color: var(--tm-fitness-ink); }
#testimonials .tm-plan--eating  { background: rgba(var(--tm-eating), 0.15);  color: var(--tm-eating-ink); }
#testimonials .tm-plan--mind    { background: rgba(var(--tm-mind), 0.15);    color: var(--tm-mind-ink); }
#testimonials .tm-plan--habits  { background: rgba(var(--tm-habits), 0.15);  color: var(--tm-habits-ink); }

#testimonials .tm-quote {
    flex: 1;
    margin: 0 0 1.35rem;
    font-size: 1.03rem;
    line-height: 1.65;
    color: var(--text-primary);
}

#testimonials .tm-person {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--dark-5);
}

#testimonials .tm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* The initials carry the same area accent as the badge above them. */
#testimonials .tm-avatar--fitness { background: rgba(var(--tm-fitness), 0.15); color: var(--tm-fitness-ink); }
#testimonials .tm-avatar--eating  { background: rgba(var(--tm-eating), 0.15);  color: var(--tm-eating-ink); }
#testimonials .tm-avatar--mind    { background: rgba(var(--tm-mind), 0.15);    color: var(--tm-mind-ink); }
#testimonials .tm-avatar--habits  { background: rgba(var(--tm-habits), 0.15);  color: var(--tm-habits-ink); }

#testimonials .tm-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#testimonials .tm-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

#testimonials .tm-detail {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

#testimonials .testimonial-disclaimer {
    display: flex;
    align-items: flex-start;
    padding: 0.9rem 1.15rem;
    border-radius: 12px;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

#testimonials .testimonial-disclaimer strong { color: var(--text-primary); }

@media (max-width: 700px) {
    /* The arrows are redundant next to a thumb; the row is still swipeable. */
    #testimonials .tm-controls { display: none; }
    #testimonials .tm-head { display: block; }
}

@media (max-width: 576px) {
    #testimonials .tm-card { padding: 1.25rem; }
    #testimonials .tm-quote { font-size: 0.92rem; }

    #testimonials .testimonial-disclaimer {
        font-size: 0.76rem;
        padding: 0.75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #testimonials .tm-card { transition: none; }
    #testimonials .tm-card:hover { transform: none; }
    #testimonials .tm-track { scroll-behavior: auto; }
}

/* ---------- Services ---------- */
.services {
    padding: 60px 0;
}

.services .service-item {
    padding: 40px;
    height: 100%;
    border-radius: 10px;
}

.services .service-item .icon {
    width: 48px;
    height: 48px;
    position: relative;
    margin-bottom: 50px;
}

.services .service-item .icon:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    border-radius: 50px;
    z-index: 1;
    top: 10px;
    right: -20px;
    transition: 0.3s;
}

.services .service-item h3 {
    font-weight: 700;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
    font-size: 22px;
    position: relative;
    display: inline-block;
    border-bottom: 4px solid var(--dark-5);
    transition: 0.3s;
}

.services .service-item .readmore {
    margin-top: 15px;
    display: inline-block;
    color: var(--blue);
}

.services .service-item:hover .icon:before {
    background: var(--green);
}

.services .service-item:hover h3 {
    border-color: var(--blue);
}

/* ---------- Portfolio/Gallery ---------- */
.filter-active {
    font-weight: bold;
}

.portfolio-wrap {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.portfolio-wrap img {
    transition: transform 0.3s ease-in-out;
}

.portfolio-wrap:hover img {
    transform: scale(1.1);
}

.box:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.box img {
    transition: transform 0.5s;
    transform: scale(1.1);
}

.box:hover img {
    transform: scale(1);
}

/* ---------- Scroll to Top ---------- */
.scroll-top {
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    border: none;
    transition: opacity 0.3s ease, bottom 0.3s ease, background 0.3s ease;
}

.scroll-top:hover {
    background: var(--green);
    color: white;
}

.scroll-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark-2), 0 0 0 6px var(--blue);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top { transition: none; }
}

/* ---------- Blog ---------- */
.custom-file-label::after {
    content: "Browse";
}

.custom-file-input {
    border: 1px solid var(--dark-5);
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.c-blog:hover {
    transition: transform 0.5s;
    transform: scale(1.1);
}

/* ---------- Docs ---------- */
.selected {
    border-left: 2px solid var(--green);
}

.sidebar-left {
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    overflow-y: auto;
}

.sidebar-container {
    height: 100vh;
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
    right: 0;
}

.scrollspy-sidebarRight .nav-link {
    transition: color 0.3s, border-left 0.3s;
}

.scrollspy-sidebarRight .nav-link.active {
    border-left: 3px solid var(--green);
}

/* ---------- Footer ---------- */
#footer {
    background: var(--dark-1) !important;
    border-top: 1px solid var(--dark-5);
}

#footer .footer-links h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

#footer .footer-links li { margin-bottom: 0.4rem; }

/* inline-block + vertical padding so the link is a tappable box rather than a line of text. These
   sit in a stacked column on a phone, where they were 21px tall on a 27px pitch — under the 24px
   WCAG 2.2 asks for, and fiddly with a thumb even before that. The padding is on the anchor, not
   the <li>, so it is the target that grows and not just the gap. */
#footer .footer-links a {
    display: inline-block;
    padding: 0.28rem 0;
    color: var(--text-secondary) !important;
    transition: color 0.15s ease;
}

#footer .footer-links a:hover { color: var(--green) !important; }

#footer .footer-baseline {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dark-5);
    font-size: 0.8rem;
    /* The footer sits on --dark-1, a shade darker than the body, which is just enough to put
       --text-muted at 4.4:1 here when it clears 5.0 elsewhere. */
    color: var(--text-secondary);
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.1s; }
.fade-in-up.delay-2 { animation-delay: 0.2s; }
.fade-in-up.delay-3 { animation-delay: 0.3s; }
.fade-in-up.delay-4 { animation-delay: 0.4s; }
.fade-in-up.delay-5 { animation-delay: 0.5s; }
.fade-in-up.delay-6 { animation-delay: 0.6s; }

/* Scroll-triggered animation.
   Gated on .js-reveal, which the layout's head script adds to <html>. Without that gate the rule
   was `opacity: 0` unconditionally and the entire page below the hero — every section, the whole
   FAQ, the pricing cards — was invisible until an IntersectionObserver callback said otherwise. A
   blocked script, a JS error above it, or an observer that never fires left a reader with a hero
   and a page of blank space. Now the content is visible by default and the animation is the thing
   that has to opt in. */
.js-reveal .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Someone who has asked for less motion still gets the page, just without the entrance. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========== Mobile Responsiveness ========== */

/* Hero section mobile */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .hero .lead {
        font-size: 1rem;
    }
}

/* Pricing section mobile */
@media (max-width: 768px) {
    #pricing .card-body {
        padding: 1.25rem !important;
    }

    #pricing h4 {
        font-size: 1.5rem;
    }

    #pricing .badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.6rem !important;
    }

    #pricing .list-unstyled li {
        font-size: 0.85rem;
    }
}

/* Benefits + FAQ section mobile */
@media (max-width: 576px) {
    #faq .accordion-button {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    #faq .accordion-body {
        font-size: 0.85rem;
        padding: 0.75rem 1rem;
    }

}

/* Touch-friendly tap targets */
@media (max-width: 768px) {
    .accordion-button,
    .btn,
    .nav-link {
        min-height: 44px;
    }
}

/* Reduce padding on mobile.
   Two things were wrong with this rule. It was written as a bare `section`, so it also caught every
   <section> a component happened to be built from and wrapped things like the activity-group cards
   in 4rem of empty space at the width with the least room to spare. And on the bands it was
   actually aimed at it did nothing at all: those carry Bootstrap's .py-5, whose `!important` beats
   an element selector's, so every section kept its 3rem. Naming .py-5 here is what makes the rule
   outrank it — and `main >` is what keeps it off everything that is not one of this page's bands. */
@media (max-width: 576px) {
    main > section,
    main > section.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Except the hero, whose top padding is the room over the picker — see .hero-row above. A
       phone stacks the picker first, directly under the header, so 2rem of band on top of the
       row's own gutter put the one thing the page is for a scroll away from the header. */
    main > section#hero {
        padding-top: 1rem !important;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Small print */
.small-print {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}