/* =========================================================
   Live Streaming Bandwidth Calculator, page styles.

   Themed to the FeelThere V3 system: Inter, visitor-selected light/dark surfaces,
   purple accents and the same bordered-card rhythm as the public site.

   Every rule is scoped under .ft (the page root). The custom Document links
   this stylesheet only for the calculator route; scoping also keeps generic
   names like .btn, .card and .section from leaking into the site shell.

   Note: the standalone Chrome extension keeps its own dark theme in its
   own copy of this file. That divergence is intentional, the extension
   has no site chrome around it.

   V3 tokens mirror the public site shell and remain local to this tool.
   ========================================================= */

.ft {
    --purple: var(--v3-purple);
    --purple-deep: var(--v3-purple);
    --purple-soft: var(--v3-surface-2);
    --purple-ink: var(--v3-purple-light);
    --grad: linear-gradient(135deg, var(--v3-surface-2) 0%, var(--v3-bg-elevated) 58%, var(--v3-bg-elevated) 100%);
    --text: var(--v3-text);
    --muted: var(--v3-text-2);
    --line: var(--v3-border);
    --card: var(--v3-surface-2);
    --soft: var(--v3-bg-elevated);
    --good: var(--v3-green);
    --warn: var(--ft-yellow);
    --bad: var(--ft-danger);

    font-family:
        var(--font-inter),
        system-ui,
        -apple-system,
        sans-serif;
    color: var(--text);
    background: var(--v3-bg);
    line-height: 1.6;
}
.ft * {
    box-sizing: border-box;
    margin: 0;
}
.ft h1,
.ft h2,
.ft h3 {
    font-family: var(--font-inter), system-ui, sans-serif;
    letter-spacing: -0.01em;
}
.ft a {
    color: var(--purple);
}
.ft button {
    font-family: inherit;
}
.ft strong {
    font-variant-numeric: tabular-nums;
}
.ft :focus-visible {
    outline: 3px solid var(--v3-purple-light);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Extension only chrome. Not rendered on the website, where AppHeader is used. */
.ft .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px clamp(16px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
    background: var(--v3-bg-elevated);
}
.ft .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.ft .topnav {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ft .topnav-link {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
}
.ft .topnav-link:hover {
    color: var(--purple);
}
@media (max-width: 520px) {
    .ft .topnav-link {
        display: none;
    }
}

/* ---------- Page gutter ----------
   One shared left/right inset for every band and section, so all text starts
   on the same line no matter whether the block is full bleed (hero, why band)
   or a plain section. It reproduces the site container exactly: a 1400px
   centred column plus the 2rem the AppHeader logo carries, which is what the
   home page header and footer line up on. */
.ft .crumbs,
.ft .hero,
.ft .calc-area,
.ft .section,
.ft .final-cta {
    padding-inline: calc(max(0px, (100% - 1400px) / 2) + 32px);
}
@media (max-width: 350px) {
    .ft .crumbs,
    .ft .hero,
    .ft .calc-area,
    .ft .section,
    .ft .final-cta {
        padding-inline: 16px;
    }
}

/* Breadcrumbs */
.ft .crumbs {
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
    background: var(--v3-bg-elevated);
}
.ft .crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
}
.ft .crumbs a {
    color: var(--purple);
    text-decoration: none;
}
.ft .crumbs a:hover {
    text-decoration: underline;
}
.ft .crumbs li[aria-current='page'] {
    color: var(--text);
    font-weight: 500;
}
.ft .crumbs .sep {
    opacity: 0.5;
}

/* ---------- Hero: V3 signal stage ---------- */
.ft .hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding-block: clamp(52px, 7vw, 92px);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 12% 10%, rgba(135, 61, 214, 0.27), transparent 34rem), var(--grad);
    color: var(--v3-text);
}
@media (max-width: 940px) {
    .ft .hero {
        grid-template-columns: 1fr;
    }
}
.ft .hero h1 {
    font-size: clamp(2.55rem, 5vw, 5rem);
    font-weight: 760;
    line-height: 0.98;
    letter-spacing: -0.055em;
    margin-bottom: 20px;
    color: var(--v3-text);
    text-wrap: balance;
}
.ft .by-ft {
    white-space: nowrap;
}
.ft .hero-sub {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 610px;
    color: var(--v3-text-2);
}
.ft .hero-ctas,
.ft .cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.ft .cta-row {
    justify-content: center;
}

