.fn-desk {
    display: grid;
    gap: 20px;
    padding: 28px 0 56px;
}

.fn-desk-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    background:
        radial-gradient(520px 180px at 100% 0%, rgba(200, 16, 46, .12), transparent 60%),
        #fff;
    border: 1px solid #eceff3;
}

html.dark .fn-desk-hero {
    background:
        radial-gradient(520px 180px at 100% 0%, rgba(200, 16, 46, .22), transparent 60%),
        #16171c;
    border-color: rgba(255,255,255,.08);
}

.fn-desk-who {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.fn-desk-who img {
    width: 72px;
    height: 72px;
    border-radius: 99px;
    object-fit: cover;
    border: 2px solid #C8102E;
}

.fn-desk-kicker {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #C8102E;
}

.fn-desk-hero h1 {
    margin: 2px 0 0;
    font-family: Newsreader, Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    letter-spacing: -.03em;
    line-height: 1.05;
}

.fn-desk-hero p { margin: 4px 0 0; color: #6b7280; font-size: 14px; }

.fn-desk-hero__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fn-desk-plan,
.fn-desk-streak {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    background: #f6f3ee;
}

html.dark .fn-desk-plan,
html.dark .fn-desk-streak { background: #0c0d10; }

.fn-desk-plan.is-pro { background: #C8102E; color: #fff; }

.fn-desk-ranges {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f6f3ee;
}

html.dark .fn-desk-ranges { background: #0c0d10; }

.fn-desk-ranges a {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #6b7280;
}

.fn-desk-ranges a.is-on { background: #C8102E; color: #fff; }

.fn-desk-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 900px) {
    .fn-desk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fn-kpi {
    display: grid;
    gap: 4px;
    padding: 16px 16px 12px;
    background: #fff;
    border: 1px solid #eceff3;
    color: inherit;
    min-height: 108px;
}

html.dark .fn-kpi { background: #16171c; border-color: rgba(255,255,255,.08); }

.fn-kpi span,
.fn-kpi em {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7280;
}

.fn-kpi b {
    font-family: Newsreader, Georgia, serif;
    font-size: 1.85rem;
    letter-spacing: -.03em;
    line-height: 1;
}

.fn-kpi svg {
    width: 96px;
    height: 32px;
    margin-top: 4px;
}

.fn-desk-shell {
    display: grid;
    gap: 18px;
}

@media (min-width: 980px) {
    .fn-desk-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }
}

.fn-desk-nav {
    display: grid;
    gap: 4px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eceff3;
}

html.dark .fn-desk-nav { background: #16171c; border-color: rgba(255,255,255,.08); }

.fn-desk-nav a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    color: inherit;
}

.fn-desk-nav a b { font-size: 14px; font-weight: 800; }
.fn-desk-nav a span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b919c;
}

.fn-desk-nav a:hover,
.fn-desk-nav a.is-on {
    background: rgba(200, 16, 46, .08);
    color: #C8102E;
}

.fn-desk-main { min-width: 0; }

.fn-desk-flash {
    margin: 0 0 14px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
}

.fn-desk-flash.is-bad { background: #C8102E; color: #fff; }
.fn-desk-flash.is-ok { background: #0f7a3d; color: #fff; }

.fn-desk-panel,
.fn-card {
    background: #fff;
    border: 1px solid #eceff3;
    padding: 20px;
}

html.dark .fn-desk-panel,
html.dark .fn-card { background: #16171c; border-color: rgba(255,255,255,.08); }

.fn-desk-panel h2,
.fn-card h2 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}

.fn-board {
    display: grid;
    gap: 14px;
}

@media (min-width: 860px) {
    .fn-board {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    }
    .fn-card-chart,
    .fn-card-hours { grid-column: 1 / -1; }
}

.fn-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.fn-card-head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.fn-card-head a { color: #C8102E; font-weight: 800; }

.fn-select {
    border: 1px solid #eceff3;
    background: #f6f3ee;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 10px;
}

html.dark .fn-select { background: #0c0d10; border-color: rgba(255,255,255,.12); }

.fn-chart-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 0 0 8px;
    color: #6b7280;
    font-size: 13px;
}

.fn-chart-total b {
    font-family: Newsreader, Georgia, serif;
    font-size: 2.1rem;
    color: #15171c;
    letter-spacing: -.04em;
}

html.dark .fn-chart-total b { color: #f3f1ea; }

.fn-delta {
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
}

.fn-delta.is-up { color: #16a34a; }
.fn-delta.is-down { color: #C8102E; }

.fn-chart {
    display: block;
    width: 100%;
    height: 196px;
}

.fn-mix {
    display: flex;
    align-items: center;
    gap: 18px;
}

.fn-donut { width: 120px; height: 120px; flex: 0 0 auto; }

html.dark .fn-donut circle[fill="#fff"] { fill: #16171c; }
html.dark .fn-donut text[fill="#15171c"] { fill: #f3f1ea; }

.fn-mix ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.fn-mix li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}

.fn-mix i {
    width: 10px;
    height: 10px;
    border-radius: 99px;
}

.fn-hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 4px;
    align-items: end;
    height: 120px;
}

.fn-hours span {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.fn-hours i {
    width: 100%;
    max-width: 14px;
    background: linear-gradient(180deg, #C8102E, #8e0b20);
    min-height: 2px;
}

.fn-hours em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: #8b919c;
}

.fn-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.fn-bar i {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    background: #f6f3ee;
}

html.dark .fn-bar i { background: #0c0d10; }

.fn-bar em {
    display: block;
    height: 6px;
    background: #C8102E;
}

.fn-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.fn-btn,
.fn-desk .btn,
.fn-dash .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #C8102E;
    color: #fff;
    font-weight: 800;
    padding: 11px 16px;
    border: 0;
    text-decoration: none;
}

.fn-btn.is-ghost,
.fn-desk .btn-ghost,
.fn-dash .btn-ghost {
    background: transparent;
    color: #C8102E;
    padding: 11px 0;
    cursor: pointer;
}

.fn-feed-row,
.fn-dash__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #eceff3;
}

html.dark .fn-feed-row,
html.dark .fn-dash__row { border-color: rgba(255,255,255,.08); }

.fn-feed-row:last-child,
.fn-dash__row:last-child { border-bottom: 0; }

.fn-feed-row a,
.fn-dash__row a { font-weight: 800; }

.fn-feed-row em {
    font-style: normal;
    font-size: 12px;
    color: #6b7280;
}

.fn-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.fn-people a {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: inherit;
}

.fn-people img {
    width: 56px;
    height: 56px;
    border-radius: 99px;
    object-fit: cover;
}

.fn-empty,
.fn-dash .empty,
.fn-desk .empty {
    color: #6b7280;
    padding: 8px 0 4px;
    margin: 0;
}

.fn-desk form.grid,
.fn-dash form.grid { display: grid; gap: 12px; }

.fn-desk input,
.fn-desk select,
.fn-desk textarea,
.fn-dash input,
.fn-dash select,
.fn-dash textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    padding: 12px 14px;
    background: transparent;
}

html.dark .fn-desk input,
html.dark .fn-desk select,
html.dark .fn-desk textarea,
html.dark .fn-dash input,
html.dark .fn-dash select,
html.dark .fn-dash textarea { border-color: rgba(255,255,255,.12); }

.fn-mast-user {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
}

.fn-mast-user img { width: 28px; height: 28px; border-radius: 99px; object-fit: cover; }

@media (min-width: 640px) {
    .fn-mast-user { display: inline-flex; }
}

[x-cloak] { display: none !important; }

.fn-prof {
    display: grid;
    gap: 14px;
}

@media (min-width: 960px) {
    .fn-prof {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    }
    .fn-idcard,
    .fn-prof-form { grid-column: 1 / -1; }
}

.fn-idcard__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.fn-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    cursor: pointer;
    flex: 0 0 auto;
}

.fn-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 99px;
    object-fit: cover;
    border: 3px solid #C8102E;
    display: block;
}

.fn-avatar input { display: none; }

.fn-avatar span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #C8102E;
    color: #fff;
    padding: 4px 0;
    border-radius: 0 0 99px 99px;
}

.fn-idcard__copy { min-width: 0; flex: 1; }

.fn-idcard__copy h2 {
    margin: 4px 0 0;
    font-family: Newsreader, Georgia, serif;
    font-size: 1.8rem;
    letter-spacing: -.03em;
}

.fn-idcard__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.fn-idcard__pills span {
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    background: #f6f3ee;
}

html.dark .fn-idcard__pills span { background: #0c0d10; }

.fn-complete {
    margin-left: auto;
    display: grid;
    justify-items: center;
    width: 88px;
}

.fn-complete svg { width: 80px; height: 80px; }
.fn-complete b {
    margin-top: -58px;
    font-family: Newsreader, Georgia, serif;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}
.fn-complete span {
    margin-top: 28px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}

html.dark .fn-complete circle[stroke="#eceff3"] { stroke: rgba(255,255,255,.12); }

.fn-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 0;
}

@media (min-width: 720px) {
    .fn-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fn-facts div {
    padding: 12px;
    background: #f6f3ee;
}

html.dark .fn-facts div { background: #0c0d10; }

.fn-facts dt {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b7280;
}

.fn-facts dd { margin: 4px 0 0; font-weight: 800; }

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

@media (min-width: 720px) {
    .fn-fields { grid-template-columns: 1fr 1fr; }
}

.fn-field {
    display: grid;
    gap: 6px;
}

.fn-field--full { grid-column: 1 / -1; }

.fn-field span,
.fn-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
}

.fn-label { margin: 16px 0 8px; }

.fn-field em { font-style: normal; color: #8b919c; }

.fn-field input:disabled { opacity: .65; cursor: not-allowed; background: #f6f3ee; }

.fn-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
}

.fn-themes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fn-theme {
    display: grid;
    gap: 4px;
    padding: 14px 12px;
    border: 1px solid #eceff3;
    cursor: pointer;
    background:
        linear-gradient(180deg, #fff 40%, #f6f3ee 100%);
}

.fn-theme.is-dark {
    background: linear-gradient(180deg, #2a2d34 40%, #16171c 100%);
    color: #f3f1ea;
}

.fn-theme.is-system {
    background:
        linear-gradient(90deg, #fff 50%, #16171c 50%);
    color: #15171c;
}

.fn-theme.is-system span,
.fn-theme.is-system b {
    color: #fff;
    text-shadow: 0 0 8px #000;
}

.fn-theme input { display: none; }
.fn-theme b { font-size: 13px; }
.fn-theme span { font-size: 11px; color: #6b7280; }
.fn-theme.is-on { outline: 2px solid #C8102E; outline-offset: 1px; }

.fn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fn-chips label { cursor: pointer; }
.fn-chips input { display: none; }
.fn-chips span {
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid #eceff3;
    font-size: 13px;
    font-weight: 800;
    background: #fff;
}

html.dark .fn-chips span { background: #0c0d10; border-color: rgba(255,255,255,.12); }

.fn-chips input:checked + span {
    background: #C8102E;
    border-color: #C8102E;
    color: #fff;
}

.fn-toggles { display: grid; gap: 10px; margin-bottom: 16px; }

.fn-toggle {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eceff3;
}

html.dark .fn-toggle { border-color: rgba(255,255,255,.08); }

.fn-toggle:last-of-type { border-bottom: 0; }

.fn-toggle input[type="hidden"] { display: none; }

.fn-toggle input[type="checkbox"] {
    appearance: none;
    width: 42px;
    height: 24px;
    border: 0;
    padding: 0;
    border-radius: 99px;
    background: #d6d3cd;
    position: relative;
    cursor: pointer;
}

.fn-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 99px;
    background: #fff;
    transition: transform .18s ease;
}

.fn-toggle input[type="checkbox"]:checked { background: #C8102E; }
.fn-toggle input[type="checkbox"]:checked::after { transform: translateX(18px); }

.fn-toggle b { display: block; font-size: 14px; }
.fn-toggle em { font-style: normal; font-size: 12px; color: #6b7280; }

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

.fn-connect li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f6f3ee;
    font-size: 13px;
    font-weight: 800;
}

html.dark .fn-connect li { background: #0c0d10; }

.fn-connect li.is-on span { color: #16a34a; }
.fn-connect li span { color: #6b7280; }

.fn-pass { position: relative; }
.fn-pass input { padding-right: 52px; }
.fn-pass button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.fn-strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 6px;
    align-items: center;
    margin: 12px 0 16px;
}

.fn-strength i { height: 4px; background: #eceff3; }
.fn-strength em { font-style: normal; font-size: 11px; font-weight: 800; color: #6b7280; white-space: nowrap; }

.fn-strength[data-score="1"] i:nth-child(1),
.fn-strength[data-score="2"] i:nth-child(-n+2),
.fn-strength[data-score="3"] i:nth-child(-n+3),
.fn-strength[data-score="4"] i:nth-child(-n+4) { background: #C8102E; }

.fn-strength[data-score="3"] i:nth-child(-n+3) { background: #f59e0b; }
.fn-strength[data-score="4"] i { background: #16a34a; }

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

.fn-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fn-filters a {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    background: #f6f3ee;
    color: inherit;
}

html.dark .fn-filters a { background: #0c0d10; }

.fn-filters a.is-on { background: #C8102E; color: #fff; }

.fn-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

@media (max-width: 640px) {
    .fn-item { grid-template-columns: 72px minmax(0, 1fr); }
    .fn-item form { grid-column: 1 / -1; }
}

.fn-thumb {
    display: block;
    width: 96px;
    height: 72px;
    overflow: hidden;
    background: #f6f3ee;
}

.fn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fn-item__body h3 {
    margin: 4px 0 0;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.fn-item__meta {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

.fn-item__lede { margin: 6px 0 0; color: #6b7280; font-size: 14px; }

.fn-pill {
    display: inline-flex;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #eceff3;
    vertical-align: middle;
}

.fn-pill.is-success { background: #dcfce7; color: #166534; }
.fn-pill.is-warning { background: #fef3c7; color: #92400e; }
.fn-pill.is-danger { background: #fee2e2; color: #991b1b; }
.fn-pill.is-info { background: #dbeafe; color: #1e40af; }
.fn-pill.is-primary { background: #fee2e2; color: #C8102E; }
.fn-pill.is-gray { background: #f3f4f6; color: #4b5563; }

.fn-letter p { margin: 10px 0; line-height: 1.55; }
.fn-letter__top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.fn-letter__top em { font-style: normal; font-size: 12px; color: #6b7280; }

.fn-empty-card { text-align: center; padding: 36px 20px; }
.fn-empty-card h2 { font-family: Newsreader, Georgia, serif; font-size: 1.8rem; }
.fn-empty-card p { color: #6b7280; margin: 8px 0 18px; }

.fn-plan-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    background:
        radial-gradient(420px 160px at 100% 0%, rgba(200, 16, 46, .12), transparent 60%),
        #fff;
}

.fn-plan-hero.is-pro {
    background:
        linear-gradient(135deg, #8e0b20, #C8102E 55%, #3a0710);
    color: #fff;
}

.fn-plan-hero.is-pro .fn-desk-kicker,
.fn-plan-hero.is-pro p { color: rgba(255,255,255,.82); }
.fn-plan-hero.is-pro .fn-btn { background: #fff; color: #C8102E; }
.fn-plan-hero.is-pro .fn-btn.is-ghost { background: transparent; color: #fff; }

.fn-plan-hero h2 {
    font-family: Newsreader, Georgia, serif;
    font-size: 2rem;
    margin: 4px 0 6px;
}

.fn-slip {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eceff3;
}

html.dark .fn-slip { border-color: rgba(255,255,255,.08); }
.fn-slip:last-child { border-bottom: 0; }
.fn-slip__amt { margin: 0; font-weight: 800; }

.fn-pager { overflow-x: auto; }
.fn-pager nav { display: flex; justify-content: center; }

.fn-sub { padding: 28px 0 56px; display: grid; gap: 22px; }

.fn-sub-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.fn-sub-hero h1 {
    margin: 6px 0 8px;
    font-family: Newsreader, Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    letter-spacing: -.04em;
    line-height: .95;
}

.fn-sub-hero p { max-width: 40rem; color: #6b7280; }

.fn-sub-fx label { display: grid; gap: 6px; }
.fn-sub-fx span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}
.fn-sub-fx select {
    border: 1px solid #eceff3;
    background: #fff;
    padding: 10px 12px;
    font: inherit;
    font-weight: 700;
}

.fn-sub-gates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fn-sub-gates p {
    margin: 0 8px 0 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7280;
}

.fn-sub-gates label {
    padding: 8px 12px;
    border: 1px solid #eceff3;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

html.dark .fn-sub-gates label { background: #16171c; border-color: rgba(255,255,255,.12); }

.fn-sub-gates label.is-on { background: #C8102E; border-color: #C8102E; color: #fff; }
.fn-sub-gates input { display: none; }

.fn-sub-grid {
    display: grid;
    gap: 14px;
}

@media (min-width: 900px) {
    .fn-sub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

.fn-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    background: #fff;
    border: 1px solid #eceff3;
}

html.dark .fn-plan { background: #16171c; border-color: rgba(255,255,255,.08); }

.fn-plan.is-featured {
    border-color: #C8102E;
    box-shadow: 0 18px 40px rgba(200, 16, 46, .12);
}

.fn-plan.is-current { outline: 2px solid #C8102E; }

.fn-plan__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 8px;
    background: #C8102E;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fn-plan h2 {
    margin: 0 40px 0 0;
    font-family: Newsreader, Georgia, serif;
    font-size: 2rem;
}

.fn-plan__price { margin: 0; font-size: 1.15rem; font-weight: 800; color: #C8102E; }
.fn-plan__save { margin: 0; font-size: 12px; font-weight: 800; color: #16a34a; }
.fn-plan__lede { margin: 0; color: #6b7280; font-size: 14px; }

.fn-plan ul {
    margin: 8px 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    flex: 1;
}

.fn-plan li {
    padding-left: 18px;
    position: relative;
    font-size: 14px;
}

.fn-plan li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: 8px;
    height: 8px;
    background: #C8102E;
}

.fn-plan .fn-btn { width: 100%; margin-top: auto; }

.fn-compare { overflow: auto; }
.fn-compare__table { overflow-x: auto; }
.fn-compare table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fn-compare th, .fn-compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eceff3; }
.fn-compare th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

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

@media (min-width: 900px) {
    .fn-sub-faq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fn-sub-faq h2 { font-size: 1.15rem; }
.fn-sub-faq p { color: #6b7280; margin: 8px 0 0; }

.fn-composer {
    display: grid;
    gap: 18px;
    padding: 20px 0 64px;
}

.fn-composer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    align-items: end;
    padding-bottom: 16px;
    border-bottom: 1px solid #eceff3;
}

html.dark .fn-composer__bar { border-color: rgba(255,255,255,.08); }

.fn-composer__bar h1 {
    margin: 4px 0 0;
    font-family: Newsreader, Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -.03em;
}

.fn-composer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fn-composer__count {
    font-size: 12px;
    font-weight: 800;
    color: #6b7280;
}

.fn-composer__grid {
    display: grid;
    gap: 18px;
}

@media (min-width: 1080px) {
    .fn-composer__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
        align-items: start;
    }
    .fn-composer__rail { position: sticky; top: 84px; display: grid; gap: 14px; }
}

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

.fn-cover {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 240px;
    background: #f6f3ee;
    border: 1px dashed #d6d3cd;
    cursor: pointer;
    overflow: hidden;
}

html.dark .fn-cover { background: #0c0d10; border-color: rgba(255,255,255,.14); }

.fn-cover input { display: none; }
.fn-cover img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.fn-cover__hint {
    text-align: center;
    padding: 24px;
}

.fn-cover__hint b { display: block; font-size: 1.1rem; }
.fn-cover__hint span { color: #6b7280; font-size: 13px; }

.fn-cover__change {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: #C8102E;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 10px;
}

.fn-composer__headline,
.fn-composer__dek,
.fn-composer__standfirst,
.fn-composer__body {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

.fn-composer__headline {
    font-family: Newsreader, Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: -.04em;
    line-height: 1.05;
    font-weight: 700;
}

.fn-composer__dek {
    font-size: 1.25rem;
    font-weight: 600;
}

.fn-composer__standfirst,
.fn-composer__body {
    font-size: 1.05rem;
    line-height: 1.65;
}

.fn-composer__body { min-height: 280px; resize: vertical; }

.fn-composer__headline:focus,
.fn-composer__dek:focus,
.fn-composer__standfirst:focus,
.fn-composer__body:focus { outline: none; }

.fn-composer__meta {
    display: grid;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #eceff3;
}

html.dark .fn-composer__meta { border-color: rgba(255,255,255,.08); }

.fn-composer__meta .fn-field input,
.fn-composer__meta .fn-field select {
    width: 100%;
    border: 1px solid #eceff3;
    padding: 12px 14px;
    background: #fff;
    color: inherit;
}

html.dark .fn-composer__meta .fn-field input,
html.dark .fn-composer__meta .fn-field select {
    background: #0c0d10;
    border-color: rgba(255,255,255,.12);
}

.fn-vis .fn-choice,
.fn-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fn-choice label {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #eceff3;
    background: #f6f3ee;
    cursor: pointer;
}

html.dark .fn-choice label { background: #0c0d10; border-color: rgba(255,255,255,.12); }

.fn-choice input { display: none; }
.fn-choice b { font-size: 13px; }
.fn-choice span { font-size: 12px; color: #6b7280; line-height: 1.35; }
.fn-choice label.is-on { outline: 2px solid #C8102E; outline-offset: 1px; background: #fff; }

html.dark .fn-choice label.is-on { background: #16171c; }

.fn-vis-readout {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.fn-vis-readout li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.fn-vis-readout b { color: #6b7280; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.fn-live__card { display: grid; gap: 8px; }
.fn-live__cover {
    height: 140px;
    background: #f6f3ee;
    display: grid;
    place-items: center;
    color: #8b919c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    overflow: hidden;
}

html.dark .fn-live__cover { background: #0c0d10; }

.fn-live__cover img { width: 100%; height: 140px; object-fit: cover; }
.fn-live__kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #C8102E; }
.fn-live__card h3 {
    margin: 0;
    font-family: Newsreader, Georgia, serif;
    font-size: 1.35rem;
    letter-spacing: -.03em;
}
.fn-live__card p { margin: 0; color: #6b7280; font-size: 14px; }

.fn-file-mini {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid #eceff3;
    color: inherit;
}

html.dark .fn-file-mini { border-color: rgba(255,255,255,.08); }
.fn-file-mini:last-child { border-bottom: 0; }
.fn-file-mini b { font-size: 14px; }
.fn-file-mini span { font-size: 12px; color: #6b7280; }

.fn-btn:disabled { opacity: .45; cursor: not-allowed; }

.fn-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    line-height: 1;
    color: inherit;
}

.fn-brand__fox {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.fn-brand__word {
    display: grid;
    gap: .12rem;
}

.fn-brand__word strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .9;
}

.fn-brand__word em {
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #C8102E;
}

.fn-brand--masthead .fn-brand__fox {
    width: 38px;
    height: 38px;
}

html.dark .fn-brand--masthead .fn-brand__word strong {
    color: #fff;
}

.fn-brand--footer {
    gap: .85rem;
}

.fn-brand--footer .fn-brand__fox {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.fn-brand--footer .fn-brand__word strong {
    font-size: 1.55rem;
    color: #fff;
}

.fn-brand--footer .fn-brand__word em {
    letter-spacing: .32em;
}

.fn-brand__upload {
    display: block;
    height: 36px;
    width: auto;
}

.fn-brand__upload--footer {
    height: 44px;
}