/* ==========================================================================
   writer-home.css — additive rules for index.html and writers.html.
   Loads after socialnetwork.css (unchanged); uses only its tokens.
   ========================================================================== */

/* ---------- Shared: hero sizing ---------- */
.home-hero .hero-title {
    font-size: clamp(2.8rem, 9.5vw, 7.6rem);
    line-height: .92;
}

.hero-line {
    display: block;
}

.hero.hero-compact {
    min-height: 0;
    padding: clamp(8rem, 16vh, 10rem) 0 clamp(7rem, 14vh, 9rem);
}

.writers-page .hero-title {
    font-size: clamp(2.8rem, 9vw, 6.8rem);
}

.hero-sub {
    display: block;
    margin-top: .25em;
    font-size: .42em;
    letter-spacing: .04em;
}

/* ==========================================================================
   Homepage: desire beats
   ========================================================================== */
.desire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desire-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: 100%;
    padding: 1.6rem 1.5rem 1.7rem;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

.desire-item::after {
    content: '→';
    position: absolute;
    right: 1.3rem;
    top: 1.4rem;
    font-family: var(--mono);
    color: var(--ink-3);
    transition: transform .3s, color .3s;
}

.desire-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.desire-item:hover::after {
    transform: translateX(4px);
    color: var(--c1);
}

.desire-eyebrow {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.desire-title {
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    line-height: 1.05;
    text-transform: uppercase;
    padding-right: 1.4rem;
}

.desire-text {
    color: var(--ink-2);
    font-size: .96rem;
}

.home-checkpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: clamp(2.4rem, 5vw, 3.6rem);
}

.home-checkpoint-link,
.home-bridge a {
    color: var(--ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: .2rem;
    transition: color .25s, border-color .25s;
}

.home-checkpoint-link {
    font-weight: 600;
}

.home-checkpoint-link:hover,
.home-bridge a:hover {
    color: var(--ink);
    border-color: var(--c1);
}

.home-bridge {
    margin: 2rem 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (max-width: 960px) {
    .desire-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ==========================================================================
   writers.html: Studio + Reader intro strip
   ========================================================================== */
.pair-intro {
    padding: clamp(2.4rem, 5vw, 3.6rem) 0 0;
}

.pair-intro-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.4rem;
}

.pair-intro p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-left: 1rem;
    border-left: 3px solid var(--c1);
    color: var(--ink-2);
}

.pair-intro p + p {
    border-left-color: var(--c6);
}

.pair-intro strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--ink);
}

@media (max-width: 700px) {
    .pair-intro-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   writers.html: feature bands (copy left, framed screenshot right)
   ========================================================================== */
.feature-band {
    padding: clamp(4.5rem, 10vw, 8rem) 0;
}

.feature-band--alt {
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}

.feature-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: center;
}

.feature-band-eyebrow {
    margin: 0 0 1rem;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--c1);
}

.feature-band-title {
    margin: 0 0 1.2rem;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    line-height: .98;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.feature-band-text {
    margin: 0;
    max-width: 46ch;
    color: var(--ink-2);
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.7;
}

.feature-band-media {
    margin: 0;
}

/* App-window bezel: dark slate in both themes so bright UI shots pop */
.feature-shot {
    overflow: hidden;
    border-radius: calc(var(--r) - 4px);
    background: #1b1924;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 0 .55rem .55rem;
    box-shadow:
        0 40px 80px -40px rgba(21, 18, 28, .55),
        0 18px 36px -24px rgba(21, 18, 28, .35);
}

body.dark .feature-shot {
    background: #232030;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}

.feature-shot-bar {
    display: flex;
    gap: .4rem;
    padding: .7rem .35rem;
}

.feature-shot-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.feature-shot-bar span:first-child { background: var(--c1); opacity: .75; }
.feature-shot-bar span:nth-child(2) { background: var(--c3); opacity: .75; }
.feature-shot-bar span:nth-child(3) { background: var(--c4); opacity: .75; }

.feature-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #fff;
}

/* Portrait screenshots: cap the height and centre them */
.feature-shot--tall {
    max-width: 440px;
    margin-inline: auto;
}

.feature-shot--tall img {
    max-height: 620px;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 900px) {
    .feature-band-inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   v4 — selective upgrades on the Talesmith baseline
   ========================================================================== */

/* Homepage hero: last line picks up the brand gradient */
.hero-title .hero-line-accent {
    background: linear-gradient(100deg, var(--c1), var(--c2) 45%, var(--c3) 80%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shimmer 10s ease-in-out infinite;
}

/* ---------- Desire bento ---------- */
.desire-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(190px, auto);
    gap: 1rem;
}

.desire-cell { --d-accent: var(--c1); --d-soft: rgba(255, 45, 120, .10); }
.desire-cell--pink   { --d-accent: var(--c1); --d-soft: rgba(255, 45, 120, .10); }
.desire-cell--orange { --d-accent: var(--c2); --d-soft: rgba(255, 122, 24, .10); }
.desire-cell--teal   { --d-accent: var(--c4); --d-soft: rgba(46, 230, 197, .12); }
.desire-cell--blue   { --d-accent: var(--c5); --d-soft: rgba(74, 140, 255, .10); }
.desire-cell--lime   { --d-accent: var(--logo-lime-ink); --d-soft: rgba(159, 255, 68, .14); }
.desire-cell--yellow { --d-accent: var(--logo-yellow-ink); --d-soft: rgba(238, 255, 0, .16); }
.desire-cell--violet { --d-accent: var(--logo-lime-ink); --d-soft: rgba(159, 255, 68, .14); } /* legacy alias: no violet */

.desire-cell--wide {
    grid-column: span 2;
}

.desire-bento .desire-item {
    overflow: hidden;
    justify-content: flex-end;
    padding: 1.5rem 1.5rem 1.6rem;
}

/* soft accent wash + top rule, like hub cards */
.desire-bento .desire-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 0% 0%, var(--d-soft), transparent 60%);
    pointer-events: none;
}

.desire-bento .desire-item > * {
    position: relative;
}

.desire-bento .desire-item:hover {
    border-color: var(--d-accent);
}

.desire-bento .desire-item:hover::after {
    color: var(--d-accent);
}

.desire-num {
    position: absolute !important;
    top: .6rem;
    left: 1.3rem;
    font-family: var(--display);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--d-accent);
    opacity: .16;
    transition: opacity .35s;
}

.desire-item:hover .desire-num {
    opacity: .32;
}

.desire-bento .desire-eyebrow {
    color: var(--d-accent);
}

.desire-cell--wide .desire-title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    max-width: 18ch;
}

@media (max-width: 960px) {
    .desire-bento { grid-template-columns: repeat(2, 1fr); }
    .desire-cell--wide { grid-column: span 2; }
}

@media (max-width: 620px) {
    .desire-bento { grid-template-columns: 1fr; }
    .desire-cell--wide { grid-column: auto; }
}

/* ---------- writers.html: numbered kickers ---------- */
.feature-band-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.feature-band-num {
    display: inline-grid;
    place-items: center;
    min-width: 2.3rem;
    height: 1.6rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--c1), var(--c2));
    color: #180d1a;
    font-weight: 700;
    letter-spacing: .08em;
}

