/* ==========================================================================
   MeedAgency — public acquisition funnel.

   A SALES SURFACE, NOT A DASHBOARD. Deliberately a separate stylesheet from
   app.css: the dashboard is a tool for people who already bought something,
   and the funnel is the argument for buying it. Sharing one file would mean
   every change to one risked the other.

   MOBILE FIRST. Meta traffic is overwhelmingly mobile, so the base rules are
   the phone layout and the media queries only ADD width. Every tappable
   control clears 44px.

   LOGICAL PROPERTIES THROUGHOUT. margin-inline-start, not margin-left;
   padding-inline, not padding-left/right; inset-inline-start, not left. Arabic
   mirrors with no second stylesheet and no dir-specific overrides.

   NO HORIZONTAL OVERFLOW, ANYWHERE. Clipped at the page level, and every wide
   thing (the preview frame) scrolls inside its own box.
   ========================================================================== */

:root {
    --fn-black:      #111111;
    --fn-bg:         #0a0a0a;
    --fn-surface:    #141414;
    --fn-surface-2:  #1b1b1b;
    --fn-platinum:   #cfcfcf;
    --fn-white:      #ffffff;
    --fn-text:       #b3b3b3;
    --fn-border:     #2a2a2a;
    --fn-border-2:   #3a3a3a;
    --fn-accent:     #ffffff;
    --fn-ok:         #4ade80;
    --fn-warn:       #fbbf24;
    --fn-info:       #7dd3fc;
    --fn-radius:     14px;
    --fn-radius-sm:  10px;
    --fn-gap:        16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Nothing may scroll sideways. Wide content scrolls inside its own box. */
    overflow-x: clip;
    max-inline-size: 100%;
}

body.fn {
    background: var(--fn-bg);
    color: var(--fn-platinum);
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Layout ------------------------------------------------------------ */

.fn-wrap {
    inline-size: 100%;
    max-inline-size: 720px;
    margin-inline: auto;
    padding-inline: 20px;
}

.fn-wrap--wide { max-inline-size: 1100px; }

.fn-main { padding-block: 28px 56px; }

/* ---- Top bar ----------------------------------------------------------- */

.fn-top {
    border-block-end: 1px solid var(--fn-border);
    background: var(--fn-black);
    padding-block: 14px;
}

.fn-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fn-top__step {
    margin: 0;
    font-size: 13px;
    color: var(--fn-text);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fn-white);
    text-decoration: none;
    font-size: 15px;
}

.brand__mark {
    display: inline-grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    background: var(--fn-white);
    color: var(--fn-black);
    font-weight: 800;
}

.brand__muted { color: var(--fn-text); font-weight: 500; }

/* ---- Progress ---------------------------------------------------------- */

.fn-progress {
    block-size: 3px;
    background: var(--fn-border);
}

.fn-progress__bar {
    block-size: 100%;
    background: var(--fn-white);
    transition: inline-size .25s ease;
}

.fn-steps {
    border-block-end: 1px solid var(--fn-border);
    background: var(--fn-black);
    /* The step rail is the one element allowed to scroll on a narrow screen,
       inside its own box, because five labels do not fit on a phone. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fn-steps::-webkit-scrollbar { display: none; }

.fn-steps__list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 10px 20px;
    min-inline-size: max-content;
}

.fn-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--fn-text);
    white-space: nowrap;
    opacity: .55;
}

.fn-steps__item.is-current { opacity: 1; color: var(--fn-white); }
.fn-steps__item.is-done    { opacity: .85; }

.fn-steps__num {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 999px;
    border: 1px solid var(--fn-border-2);
    font-size: 11px;
}

.fn-steps__item.is-current .fn-steps__num {
    background: var(--fn-white);
    color: var(--fn-black);
    border-color: var(--fn-white);
}

.fn-steps__item.is-done .fn-steps__num { border-color: var(--fn-platinum); }

/* ---- Typography -------------------------------------------------------- */

.fn-h1 {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--fn-white);
    margin: 0 0 10px;
    font-weight: 700;
}

