/* xfrit — one job, done well. */

:root {
    --bg: #05070a;
    --bg-2: #080b11;
    --panel: rgba(18, 23, 32, 0.72);
    --panel-solid: #12171f;
    --panel-hi: rgba(28, 35, 47, 0.8);
    --border: rgba(120, 160, 190, 0.14);
    --border-hi: rgba(120, 200, 220, 0.3);
    --text: #e9f0f5;
    --text-2: #9aa9b8;
    --text-3: #64727f;
    /* Matched to the logo: chrome + electric blue, not the original teal. */
    --accent: #2e9dff;
    --accent-2: #7fd8ff;
    --accent-3: #7a5cff;
    --accent-glow: rgba(46, 157, 255, 0.4);
    --on-accent: #041018;
    --danger: #ff6b6b;
    --ok: #4fd6a0;
    --radius: 16px;
    --radius-sm: 10px;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ── atmosphere ─────────────────────────────────────────── */
.bg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.bg-aurora::before,
.bg-aurora::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(110px); opacity: .5;
}
.bg-aurora::before {
    width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
    top: -22vw; left: -12vw;
    background: radial-gradient(circle, rgba(46, 157, 255, .34), transparent 70%);
    animation: drift1 26s ease-in-out infinite;
}
.bg-aurora::after {
    width: 54vw; height: 54vw; max-width: 720px; max-height: 720px;
    top: 4vh; right: -18vw;
    background: radial-gradient(circle, rgba(122, 92, 255, .3), transparent 70%);
    animation: drift2 32s ease-in-out infinite;
}
/* A third glow anchored to the BOTTOM of the viewport. The layers are fixed,
   so without this the lower half of every page sits on flat black no matter
   how far you scroll. */
.bg-aurora-low::before {
    content: ""; position: absolute; border-radius: 50%;
    width: 70vw; height: 46vw; max-width: 900px; max-height: 560px;
    bottom: -20vw; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(46, 157, 255, .2), transparent 70%);
    filter: blur(120px); opacity: .55;
    animation: drift3 38s ease-in-out infinite;
}
@keyframes drift3 {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-42%) scale(1.14); }
}
@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6vw, 5vh) scale(1.12); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-7vw, 7vh) scale(1.08); }
}

/* The grid covers the whole viewport and is strongest at the top, rather than
   being clipped away entirely — otherwise the page bottom is dead space. */
.bg-grid {
    background-image:
        linear-gradient(rgba(120, 180, 200, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 180, 200, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .28) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .28) 100%);
}

.bg-vignette {
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, transparent 45%, rgba(5, 7, 10, .75) 100%),
        radial-gradient(ellipse 90% 50% at 50% 100%, transparent 55%, rgba(5, 7, 10, .6) 100%);
}

/* ── layout ─────────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { color: #9fd8ff; }

/* Keyboard focus only — mouse clicks stay ring-free. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--panel-solid); padding: 10px 14px; border-radius: var(--radius-sm); z-index: 50; }

.site-head {
    position: relative; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 24px; max-width: 1000px; margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; }
/* The logo art is a glow on transparency; a soft drop-shadow lifts it off
   the dark background the same way the artwork's own glow does. */
.brand__logo {
    display: block; height: 38px; width: auto;
    filter: drop-shadow(0 0 14px rgba(46, 157, 255, .35));
    transition: filter .25s, transform .25s;
}
.brand:hover .brand__logo { filter: drop-shadow(0 0 20px rgba(46, 157, 255, .6)); transform: translateY(-1px); }
.site-nav { display: flex; gap: 20px; font-size: 0.88rem; }
.site-nav a { color: var(--text-2); }
.site-nav a:hover { color: var(--text); }
.site-nav__install {
    background: none; border: 1px solid var(--border-hi); border-radius: 999px; padding: 3px 12px;
    font: inherit; color: var(--accent); cursor: pointer;
}
.site-nav__install:hover { color: var(--text); border-color: var(--accent); }
.site-nav__install[hidden] { display: none; }

main { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 0 24px 80px; }

.site-foot {
    position: relative; z-index: 2;
    max-width: 1000px; margin: 60px auto 0; padding: 38px 24px 44px;
    color: var(--text-3); font-size: 0.86rem;
}
/* hairline that glows toward the middle, instead of a flat 1px rule */
.site-foot::before {
    content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46, 157, 255, .45), transparent);
}
.site-foot__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.site-foot__brand img { height: 30px; width: auto; display: block; opacity: .9; filter: drop-shadow(0 0 12px rgba(46, 157, 255, .25)); }
.site-foot__brand p { margin: 14px 0 0; max-width: 42ch; line-height: 1.6; }
.site-foot__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.site-foot__facts li {
    font-size: 0.72rem; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(46, 157, 255, .05); color: var(--text-2);
}
.site-foot__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.site-foot__col { display: flex; flex-direction: column; gap: 9px; }
.site-foot__col h2 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-2); margin: 0 0 3px; font-weight: 700;
}
.site-foot__col a { color: var(--text-3); }
.site-foot__col a:hover { color: var(--accent); }
.site-foot__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: 0.78rem;
}
.site-foot__bottom p { margin: 0; }

/* ── hero ───────────────────────────────────────────────── */
.hero { padding: 40px 0 30px; text-align: center; }
.hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--border-hi); background: rgba(46, 157, 255, .07);
    color: var(--accent); font-size: 0.76rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px;
}
.hero__badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    animation: blip 2s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.hero h1 {
    font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; margin: 0 0 16px;
    letter-spacing: -0.035em; font-weight: 800;
    background: linear-gradient(135deg, #ffffff 20%, var(--accent) 70%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { margin: 0 auto; max-width: 620px; color: var(--text-2); font-size: 1.04rem; }

.creed {
    list-style: none; margin: 22px auto 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 640px;
}
.creed li {
    font-size: 0.78rem; font-weight: 600; letter-spacing: .01em;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(0, 0, 0, .3); color: var(--text-2);
}
.creed__end {
    border-color: var(--border-hi) !important;
    background: rgba(46, 157, 255, .1) !important;
    color: var(--accent) !important;
    font-family: var(--mono); font-size: 0.74rem !important;
}

/* ── the tool ───────────────────────────────────────────── */
/* As wide as the header's content (main caps it at the same 1000px), so it
   fills wide screens instead of sitting in a 640px strip; phones unchanged. */
.ft-root {
    margin: 34px auto 0;
    background: var(--panel);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 30px);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.ft-tabs {
    display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
    background: rgba(0, 0, 0, .3); border-radius: 12px; border: 1px solid var(--border);
}
.ft-tab {
    flex: 1; padding: 10px 14px; border: 0; border-radius: 9px;
    background: transparent; color: var(--text-2); font-weight: 600; font-size: 0.92rem;
    cursor: pointer; font-family: inherit; transition: color .18s, background .18s;
}
.ft-tab:hover { color: var(--text); }
.ft-tab.is-active {
    color: #041018;
    background: linear-gradient(135deg, var(--accent), #1f7fd6);
    box-shadow: 0 4px 16px -4px var(--accent-glow);
}

.ft-panel { display: flex; flex-direction: column; gap: 14px; }
.ft-panel[hidden] { display: none; }
.ft-notice { margin: 0; font-size: 0.78rem; color: var(--text-3); text-align: center; }
.ft-notice a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

.ft-drop {
    position: relative; border: 1px dashed var(--border-hi); border-radius: var(--radius);
    padding: 40px 20px; text-align: center; background: rgba(0, 0, 0, .22);
    cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
    overflow: hidden;
}
.ft-drop::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 65%);
    opacity: 0; transition: opacity .25s;
}
.ft-drop:hover { border-color: var(--accent); background: rgba(46, 157, 255, .05); }
.ft-drop:hover::after { opacity: .4; }
body.is-dragging .ft-drop { border-color: var(--accent); transform: scale(1.012); }
body.is-dragging .ft-drop::after { opacity: .7; }
.ft-drop__icon { position: relative; font-size: 34px; color: var(--accent); line-height: 1; filter: drop-shadow(0 0 12px var(--accent-glow)); }
.ft-drop__title { position: relative; font-weight: 700; margin-top: 12px; font-size: 1rem; }
.ft-drop__hint { position: relative; font-size: 0.8rem; color: var(--text-3); margin-top: 6px; }

.ft-file-list { display: flex; flex-direction: column; gap: 6px; }
.ft-empty { font-size: 0.85rem; color: var(--text-3); }
.ft-file-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .25); font-size: 0.86rem;
    animation: slideUp .3s ease both;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ft-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 0.82rem; }