/* Translucent purple panel sitting on the gradient band, same glass treatment
   as .why-item. The SVG inside is therefore styled for a DARK background. */
/* Higher specificity than .card, which the same element also carries. */
.ft .hero .hero-diagram {
    background: rgb(var(--ft-text-rgb) / 0.12);
    border: 1px solid rgb(var(--ft-text-rgb) / 0.28);
    border-radius: 20px;
    padding: 18px 18px 8px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}
.ft .hd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.ft .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--v3-text);
    border: 1px solid rgb(var(--ft-text-rgb) / 0.5);
    border-radius: 99px;
    padding: 3px 11px;
}
.ft .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ft-danger);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    50% {
        opacity: 0.3;
    }
}
.ft .hd-mode {
    font-size: 0.85rem;
    color: rgb(var(--ft-text-rgb) / 0.88);
}

/* Diagram, styled for the purple panel */
.ft .fanout {
    width: 100%;
    height: auto;
    display: block;
}
.ft .pipe {
    fill: none;
    stroke-linecap: round;
}
.ft .pipe-main {
    stroke-width: 3.5;
    stroke-dasharray: 10 8;
    animation: flow 1.1s linear infinite;
}
.ft .pipe-thin {
    stroke-width: 1.8;
    opacity: 0.95;
    stroke-dasharray: 6 7;
    animation: flow 1.3s linear infinite;
}
@keyframes flow {
    to {
        stroke-dashoffset: -18;
    }
}
.ft .phone-glow {
    fill: rgb(var(--ft-text-rgb) / 0.18);
    stroke: rgb(var(--ft-text-rgb) / 0.7);
    stroke-width: 1.4;
}
.ft .node-cap {
    fill: rgb(var(--ft-text-rgb) / 0.82);
    font-size: 11px;
}
.ft .dest-glyph {
    font-size: 10px;
    font-weight: 700;
}
.ft .dest-label {
    fill: var(--v3-text);
    font-size: 11.5px;
}

/* ---------- Buttons ---------- */
.ft .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    min-height: 48px;
    border-radius: 10px;
    font-weight: 720;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
    text-align: center;
}
.ft .btn:active {
    transform: translateY(1px);
}
.ft .btn-primary {
    background: var(--purple-deep);
    color: var(--v3-text);
    box-shadow: 0 12px 30px rgba(135, 61, 214, 0.22);
}
.ft .btn-primary:hover {
    background: var(--v3-purple);
    box-shadow: 0 15px 36px rgba(135, 61, 214, 0.3);
    transform: translateY(-1px);
}
.ft .btn-ghost {
    background: var(--v3-bg-elevated);
    border-color: var(--line);
    color: var(--v3-text);
}
.ft .btn-ghost:hover {
    border-color: var(--ft-blue);
    background: var(--v3-surface-2);
}
.ft .btn-sm {
    padding: 9px 20px;
    font-size: 0.88rem;
}
/* Inverted buttons on the purple bands. The final CTA is white, so it keeps
   the default button styling above. */
.ft .hero .btn-primary,
.ft .about .btn-primary {
    background: var(--purple-deep);
    color: var(--v3-text);
    box-shadow: 0 12px 30px rgba(135, 61, 214, 0.24);
}
.ft .hero .btn-ghost,
.ft .about .btn-ghost {
    background: var(--v3-bg-elevated);
    border-color: var(--v3-border);
    color: var(--v3-text);
}
.ft .hero .btn-ghost:hover,
.ft .about .btn-ghost:hover {
    border-color: var(--ft-blue);
    background: var(--v3-surface-2);
}

.ft .brand-logo {
    height: 34px;
    width: auto;
    display: block;
}
.ft .footer-logo {
    height: 44px;
    width: auto;
    margin: 0 auto 4px;
    display: block;
}

