/* ───────────────────────────────────────────────────────────────
   Proficiens — shared design system

   Used by index.html, sftp/pricing.html and sftp/features.html.
   Every page in the public site is a spec sheet: section labels live
   in a left margin rail in monospace, content sits in a wide right
   column, hairlines run edge to edge. Accent is patinated copper,
   because the pitch is that file transfer is plumbing.

   No CSS framework on purpose — the public site shares nothing with
   the app's Bootstrap chrome and shouldn't inherit its look.
   ─────────────────────────────────────────────────────────────── */

/* ── Tokens: complete light palette on bare :root ─────────────── */
:root {
    --ground:      #EFF2F1;
    --surface:     #FFFFFF;
    --surface-alt: #E7EBEA;
    --ink:         #12191C;
    --ink-soft:    #33403F;
    --muted:       #5C6B6D;
    --rule:        #D3DAD8;
    --rule-strong: #B9C3C0;
    --accent:      #1A5567;
    --accent-deep: #5392A6;
    --accent-wash: #E2EDE9;
    --on-accent:   #FFFFFF;
    --danger:      #A33A30;
    /* Red for the dark panels. The bands are dark in BOTH themes, so this
       is one value on :root — --danger is tuned for a light ground and
       only reaches 2.7:1 against --band. This one reaches 6.6:1. */
    --band-danger: #E2857A;
    --band:        #12191C;
    --band-ink:    #EDF2F0;
    --band-muted:  #93A5A1;
    --focus:       #1F6F5F;

    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --body:    "Newsreader", Georgia, "Times New Roman", serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --rail:  164px;
    --gutter: clamp(20px, 5vw, 56px);
    --sheet: 1140px;
}

/* System dark — guarded so an explicit light choice still wins */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:      #0E1416;
        --surface:     #161E20;
        --surface-alt: #1C2528;
        --ink:         #E9EFEC;
        --ink-soft:    #C4D0CC;
        --muted:       #93A5A1;
        --rule:        #25302F;
        --rule-strong: #35443F;
        --accent:      #57B7A2;
        --accent-deep: #7FD0BC;
        --accent-wash: #16302B;
        --on-accent:   #06100E;
        --danger:      #E2857A;
        --band:        #070C0D;
        --band-ink:    #E9EFEC;
        --band-muted:  #7C8F8B;
        --focus:       #7FD0BC;
    }
}

/* Explicit dark choice wins over a light OS */
:root[data-theme="dark"] {
    --ground:      #0E1416;
    --surface:     #161E20;
    --surface-alt: #1C2528;
    --ink:         #E9EFEC;
    --ink-soft:    #C4D0CC;
    --muted:       #93A5A1;
    --rule:        #25302F;
    --rule-strong: #35443F;
    --accent:      #57B7A2;
    --accent-deep: #7FD0BC;
    --accent-wash: #16302B;
    --on-accent:   #06100E;
    --danger:      #E2857A;
    --band:        #070C0D;
    --band-ink:    #E9EFEC;
    --band-muted:  #7C8F8B;
    --focus:       #7FD0BC;
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.06;
    text-wrap: balance;
    margin: 0;
}

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

/* ── Sheet grid ───────────────────────────────────────────────── */
.sheet {
    max-width: var(--sheet);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.row {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px);
}

/* Margin annotation, the way a drawing sheet labels its regions */
.rail {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.55rem;
}

section { border-top: 1px solid var(--rule); }
section:first-of-type { border-top: none; }

.band-pad { padding-block: clamp(56px, 8vw, 104px); }

@media (max-width: 880px) {
    .row { grid-template-columns: 1fr; gap: 14px; }
    .rail { padding-top: 0; }
}

/* ── Masthead ─────────────────────────────────────────────────── */
.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--ground);
}

.masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 20px;
    /* Six nav items overflow a phone otherwise. Wrapping puts the links on
       their own line under the wordmark rather than shrinking them. */
    flex-wrap: wrap;
}

.wordmark {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Three rising strokes — proficere, making headway. Also the only
   logo this company needs. */
.mark { display: block; flex: none; }
.mark rect { fill: var(--accent); }

.masthead nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px clamp(14px, 3vw, 30px);
}

/* Two stacked rows of links, opposed: the top row starts beside the wordmark
   on the left, the bottom row finishes against the right edge of the header.
   flex:1 makes the block claim the width the wordmark leaves, and the rows
   stretch across it so each has room to push its own way.

   Scoped to .nav-levels, which only the landing page has — the single-row
   navs on features/pricing are untouched. */
.nav-levels {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    margin-left: clamp(16px, 4vw, 52px);
}