.ft-file-size { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }
.ft-file-remove { background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: 0.95rem; padding: 2px 5px; border-radius: 5px; }
.ft-file-remove:hover { color: var(--danger); background: rgba(255, 107, 107, .1); }
.ft-file-total { font-size: 0.77rem; color: var(--text-3); text-align: right; padding: 2px 4px; }

/* Small text-style buttons: "or choose a whole folder", "clear all". */
.ft-linkbtn {
    background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.ft-linkbtn:hover { color: #9fd8ff; }
.ft-linkbtn[hidden] { display: none; }
.ft-folder-btn { align-self: center; font-size: 0.82rem; margin-top: -4px; }
.ft-zip-row { display: flex; margin-top: 4px; }

/* Request-a-file, sending side: tucked away until needed. */
.ft-claim { font-size: 0.84rem; color: var(--text-2); }
.ft-claim summary { cursor: pointer; color: var(--accent); width: fit-content; }
.ft-claim summary:hover { color: #9fd8ff; }
.ft-claim p { margin: 8px 0; font-size: 0.8rem; }
.ft-claim .ft-code-input-row input { font-size: 1.2rem; padding: 10px; }
.ft-download-btn {
    background: linear-gradient(135deg, var(--accent), #1f7fd6); color: #041018;
    border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.ft-file-saved { font-size: 0.76rem; color: var(--accent); white-space: nowrap; }

/* Text / link message: typed on the send side, shown as a card on receive. */
.ft-text-in { display: flex; flex-direction: column; gap: 6px; }
.ft-text-in label { font-size: 0.8rem; color: var(--text-2); }
.ft-text-in textarea {
    resize: vertical; min-height: 2.9em; max-height: 40vh; padding: 10px 12px;
    font-family: var(--mono); font-size: 0.85rem; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .35);
    transition: border-color .2s, box-shadow .2s;
}
.ft-text-in textarea::placeholder { color: var(--text-3); }
.ft-text-in textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46, 157, 255, .1); }
.ft-text-card {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 13px;
    border: 1px solid var(--border-hi); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .25);
    animation: slideUp .3s ease both;
}
.ft-text-card__head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--text-2); font-weight: 600; }
.ft-text-card__body {
    margin: 0; max-height: 40vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: var(--mono); font-size: 0.88rem; color: var(--text); user-select: text;
}
.ft-text-card__actions { display: flex; gap: 8px; }
a.ft-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.ft-actions { display: flex; gap: 8px; }
.ft-btn {
    flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .03); color: var(--text); font-weight: 600; font-size: 0.9rem;
    cursor: pointer; font-family: inherit; transition: border-color .18s, color .18s, background .18s, transform .1s;
}
.ft-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: rgba(46, 157, 255, .07); }
.ft-btn:active:not(:disabled) { transform: translateY(1px); }
.ft-btn:disabled { opacity: .35; cursor: default; }
.ft-btn--primary {
    background: linear-gradient(135deg, var(--accent), #1f7fd6);
    border-color: transparent; color: #041018;
    box-shadow: 0 6px 22px -8px var(--accent-glow);
}
.ft-btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, #57b4ff, var(--accent)); color: #041018; border-color: transparent; }

/* display:none is load-bearing — the JS sets an explicit 'block' to reveal
   these, because clearing an inline style would just re-hide them. */
.ft-code-wrap {
    display: none; text-align: center; padding: 26px 22px;
    border: 1px solid var(--border-hi); border-radius: var(--radius);
    background: radial-gradient(ellipse at 50% 0%, rgba(46, 157, 255, .09), rgba(0, 0, 0, .3) 70%);
    animation: popIn .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
.ft-code {
    font-family: var(--mono); font-size: 2.6rem; font-weight: 700; letter-spacing: 0.16em;
    color: var(--accent); cursor: pointer; user-select: all; line-height: 1.2;
    text-shadow: 0 0 26px var(--accent-glow);
}
.ft-code:hover { color: #9fd8ff; }
.ft-code-hint { font-size: 0.76rem; color: var(--text-3); margin-top: 6px; }
.ft-qr { margin: 18px auto 14px; width: 176px; }
.ft-qr canvas { border-radius: 10px; display: block; box-shadow: 0 0 0 6px #fff, 0 10px 34px -10px rgba(0, 0, 0, .8); }
.ft-share-row { display: flex; gap: 8px; }
.ft-share-row input {
    flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.78rem; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .35); color: var(--text-2);
}
.ft-share-row .ft-btn { flex: 0 0 auto; }

.ft-code-input-row { display: flex; gap: 8px; }
.ft-code-input-row input {
    flex: 1; min-width: 0; font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.22em;
    text-align: center; text-transform: uppercase; padding: 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .35); color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.ft-code-input-row input::placeholder { color: var(--text-3); letter-spacing: .18em; }
.ft-code-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46, 157, 255, .1); }
.ft-code-input-row .ft-btn { flex: 0 0 auto; }

.ft-opt { display: none; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--text-2); cursor: pointer; }
.ft-opt input { accent-color: var(--accent); width: 17px; height: 17px; margin-top: 2px; flex: none; }