/* ---------- Layout ---------- */
.ft .calc-area {
    padding-block: clamp(48px, 7vw, 88px);
}
.ft .calc-grid {
    display: grid;
    grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
/* minmax(0,1fr), not 1fr: a bare 1fr track floors at the min-content width of
   the settings card, which pushed the page wider than a 320px phone. */
@media (max-width: 940px) {
    .ft .calc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Deliberately not sticky and not scrollable: a scroll area nested inside the
   page scroll traps the wheel and hides the bottom of the card. */
.ft .inputs {
    position: static;
    max-height: none;
    overflow: visible;
}
.ft .section {
    padding-block: clamp(36px, 6vw, 64px);
}
.ft .sec-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 14px;
}
.ft .sec-lead {
    color: var(--muted);
    max-width: 820px;
    margin-bottom: 26px;
}
.ft .center {
    text-align: center;
    margin-top: 26px;
}

.ft .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 26px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}
.ft .card-title {
    font-size: 1.15rem;
}

/* ---------- Form controls ---------- */
.ft .field {
    border: none;
    padding: 0;
    margin: 0 0 18px;
}
.ft .flabel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 9px;
}
.ft .fval {
    color: var(--purple);
    font-size: 0.82rem;
    letter-spacing: 0;
    font-weight: 600;
}
.ft .fval.maxed {
    color: var(--warn);
}
.ft .optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.ft .seg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ft .seg-btn {
    flex: 1 1 auto;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--v3-bg-elevated);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}
.ft .seg-btn small {
    font-size: 0.68rem;
    opacity: 1;
    color: var(--v3-text-3);
}
.ft .seg-btn:hover {
    border-color: var(--purple);
    color: var(--text);
}
.ft .seg-btn.on {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: var(--purple-ink);
    font-weight: 700;
}

.ft .dest-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ft .dest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--v3-bg-elevated);
    padding: 9px 11px;
    font-size: 0.9rem;
    font-weight: 600;
}
.ft .dest-name {
    flex: 1;
}
.ft .dest-remove {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--v3-surface-2);
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    line-height: 1;
    transition: all 0.12s ease;
}
.ft .dest-remove:hover:not(:disabled) {
    border-color: var(--bad);
    color: var(--bad);
}
.ft .dest-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.ft .add-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.ft .max-note {
    color: var(--warn);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.ft .add-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (max-width: 400px) {
    .ft .add-grid {
        grid-template-columns: 1fr;
    }
}
.ft .add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px dashed var(--v3-border);
    background: var(--v3-bg-elevated);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
}
.ft .add-btn:hover:not(:disabled) {
    border-color: var(--purple);
    color: var(--purple-ink);
    background: var(--purple-soft);
}
.ft .add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ft .add-txt {
    flex: 1;
    line-height: 1.25;
}
.ft .add-txt small {
    display: block;
    font-size: 0.68rem;
    color: var(--purple);
}
.ft .add-plus {
    font-size: 0.9rem;
    color: var(--purple);
}
.ft .plat-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--v3-text);
    flex: none;
}
/* Official LinkedIn blue keeps the white shorthand mark above AA contrast. */
.ft [data-add-destination='li'] .plat-glyph,
.ft [data-destination-type='li'] .plat-glyph {
    background: var(--ft-blue) !important;
}
.ft .dest-hint {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ft .dur-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ft .numbox {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--v3-bg-elevated);
    border: 1px solid var(--ft-control-border);
    border-radius: 12px;
    padding: 5px 12px;
}
.ft .numbox input {
    width: 64px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 0;
    font-variant-numeric: tabular-nums;
}
.ft .numbox.wide input {
    width: 110px;
}
.ft .numbox input:focus {
    outline: none;
}
.ft .numbox span {
    color: var(--muted);
    font-size: 0.85rem;
}

.ft .tip-wrap {
    position: relative;
    display: inline-flex;
}
.ft .tip-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.ft .tip-pop {
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: min(240px, calc(100vw - 32px));
    background: var(--v3-surface-2);
    border: 1px solid var(--purple);
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 12px 30px rgb(var(--ft-surface-rgb) / 0.18);
}

/* ---------- Results ---------- */
.ft .res-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ft .rating {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid;
    border-radius: 99px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 0.88rem;
}
.ft .rating-off {
    border-color: var(--line);
    color: var(--muted);
    font-weight: 500;
    font-size: 0.82rem;
}
.ft .sig {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
}
.ft .sig-bar {
    width: 4px;
    border-radius: 2px;
    display: inline-block;
}
.ft .res-ctx {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 18px;
}