.fn-h2 {
    font-size: 18px;
    color: var(--fn-white);
    margin: 0 0 10px;
    font-weight: 650;
}

.fn-h3 {
    font-size: 15px;
    color: var(--fn-white);
    margin: 18px 0 8px;
    font-weight: 600;
}

.fn-lead {
    font-size: 16px;
    color: var(--fn-text);
    margin: 0 0 26px;
    max-inline-size: 60ch;
}

.fn-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: var(--fn-text);
    margin: 0 0 8px;
}

.fn-muted { color: var(--fn-text); font-size: 14px; }

.fn-note {
    color: var(--fn-text);
    font-size: 13px;
    text-align: center;
    margin-block-start: 20px;
}

/* ---- Hero -------------------------------------------------------------- */

.fn-hero { padding-block: 12px 26px; }

.fn-hero__title {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--fn-white);
    margin: 0 0 12px;
    font-weight: 750;
}

.fn-hero__lead {
    font-size: 17px;
    color: var(--fn-text);
    margin: 0;
    max-inline-size: 56ch;
}

/* ---- Forms ------------------------------------------------------------- */

.fn-form { margin: 0; }

.fn-field {
    border: 0;
    margin: 0 0 26px;
    padding: 0;
}

.fn-field__legend,
.fn-field__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--fn-white);
    margin-block-end: 6px;
    padding: 0;
}

.fn-field__hint {
    font-size: 13px;
    color: var(--fn-text);
    margin: 0 0 12px;
}

.fn-input {
    inline-size: 100%;
    min-block-size: 46px;
    padding: 11px 13px;
    border-radius: var(--fn-radius-sm);
    border: 1px solid var(--fn-border-2);
    background: var(--fn-surface);
    color: var(--fn-white);
    font: inherit;
    font-size: 16px; /* 16px prevents the iOS zoom-on-focus jump. */
}

.fn-input:focus-visible {
    outline: 2px solid var(--fn-platinum);
    outline-offset: 2px;
    border-color: var(--fn-platinum);
}

.fn-input--area { min-block-size: 96px; resize: vertical; }

input[type="color"].fn-input { padding: 4px; block-size: 46px; cursor: pointer; }

.fn-grid-2 { display: grid; gap: var(--fn-gap); }

/* ---- Option cards ------------------------------------------------------ */

.fn-cards { display: grid; gap: 12px; }

.fn-card {
    position: relative;
    display: block;
    border: 1px solid var(--fn-border-2);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 16px;
    cursor: pointer;
    min-block-size: 56px;
    transition: border-color .15s ease, background .15s ease;
}

.fn-card:hover { border-color: var(--fn-platinum); }

.fn-card input { position: absolute; opacity: 0; pointer-events: none; }

.fn-card:has(input:checked) {
    border-color: var(--fn-white);
    background: var(--fn-surface-2);
    box-shadow: inset 0 0 0 1px var(--fn-white);
}

.fn-card:has(input:focus-visible) {
    outline: 2px solid var(--fn-platinum);
    outline-offset: 2px;
}

.fn-card__body { display: block; }

.fn-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-card__title {
    display: block;
    font-weight: 650;
    color: var(--fn-white);
    font-size: 16px;
}

.fn-card__text {
    display: block;
    color: var(--fn-text);
    font-size: 14px;
    margin-block-start: 5px;
}

.fn-card__note {
    display: block;
    color: var(--fn-text);
    font-size: 12.5px;
    margin-block-start: 8px;
    opacity: .85;
}

.fn-card__flag {
    display: inline-block;
    margin-block-start: 9px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fn-platinum);
    border: 1px solid var(--fn-border-2);
    border-radius: 999px;
    padding: 2px 9px;
}