.nav-levels .nav-level-top    { justify-content: flex-start; }
.nav-levels .nav-level-bottom { justify-content: flex-end; }

/* Once the header has wrapped, the rows sit under the wordmark and take the
   full width — the left alignment above already lines them up with it. */
@media (max-width: 620px) {
    /* Wrapped under the wordmark — drop the indent so both line up. */
    .nav-levels { width: 100%; gap: 7px; margin-left: 0; }
}

.nav-link {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* ── Hero ─────────────────────────────────────────────────────── */
/* Top padding is deliberately tight: the trial button has to be on screen
   on a phone without scrolling, and this is the space competing with it. */
.hero { padding-block: clamp(22px, 3.5vw, 52px) clamp(40px, 7vw, 88px); }

.lemma {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.4rem, 7.5vw, 4.6rem);
    letter-spacing: -0.04em;
    line-height: 0.94;
    margin-bottom: 1rem;
}

.pron {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
}
.pron em { color: var(--ink-soft); font-style: italic; }

.gloss {
    font-family: var(--body);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 3.2vw, 1.9rem);
    line-height: 1.3;
    color: var(--accent);
    margin-bottom: 1.6rem;
}

.vision {
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    font-weight: 300;
    line-height: 1.66;
    color: var(--ink-soft);
    max-width: 58ch;
    margin-bottom: 2rem;
}

.hero-rule {
    width: 84px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 1.5rem;
}

/* The offer, centred on the page under the trial button. */
.trial-strap {
    margin-top: 1.8rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--muted);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 15px 28px;
    border-radius: 2px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--accent-deep); transform: translateY(-1px); }

.btn-line {
    border-color: var(--rule-strong);
    color: var(--ink);
    background: transparent;
}
.btn-line:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.btn-lg { padding: 19px 38px; font-size: 0.84rem; }

/* ── Services ─────────────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
}

/* Large clickable panels — a whole card is the target, so the
   anchor wraps it rather than sitting inside as a small link. */
.service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: clamp(26px, 3.4vw, 38px);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* The nameplate stripe: grows on hover, the only motion here */
.service::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
}

.service:hover {
    border-color: var(--rule-strong);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -18px rgba(18, 25, 28, .34);
}
.service:hover::before { transform: scaleY(1); }

.service-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
}

.dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}

.service h3 {
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 600;
}

.service p {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.66;
}

.service-go {
    margin-top: auto;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.service:hover .service-go { color: var(--accent); }
.service-go svg { transition: transform .22s ease; }
.service:hover .service-go svg { transform: translateX(4px); }

/* The open slot — dashed, because it is genuinely undecided */
.service-open {
    background: transparent;
    border-style: dashed;
    border-color: var(--rule-strong);
}
.service-open .service-status { color: var(--muted); }
.service-open .dot { background: var(--muted); }

.spec-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Who runs this ─────────────────────────────────────────
   Deliberately quieter than the service panels: this section
   answers questions rather than selling, so it reads as prose
   with facts pulled out, not as another grid of cards. */
.who-lead {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--ink);
    max-width: 34ch;
    margin: 0 0 clamp(28px, 3.5vw, 40px);
    text-wrap: balance;
}

.who-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(22px, 3vw, 38px);
}

.who-item h3 {
    font-size: 0.72rem;
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 9px;
}

.who-item p {
    color: var(--muted);
    font-size: 0.97rem;
    font-weight: 300;
    line-height: 1.66;
    margin: 0;
}

.who-item p + p { margin-top: 10px; }

.who-foot {
    margin-top: clamp(30px, 4vw, 44px);
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.66;
}

.spec-list li {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface-alt);
    border-radius: 2px;
    padding: 5px 10px;
}

/* ── Manifesto band ───────────────────────────────────────────── */
.manifesto {
    background: var(--band);
    color: var(--band-ink);
    border-top: none;
}

.manifesto .rail { color: var(--band-muted); }

.creed {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.9rem, 5.6vw, 3.5rem);
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin: 0;
}
.creed span { display: block; }
.creed span + span { margin-top: 0.2em; }
.creed .quiet { color: var(--band-muted); }
.creed .lead-line { color: var(--band-ink); }

/* ── Suggestion form ──────────────────────────────────────────── */
.suggest-intro {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 600;
    font-family: var(--display);
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 1rem;
}

.suggest-sub {
    color: var(--muted);
    font-weight: 300;
    max-width: 58ch;
    margin-bottom: 2.2rem;
}

.suggest-band { max-width: 640px; }

.suggest-foot {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-top: 1.1rem;
}

.btn-xl { padding: 22px 44px; font-size: 0.9rem; }