.ft .res-hero {
    background: var(--purple-soft);
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.ft .res-hero.solo {
    display: block;
}
.ft .headline-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ft .big-num {
    font-size: clamp(2.1rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--purple-ink);
    line-height: 1.05;
}
.ft .big-num span {
    font-size: 1.05rem;
    color: var(--muted);
    font-weight: 500;
}
.ft .mlabel {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
}
.ft .mlabel-sub {
    color: var(--purple);
}
.ft .msub {
    font-size: 0.8rem;
    color: var(--muted);
}
.ft .msub.dim {
    opacity: 1;
    color: var(--v3-text-3);
}

.ft .metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}
.ft .metric {
    background: var(--v3-bg-elevated);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.15s ease;
}
.ft .metric:hover {
    border-color: var(--purple);
}
.ft .metric strong {
    font-size: 1.3rem;
    font-weight: 700;
}
.ft .metric strong span {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}
.ft .metric-hero {
    border-color: var(--purple);
    background: var(--purple-soft);
}
.ft .metric-hero strong {
    color: var(--purple-ink);
}

.ft .verdict {
    border-left: 4px solid var(--purple);
    background: var(--soft);
    border-radius: 0 12px 12px 0;
    padding: 15px 18px;
    margin-bottom: 14px;
}
.ft .verdict-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.86rem;
}

.ft .res-ft-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--v3-border);
    background: var(--purple-soft);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.ft .res-ft-txt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
}
.ft .res-ft-txt svg {
    flex: none;
    margin-top: 2px;
}
.ft .res-ft-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ft .res-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ft .share-box {
    margin-bottom: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.ft .share-box summary {
    cursor: pointer;
    color: var(--purple);
    font-size: 0.88rem;
    font-weight: 600;
}
.ft .share-box pre {
    margin-top: 10px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    font-size: 0.76rem;
    white-space: pre-wrap;
    color: var(--muted);
}
.ft .assump {
    margin: 12px 0 0 18px;
    padding: 0;
    font-size: 0.83rem;
    color: var(--muted);
    display: grid;
    gap: 6px;
}
.ft .disclaimer {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

/* ---------- Comparison ---------- */
.ft .single-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    background: var(--purple-soft);
    border: 1px solid var(--v3-border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.ft .measurement-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--purple);
}
.ft .single-banner strong {
    font-size: 1.7rem;
    color: var(--purple-ink);
    font-weight: 700;
}
.ft .single-sub {
    color: var(--muted);
    font-size: 0.87rem;
}
.ft .vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .ft .vs-grid {
        grid-template-columns: 1fr;
    }
}
.ft .vs-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    background: var(--v3-surface-2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.ft .vs-card.direct {
    border-color: var(--v3-border);
}
.ft .vs-card.cloud {
    border-color: var(--purple);
    box-shadow: 0 8px 28px rgba(147, 51, 234, 0.14);
}
.ft .vs-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.ft .vs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 99px;
}
.ft .vs-badge-direct {
    color: var(--ft-danger);
    border: 1px solid var(--v3-border);
    background: var(--v3-surface-2);
}
.ft .vs-badge-cloud {
    color: var(--purple-ink);
    border: 1px solid var(--v3-border);
    background: var(--purple-soft);
}
.ft .vs-title {
    font-size: 1.05rem;
}
.ft .vs-big {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 14px;
}
.ft .vs-card.cloud .vs-big {
    color: var(--purple-ink);
}
.ft .vs-big span {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
}
.ft .vs-rows {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ft .vs-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}
.ft .vs-rows li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ft .vs-rows strong {
    color: var(--text);
    font-size: 0.95rem;
}
.ft .mult-hot {
    color: var(--ft-danger) !important;
}
.ft .mult-cool {
    color: var(--purple) !important;
}
.ft .vs-label {
    font-size: 0.86rem;
    color: var(--text);
    background: var(--soft);
    border-radius: 12px;
    padding: 11px 13px;
}
.ft .vs-card.cloud .vs-label {
    background: var(--purple-soft);
}