.fn-cards--compact .fn-card { padding: 13px 15px; min-block-size: 48px; }
.fn-cards--compact .fn-card__title { font-size: 15px; }

/* A "coming later" card is legible but visibly quieter. It is still
   selectable — planning something we have not built is legitimate; presenting
   it as ready is not. */
.fn-card--planned { opacity: .82; }
.fn-card--planned .fn-card__title { color: var(--fn-platinum); }

/* ---- Availability pills ------------------------------------------------ */

.fn-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--fn-border-2);
    color: var(--fn-text);
    white-space: nowrap;
}

.fn-pill--self_service { color: var(--fn-ok);   border-color: rgba(74, 222, 128, .45); }
.fn-pill--review       { color: var(--fn-info); border-color: rgba(125, 211, 252, .45); }
.fn-pill--planned      { color: var(--fn-warn); border-color: rgba(251, 191, 36, .45); }

.fn-pill--lg {
    font-size: 13px;
    padding: 6px 14px;
    margin: 0 0 14px;
}

/* ---- Lists ------------------------------------------------------------- */

.fn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.fn-list li { font-size: 14.5px; color: var(--fn-text); }
.fn-list li strong { display: block; color: var(--fn-white); font-weight: 600; }
.fn-list li span   { display: block; margin-block-start: 2px; }

.fn-list--tick li {
    padding-inline-start: 22px;
    position: relative;
}

.fn-list--tick li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 8px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 999px;
    background: var(--fn-ok);
}

.fn-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 8px;
}

.fn-list--inline li {
    border: 1px solid var(--fn-border-2);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 12.5px;
}

/* ---- Panels ------------------------------------------------------------ */

.fn-panels { display: grid; gap: var(--fn-gap); margin-block: 26px; }

.fn-panel {
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 20px;
}

.fn-panel--planned { border-color: rgba(251, 191, 36, .3); }
.fn-panel--review  { border-color: rgba(125, 211, 252, .3); }

.fn-solution { text-align: center; padding-block: 8px 4px; }
.fn-solution .fn-lead { margin-inline: auto; }

.fn-scope {
    font-size: 19px;
    color: var(--fn-white);
    font-weight: 650;
    margin: 0 0 4px;
}

.fn-included {
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 18px;
    margin-block-end: 26px;
}

/* ---- Buttons ----------------------------------------------------------- */

.fn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 46px;
    padding: 12px 22px;
    border-radius: var(--fn-radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.fn-btn--primary { background: var(--fn-white); color: var(--fn-black); }
.fn-btn--primary:hover { background: var(--fn-platinum); }

.fn-btn--outline {
    background: transparent;
    color: var(--fn-white);
    border-color: var(--fn-border-2);
}
.fn-btn--outline:hover { border-color: var(--fn-white); }

.fn-btn--ghost { background: transparent; color: var(--fn-text); }
.fn-btn--ghost:hover { color: var(--fn-white); }

.fn-btn--lg { min-block-size: 52px; font-size: 16px; padding: 14px 26px; }

.fn-btn:focus-visible { outline: 2px solid var(--fn-platinum); outline-offset: 2px; }

.fn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-block-start: 8px;
}

.fn-actions--stacked { flex-direction: column; align-items: stretch; }
.fn-actions--stacked .fn-btn { inline-size: 100%; }

.fn-actions__note {
    margin: 0;
    font-size: 13px;
    color: var(--fn-text);
}

/* ---- Alerts ------------------------------------------------------------ */

.fn-alert {
    border: 1px solid var(--fn-border-2);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-surface);
    padding: 14px 16px;
    margin-block-end: 20px;
    font-size: 14.5px;
}

.fn-alert strong { display: block; color: var(--fn-white); margin-block-end: 4px; }
.fn-alert p { margin: 0; color: var(--fn-text); }