/* ── Contact form ─────────────────────────────────────────────── */
/* Reuses the .field / .notice / .thanks primitives further down, which
   are shared with the suggestion dialog. */
.contact-band { max-width: 640px; }

.contact-foot {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 1.4rem;
}
.contact-foot a { color: var(--muted); }
.contact-foot a:hover { color: var(--ink); }

/* ── Suggestion dialog ────────────────────────────────────────── */
#suggestDialog {
    width: min(660px, calc(100vw - 32px));
    max-height: min(86vh, 900px);
    padding: 0;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 28px 70px -30px rgba(4, 12, 10, .6);
    overflow: hidden;
}

#suggestDialog::backdrop {
    background: rgba(8, 16, 15, .58);
    backdrop-filter: blur(2px);
}

/* allow-discrete lets the dialog animate out of display:none. Browsers that
   don't support it simply show the dialog immediately, which is fine. */
#suggestDialog,
#suggestDialog::backdrop {
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease,
                overlay .22s allow-discrete, display .22s allow-discrete;
}
#suggestDialog { transform: translateY(10px) scale(.985); }
#suggestDialog[open] { opacity: 1; transform: none; }
#suggestDialog[open]::backdrop { opacity: 1; }

@starting-style {
    #suggestDialog[open] { opacity: 0; transform: translateY(10px) scale(.985); }
    #suggestDialog[open]::backdrop { opacity: 0; }
}

.dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px clamp(20px, 3vw, 32px);
    border-bottom: 1px solid var(--rule);
}

.dialog-head h2 {
    font-size: 1.32rem;
    font-weight: 600;
    margin: 0;
}

.dialog-close {
    flex: none;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--muted);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.dialog-close:hover { color: var(--ink); border-color: var(--rule-strong); }

.dialog-body {
    padding: clamp(22px, 3vw, 32px);
    overflow-y: auto;
    max-height: calc(86vh - 80px);
}

.dialog-lede {
    color: var(--muted);
    font-weight: 300;
    font-size: 1rem;
    margin-bottom: 1.6rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.field label,
.field-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.req { color: var(--accent); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: 13px 15px;
    width: 100%;
    transition: border-color .16s ease, background-color .16s ease;
}

.field textarea { resize: vertical; min-height: 148px; line-height: 1.6; }

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .field-pair { grid-template-columns: 1fr; gap: 0; } }

.hint { font-family: var(--body); font-size: 0.88rem; color: var(--muted); font-weight: 300; }

.check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 26px;
    cursor: pointer;
}
.check input { margin-top: 5px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.check .check-text { font-size: 0.95rem; font-weight: 300; color: var(--ink-soft); }
.check .hint { display: block; margin-top: 2px; }

/* Hidden from people, catnip for bots */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
    border-radius: 2px;
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border: 1px solid;
}
.notice-error { background: var(--surface-alt); border-color: var(--danger); color: var(--ink); }

.thanks { text-align: center; padding-block: 30px; }
.thanks h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.thanks p { color: var(--muted); font-weight: 300; }
.thanks .tick {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--accent-wash);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}

.is-hidden { display: none !important; }

/* ── Footer ───────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--rule);
    padding-block: 34px 44px;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--accent); }

/* ── Entrance ─────────────────────────────────────────────────── */
.rise { animation: rise .72s cubic-bezier(.16,.84,.3,1) backwards; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }
.rise-4 { animation-delay: .28s; }
.rise-5 { animation-delay: .36s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }
    .service:hover { transform: none; }
}

/* ── Pricing plans (sftp/pricing.html) ─────────────────────────
   Two plans, so a two-up grid rather than the auto-fit used for
   the service panels: three columns of one plan each would read
   as a comparison the page isn't making. */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

.plan {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The plan we expect most people to land on. Badged "Recommended" —
   our own recommendation, which we can stand behind — and never
   "MOST POPULAR", which would be a claim about numbers we don't have.
   The accent border lives with .plan-badge further down. */

.plan-name {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
}

.plan-price {
    font-family: var(--display);
    font-size: clamp(2.1rem, 4vw, 2.7rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.plan-price .plan-per {
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0;
}

.plan-sub {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 300;
    margin: 10px 0 0;
}

.plan-lede {
    color: var(--ink-soft);
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.66;
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.plan-specs {
    list-style: none;
    margin: 18px 0 26px;
    padding: 0;
    flex: 1;
}

.plan-specs li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 11px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.55;
}

.plan-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 1px;
    background: var(--accent-wash);
    border: 1px solid var(--accent);
}

.plan-specs li .plan-spec-note {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
}

.plan .btn { width: 100%; justify-content: center; }

/* ── Comparison / fine print ──────────────────────────────────── */
.price-note {
    margin-top: clamp(28px, 4vw, 40px);
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.7;
}

.price-note p { margin: 0 0 10px; }
.price-note p:last-child { margin-bottom: 0; }
.price-note a { color: var(--accent); }

/* ── Features (sftp/features.html) ────────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(22px, 3vw, 36px);
}

.feature h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.feature-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}

.feature p {
    color: var(--muted);
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.68;
    margin: 0;
}

.feature p + p { margin-top: 9px; }

/* Short claims that carry the ad copy: bigger than body text,
   quieter than a heading. */
.claim-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px clamp(20px, 3vw, 34px);
}

.claim-list li {
    position: relative;
    padding-left: 26px;
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
}

.claim-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent-wash);
    border: 1px solid var(--accent);
}