/* ---------- Richer screenshot frame: gradient ring + glow ---------- */
.feature-band-media {
    position: relative;
}

.feature-shot--glow {
    position: relative;
    border: 1px solid transparent;
    background:
        linear-gradient(#1b1924, #1b1924) padding-box,
        linear-gradient(130deg, rgba(255, 45, 120, .55), rgba(255, 122, 24, .25) 35%, rgba(238, 255, 0, .45) 70%, rgba(1, 255, 205, .55)) border-box;
}

body.dark .feature-shot--glow {
    background:
        linear-gradient(#232030, #232030) padding-box,
        linear-gradient(130deg, rgba(255, 45, 120, .7), rgba(255, 122, 24, .3) 35%, rgba(238, 255, 0, .55) 70%, rgba(1, 255, 205, .7)) border-box;
}

.feature-band-media::before {
    content: '';
    position: absolute;
    inset: 8% 6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(159, 255, 68, .20), transparent);
    filter: blur(30px);
    pointer-events: none;
}

.feature-band--alt .feature-band-media::before {
    background: radial-gradient(closest-side, rgba(255, 45, 120, .18), transparent);
}

.feature-band-inner {
    position: relative;
    isolation: isolate;
}

.feature-shot--glow img {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.feature-band-media:hover .feature-shot--glow img {
    transform: scale(1.012);
}

/* ---------- Capability marquee ---------- */
.cap-marquee {
    overflow: hidden;
    margin-top: clamp(2.4rem, 5vw, 3.4rem);
    padding: 1rem 0;
    border-block: 1px solid var(--line);
    background: var(--paper-2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cap-marquee-track {
    display: flex;
    width: max-content;
    animation: cap-scroll 38s linear infinite;
}

.cap-marquee:hover .cap-marquee-track {
    animation-play-state: paused;
}

.cap-marquee-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cap-marquee-list li {
    display: inline-flex;
    align-items: center;
    padding: 0 1.4rem;
    font-family: var(--display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.cap-marquee-list li::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(120deg, var(--c1), var(--c3));
}

@keyframes cap-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .cap-marquee-track,
    .hero-title .hero-line-accent {
        animation: none;
    }
}

/* ==========================================================================
   v5 — logo palette: less purple, more Talesmith yellow -> lime -> green
   Logo stops (site/images/talesmith.svg): #EEFF00 -> #01FFCD.
   --logo-lime is interpolated 1/3 between them. *-ink = darker
   variants for legible accents on the light theme.
   ========================================================================== */
:root {
    --logo-yellow: #eeff00;
    --logo-lime:   #9fff44;
    --logo-green:  #01ffcd;

    --logo-yellow-ink: #8f9a00;
    --logo-lime-ink:   #4f9e12;
    --logo-green-ink:  #00a383;

    /* Retire violet on writer pages: shared rules using --c6
       (.grad text, .btn-download, scrollbar hover, pair-intro rule)
       resolve to logo lime. socialnetwork.css is untouched. */
    --c6: var(--logo-lime-ink);
}

body.dark {
    --logo-yellow-ink: var(--logo-yellow);
    --logo-lime-ink:   var(--logo-lime);
    --logo-green-ink:  var(--logo-green);
    --c6: var(--logo-lime);
}

html:has(body.dark) {
    --c6: #9fff44;
}

/* ==========================================================================
   v6 — Homepage hero: two-column layout + animated Studio pipeline window
   (ported from Jonathan's pipeline reference; markup in index.html,
   behaviour in site/js/hero-studio.js). The hero is dark in both themes,
   so the window keeps fixed dark product chrome via local --hs-* tokens.
   ========================================================================== */
.home-hero .hero-inner--studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    text-align: left;
}

.home-hero .hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.home-hero .hero-inner--studio .hero-title {
    font-size: clamp(2.6rem, 5.4vw, 5.2rem);
    line-height: .94;
}

.home-hero .hero-inner--studio .hero-line {
    white-space: nowrap;
}

.home-hero .hero-inner--studio .hero-copy {
    max-width: 52ch;
}

.home-hero .hero-inner--studio .hero-actions {
    justify-content: flex-start;
}

/* Blinking block caret after the accent line (visual only) */
.hero-caret-block {
    display: inline-block;
    width: .4em;
    height: .74em;
    margin-left: .1em;
    vertical-align: -.02em;
    border-radius: 2px;
    background: linear-gradient(100deg, var(--c1), var(--c2) 46%, #eeff00);
    box-shadow: 0 0 26px rgba(255, 45, 120, .75), 0 0 60px rgba(238, 255, 0, .3);
    -webkit-text-fill-color: initial;
    animation: hs-blink 1.05s steps(1) infinite;
}

@keyframes hs-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---------- window tokens ---------- */
.hero-studio {
    --hs-outline: #9fff44;   /* logo lime (was violet) */
    --hs-write:   #ff2d78;
    --hs-edit:    #01ffcd;   /* logo green */
    --hs-publish: #ff7a18;
    --hs-share:   #4a8cff;
    --hs-read:    #eeff00;   /* logo yellow */

    --hs-ink:   #f5f3fa;
    --hs-ink-2: #b0aac2;
    --hs-ink-3: #8b849e;
    --hs-line:   rgba(255, 255, 255, .10);
    --hs-line-2: rgba(255, 255, 255, .16);
    --hs-grad: linear-gradient(100deg, #ff2d78, #ff7a18 46%, #eeff00);
    --hs-ease: cubic-bezier(.22, .68, .16, 1);
    --hs-cycle: 4200ms;

    position: relative;
    min-width: 0;
    color: var(--hs-ink);
    font-family: var(--sans);
    text-align: left;
}

.hs-glow {
    position: absolute;
    left: 12%;
    top: 14%;
    width: 76%;
    height: 72%;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
    background: var(--hs-glow, var(--hs-write));
    opacity: .28;
    transition: background-color .9s var(--hs-ease);
}

.hs-window {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #151222, #0c0a14);
    border: 1px solid var(--hs-line-2);
    box-shadow:
        0 0 0 1px rgba(238, 255, 0, .06),
        0 50px 110px -45px rgba(0, 0, 0, .98),
        0 0 110px -50px rgba(159, 255, 68, .45);
}

/* bar */
.hs-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--hs-line);
}

.hs-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e2a3a; }
.hs-dot--r { background: #ff5f57; }
.hs-dot--a { background: #febc2e; }
.hs-dot--g { background: #28c840; }

.hs-title {
    margin-left: 12px;
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--hs-ink-3);
}

.hs-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hs-edit);
    background: rgba(1, 255, 205, .08);
    border: 1px solid rgba(1, 255, 205, .22);
}

.hs-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hs-edit);
    box-shadow: 0 0 8px var(--hs-edit);
    animation: hs-live 2s var(--hs-ease) infinite;
}

@keyframes hs-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(.7); }
}

/* tabs */
.hs-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hs-line);
    background: rgba(255, 255, 255, .012);
    overflow-x: auto;
    scrollbar-width: none;
}

.hs-tabs::-webkit-scrollbar { display: none; }

.hs-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 8px 11px;
    border: 0;
    border-radius: 9px;
    background: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hs-ink-3);
    white-space: nowrap;
    transition: color .25s var(--hs-ease), background .25s var(--hs-ease);
}