.fn-alert--error   { border-color: rgba(248, 113, 113, .5); }
.fn-alert--success { border-color: rgba(74, 222, 128, .5); }
.fn-alert--info    { border-color: rgba(125, 211, 252, .45); }

/* ---- Resume ------------------------------------------------------------ */

.fn-resume {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--fn-border-2);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 16px;
    margin-block-end: 26px;
}

.fn-resume strong { color: var(--fn-white); }
.fn-resume p { margin: 4px 0 0; font-size: 14px; color: var(--fn-text); }

/* ---- Save / hand-off --------------------------------------------------- */

.fn-save { text-align: center; }

.fn-summary {
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 18px;
    margin-block: 22px;
    text-align: start;
}

.fn-summary dl { margin: 0; display: grid; gap: 12px; }
.fn-summary dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fn-text); }
.fn-summary dd { margin: 2px 0 0; color: var(--fn-white); font-weight: 600; }

.fn-doors { display: grid; gap: var(--fn-gap); }

.fn-door {
    border: 1px solid var(--fn-border-2);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 22px;
}

.fn-door--muted { background: transparent; }
.fn-door p { color: var(--fn-text); font-size: 14.5px; }
.fn-door .fn-btn { inline-size: 100%; margin-block-start: 8px; }

.fn-gone { text-align: center; padding-block: 40px; }

/* ---- Themes ------------------------------------------------------------ */

.fn-themes { display: grid; gap: 12px; }

.fn-theme {
    position: relative;
    display: block;
    border: 1px solid var(--fn-border-2);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-surface);
    padding: 14px;
    cursor: pointer;
}

.fn-theme input { position: absolute; opacity: 0; pointer-events: none; }

.fn-theme:has(input:checked) {
    border-color: var(--fn-white);
    box-shadow: inset 0 0 0 1px var(--fn-white);
}

.fn-theme__swatch {
    display: block;
    inline-size: 100%;
    block-size: 34px;
    border-radius: 8px;
    border: 1px solid var(--fn-border-2);
    margin-block-end: 10px;
}

.fn-theme__name { display: block; color: var(--fn-white); font-weight: 600; font-size: 14.5px; }
.fn-theme__text { display: block; color: var(--fn-text); font-size: 13px; margin-block-start: 3px; }

/* ---- Preview ----------------------------------------------------------- */

.fn-preview-layout { display: grid; gap: 24px; }

.fn-preview-form {
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    padding: 20px;
}

.fn-preview-pane {
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-black);
    overflow: hidden;
}

.fn-preview-pane__bar {
    padding: 10px 14px;
    border-block-end: 1px solid var(--fn-border);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fn-text);
}

.fn-preview-frame {
    display: block;
    inline-size: 100%;
    block-size: 560px;
    border: 0;
    background: #fff;
}

.fn-preview-empty { padding: 40px 20px; text-align: center; color: var(--fn-text); }

.fn-offering { display: grid; gap: 8px; margin-block-end: 10px; }

/* ---- Footer ------------------------------------------------------------ */

.fn-foot {
    border-block-start: 1px solid var(--fn-border);
    padding-block: 20px 40px;
    color: var(--fn-text);
    font-size: 13px;
    text-align: center;
}

.fn-foot p { margin: 0; }

/* ==========================================================================
   Wider screens. Everything above is the phone layout; these rules only ADD.
   ========================================================================== */