.ft .savings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.ft .save-item {
    background: var(--v3-surface-2);
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ft .save-item span {
    font-size: 0.76rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.ft .save-item strong {
    font-size: 1.3rem;
    color: var(--good);
    font-weight: 700;
}

.ft .cmp-explain {
    color: var(--text);
    font-size: 0.9rem;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 17px;
    margin-bottom: 22px;
}

.ft .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--v3-surface-2);
}
.ft .cmp-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    font-size: 0.9rem;
}
.ft .cmp-table th,
.ft .cmp-table td {
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.ft .cmp-table thead th {
    font-size: 0.95rem;
    background: var(--soft);
    font-weight: 700;
}
.ft .cmp-table tbody tr:last-child th,
.ft .cmp-table tbody tr:last-child td {
    border-bottom: none;
}
.ft .cmp-table tbody th {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.79rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ft .th-ft {
    color: var(--purple-ink);
}

/* ---------- Measured speed check ---------- */
.ft .check-card {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 760px) {
    .ft .check-card {
        grid-template-columns: 1fr;
    }
}
.ft .check-input .numbox {
    margin-bottom: 10px;
}
.ft .check-result {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
}
@media (max-width: 560px) {
    .ft .check-result {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}
.ft .check-verdict {
    border-left: 4px solid;
    padding: 4px 0 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ft .check-verdict .rating {
    align-self: flex-start;
}
/* A prompt, not a warning: this is the resting state of an optional field, so
   it must not be dressed up in the amber used for real problems. */
.ft .check-empty {
    background: var(--purple-soft);
    border: 1px solid var(--v3-border);
    border-radius: 14px;
    padding: 17px 19px;
}
.ft .check-empty strong {
    display: block;
    color: var(--purple-ink);
    font-size: 1rem;
    margin-bottom: 4px;
}
.ft .check-empty p {
    font-size: 0.87rem;
    color: var(--muted);
}

.ft .gauge-wrap {
    position: relative;
    width: 220px;
}
.ft .gauge {
    width: 100%;
    height: auto;
    display: block;
}
.ft .g-zone {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
    opacity: 0.95;
}
.ft .g-tick {
    stroke: var(--text);
    stroke-width: 1.6;
    opacity: 0.55;
}
.ft .g-needle {
    stroke-width: 3.5;
    stroke-linecap: round;
}
.ft .gauge-read {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    text-align: center;
}
.ft .gauge-read strong {
    font-size: 1.35rem;
    font-weight: 700;
}
.ft .gauge-read strong span {
    font-size: 0.8rem;
    font-weight: 500;
}
.ft .gauge-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.ft .upload-meter {
    width: 100%;
    height: 18px;
    accent-color: var(--rating-color, var(--purple));
}
.ft .upload-meter::-webkit-meter-optimum-value {
    background: var(--rating-color, var(--purple));
}
.ft .upload-meter::-moz-meter-bar {
    background: var(--rating-color, var(--purple));
}
.ft .gauge-read-static {
    position: static;
    margin-top: 12px;
}
.ft [data-measured-result] {
    --rating-color: var(--purple);
}
.ft [data-measured-result] .check-verdict {
    border-left-color: var(--rating-color);
}
.ft [data-measured-result] .rating {
    border-color: var(--rating-color);
    color: var(--text);
}
.ft .tip-pop[hidden],
.ft [data-measured-result][hidden],
.ft [data-measured-empty][hidden] {
    display: none !important;
}

/* ---------- Education, why, FAQ, resources ---------- */
.ft .edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.ft .edu h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--purple-ink);
}
.ft .edu p {
    color: var(--muted);
    font-size: 0.93rem;
}

/* Why section: dark signal band, full bleed */
.ft .about {
    border-block: 1px solid var(--line);
    background: var(--v3-bg-elevated);
    color: var(--v3-text);
}
.ft .about .sec-title {
    color: var(--v3-text);
}
.ft .about p,
.ft .about-lead {
    color: rgb(var(--ft-text-rgb) / 0.92);
    max-width: 820px;
}
.ft .about-lead {
    margin-bottom: 22px;
}
.ft .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.ft .why-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--v3-surface-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 17px;
    font-size: 0.94rem;
    color: var(--v3-text);
}
.ft .why-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--v3-bg-elevated);
    color: var(--purple);
    font-size: 0.68rem;
    font-weight: 800;
    flex: none;
    margin-top: 2px;
}