.hs-tab svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .75; transition: opacity .25s; }
.hs-tab:hover { color: var(--hs-ink-2); background: rgba(255, 255, 255, .045); }
.hs-tab:focus-visible { outline: 2px solid var(--sc); outline-offset: 1px; }
.hs-tab.is-active { color: var(--sc); background: rgba(255, 255, 255, .055); }
.hs-tab.is-active svg { opacity: 1; }

.hs-fill {
    position: absolute;
    left: 10%;
    bottom: 4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--sc);
    box-shadow: 0 0 10px var(--sc);
}

.hs-tab.is-active .hs-fill { animation: hs-tab-fill var(--hs-cycle) linear forwards; }
.hs-window.is-paused .hs-fill { animation-play-state: paused; }

@keyframes hs-tab-fill {
    from { width: 0; }
    to { width: 80%; }
}

/* viewport */
.hs-viewport { display: grid; }

.hs-view {
    grid-area: 1 / 1;
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .45s var(--hs-ease), transform .45s var(--hs-ease), visibility .45s;
}

.hs-view.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hs-view p { margin: 0; }

/* foot */
.hs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--hs-line);
    background: rgba(255, 255, 255, .02);
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hs-ink-3);
}

.hs-step { color: var(--hs-ink-2); }
.hs-hint { transition: color .2s; }
.hs-window.is-paused .hs-hint { color: var(--hs-read); }

/* shared mono head row */
.hero-studio .ov-head,
.hero-studio .wv-head,
.hero-studio .ev-head,
.hero-studio .rv-top,
.hero-studio .rv-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hs-ink-3);
}

/* ---------- 0 · Outline ---------- */
.hero-studio .ov-head { color: var(--hs-outline); padding-bottom: 6px; }
.hero-studio .ov-head span:last-child { color: var(--hs-ink-3); }
.hero-studio .ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.hero-studio .ov-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .8rem;
    color: var(--hs-ink-2);
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, transform .2s;
}

.hero-studio .ov-item:hover { background: rgba(255, 255, 255, .045); transform: translateX(2px); }

.hero-studio .ov-item.is-active {
    background: rgba(159, 255, 68, .10);
    border-color: rgba(159, 255, 68, .32);
    color: var(--hs-ink);
    box-shadow: 0 0 24px -12px rgba(159, 255, 68, .9);
}

.hero-studio .ov-grip { color: #4a4358; font-size: .8rem; letter-spacing: -2px; line-height: 1; }

.hero-studio .ov-tag {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--hs-line);
    font-family: var(--mono);
    font-size: .55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hs-ink-3);
}

.hero-studio .ov-item.is-active .ov-tag { color: var(--hs-outline); border-color: rgba(159, 255, 68, .4); }

.hero-studio .ov-add {
    padding: 9px 11px;
    border: 1px dashed var(--hs-line-2);
    border-radius: 9px;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--hs-ink-3);
}

/* ---------- 1 · Write ---------- */
.hero-studio .wv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--hs-write);
    background: rgba(255, 45, 120, .12);
    border: 1px solid rgba(255, 45, 120, .3);
    box-shadow: 0 0 18px -6px rgba(255, 45, 120, .9);
}

.hero-studio .wv-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hs-write);
    box-shadow: 0 0 8px var(--hs-write);
}

.hero-studio .wv-title {
    font-family: var(--display);
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hs-ink);
}

.hero-studio .wv-text {
    position: relative;
    min-height: 112px;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.9;
    color: #cfc7dd;
    white-space: pre-wrap;
}

.hero-studio .wv-text::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 45, 120, 0), rgba(255, 45, 120, .55) 20%, rgba(255, 45, 120, .55) 80%, rgba(255, 45, 120, 0));
}

.hs-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -.15em;
    border-radius: 1px;
    background: var(--hs-read);
    box-shadow: 0 0 10px var(--hs-read);
    animation: hs-blink 1.05s steps(1) infinite;
}

.hero-studio .wv-foot,
.hero-studio .sv-peers {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 12px;
    border-top: 1px solid var(--hs-line);
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--hs-ink-3);
}

.hero-studio .wv-foot b { color: var(--hs-ink-2); font-weight: 500; }
.hero-studio .wv-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hero-studio .wv-bar i { display: block; height: 100%; width: 86%; border-radius: 99px; background: var(--hs-grad); box-shadow: 0 0 12px rgba(255, 45, 120, .7); }
.hero-studio .wv-pct { color: var(--hs-publish); }

/* ---------- 2 · Edit ---------- */
.hero-studio .ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--hs-edit);
    background: rgba(1, 255, 205, .10);
    border: 1px solid rgba(1, 255, 205, .3);
    box-shadow: 0 0 18px -6px rgba(1, 255, 205, .9);
}

.hero-studio .ev-line {
    padding: 14px 15px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--hs-line);
    font-size: .88rem;
    line-height: 1.8;
    color: var(--hs-ink-2);
}

.hero-studio .ev-line del { color: #6b6279; text-decoration-thickness: 1px; }

.hero-studio .ev-line ins {
    text-decoration: none;
    color: var(--hs-read);
    background: rgba(238, 255, 0, .12);
    border-radius: 3px;
    padding: 0 3px;
    box-shadow: 0 0 0 1px rgba(238, 255, 0, .15);
}

.hero-studio .ev-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.hero-studio .ev-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(1, 255, 205, .35);
    background: rgba(1, 255, 205, .08);
    color: var(--hs-edit);
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-studio .ev-chip--ghost { border-color: var(--hs-line-2); background: transparent; color: var(--hs-ink-3); }
.hero-studio .ev-revs { display: grid; margin-top: 2px; }

.hero-studio .ev-rev {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-top: 1px solid var(--hs-line);
    font-size: .76rem;
    color: var(--hs-ink-3);
}

.hero-studio .ev-rev:first-child { border-top: 0; }
.hero-studio .ev-rev::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: #3a3448; }
.hero-studio .ev-rev.is-now { color: var(--hs-ink-2); }
.hero-studio .ev-rev.is-now::before { background: var(--hs-edit); box-shadow: 0 0 10px var(--hs-edit); }
.hero-studio .ev-rev span { margin-left: auto; font-family: var(--mono); font-size: .62rem; color: var(--hs-ink-3); }

/* ---------- 3 · Publish ---------- */
.hero-studio .pv-post,
.hero-studio .sv-link {
    padding: 14px 15px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--hs-line);
}

.hero-studio .pv-title {
    margin-bottom: 11px;
    font-family: var(--display);
    font-size: .98rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hs-ink);
}

.hero-studio .pv-lines { display: grid; gap: 7px; }
.hero-studio .pv-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .09); }
.hero-studio .pv-lines i:nth-child(2) { width: 88%; }
.hero-studio .pv-lines i:nth-child(3) { width: 56%; }

.hero-studio .pv-target {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 122, 24, .45);
    background: linear-gradient(120deg, rgba(255, 122, 24, .10), rgba(238, 255, 0, .05));
}

.hero-studio .pv-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #0b0a11;
    background: var(--hs-grad);
    box-shadow: 0 0 22px -5px rgba(255, 122, 24, .95);
}