.ft-status { font-size: 0.87rem; color: var(--text-2); min-height: 1.2em; }

/* Match words: both screens must show the same four, in the same order. */
.ft-opt--always { display: flex; }
.ft-sas {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 16px 18px; border: 1px solid var(--border-hi); border-radius: var(--radius);
    background: rgba(0, 0, 0, .28); animation: popIn .4s cubic-bezier(.2, .9, .3, 1.2) both;
}
.ft-sas[hidden], .ft-hold[hidden] { display: none; }
.ft-sas__label { font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ft-sas__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ft-sas__words span {
    font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--accent-2);
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: rgba(46, 157, 255, .07);
}
.ft-sas__note { font-size: 0.78rem; color: var(--text-2); max-width: 46ch; }
.ft-hold { display: flex; }
.ft-verified { color: var(--ok); font-family: var(--sans); font-weight: 600; margin-left: 6px; }
.ft-verify-bad { color: var(--danger); font-family: var(--sans); font-weight: 700; margin-left: 6px; }

/* live link visualiser */
.ft-viz { display: none; }
.ft-viz canvas { width: 100%; height: 86px; display: block; border-radius: var(--radius-sm); }

.ft-progress-wrap { display: none; }
.ft-progress-track {
    height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .45);
    border: 1px solid var(--border); overflow: hidden; position: relative;
}
.ft-progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    box-shadow: 0 0 16px var(--accent-glow);
    transition: width .2s ease; position: relative; overflow: hidden;
}
.ft-progress-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: sheen 1.5s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ft-progress-text { font-size: 0.78rem; color: var(--text-2); font-family: var(--mono); margin-top: 7px; }