/* ── Cross-page call to action ────────────────────────────────── */
.cta-band {
    background: var(--band);
    color: var(--band-ink);
}

.cta-band h2 {
    color: var(--band-ink);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 12px;
}

.cta-band p {
    color: var(--band-muted);
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.66;
    margin: 0 0 26px;
    max-width: 62ch;
}

.cta-band .rail { color: var(--band-muted); }
.cta-band .btn-line { border-color: var(--band-muted); color: var(--band-ink); }
.cta-band .btn-line:hover { border-color: var(--band-ink); color: var(--band-ink); }

/* ── Landing page (sftp.html) ─────────────────────────────────
   The service landing page leads with a sentence rather than a
   one-word lemma, so it needs a smaller display size than the
   7rem the lemma tops out at. Same face and tracking, less shout. */
.lemma-sentence {
    font-size: clamp(2.3rem, 5.6vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

/* The small print directly under a button row — price, ownership,
   what the trial does not ask for. Quieter than body text and in
   mono, so it reads as a fact rather than more selling. */
.action-note {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 1.3rem;
}
.cta-band .action-note { color: var(--band-muted); }

/* Section heading inside a band. Same size and weight as .suggest-intro,
   under a name that says where it is used rather than which form it was
   written for first. */
.band-title {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 600;
    font-family: var(--display);
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 1rem;
}

/* A faintly tinted band, so the page reads as ground → tint → ground →
   dark rather than as one flat sheet of text broken only by hairlines. */
.band-tint {
    background: var(--surface-alt);
    border-top-color: var(--rule-strong);
}

/* ── Terminal ─────────────────────────────────────────────────
   The hero is otherwise all prose, and this is the only page whose
   subject is a command line. Same ink as the dark bands, so it sits
   in the system rather than looking like a screenshot dropped in.
   The session is real: hosts are sftphost001.proficiens.io and login
   names are <name>.svc<id>, and an account without delete really is
   refused. */
.term {
    margin-top: clamp(30px, 4vw, 44px);
    max-width: 620px;
    background: var(--band);
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    overflow: hidden;
}

.term-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(147, 165, 161, .2);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--band-muted);
}

.term-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--band-muted);
    opacity: .45;
    flex: none;
}
.term-bar .term-label { margin-left: 5px; }

/* white-space: pre keeps the column alignment of the transfer line, so the
   block needs its own horizontal scroll on a phone rather than the page's. */
.term-body {
    margin: 0;
    padding: clamp(16px, 2.4vw, 22px);
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 2;
    color: var(--band-ink);
    white-space: pre;
    overflow-x: auto;
}

.term-body .t-prompt { color: var(--accent-deep); }
.term-body .t-out    { color: var(--band-muted); }
.term-body .t-deny   { color: var(--band-danger); }

.term-note {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.75;
    color: var(--muted);
    margin-top: 0.9rem;
    max-width: 620px;
}

/* ── Feature cards (sftp.html only) ───────────────────────────
   features.html keeps the plain .feature-grid: it is a long reference
   list where cards would be noise. Here there are six items carrying
   the whole product, so each gets a surface of its own. */
.feature-cards { gap: clamp(16px, 2.2vw, 24px); }

.feature-cards .feature {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: clamp(22px, 2.6vw, 30px);
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Same nameplate stripe as the service panels on the landing page. */
.feature-cards .feature::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
}