.hero-studio .pv-body { flex: 1; min-width: 0; }
.hero-studio .pv-body strong { display: block; font-size: .79rem; font-weight: 600; color: var(--hs-ink); }
.hero-studio .pv-body span { font-family: var(--mono); font-size: .63rem; color: var(--hs-ink-3); }

.hero-studio .pv-btn,
.hero-studio .sv-copy {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0b0a11;
    font-size: .71rem;
    font-weight: 600;
}

.hero-studio .pv-formats,
.hero-studio .sv-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.hero-studio .pv-formats span,
.hero-studio .sv-chips span {
    padding: 5px 10px;
    border-radius: 7px;
    color: var(--hs-ink-2);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--hs-line);
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-studio .pv-formats span:first-child { color: var(--hs-publish); border-color: rgba(255, 122, 24, .35); background: rgba(255, 122, 24, .1); }

/* ---------- 4 · Share ---------- */
.hero-studio .sv-head { display: flex; align-items: center; gap: 12px; }

.hero-studio .sv-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: .74rem;
    font-weight: 600;
    color: var(--hs-share);
    background: rgba(74, 140, 255, .14);
    border: 1px solid rgba(74, 140, 255, .34);
    box-shadow: 0 0 24px -8px rgba(74, 140, 255, .9);
}

.hero-studio .sv-head strong { display: block; font-size: .84rem; font-weight: 600; }
.hero-studio .sv-head span { font-family: var(--mono); font-size: .63rem; color: var(--hs-ink-3); }

.hero-studio .sv-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 15px;
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--hs-share);
}

.hero-studio .sv-link > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-studio .sv-chips span { border-radius: 999px; }
.hero-studio .sv-avatars { display: flex; }

.hero-studio .sv-avatars i {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid #100d18;
}