@media (min-width: 600px) {
    .fn-hero__title  { font-size: 42px; }
    .fn-h1           { font-size: 34px; }
    .fn-grid-2       { grid-template-columns: 1fr 1fr; }
    .fn-cards        { grid-template-columns: 1fr 1fr; }
    .fn-cards--compact { grid-template-columns: repeat(3, 1fr); }
    .fn-themes       { grid-template-columns: repeat(3, 1fr); }
    .fn-offering     { grid-template-columns: 1fr 1.4fr; }
    .fn-doors        { grid-template-columns: 1fr 1fr; }
    .fn-summary dl   { grid-template-columns: repeat(3, 1fr); }

    .fn-resume {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .fn-actions--stacked { flex-direction: row; justify-content: center; }
    .fn-actions--stacked .fn-btn { inline-size: auto; }
}

@media (min-width: 960px) {
    .fn-panels { grid-template-columns: 1fr 1fr; }
    .fn-preview-layout { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
    .fn-preview-frame { block-size: 720px; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   MILESTONE 6 — the price screen.

   THE NUMBER IS THE HERO. A visitor who has read a recommendation and looked
   at a preview arrives here with one question, and the layout answers it
   before they have to look for it: the implementation total is the largest
   thing on the page, and everything else is a supporting row underneath.

   LOGICAL PROPERTIES ONLY, like the rest of this file, so Arabic mirrors with
   no second stylesheet — including the stage list, whose leading marker sits
   on the inline start rather than on the left.
   ========================================================================== */

.fn-price {
    margin-block: 24px;
    padding: 24px 20px;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
}

.fn-price--review   { border-color: var(--fn-border-2); }
.fn-price--unpriced { background: transparent; }

/* ---- The headline figure ------------------------------------------------ */

.fn-price__hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-end: 20px;
    border-block-end: 1px solid var(--fn-border);
    margin-block-end: 20px;
}

.fn-price__label {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fn-text);
}

.fn-price__figure {
    /* clamp(), so the figure is large on a phone and larger on a laptop
       without a breakpoint that could leave it awkward in between. */
    font-size: clamp(40px, 11vw, 64px);
    line-height: 1.05;
    font-weight: 600;
    color: var(--fn-white);
    letter-spacing: -.02em;
}

.fn-price__note {
    font-size: 14px;
    color: var(--fn-text);
}

/* ---- The supporting rows ------------------------------------------------ */

.fn-price__grid {
    margin: 0;
    display: grid;
    gap: 2px;
}

.fn-price__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding-block: 12px;
    border-block-end: 1px solid var(--fn-border);
}

.fn-price__row:last-child { border-block-end: 0; }

.fn-price__row dt {
    margin: 0;
    color: var(--fn-text);
    font-size: 15px;
}

.fn-price__row dd {
    margin: 0;
    color: var(--fn-platinum);
    font-size: 16px;
    font-weight: 500;
}

/* The amount that actually starts the project reads as the second decision on
   the page, so it is brighter than the rows around it. */
.fn-price__row--strong dd {
    color: var(--fn-white);
    font-size: 20px;
    font-weight: 600;
}

/* ---- The schedule ------------------------------------------------------- */

.fn-price__schedule {
    margin-block-start: 24px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--fn-border);
}

.fn-stages {
    list-style: none;
    margin: 12px 0 12px;
    padding: 0;
    counter-reset: fn-stage;
    display: grid;
    gap: 10px;
}

.fn-stage {
    counter-increment: fn-stage;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    background: var(--fn-surface-2);
}

/* The marker sits on the INLINE start, so it leads the line in Arabic too. */
.fn-stage::before {
    content: counter(fn-stage);
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    display: inline-grid;
    place-items: center;
    margin-inline-end: 10px;
    border: 1px solid var(--fn-border-2);
    border-radius: 50%;
    font-size: 12px;
    color: var(--fn-text);
}

.fn-stage__when   { flex: 1 1 auto; font-size: 15px; }
.fn-stage__amount { font-weight: 600; color: var(--fn-white); }

.fn-list--compact li { padding-block: 4px; }

@media (min-width: 720px) {
    .fn-price { padding: 32px 28px; }

    .fn-price__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
}