.ft .faq-list {
    display: grid;
    gap: 10px;
    max-width: 840px;
}
.ft .faq {
    background: var(--v3-surface-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 20px;
}
.ft .faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.98rem;
}
.ft .faq summary::marker {
    color: var(--purple);
}
.ft .faq p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.91rem;
}

/* Resources section: separated dark band */
.ft .resources {
    border-block: 1px solid var(--line);
    background: var(--v3-bg-elevated);
    color: var(--v3-text);
}
.ft .resources .sec-title {
    color: var(--v3-text);
}
.ft .res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ft .res-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--v3-surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 19px;
    text-decoration: none;
    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        transform 0.12s ease;
}
.ft .res-card:hover {
    background: var(--v3-surface-2);
    border-color: var(--ft-blue);
    transform: translateY(-2px);
}
.ft .resolution-label {
    font-size: 0.875rem;
    color: rgb(var(--ft-text-rgb) / 0.78);
    font-weight: 700;
}
.ft .res-anchor {
    color: var(--v3-text);
    font-weight: 600;
    font-size: 0.92rem;
}

/* ---------- Final CTA ---------- */
.ft .final-cta {
    text-align: center;
    padding-block: clamp(58px, 9vw, 104px);
    background: var(--v3-bg);
    color: var(--text);
}
.ft .final-cta h2 {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    max-width: 760px;
    margin: 0 auto 14px;
    color: var(--text);
}
.ft .final-cta p {
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 28px;
}

/* Extension only footer */
.ft .footer {
    text-align: center;
    padding: 28px 20px 44px;
    color: var(--muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 6px;
    background: var(--v3-bg-elevated);
}

.ft .field-note {
    font-size: 0.76rem;
    color: var(--muted);
    margin: -8px 0 16px;
    font-style: italic;
}
/* The negative top margin above tucks the note under a control group. After a
   paragraph it has nothing to tuck into and the two lines collide. */
.ft .dest-hint + .field-note {
    margin-top: 8px;
}
.ft .premium-tag {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ft-danger);
    border: 1px solid var(--ft-danger);
    background: var(--v3-surface-2);
    border-radius: 99px;
    padding: 2px 9px;
}

/* The mobile page is intentionally long. Let the browser skip paint/layout
   work for educational sections until they approach the viewport. */
@media (max-width: 760px) {
    .ft .calc-area {
        content-visibility: auto;
        contain-intrinsic-size: auto 3200px;
    }
    /* The calculator begins just below the first viewport. Containing only the
     outer area still makes Chrome lay out both long cards once that area is
     considered relevant. Give each card its own paint/layout boundary so the
     full SSR form and results stay in the DOM while their layout is deferred
     until the user scrolls to them. The intrinsic sizes closely match the
     default 412px layout, keeping the initial document height stable. */
    .ft .calc-grid > .inputs {
        content-visibility: auto;
        contain-intrinsic-size: auto 1379px;
    }
    .ft .calc-grid > .results {
        content-visibility: auto;
        contain-intrinsic-size: auto 1554px;
    }
    .ft > .section {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
    .ft > .final-cta {
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
    }
    .ft .pipe-main,
    .ft .pipe-thin,
    .ft .live-dot {
        animation: none;
    }
}

@media print {
    .ft {
        background: var(--v3-bg-elevated);
        color: var(--v3-text);
    }
    .ft .topbar,
    .ft .crumbs,
    .ft .hero,
    .ft .inputs,
    .ft .section,
    .ft .final-cta,
    .ft .footer,
    .ft .res-actions,
    .ft .res-ft-cta {
        display: none !important;
    }
    .ft .print-area {
        box-shadow: none;
        border: 1px solid var(--v3-border);
        background: var(--v3-bg-elevated);
        color: var(--v3-text);
    }
    .ft .share-box,
    .ft .share-box pre {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ft .btn,
    .ft .seg-btn,
    .ft .add-btn,
    .ft .pipe-main,
    .ft .pipe-thin,
    .ft .live-dot {
        transition: none !important;
        animation: none !important;
    }
}