.hero-studio .sv-avatars i:first-child { margin-left: 0; }
.hero-studio .sv-avatars i:nth-child(1) { background: linear-gradient(135deg, #ff2d78, #ff7a18); }
.hero-studio .sv-avatars i:nth-child(2) { background: linear-gradient(135deg, #9fff44, #01ffcd); }
.hero-studio .sv-avatars i:nth-child(3) { background: linear-gradient(135deg, #01ffcd, #4a8cff); }
.hero-studio .sv-avatars i:nth-child(4) { background: linear-gradient(135deg, #eeff00, #ff7a18); }

/* ---------- 5 · Read ---------- */
.hero-studio .rv-top { justify-content: flex-start; gap: 11px; letter-spacing: .1em; }
.hero-studio .rv-prog { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }

.hero-studio .rv-prog i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--hs-read), var(--hs-outline));
    box-shadow: 0 0 12px rgba(238, 255, 0, .6);
}

.hero-studio .rv-text { font-size: .88rem; line-height: 1.9; color: #cfc7dd; }
.hero-studio .rv-text--dim { color: #7d7488; }

.hero-studio .rv-text mark {
    padding: 0 1px;
    border-radius: 2px;
    color: inherit;
    background: linear-gradient(transparent 62%, rgba(238, 255, 0, .30) 62%);
}

.hero-studio .rv-foot { padding-top: 12px; border-top: 1px solid var(--hs-line); letter-spacing: .1em; }
.hero-studio .rv-foot span:last-child { color: var(--hs-edit); }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
    .hs-tab { font-size: .56rem; gap: 5px; padding: 8px 5px 10px; }
    .hs-tab svg { width: 13px; height: 13px; }
}

@media (max-width: 980px) {
    .home-hero .hero-inner--studio {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .home-hero .hero-text { align-items: center; }
    .home-hero .hero-inner--studio .hero-actions { justify-content: center; }
    .home-hero .hero-inner--studio .hero-title { font-size: clamp(2.6rem, 10vw, 5rem); }

    .hero-studio {
        width: 100%;
        max-width: 540px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .home-hero .hero-inner--studio .hero-line { white-space: normal; }
    .hs-lbl { display: none; }
    .hs-tab { gap: 0; padding: 10px 4px 12px; }
    .hs-tab svg { width: 15px; height: 15px; }
    .hs-view { padding: 20px 18px 22px; }
    .hs-foot { font-size: .56rem; padding: 10px 14px; }
    .hs-hint,
    .hero-studio .pv-btn,
    .hero-studio .sv-copy,
    .hero-studio .ev-chip--ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-caret-block,
    .hs-caret,
    .hs-status i { animation: none; }
    .hs-fill { display: none; }
    .hs-glow,
    .hs-view,
    .hs-tab,
    .hero-studio .ov-item { transition: none; }
}

/* ==========================================================================
   v7 — Hero H1 manuscript edits (behaviour in site/js/hero-edit-title.js).
   Phrase is struck with a pen line, lifted, and written anew.
   ========================================================================== */
.het-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.het-word {
    position: relative;
    display: inline-block;
    min-width: .3em;
    min-height: .9em;
    transition: opacity .24s ease, transform .24s ease, filter .24s ease;
}

/* The pen stroke: slightly tilted, logo yellow -> green */
.het-word::after {
    content: '';
    position: absolute;
    left: -.06em;
    right: -.06em;
    top: 50%;
    height: .085em;
    border-radius: .05em;
    background: linear-gradient(90deg, var(--logo-yellow), var(--logo-lime) 55%, var(--logo-green));
    box-shadow: 0 0 18px rgba(238, 255, 0, .35);
    transform: rotate(-2.2deg) scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
}

.het-word.is-struck { opacity: .55; }
.het-word.is-struck::after {
    opacity: 1;
    transform: rotate(-2.2deg) scaleX(1);
    transition: transform .46s cubic-bezier(.7, 0, .25, 1);
}

.het-word.is-lifting {
    opacity: 0;
    transform: translateY(-.12em);
    filter: blur(2px);
}

/* Thin writing caret while a new phrase goes in */
.het-word.is-writing::before {
    content: '';
    position: absolute;
    right: -.08em;
    top: .08em;
    bottom: .08em;
    width: .05em;
    background: var(--logo-yellow);
    -webkit-text-fill-color: initial;
    animation: hs-blink .7s steps(1) infinite;
}

/* Accent line keeps its gradient text; the word span inherits clipping */
.hero-title .hero-line-accent .het-word.is-struck { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .het-word, .het-word::after { transition: none; }
}

/* Accent line: paint the gradient on the word itself so opacity/transform
   on the edited word can't drop it out of the parent's text clip. */
.hero-title .hero-line-accent .het-word {
    background: linear-gradient(100deg, var(--c1), var(--c2) 45%, var(--c3) 80%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shimmer 10s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero-title .hero-line-accent .het-word { animation: none; }
}

/* When the edit loop is running, paint gradients on the words, not on the
   H1 / accent span (avoids stale background-clip:text masks in Chrome). */
.hero-title.het-on,
.hero-title.het-on .hero-line-accent {
    background: none;
    animation: none;
}
.hero-title.het-on .het-line:not(.hero-line-accent) .het-word {
    background: linear-gradient(100deg, #ffffff 0%, #ffd6ec 22%, #ffe6b8 42%, #c8f6ff 62%, #e3d6ff 80%, #ffffff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shimmer 14s ease-in-out infinite;
}
/* t115: pair-intro line that links to the other product page */
.pair-intro p > a {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    text-decoration: none;
    transition: color .2s ease;
}
.pair-intro p > a:hover span,
.pair-intro p > a:focus-visible span { color: var(--ink); }

/* ==========================================================================
   t117 — Homepage pipeline diagram (Jonathan's SVG) + seamless surfaces
   The hero is dark in both themes; the pipeline section continues that
   same surface (#07060d) so hero -> pipeline reads as one band, and the
   wave moves to the bottom of the pipeline section. In dark mode the
   homepage paper is set to the hero colour so desires/footer sit flush
   (previously #0b0a11 vs hero #07060d = a lighter "bar").
   ========================================================================== */
body.dark.home-slim {
    --paper: #07060d;
}

/* hero now flows straight into the pipeline section: no wave there */
.home-slim .home-hero .hero-wave:not(.home-pipeline-wave) {
    display: none;
}

.home-pipeline {
    --hp-ease: cubic-bezier(.22, .68, .16, 1);
    position: relative;
    isolation: isolate;
    background: #07060d;
    color: #f5f3fa;
    padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(6rem, 11vw, 10rem);
    margin-top: -1px; /* no hairline seam against the hero */
}

.home-pipeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.home-pipeline-inner {
    min-width: 900px;
}

.home-pipeline-svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: var(--sans);
    overflow: visible;
}

@keyframes hp-dash-move { to { stroke-dashoffset: -18; } }
@keyframes hp-rail-flow { to { stroke-dashoffset: -34; } }
@keyframes hp-soft-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

.home-pipeline .flow-dash { animation: hp-dash-move 3.6s linear infinite; }
.home-pipeline .rail-flow { animation: hp-rail-flow 1.8s linear infinite; }
.home-pipeline .opt-line  { animation: hp-soft-pulse 3s var(--hp-ease) infinite; }

.home-pipeline .pnode { transition: transform .45s var(--hp-ease); }
.home-pipeline .pnode:hover { transform: translateY(-3px); }

.home-pipeline .home-pipeline-wave {
    z-index: 1;
}

/* section heading */
.home-pipeline .home-pipeline-head {
    margin-inline: auto;
    text-align: center;
    padding-top: clamp(2rem, 5vw, 4rem);
    margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.home-pipeline .home-pipeline-head .section-eyebrow { color: #9fff44; }
.home-pipeline .home-pipeline-head .section-title { color: #f5f3fa; margin-bottom: 0; }

/* compact 4 + 1 diagram (small screens) */
.home-pipeline .hp-mini { display: none; }

.home-pipeline .hp-mini-block { position: relative; }
.home-pipeline .hp-mini-tag {
    margin: 0 0 .55rem;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 243, 250, .5);
    text-align: center;
}
.home-pipeline .hp-mini-block--ts .hp-mini-tag { color: #01FFCD; }

.home-pipeline .hp-mini-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hp-gap, .7rem);
}
.home-pipeline .hp-mini-app {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem .15rem;
    border: 1px dashed rgba(245, 243, 250, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    font-size: clamp(.66rem, 2.9vw, .82rem);
    font-weight: 600;
    text-align: center;
    color: rgba(245, 243, 250, .78);
    overflow-wrap: anywhere;
}
/* broken link between apps */
.home-pipeline .hp-mini-app + .hp-mini-app::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--hp-gap, .7rem));
    width: var(--hp-gap, .7rem);
    border-top: 1px dashed rgba(245, 243, 250, .3);
}

.home-pipeline .hp-mini-arrow {
    width: 1px;
    height: 1.6rem;
    margin: .8rem auto;
    background: linear-gradient(#9fff44, #01FFCD);
    opacity: .7;
}

.home-pipeline .hp-mini-ts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid rgba(1, 255, 205, .45);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(159, 255, 68, .1), transparent 70%),
        rgba(1, 255, 205, .04);
}
.home-pipeline .hp-mini-ts-name {
    font-family: var(--display);
    font-size: clamp(1.5rem, 7vw, 2rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #f5f3fa;
    line-height: 1;
}
.home-pipeline .hp-mini-rail {
    display: block;
    width: 82%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #9fff44, #01FFCD 50%, #EEFF00);
}

@media (max-width: 820px) {
    .home-pipeline .hp-mini { display: block; max-width: 520px; margin: 0 auto; }
    .home-pipeline .home-pipeline-scroll { display: none; }
}

@media (max-width: 380px) {
    .home-pipeline .hp-mini-row { --hp-gap: .45rem; }
    .home-pipeline .hp-mini-app { font-size: .62rem; letter-spacing: -.01em; }
}

@media (prefers-reduced-motion: reduce) {
    .home-pipeline .flow-dash,
    .home-pipeline .rail-flow,
    .home-pipeline .opt-line { animation: none; }
    .home-pipeline .pnode,
    .home-pipeline .pnode:hover { transform: none; transition: none; }
}

/* ==========================================================================
   v7 — Homepage Features + Pricing (dark in both themes, like the pipeline)
   Order: hero → .home-features → .home-pipeline → .home-pricing → desires.
   The closing wave now sits at the end of .home-pricing.
   ========================================================================== */
.home-features,
.home-pricing {
    position: relative;
    isolation: isolate;
    background: #07060d;
    color: #f5f3fa;
    margin-top: -1px; /* no seam between the dark sections */
}
.home-features {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1rem, 3vw, 2rem);
}
.home-pipeline {
    padding-bottom: clamp(2.5rem, 5vw, 4rem); /* wave moved to pricing */
}
.home-pricing {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(6rem, 11vw, 10rem);
}
.home-pricing .home-pricing-wave { z-index: 1; }

.home-features .home-dark-head,
.home-pricing .home-dark-head {
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem);
}
.home-features .section-title,
.home-pricing .section-title { color: #f5f3fa; margin-bottom: 0; }

/* ---- Features grid ---- */
.home-features .hf-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
}
.home-features .hf-card {
    --hf-accent: #9fff44;
    grid-column: span 3;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 8.5rem;
    padding: 1.3rem 1.3rem 1.4rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .09);
    overflow: hidden;
    transition: transform .6s cubic-bezier(.22, .68, .16, 1), opacity .7s ease, border-color .3s, background .3s;
}
.home-features .hf-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--hf-accent);
    opacity: .85;
}
.home-features .hf-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--hf-accent) 45%, transparent);
    background: rgba(255, 255, 255, .05);
}
.home-features .hf-card--lime   { --hf-accent: #9fff44; }
.home-features .hf-card--teal   { --hf-accent: #01FFCD; }
.home-features .hf-card--yellow { --hf-accent: #EEFF00; }
.home-features .hf-card--tools,
.home-features .hf-card:last-child { grid-column: span 4; }

.home-features .hf-num {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .2em;
    color: var(--hf-accent);
}
.home-features .hf-name {
    margin: auto 0 0;
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.2;
    color: #f5f3fa;
}
.home-features .hf-card--tools .hf-name { margin-top: 0; }
.home-features .hf-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.home-features .hf-tags li {
    font-family: var(--mono);
    font-size: .72rem;
    padding: .32em .7em;
    border-radius: 999px;
    color: #f5f3fa;
    background: color-mix(in srgb, var(--hf-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--hf-accent) 38%, transparent);
}

/* ---- Pricing ---- */
.home-pricing .hpr-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1040px;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}
.home-pricing .hpr-card {
    --hpr-accent: #9fff44;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.7rem 1.5rem 1.6rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .1);
    border-top: 3px solid var(--hpr-accent);
}
.home-pricing .hpr-card--donate    { --hpr-accent: #9fff44; }
.home-pricing .hpr-card--supported { --hpr-accent: #01FFCD; }
.home-pricing .hpr-card--hosted    { --hpr-accent: #EEFF00; }

.home-pricing .hpr-name {
    margin: 0;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hpr-accent);
}
.home-pricing .hpr-price { margin: 0; line-height: 1; }
.home-pricing .hpr-amount {
    font-family: var(--display);
    font-size: clamp(2.4rem, 4.5vw, 3.2rem);
    color: #f5f3fa;
}
.home-pricing .hpr-per {
    font-family: var(--mono);
    font-size: .8rem;
    color: rgba(245, 243, 250, .6);
}
.home-pricing .hpr-text {
    margin: 0;
    color: rgba(245, 243, 250, .78);
    font-size: .98rem;
    line-height: 1.5;
}
.home-pricing .hpr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
    font-size: .92rem;
    color: rgba(245, 243, 250, .78);
}
.home-pricing .hpr-list li::before {
    content: '✓';
    margin-right: .5em;
    color: var(--hpr-accent);
}
.home-pricing .hpr-cta {
    margin-top: auto;
    align-self: flex-start;
    border-color: color-mix(in srgb, var(--hpr-accent) 55%, transparent);
}
.home-pricing .hpr-cta:hover {
    background: color-mix(in srgb, var(--hpr-accent) 16%, transparent);
}

@media (max-width: 980px) {
    .home-features .hf-card { grid-column: span 6; }
    .home-features .hf-card--tools { grid-column: span 6; }
    .home-features .hf-card:last-child { grid-column: span 12; }
}
@media (max-width: 760px) {
    .home-pricing .hpr-grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 520px) {
    .home-features .hf-grid { gap: .7rem; }
    .home-features .hf-card { min-height: 0; padding: 1rem 1rem 1.1rem; }
    .home-features .hf-card--tools,
    .home-features .hf-card:last-child { grid-column: span 12; }
    .home-features .hf-name { margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-features .hf-card,
    .home-features .hf-card:hover { transform: none; transition: none; }
}

/* ==========================================================================
   t121 — Features card alignment, differentiated full-bleed surfaces,
   full-width coloured pricing buttons (CSS only; markup untouched)
   ========================================================================== */

/* Feature cards: number + label pinned top, tag badges pinned bottom */
.home-features .hf-card {
    justify-content: flex-start;
    min-height: 10.5rem;
}
.home-features .hf-name,
.home-features .hf-card--tools .hf-name {
    margin: 0;
}
.home-features .hf-tags {
    margin-top: auto;
    padding-top: .9rem;
}

/* Features: its own full-width panel (lime/teal glow on a lifted surface),
   framed by soft edges so it reads as an intentional band, not a bar */
.home-features {
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(159, 255, 68, .085), transparent 70%),
        radial-gradient(820px 460px at 92% 100%, rgba(1, 255, 205, .075), transparent 72%),
        linear-gradient(180deg, #07060d 0, #0e1413 90px, #0e1413 calc(100% - 90px), #07060d 100%);
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
.home-features::before,
.home-features::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(159, 255, 68, .28) 25%, rgba(1, 255, 205, .28) 75%, transparent);
}
.home-features::before { top: 0; }
.home-features::after  { bottom: 0; }
.home-features .hf-card {
    background: rgba(7, 6, 13, .55);
    border-color: rgba(255, 255, 255, .08);
}
.home-features .hf-card:hover { background: rgba(7, 6, 13, .7); }

/* Pricing: a second distinct full-width surface, warmer (yellow/lime glow) */
.home-pricing {
    background:
        radial-gradient(760px 420px at 50% 0%, rgba(238, 255, 0, .07), transparent 70%),
        radial-gradient(700px 420px at 8% 90%, rgba(159, 255, 68, .06), transparent 72%),
        radial-gradient(700px 420px at 94% 80%, rgba(1, 255, 205, .055), transparent 72%),
        #12130c;
    padding-top: clamp(3.5rem, 8vw, 6rem);
}
.home-pricing::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(238, 255, 0, .28) 30%, rgba(159, 255, 68, .28) 70%, transparent);
}
.home-pricing .hpr-card {
    background: rgba(7, 6, 13, .55);
}

/* Pricing buttons: full width, filled with the card accent */
.home-pricing .hpr-card > .btn {
    display: flex;
    width: 100%;
    align-self: stretch;
    background: var(--hpr-accent);
    border-color: var(--hpr-accent);
    color: #0b0a11;
    font-weight: 700;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--hpr-accent) 75%, transparent);
}
.home-pricing .hpr-card > .btn:hover,
.home-pricing .hpr-card > .btn:focus-visible {
    background: color-mix(in srgb, var(--hpr-accent) 85%, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -16px color-mix(in srgb, var(--hpr-accent) 90%, transparent);
}
/* first button sits at the card foot so buttons line up across cards */
.home-pricing .hpr-card > a.btn:first-of-type { margin-top: auto; }
/* a second button (Donate card: Download) is the outlined accent partner */
.home-pricing .hpr-card > .btn + .btn {
    background: color-mix(in srgb, var(--hpr-accent) 10%, transparent);
    color: var(--hpr-accent);
    box-shadow: none;
}
.home-pricing .hpr-card > .btn + .btn:hover,
.home-pricing .hpr-card > .btn + .btn:focus-visible {
    background: color-mix(in srgb, var(--hpr-accent) 20%, transparent);
    color: var(--hpr-accent);
}

@media (max-width: 520px) {
    .home-features .hf-card { min-height: 0; }
    .home-features .hf-tags { padding-top: .6rem; }
}

/* ==========================================================================
   t122 — Light mode for Features / Under the hood / Pricing
   Dark mode is unchanged (all rules scoped to body:not(.dark)).
   The hero stays dark in both themes; in light mode its wave returns so
   the page opens onto light bands. The desktop pipeline SVG is drawn for
   a dark ground, so it sits on a dark card nestled in the light section.
   ========================================================================== */
body:not(.dark) .home-features .hf-card--lime,
body:not(.dark) .home-pricing .hpr-card--donate    { --acc-ink: #3f7f0e; }
body:not(.dark) .home-features .hf-card--teal,
body:not(.dark) .home-pricing .hpr-card--supported { --acc-ink: #00866c; }
body:not(.dark) .home-features .hf-card--yellow,
body:not(.dark) .home-pricing .hpr-card--hosted    { --acc-ink: #6b7300; }

/* hero → light page: bring the hero wave back (fills with --paper) */
body:not(.dark).home-slim .home-hero .hero-wave:not(.home-pipeline-wave) {
    display: block;
}

/* shared light section text */
body:not(.dark) .home-features,
body:not(.dark) .home-pipeline,
body:not(.dark) .home-pricing {
    color: var(--ink);
}
body:not(.dark) .home-features .section-title,
body:not(.dark) .home-pricing .section-title,
body:not(.dark) .home-pipeline .home-pipeline-head .section-title {
    color: var(--ink);
}
body:not(.dark) .home-features .home-dark-head p,
body:not(.dark) .home-pricing .home-dark-head p {
    color: var(--ink-2);
}

/* ---- Features (light) ---- */
body:not(.dark) .home-features {
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(159, 255, 68, .16), transparent 70%),
        radial-gradient(820px 460px at 92% 100%, rgba(1, 255, 205, .13), transparent 72%),
        var(--paper);
}
body:not(.dark) .home-features::before,
body:not(.dark) .home-features::after {
    background: linear-gradient(90deg, transparent, rgba(79, 158, 18, .3) 25%, rgba(0, 163, 131, .3) 75%, transparent);
}
body:not(.dark) .home-features .hf-card {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 18px 40px -30px rgba(21, 18, 28, .35);
}
body:not(.dark) .home-features .hf-card:hover {
    background: var(--card);
    border-color: color-mix(in srgb, var(--acc-ink) 45%, transparent);
}
body:not(.dark) .home-features .hf-num { color: var(--acc-ink); }
body:not(.dark) .home-features .hf-name { color: var(--ink); }
body:not(.dark) .home-features .hf-tags li {
    color: var(--ink);
    background: color-mix(in srgb, var(--hf-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--acc-ink) 35%, transparent);
}

/* ---- Under the hood (light) ---- */
body:not(.dark) .home-pipeline {
    background:
        radial-gradient(760px 380px at 50% 0%, rgba(1, 255, 205, .10), transparent 72%),
        var(--paper-2);
}
body:not(.dark) .home-pipeline .home-pipeline-head .section-eyebrow { color: var(--logo-lime-ink); }

/* desktop SVG: keep its dark artwork on a dark card */
body:not(.dark) .home-pipeline .home-pipeline-scroll {
    padding: clamp(1rem, 2.5vw, 2rem) clamp(.8rem, 2vw, 1.6rem);
    border-radius: 24px;
    background:
        radial-gradient(900px 520px at 50% 8%, rgba(159, 255, 68, .07), transparent 70%),
        #0b0a11;
    border: 1px solid rgba(21, 18, 28, .12);
    box-shadow: 0 30px 70px -36px rgba(21, 18, 28, .55);
}

/* compact 4 + 1 diagram (light) */
body:not(.dark) .home-pipeline .hp-mini-tag { color: var(--ink-3); }
body:not(.dark) .home-pipeline .hp-mini-block--ts .hp-mini-tag { color: var(--logo-green-ink); }
body:not(.dark) .home-pipeline .hp-mini-app {
    color: var(--ink-2);
    background: var(--card);
    border-color: rgba(21, 18, 28, .25);
}
body:not(.dark) .home-pipeline .hp-mini-app + .hp-mini-app::before {
    border-top-color: rgba(21, 18, 28, .3);
}
body:not(.dark) .home-pipeline .hp-mini-arrow {
    background: linear-gradient(var(--logo-lime-ink), var(--logo-green-ink));
}
body:not(.dark) .home-pipeline .hp-mini-ts {
    border-color: rgba(0, 163, 131, .5);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(159, 255, 68, .22), transparent 70%),
        var(--card);
}
body:not(.dark) .home-pipeline .hp-mini-ts-name { color: var(--ink); }

/* ---- Pricing (light) ---- */
body:not(.dark) .home-pricing {
    background:
        radial-gradient(760px 420px at 50% 0%, rgba(238, 255, 0, .20), transparent 70%),
        radial-gradient(700px 420px at 8% 90%, rgba(159, 255, 68, .12), transparent 72%),
        radial-gradient(700px 420px at 94% 80%, rgba(1, 255, 205, .10), transparent 72%),
        #f7f6ea;
}
body:not(.dark) .home-pricing::before {
    background: linear-gradient(90deg, transparent, rgba(143, 154, 0, .35) 30%, rgba(79, 158, 18, .3) 70%, transparent);
}
body:not(.dark) .home-pricing .hpr-card {
    background: var(--card);
    border-color: var(--line);
    border-top-color: var(--hpr-accent);
    box-shadow: 0 22px 46px -32px rgba(21, 18, 28, .4);
}
body:not(.dark) .home-pricing .hpr-name { color: var(--acc-ink); }
body:not(.dark) .home-pricing .hpr-amount { color: var(--ink); }
body:not(.dark) .home-pricing .hpr-per { color: var(--ink-3); }
body:not(.dark) .home-pricing .hpr-text,
body:not(.dark) .home-pricing .hpr-list { color: var(--ink-2); }
body:not(.dark) .home-pricing .hpr-list li::before { color: var(--acc-ink); }

/* filled buttons keep the accent; a darker edge so pale fills read on white */
body:not(.dark) .home-pricing .hpr-card > .btn {
    color: #15121c;
    border-color: color-mix(in srgb, var(--acc-ink) 45%, var(--hpr-accent));
}
body:not(.dark) .home-pricing .hpr-card > .btn + .btn,
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:hover,
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:focus-visible {
    color: var(--acc-ink);
    border-color: color-mix(in srgb, var(--acc-ink) 55%, transparent);
}
body:not(.dark) .home-pricing .hpr-card > .btn + .btn {
    background: color-mix(in srgb, var(--hpr-accent) 14%, transparent);
}
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:hover,
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:focus-visible {
    background: color-mix(in srgb, var(--hpr-accent) 28%, transparent);
}

/* t123 — light theme: muted Talesmith-tone pricing buttons (bright fills stay on dark) */
body:not(.dark) .home-pricing .hpr-card > .btn {
    background: color-mix(in srgb, var(--acc-ink) 55%, #15121c);
    border-color: color-mix(in srgb, var(--acc-ink) 55%, #15121c);
    color: #fbfaf6;
    font-weight: 600;
    box-shadow: 0 10px 24px -18px rgba(21, 18, 28, .45);
}
body:not(.dark) .home-pricing .hpr-card > .btn:hover,
body:not(.dark) .home-pricing .hpr-card > .btn:focus-visible {
    background: color-mix(in srgb, var(--acc-ink) 70%, #15121c);
    border-color: color-mix(in srgb, var(--acc-ink) 70%, #15121c);
    color: #ffffff;
    box-shadow: 0 14px 28px -18px rgba(21, 18, 28, .5);
}
body:not(.dark) .home-pricing .hpr-card > .btn + .btn {
    background: color-mix(in srgb, var(--acc-ink) 8%, transparent);
    border-color: color-mix(in srgb, var(--acc-ink) 35%, transparent);
    color: color-mix(in srgb, var(--acc-ink) 60%, #15121c);
    box-shadow: none;
}
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:hover,
body:not(.dark) .home-pricing .hpr-card > .btn + .btn:focus-visible {
    background: color-mix(in srgb, var(--acc-ink) 15%, transparent);
    border-color: color-mix(in srgb, var(--acc-ink) 50%, transparent);
    color: color-mix(in srgb, var(--acc-ink) 60%, #15121c);
}

/* ==========================================================================
   writers.html: no "bar" after the hero wave — dark paper matches the hero,
   and the intro sits close under the wave instead of a big empty gap.
   ========================================================================== */
body.dark.writers-page {
    --paper: #07060d;
}

.writers-page .pair-intro {
    background: var(--paper);
    padding-top: clamp(.5rem, 1.5vw, 1.25rem);
}

/* t128/t129 — "Plugin" badge on Studio / Reader topic pages, links to marketplace */
.pair-intro strong .plugin-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent);
    background: color-mix(in srgb, var(--c1) 14%, transparent);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    transition: background .2s ease, border-color .2s ease;
}
.pair-intro strong .plugin-badge:hover,
.pair-intro strong .plugin-badge:focus-visible {
    background: color-mix(in srgb, var(--c1) 26%, transparent);
    border-color: var(--c1);
}

/* ==========================================================================
   Symbolic feature illustrations (writers.html + readers.html)
   Replace UI screenshots with theme-aware SVG, in the existing frames.
   ========================================================================== */
.feature-symbol {
    --fs-paper: #f7f5f0;
    --fs-ink: #2a2433;
    --fs-muted: #6f6878;
    --fs-line: rgba(42, 36, 51, .16);
    --fs-soft: rgba(42, 36, 51, .055);
    --fs-accent: var(--logo-lime-ink);
    --fs-accent-soft: rgba(79, 158, 18, .16);
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: var(--fs-paper);
    color: var(--fs-ink);
    overflow: hidden;
}

body.dark .feature-symbol {
    --fs-paper: #1a1722;
    --fs-ink: #f5f3fa;
    --fs-muted: #8b849e;
    --fs-line: rgba(255, 255, 255, .14);
    --fs-soft: rgba(255, 255, 255, .055);
}

.feature-symbol--import {
    --fs-accent: var(--logo-lime-ink);
    --fs-accent-soft: rgba(79, 158, 18, .16);
}
body.dark .feature-symbol--import {
    --fs-accent: var(--logo-lime);
    --fs-accent-soft: rgba(159, 255, 68, .16);
}

.feature-symbol--write {
    --fs-accent: var(--c1);
    --fs-accent-soft: rgba(255, 45, 120, .14);
}
body.dark .feature-symbol--write {
    --fs-accent: var(--c1);
    --fs-accent-soft: rgba(255, 45, 120, .18);
}

.feature-symbol--revisions {
    --fs-accent: var(--logo-green-ink);
    --fs-accent-soft: rgba(0, 163, 131, .16);
}
body.dark .feature-symbol--revisions {
    --fs-accent: var(--logo-green);
    --fs-accent-soft: rgba(1, 255, 205, .16);
}

.feature-symbol--publish {
    --fs-accent: var(--c2);
    --fs-accent-soft: rgba(255, 122, 24, .16);
}
body.dark .feature-symbol--publish {
    --fs-accent: var(--c2);
    --fs-accent-soft: rgba(255, 122, 24, .22);
}

.feature-symbol--export,
.feature-symbol--reader {
    --fs-accent: var(--logo-yellow-ink);
    --fs-accent-soft: rgba(143, 154, 0, .18);
}
body.dark .feature-symbol--export,
body.dark .feature-symbol--reader {
    --fs-accent: var(--logo-yellow);
    --fs-accent-soft: rgba(238, 255, 0, .14);
}

.feature-symbol--own {
    --fs-accent: var(--logo-green-ink);
    --fs-accent-soft: rgba(0, 163, 131, .16);
}
body.dark .feature-symbol--own {
    --fs-accent: var(--logo-green);
    --fs-accent-soft: rgba(1, 255, 205, .16);
}

.feature-symbol .fs-stage { fill: var(--fs-paper); }
.feature-symbol .fs-ink {
    fill: none;
    stroke: var(--fs-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-fill {
    fill: var(--fs-soft);
    stroke: var(--fs-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-line {
    fill: none;
    stroke: var(--fs-line);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-muted {
    fill: none;
    stroke: var(--fs-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-accent {
    fill: none;
    stroke: var(--fs-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-accent-fill {
    fill: var(--fs-accent-soft);
    stroke: var(--fs-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-symbol .fs-dot { fill: var(--fs-accent); stroke: none; }
.feature-symbol .fs-textline { fill: var(--fs-line); stroke: none; }
.feature-symbol .fs-paper-hole { fill: var(--fs-paper); stroke: none; }
.feature-symbol .fs-label-back { fill: var(--fs-paper); stroke: none; }
.feature-symbol .fs-soft-shadow { fill: var(--fs-ink); opacity: .08; stroke: none; }
.feature-symbol .fs-glow-ring {
    fill: var(--fs-accent-soft);
    stroke: none;
}
.feature-symbol .fs-ribbon { stroke: none; }

.feature-symbol .fs-label,
.feature-symbol .fs-label-accent {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.feature-symbol .fs-label { fill: var(--fs-muted); }
.feature-symbol .fs-label-accent { fill: var(--fs-accent); }

.feature-shot--glow .feature-symbol {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.feature-band-media:hover .feature-shot--glow .feature-symbol {
    transform: scale(1.012);
}

@keyframes fs-caret { 0%, 48% { opacity: 1; } 50%, 100% { opacity: .22; } }
@keyframes fs-dash { to { stroke-dashoffset: -24; } }
@keyframes fs-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(6px, 2px); }
}
@keyframes fs-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
@keyframes fs-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes fs-page-lift {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-2.4deg); }
}

.feature-symbol--import .fs-flow {
    stroke-dasharray: 6 8;
    animation: fs-dash 2.8s linear infinite;
}
.feature-symbol--import .fs-file-a { animation: fs-drift 5s ease-in-out infinite; }
.feature-symbol--import .fs-file-b { animation: fs-drift 5.6s ease-in-out infinite reverse; }
.feature-symbol--import .fs-file-c { animation: fs-drift 4.8s ease-in-out 0.4s infinite; }

.feature-symbol--write .fs-caret { animation: fs-caret 1.05s steps(1) infinite; }

.feature-symbol--revisions .fs-now { animation: fs-pulse 2.8s ease-in-out infinite; }

.feature-symbol--publish .fs-out { animation: fs-float 4.2s ease-in-out infinite; }

.feature-symbol--own .fs-glow-ring { animation: fs-pulse 3.2s ease-in-out infinite; }

.feature-symbol--reader .fs-turn {
    transform-origin: 400px 86px;
    animation: fs-page-lift 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .feature-symbol .fs-flow,
    .feature-symbol .fs-file-a,
    .feature-symbol .fs-file-b,
    .feature-symbol .fs-file-c,
    .feature-symbol .fs-caret,
    .feature-symbol .fs-now,
    .feature-symbol .fs-out,
    .feature-symbol .fs-glow-ring,
    .feature-symbol .fs-turn {
        animation: none;
    }
    .feature-band-media:hover .feature-shot--glow img,
    .feature-band-media:hover .feature-shot--glow .feature-symbol {
        transform: none;
    }
}

@media (max-width: 820px) {
    .feature-shot--tall {
        max-width: 360px;
    }
}