/* ==========================================================================
   MILESTONE 7 — PUBLIC PRODUCT, PRICING, SUPPORT AND LEGAL PAGES.

   These reuse the funnel's design system rather than introducing a fourth
   stylesheet. The reasoning is the same one that made funnel.css separate from
   app.css in the first place: the funnel and these pages are both SALES
   SURFACES read by people who have not bought anything, they share a visual
   language, and a change to one should look right on the other.

   Prefixed .pb- (public brand) so nothing here can collide with a .fn- rule.

   LOGICAL PROPERTIES THROUGHOUT, like the rest of this file, so Arabic mirrors
   with no second stylesheet and no dir-specific override.
   ========================================================================== */

.pb-brand { text-decoration: none; color: inherit; }

.pb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.pb-nav a {
    color: var(--fn-text);
    text-decoration: none;
    font-size: 14px;
    padding-block: 10px;
    /* 44px tappable target on a phone, which is where most of this traffic is. */
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
}

.pb-nav a:hover,
.pb-nav a.is-active { color: var(--fn-white); }

.pb-nav__cta {
    border: 1px solid var(--fn-border-2);
    border-radius: 999px;
    padding-inline: 14px;
    color: var(--fn-white) !important;
}

.pb-hero { padding-block: 24px 8px; }

.pb-section {
    padding-block: 28px;
    border-block-start: 1px solid var(--fn-border);
    margin-block-start: 28px;
}

.pb-cta {
    margin-block-start: 32px;
    padding: 28px;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
    text-align: center;
}

/* ---- A plan card on the pricing page ----------------------------------- */

.pb-plan { display: flex; flex-direction: column; gap: 12px; }

.pb-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.pb-plan__figure {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--fn-white);
    /* Tabular figures so $350 and $450 line up in the two-column layout. */
    font-variant-numeric: tabular-nums;
}

.pb-plan__unit    { color: var(--fn-text); font-size: 14px; }
.pb-plan__monthly { color: var(--fn-platinum); margin: 0; }

.pb-plan__from {
    font-size: 22px;
    font-weight: 600;
    color: var(--fn-white);
    margin-block: 8px 4px;
}

.pb-explain { margin-block-start: 20px; }

/* ---- Legal documents ---------------------------------------------------- */
/*
   A READABLE MEASURE. Legal copy that runs the full width of a desktop window
   is legal copy nobody reads, and "nobody read it" is the one outcome a terms
   page must avoid.
*/
.pb-legal { max-inline-size: 68ch; margin-inline: auto; }

.pb-legal__head { margin-block-end: 24px; }

.pb-legal__section { margin-block-start: 28px; }

.pb-legal__section h2 { margin-block-end: 8px; }

.pb-legal__section p {
    margin-block: 0 12px;
    color: var(--fn-platinum);
}

/* Milestone 8.6-G. Draft notice on a policy that is not final. Warm border on
   the usual surface keeps contrast high without a new colour. */
.pb-legal__draft {
    border-inline-start: 3px solid var(--fn-warn);
    margin-block-end: 24px;
}

.pb-legal__draft .fn-h3 { color: var(--fn-white); margin-block-end: 6px; }

.pb-legal__section .pb-legal__pending {
    color: var(--fn-warn);
    font-size: 14px;
}

.pb-support__email {
    font-size: 20px;
    margin-block: 8px;
}

.pb-support__email a { color: var(--fn-white); }

/* ---- Footer ------------------------------------------------------------- */

.pb-foot { padding-block: 28px; }

.pb-foot__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-block-end: 16px;
}

.pb-foot__nav a {
    color: var(--fn-text);
    text-decoration: none;
    font-size: 14px;
    /* Tappable, because the cancellation policy has to be reachable on a phone
       as easily as on a desktop. */
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
}

.pb-foot__nav a:hover { color: var(--fn-white); }

.pb-foot__legal,
.pb-foot__support,
.pb-foot__mor {
    color: var(--fn-text);
    font-size: 13px;
    margin-block: 4px;
}

@media (min-width: 720px) {
    .pb-hero { padding-block: 40px 16px; }
    .pb-section { padding-block: 40px; margin-block-start: 40px; }
}