.ft-conn { font-size: 0.74rem; color: var(--text-3); font-family: var(--mono); line-height: 1.5; }

.ft-log-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 6px; }
.ft-log {
    max-height: 150px; overflow-y: auto; background: rgba(0, 0, 0, .4);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 11px 13px; font-family: var(--mono); font-size: 0.73rem; color: var(--text-2);
}
.ft-log::-webkit-scrollbar { width: 6px; }
.ft-log::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
.ft-log-line { padding: 1px 0; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.ft-warn {
    font-size: 0.8rem; color: var(--text-3); border-left: 2px solid var(--accent);
    padding: 12px 16px; background: rgba(0, 0, 0, .25);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 20px auto 0; max-width: 640px;
}

/* ── points ─────────────────────────────────────────────── */
/* Explicit 2×2 rather than auto-fit: four cards in a 1000px container
   auto-fitted to three columns, leaving one orphan on its own row. */
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 70px; }
.point {
    padding: 22px; border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255, 255, 255, .015); transition: border-color .25s, transform .25s;
}
.point:hover { border-color: var(--border-hi); transform: translateY(-2px); }
/* Odd card out spans the row rather than sitting orphaned in one column —
   and it happens to be the differentiator, so the emphasis is earned. */
.points .point:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-color: var(--border-hi);
    background: linear-gradient(135deg, rgba(46, 157, 255, .07), rgba(255, 255, 255, .015));
}
.point h2 { font-size: 1rem; margin: 0 0 8px; color: var(--text); }
.point p { margin: 0; color: var(--text-2); font-size: 0.88rem; }

/* ── prose ──────────────────────────────────────────────── */
.prose { max-width: 700px; margin: 0 auto; padding-top: 24px; }
.prose h1 { font-size: 2.1rem; letter-spacing: -0.03em; margin: 0 0 8px; font-weight: 800; }
.prose .lede { color: var(--text-2); font-size: 1.04rem; margin: 0 0 30px; }
.prose h2 { font-size: 1.14rem; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--text-2); font-size: 0.94rem; }
.prose li { margin-bottom: 8px; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: rgba(0, 0, 0, .4); padding: 2px 7px; border-radius: 5px; color: var(--accent); }
.prose .callout {
    border: 1px solid var(--border); border-left: 2px solid var(--accent);
    background: rgba(46, 157, 255, .05); padding: 16px 18px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 22px 0;
}
.prose .callout p:last-child { margin-bottom: 0; }
.prose .updated { color: var(--text-3); font-size: 0.82rem; }
.prose ol { color: var(--text-2); font-size: 0.94rem; padding-left: 1.2em; }
.prose ol li { margin-bottom: 10px; }
.prose ol li::marker { color: var(--accent); font-weight: 700; }

.tbl { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.86rem; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl thead th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-2); border-bottom-color: var(--border-hi);
}
.tbl td { color: var(--text-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
    /* Stacked cards on narrow screens. The header row is hidden, so each cell
       carries its own label via data-label — without that the "Why" and
       "Kept for" values lose all context once the columns collapse. */
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
    .tbl thead { display: none; }
    .tbl tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 10px 6px; }
    .tbl td { border-bottom: 0; padding: 5px 12px; }
    .tbl td:first-child { color: var(--text); font-weight: 700; font-size: 0.92rem; padding-bottom: 8px; }
    .tbl td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block; font-size: 0.66rem; text-transform: uppercase;
        letter-spacing: .08em; color: var(--text-3); margin-bottom: 2px;
    }
}

@media (max-width: 780px) {
    .site-foot__top { grid-template-columns: 1fr; gap: 30px; }
    .points { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .site-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ft-root { padding: 16px; border-radius: 14px; }
    .ft-code { font-size: 2rem; }
    .ft-share-row, .ft-code-input-row { flex-direction: column; }
    .ft-share-row .ft-btn, .ft-code-input-row .ft-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
}