.feature-cards .feature:hover {
    border-color: var(--rule-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(18, 25, 28, .34);
}
.feature-cards .feature:hover::before { transform: scaleY(1); }

.feature-cards .feature h3 { font-size: 1.12rem; margin-bottom: 9px; }

@media (prefers-reduced-motion: reduce) {
    .feature-cards .feature:hover { transform: none; }
}

/* ── Audit trail excerpt ──────────────────────────────────────
   The other side of the hero terminal: the same three commands as
   the customer sees them. It reuses the .term shell deliberately —
   one object, two faces — and only widens it, because six columns
   of mono do not fit the terminal's 620px.

   Columns and values follow AuditService.SFTP_COLS: event_time,
   login_username, event_type, outcome, client_ip, auth_method,
   file_path, bytes, duration_ms. */
.trail { max-width: 100%; }

/* Six mono columns overflow a phone. The panel scrolls, not the page. */
.trail-scroll { overflow-x: auto; }

.trail-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--band-ink);
}

.trail-table th {
    text-align: left;
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--band-muted);
    padding: 13px 14px;
    border-bottom: 1px solid rgba(147, 165, 161, .2);
    white-space: nowrap;
}

.trail-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(147, 165, 161, .1);
    white-space: nowrap;
}
.trail-table tr:last-child td { border-bottom: none; }

.trail-table .t-time,
.trail-table .t-detail { color: var(--band-muted); }

/* Outcome, as the column it is in the table rather than a coloured word */
.t-ok, .t-fail {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid currentColor;
}
.t-ok   { color: var(--accent-deep); }
.t-fail { color: var(--band-danger); }

/* ── In practice (sftp.html) ──────────────────────────────────
   Named situations rather than capabilities. Deliberately not the
   card treatment used for .feature-cards — these are read in order
   as prose, so they get a margin stroke instead of a surface. */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(24px, 3vw, 38px);
}

.case {
    border-left: 2px solid var(--rule-strong);
    padding-left: clamp(16px, 1.8vw, 22px);
    transition: border-color .2s ease;
}
.case:hover { border-left-color: var(--accent); }

.case-tag {
    display: block;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.case h3 {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.case p {
    color: var(--muted);
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.68;
    margin: 0;
}

/* The settings that make the case work, as a spec line under it */
.case-set {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

/* The trail caption runs straight into the coverage list otherwise. */
.term-note + .claim-list { margin-top: clamp(28px, 3.5vw, 40px); }

/* ── Founding customers ───────────────────────────────────────
   The offer band on sftp.html. Loud on purpose — it is the one
   thing on the page with a deadline — but built from the existing
   accent tokens rather than a new colour. */
.founding {
    background: var(--accent-wash);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: clamp(24px, 3vw, 34px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 38px);
    align-items: center;
}

@media (max-width: 620px) {
    .founding { grid-template-columns: 1fr; gap: 18px; }
}

.founding-figure { text-align: center; }

/* Starts as an em dash and is replaced once the count arrives, so a
   blocked or failed fetch degrades to a dash rather than "undefined". */
.founding-count {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    display: block;
}

.founding-of {
    display: block;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 10px;
}

.founding h2 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
}

.founding p {
    color: var(--ink-soft);
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.66;
    margin: 0;
}

.founding p + p { margin-top: 10px; }

.founding-terms {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--accent);
}

/* Closed state: the places are gone, so the band stops shouting. */
.founding.is-closed {
    background: var(--surface-alt);
    border-color: var(--rule-strong);
}
.founding.is-closed .founding-count { color: var(--muted); }
.founding.is-closed .founding-terms { border-top-color: var(--rule); }

/* ── Recommended plan badge ───────────────────────────────────
   Our own recommendation, which we can stand behind — not a
   popularity claim we have no numbers for. */
.plan-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 2px;
    padding: 4px 9px;
    margin-left: 10px;
    vertical-align: 2px;
}

/* The recommended card carries the accent edge as well as the badge. */
.plan-lead { border-color: var(--accent); }

/* ── Custom plan card ─────────────────────────────────────────
   Dashed for the same reason the open service slot on the landing
   page is dashed: it is genuinely undecided until someone writes in.
   It has no price, so .plan-ask takes the slot .plan-price would,
   which keeps the four cards roughly aligned down the page. */
.plan-custom {
    background: transparent;
    border-style: dashed;
    border-color: var(--rule-strong);
}

.plan-custom .plan-name { color: var(--muted); }

.plan-ask {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.6vw, 1.58rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.16;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.plan-custom .plan-specs li::before {
    background: transparent;
    border-color: var(--rule-strong);
}

/* The founding CTA. .btn-lg already carries the size; this just gives it
   room, and lets it fill the width on a phone where a centred button in a
   stacked band otherwise floats. */
.founding-actions { margin-top: 18px; }

@media (max-width: 620px) {
    .founding-actions .btn { width: 100%; justify-content: center; }
}

/* Once the places are gone the button is a plain trial link, not an offer. */
.founding.is-closed .btn-solid {
    background: var(--ink);
    color: var(--ground);
}