/* ===================================================================
   Wordly — the "Written for you" pages (light)
   Rendered by public/js/written-page.js into <main id="svcMain" class="wp">.

   ⚠️ THE TOKENS ARE RESET ON .wp, AND THAT IS THE WHOLE TRICK.
   main.css colours every heading, paragraph and link through tokens
   (--text, --text-2, --ink, --primary-blue …) and body.site-public sets
   those to LIGHT values for the dark shell. Custom properties resolve
   from the nearest ancestor, so redefining them here makes everything
   inside the page dark-on-light while the navbar and footer — outside
   <main> — keep the dark shell's values. It is the same lesson as the
   blank-landing-page bug in CLAUDE.md, the other way round: a token
   layer only reaches the tokens it names, so every one that paints
   text is named below.

   Each service has its own accent (--a1 → --a2). Every pair carries
   WHITE button text and was chosen for ≥ 4.5:1 at both stops:
     scholar  #6d28d9 → #a21caf   7.1 · 6.3
     lab      #0f766e → #0e7490   5.5 · 5.4
     letter   #b45309 → #be123c   5.0 · 6.2
     studio   #c2410c → #be185d   5.2 · 6.3
     stage    #4338ca → #0369a1   7.4 · 5.9
   =================================================================== */

body.site-public.wp-light {
    background: #fbfaff;
}
/* The dark shell paints a FIXED night-sky layer behind everything; it
   would show through on overscroll and under the footer's edge. */
body.wp-light::before { display: none; }
/* The particle field is drawn for a dark sky; on paper it is noise. */
body.wp-light .site-particles { display: none; }
/* Translucent dark glass over a LIGHT page reads as a grey smudge. */
/* SOLID, not 0.94: newer iPhone Safari colours its status bar from a
   solid bar at the top of the page, and a translucent one does not count. */
body.wp-light .navbar { background: #0b0b14; }
/* Same for the footer, and worse: it is 72% black GLASS, designed to sit
   over the dark night-sky layer — which these pages switch off. Over the
   light ground the glass mixed to ash grey (seen on the live page). Solid,
   it is exactly the colour the dark shell's footer reads as, so its text
   contrast — measured against that — still holds. Same specificity as the
   site-public rule; this file loads later, so it wins. */
body.wp-light .site-footer {
    margin-top: 0;            /* .wp-close already leaves the space; the margin showed as a second-tone band */
    background: #0b0b14;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wp {
    --ink:     #17152a;
    --text:    #17152a;
    --text-2:  #46435c;     /* 9.2:1 on the ground */
    --text-3:  #615e78;     /* 6.0:1 */
    --muted:   #615e78;
    --line:    #e9e6f3;
    --card-bg: #ffffff;
    --surface: #ffffff;
    --ground:  #fbfaff;
    --primary-blue: var(--a1);
    --primary-blue-dark: var(--a1);
    --brand:   var(--a1);

    /* default accent — overridden per theme below */
    --a1: #6d28d9; --a2: #a21caf; --tint: #f3eeff; --tint-2: #fbe9fb;

    display: block;
    color: var(--text);
    background: var(--ground);
    overflow: hidden;             /* the hero blobs bleed past the edge */
}
.wp-theme-scholar { --a1: #6d28d9; --a2: #a21caf; --tint: #f3eeff; --tint-2: #fbe9fb; }
.wp-theme-lab     { --a1: #0f766e; --a2: #0e7490; --tint: #e3f6f3; --tint-2: #e2f3f8; }
.wp-theme-letter  { --a1: #b45309; --a2: #be123c; --tint: #fff3e2; --tint-2: #ffe8ec; }
.wp-theme-studio  { --a1: #c2410c; --a2: #be185d; --tint: #fff0e8; --tint-2: #fde8f1; }
.wp-theme-stage   { --a1: #4338ca; --a2: #0369a1; --tint: #ecefff; --tint-2: #e3f2fb; }

.wp h1, .wp h2, .wp h3 { color: var(--ink); }
.wp p { color: var(--text-2); }
.wp a:not(.wp-btn):not(.wp-more-card) { color: var(--a1); font-weight: 600; }

.wp-wrap {
    width: min(1160px, calc(100% - 2rem));
    margin-inline: auto;
}
.wp-section { padding: 4.5rem 0 0; }
.wp-head { max-width: 720px; margin-bottom: 2rem; }
.wp-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; margin: 0.35rem 0 0; }
.wp-kicker {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--a1);
}
.wp-small { font-size: 0.85rem; color: var(--text-3) !important; }

/* ── Buttons ───────────────────────────────────────────────────── */
.wp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 48px; padding: 0.8rem 1.4rem;
    border-radius: 999px; border: 1.5px solid transparent;
    font-weight: 700; font-size: 0.97rem; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.wp-btn:hover { transform: translateY(-2px); }
.wp-btn-primary {
    background: linear-gradient(120deg, var(--a1), var(--a2));
    color: #fff;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--a1) 32%, transparent);
}
.wp-btn-primary:hover { color: #fff; box-shadow: 0 16px 34px color-mix(in srgb, var(--a1) 42%, transparent); }
.wp-btn-ghost { background: #fff; color: var(--a1); border-color: color-mix(in srgb, var(--a1) 30%, transparent); }
.wp-btn-ghost:hover { color: var(--a1); background: var(--tint); }
.wp-btn-block { width: 100%; }
.wp-btn-light { background: #fff; color: var(--a1); }
.wp-btn-light:hover { color: var(--a1); background: var(--tint); }
.wp-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.wp-btn-outline-light:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* ── Hero ──────────────────────────────────────────────────────── */
.wp-hero {
    position: relative;
    padding: 4.5rem 0 3.5rem;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--a1) 14%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(180deg, #fff 0%, var(--ground) 100%);
}
.wp-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none;
    animation: wp-float 14s ease-in-out infinite;
}
.wp-blob-1 { width: 420px; height: 420px; background: var(--tint); top: -120px; right: -80px; }
.wp-blob-2 { width: 340px; height: 340px; background: var(--tint-2); bottom: -140px; left: -100px; animation-delay: -6s; }
@keyframes wp-float { 50% { transform: translate(24px, -18px) scale(1.06); } }

.wp-hero-grid {
    position: relative;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center;
}
.wp-eyebrow {
    display: table;
    padding: 0.4rem 0.9rem; border-radius: 999px;
    background: var(--tint); color: var(--a1);
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.wp-hero h1 {
    margin: 1rem 0 1rem;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.05; letter-spacing: -0.04em; font-weight: 900;
}
.wp-lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.7; max-width: 58ch; }
.wp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 1.3rem; }
.wp-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-chips li {
    padding: 0.45rem 0.85rem; border-radius: 10px;
    background: #fff; border: 1px solid var(--line);
    font-size: 0.85rem; font-weight: 600; color: var(--text-2);
}
.wp-chips li::before { content: '✓ '; color: var(--a1); font-weight: 800; }

/* ── Proof strip ───────────────────────────────────────────────── */
.wp-proof {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: -1.5rem;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 18px 50px rgba(30, 20, 70, 0.07);
}
.wp-proof-item { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.wp-proof-item + .wp-proof-item { border-left: 1px solid var(--line); }
.wp-proof-item b {
    font-size: 1.35rem; letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--a1), var(--a2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wp-proof-item span { font-size: 0.88rem; color: var(--text-2); }

/* ── Types (tabs) ──────────────────────────────────────────────── */
.wp-types { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: start; }
.wp-type-list { display: flex; flex-direction: column; gap: 0.35rem; }
.wp-type-list button {
    display: flex; align-items: center; gap: 0.8rem;
    text-align: left; padding: 0.85rem 1rem;
    border-radius: 14px; border: 1px solid transparent;
    background: transparent; color: var(--text-2);
    font: inherit; font-weight: 600; cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.wp-type-list button:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.wp-type-list button[aria-selected="true"] {
    background: #fff; color: var(--ink); border-color: color-mix(in srgb, var(--a1) 35%, transparent);
    box-shadow: 0 8px 22px rgba(30, 20, 70, 0.06); transform: translateX(4px);
}
.wp-type-n { font-size: 0.75rem; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wp-type-list button[aria-selected="true"] .wp-type-n { color: var(--a1); }
.wp-type-panel { position: sticky; top: 96px; }
.wp-type-card {
    position: relative; overflow: hidden;
    padding: 2.2rem; border-radius: 24px;
    background: linear-gradient(140deg, var(--tint), var(--tint-2));
    animation: wp-in .35s ease both;
    min-height: 280px;
}
@keyframes wp-in { from { opacity: 0; transform: translateY(10px); } }
.wp-type-big {
    position: absolute; right: 1.2rem; top: 0.2rem;
    font-size: 7rem; font-weight: 900; letter-spacing: -0.06em; line-height: 1;
    color: color-mix(in srgb, var(--a1) 12%, transparent);
}
.wp-type-card h3 { position: relative; font-size: 1.6rem; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
.wp-type-card p { position: relative; font-size: 1.04rem; line-height: 1.75; color: var(--text-2); max-width: 56ch; }
.wp-tags { position: relative; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.wp-tags span {
    padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem; font-weight: 700; color: var(--a1);
}
.wp-type-link { position: relative; display: inline-block; margin-top: 1.1rem; }
.wp-subjects {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 1.8rem;
}
.wp-subjects > span { font-weight: 800; font-size: 0.85rem; color: var(--ink); margin-right: 0.4rem; }
.wp-subjects em {
    font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--text-2);
    padding: 0.4rem 0.8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line);
}

/* ── Estimator band ────────────────────────────────────────────── */
.wp-band {
    margin-top: 4.5rem; padding: 4rem 0;
    background:
        radial-gradient(60% 80% at 100% 0%, var(--tint-2), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, var(--tint), transparent 70%),
        #fff;
    border-block: 1px solid var(--line);
}
.wp-est-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: center; }
.wp-est-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; margin: 0.35rem 0 1rem; }
.wp-est-copy p { line-height: 1.75; }
.wp-est {
    padding: 1.6rem; border-radius: 24px; background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(30, 20, 70, 0.09);
    display: grid; gap: 1.1rem;
}
.wp-field[hidden] { display: none; }
.wp-field-label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.5rem; }
.wp-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-seg button {
    flex: 1 1 auto; min-height: 44px;
    padding: 0.55rem 0.8rem; border-radius: 12px;
    border: 1.5px solid var(--line); background: #fff;
    font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--text-2); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; line-height: 1.2;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wp-seg button small { font-weight: 600; font-size: 0.7rem; color: var(--text-3); }
.wp-seg button:hover { border-color: color-mix(in srgb, var(--a1) 45%, transparent); }
.wp-seg button[aria-checked="true"] { border-color: var(--a1); background: var(--tint); color: var(--a1); }
.wp-seg button[aria-checked="true"] small { color: var(--a1); }
.wp-range { display: flex; align-items: center; gap: 1rem; }
.wp-range input[type="range"] { flex: 1; accent-color: var(--a1); height: 28px; }
.wp-range-out { display: flex; align-items: baseline; gap: 0.35rem; }
.wp-range-out input {
    width: 6.2rem; min-height: 44px; padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--line); border-radius: 10px;
    font: inherit; font-weight: 700; color: var(--ink); text-align: right; background: #fff;
}
.wp-range-out input:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 4px var(--tint); }
.wp-range-out em { font-style: normal; font-size: 0.82rem; color: var(--text-3); }
.wp-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 0.92rem; color: var(--text-2); }
.wp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wp-switch-track {
    flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: #dcd8ea; position: relative;
    transition: background .2s ease;
}
.wp-switch-track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.wp-switch input:checked + .wp-switch-track { background: var(--a1); }
.wp-switch input:checked + .wp-switch-track::after { transform: translateX(18px); }
.wp-switch input:focus-visible + .wp-switch-track { box-shadow: 0 0 0 4px var(--tint); }
.wp-switch small { color: var(--text-3); }

.wp-est-result {
    padding: 1.3rem; border-radius: 18px;
    background: linear-gradient(140deg, var(--tint), var(--tint-2));
}
.wp-est-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a1); }
.wp-est-total {
    font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 900; letter-spacing: -0.04em; color: var(--ink);
    font-variant-numeric: tabular-nums; margin: 0.15rem 0 0.4rem;
}
.wp-est-total.bump { animation: wp-bump .3s ease; }
@keyframes wp-bump { 40% { transform: scale(1.04); } }
.wp-est-lines { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.3rem; }
.wp-est-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--text-2); }
.wp-est-lines b { color: var(--ink); white-space: nowrap; }
.wp-est-floor { margin: 0; text-align: center; }

/* ── Process ───────────────────────────────────────────────────── */
.wp-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    counter-reset: none;
}
.wp-steps li {
    position: relative; padding: 1.2rem; border-radius: 20px; background: #fff; border: 1px solid var(--line);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wp-steps li.is-open {
    border-color: color-mix(in srgb, var(--a1) 40%, transparent);
    box-shadow: 0 16px 40px rgba(30, 20, 70, 0.08); transform: translateY(-4px);
}
.wp-steps li:not(:last-child)::after {
    content: ''; position: absolute; top: 2.2rem; right: -0.9rem; width: 0.8rem; height: 2px;
    background: color-mix(in srgb, var(--a1) 35%, transparent);
}
.wp-step {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
    width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
    font: inherit; color: var(--ink);
}
.wp-step-n {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px;
    background: var(--tint); color: var(--a1); font-weight: 900;
    transition: background .2s ease, color .2s ease;
}
li.is-open .wp-step-n { background: linear-gradient(120deg, var(--a1), var(--a2)); color: #fff; }
.wp-step-t { font-weight: 700; line-height: 1.45; }
.wp-step-d { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.65; color: var(--text-2); animation: wp-in .3s ease both; }

/* ── What you receive ──────────────────────────────────────────── */
.wp-receive { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; align-items: center; }
.wp-receive h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; margin: 0.35rem 0 1.3rem; }
.wp-ticks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.4rem; }
.wp-ticks li { position: relative; padding-left: 2rem; font-weight: 600; color: var(--text-2); line-height: 1.5; }
.wp-ticks li::before {
    content: '✓'; position: absolute; left: 0; top: 0.05rem;
    display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--tint); color: var(--a1); font-size: 0.8rem; font-weight: 900;
}
.wp-promise {
    position: relative; padding: 2rem; border-radius: 24px; color: #fff;
    background: linear-gradient(140deg, var(--a1), var(--a2));
    box-shadow: 0 24px 60px color-mix(in srgb, var(--a1) 30%, transparent);
}
.wp-promise p { color: #fff; font-size: 1.15rem; line-height: 1.6; font-weight: 600; margin: 0 0 1rem; position: relative; }
/* .wp .wp-promise small, not .wp-promise small: `body.site-public small`
   (0,1,2) outranked (0,1,1) and painted this line the page's dark grey
   on the violet panel — barely visible. Now (0,2,1). */
.wp .wp-promise small { display: block; color: rgba(255, 255, 255, 0.92); line-height: 1.55; position: relative; }
.wp-promise-mark {
    position: absolute; top: -0.6rem; right: 1rem; font-size: 7rem; line-height: 1; font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.22);
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.wp-faq { display: grid; gap: 0.7rem; max-width: 860px; }
.wp-faq details { border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .2s ease; }
.wp-faq details[open] { border-color: color-mix(in srgb, var(--a1) 35%, transparent); }
.wp-faq summary {
    list-style: none; cursor: pointer; padding: 1.1rem 3rem 1.1rem 1.3rem; position: relative;
    font-weight: 700; color: var(--ink); min-height: 44px;
}
.wp-faq summary::-webkit-details-marker { display: none; }
.wp-faq summary::after {
    content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
    width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--tint); color: var(--a1); font-weight: 800; transition: transform .2s ease;
}
.wp-faq details[open] summary::after { content: '−'; }
.wp-faq p { padding: 0 1.3rem 1.2rem; margin: 0; line-height: 1.7; }

/* ── More written for you ──────────────────────────────────────── */
.wp-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.wp-more-card {
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 1.3rem; border-radius: 20px; text-decoration: none;
    background: #fff; border: 1px solid var(--line);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wp-more-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(30, 20, 70, 0.09); border-color: color-mix(in srgb, var(--a1) 40%, transparent); }
.wp-more-dot { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: linear-gradient(120deg, var(--a1), var(--a2)); }
.wp-more-card b { color: var(--ink); font-size: 1.05rem; }
.wp-more-card span:not(.wp-more-dot) { color: var(--text-2); font-size: 0.88rem; line-height: 1.5; }
.wp-more-card em { margin-top: auto; font-style: normal; font-weight: 700; color: var(--a1); font-size: 0.88rem; }

/* ── Close ─────────────────────────────────────────────────────── */
.wp-close {
    margin-bottom: 4.5rem;
    padding: clamp(2rem, 5vw, 3.4rem); border-radius: 28px; text-align: center;
    background:
        radial-gradient(60% 120% at 80% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
        linear-gradient(130deg, var(--a1), var(--a2));
    box-shadow: 0 30px 70px color-mix(in srgb, var(--a1) 30%, transparent);
}
.wp-close h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.wp-close p { color: rgba(255, 255, 255, 0.94); max-width: 52ch; margin: 0 auto; line-height: 1.65; }
.wp-close .wp-hero-cta { justify-content: center; margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════
   THE ILLUSTRATIONS
   ════════════════════════════════════════════════════════════════ */
.wp-art { position: relative; height: 380px; max-width: 460px; margin-inline: auto; }
.pa-line { height: 8px; border-radius: 4px; background: #e8e4f4; margin: 0 0 9px; }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* paper — Academic */
.pa-sheet { position: absolute; width: 270px; height: 340px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px rgba(30, 20, 70, 0.12); }
.pa-back { left: 70px; top: 30px; transform: rotate(7deg); background: var(--tint); }
.pa-front { left: 40px; top: 10px; padding: 28px 24px; transform: rotate(-3deg); animation: wp-bob 7s ease-in-out infinite; }
@keyframes wp-bob { 50% { transform: rotate(-1deg) translateY(-8px); } }
.pa-title { height: 14px; width: 65%; border-radius: 6px; background: linear-gradient(90deg, var(--a1), var(--a2)); margin-bottom: 20px; }
.pa-gap { height: 14px; }
.pa-typing { position: relative; animation: wp-type 3.2s steps(12) infinite; }
@keyframes wp-type { from { width: 8%; } 80%, to { width: 70%; } }
.pa-seal {
    position: absolute; right: 30px; bottom: 30px; width: 96px; height: 96px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.8rem;
    background: conic-gradient(from 0deg, var(--a1), var(--a2), var(--a1));
    box-shadow: 0 16px 40px color-mix(in srgb, var(--a1) 40%, transparent);
    animation: wp-spin 16s linear infinite;
}
.pa-seal span { animation: wp-spin 16s linear infinite reverse; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.pa-chip {
    position: absolute; padding: 0.45rem 0.8rem; border-radius: 999px; background: #fff;
    font-size: 0.8rem; font-weight: 700; color: var(--a1); box-shadow: 0 10px 26px rgba(30, 20, 70, 0.1);
    animation: wp-float 9s ease-in-out infinite;
}
.pa-chip-1 { right: 0; top: 40px; }
.pa-chip-2 { left: 0; bottom: 60px; animation-delay: -3s; color: #047857; }
.pa-chip-3 { right: 60px; top: 150px; animation-delay: -5s; }

/* chapters — Research */
.ch-card { position: absolute; left: 0; top: 20px; width: 300px; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px rgba(30, 20, 70, 0.12); }
.ch-row { display: grid; grid-template-columns: 26px 1fr 70px; align-items: center; gap: 10px; padding: 9px 0; }
.ch-row + .ch-row { border-top: 1px solid var(--line); }
.ch-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--tint); color: var(--a1); font-weight: 800; font-size: 0.8rem; }
.ch-name { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.ch-bar { height: 7px; border-radius: 4px; background: #e8e4f4; overflow: hidden; }
.ch-bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--a1), var(--a2));
    animation: wp-fill 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes wp-fill { 0% { width: 0; } 40%, 85% { width: 100%; } 100% { width: 100%; opacity: 0.4; } }
.ch-chart {
    position: absolute; right: 0; bottom: 10px; width: 210px; height: 170px; padding: 18px 18px 30px;
    display: flex; align-items: flex-end; gap: 10px; border-radius: 18px; background: #fff;
    box-shadow: 0 30px 60px rgba(30, 20, 70, 0.14); animation: wp-bob 8s ease-in-out infinite;
}
.ch-chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--a2), var(--a1));
    transform-origin: bottom; animation: wp-grow 5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); }
@keyframes wp-grow { 0% { transform: scaleY(0.2); } 40%, 100% { transform: scaleY(1); } }
.ch-chart em { position: absolute; left: 18px; bottom: 8px; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--a1); }

/* envelope — SOP */
.wp-art-envelope { perspective: 900px; }
.en-back, .en-front { position: absolute; left: 40px; width: 360px; height: 200px; bottom: 30px; border-radius: 14px; }
/* Drawn in DOM order letter → back → front, so the stacking is set
   explicitly: the letter must sit BETWEEN the back and the front to be
   seen rising out of the envelope. */
.en-back { z-index: 1; background: color-mix(in srgb, var(--a1) 22%, #fff); }
.en-front { z-index: 3; }
.en-stamp { z-index: 4; }
.en-front {
    background:
        linear-gradient(155deg, transparent 49.5%, color-mix(in srgb, var(--a1) 30%, #fff) 50%) left / 50% 100% no-repeat,
        linear-gradient(-155deg, transparent 49.5%, color-mix(in srgb, var(--a1) 30%, #fff) 50%) right / 50% 100% no-repeat,
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--a1) 18%, #fff) 55%);
    box-shadow: 0 30px 60px rgba(30, 20, 70, 0.14);
}
.en-letter {
    position: absolute; z-index: 2; left: 70px; width: 300px; height: 250px; bottom: 60px; padding: 24px 22px;
    border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(30, 20, 70, 0.12);
    animation: wp-rise 6s ease-in-out infinite;
}
@keyframes wp-rise { 0%, 15% { transform: translateY(120px); } 45%, 85% { transform: translateY(0); } 100% { transform: translateY(120px); } }
.en-to { font-family: Georgia, serif; font-style: italic; color: var(--ink); margin-bottom: 14px; font-size: 0.95rem; }
.en-sign { margin-top: 18px; font-family: Georgia, serif; font-style: italic; color: var(--a1); }
.en-stamp {
    position: absolute; right: 30px; bottom: 150px; width: 74px; height: 86px; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--a1), var(--a2)); color: #fff; font-weight: 900; letter-spacing: 0.08em;
    border-radius: 6px; outline: 3px dashed #fff; outline-offset: -8px; transform: rotate(8deg);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--a1) 40%, transparent);
}

/* browser — Copywriting */
.br-win { position: absolute; inset: 20px 10px 30px 10px; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(30, 20, 70, 0.14); animation: wp-bob 8s ease-in-out infinite; }
.br-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #f4f2fa; }
.br-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e0dcec; }
.br-bar i:first-child { background: #f87171; } .br-bar i:nth-child(2) { background: #fbbf24; } .br-bar i:nth-child(3) { background: #34d399; }
.br-bar span { margin-left: 10px; font-size: 0.75rem; color: var(--text-3); padding: 3px 10px; border-radius: 6px; background: #fff; }
.br-body { padding: 26px; }
.br-head { min-height: 46px; margin-bottom: 14px; }
.br-type {
    display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
    font-size: 1.9rem; font-weight: 900; letter-spacing: -0.03em; color: var(--ink);
    border-right: 3px solid var(--a1);
    animation: wp-typing 5s steps(16) infinite, wp-caret .8s step-end infinite;
}
@keyframes wp-typing { 0% { width: 0; } 50%, 90% { width: 16ch; } 100% { width: 0; } }
@keyframes wp-caret { 50% { border-color: transparent; } }
.br-btn { display: inline-block; margin: 6px 0 22px; padding: 10px 18px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 0.9rem; background: linear-gradient(120deg, var(--a1), var(--a2)); }
.br-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br-cols span { height: 60px; border-radius: 10px; background: var(--tint); }
.br-note { position: absolute; right: 0; bottom: 0; padding: 0.5rem 0.9rem; border-radius: 999px; background: #fff; color: #047857; font-weight: 800; font-size: 0.82rem; box-shadow: 0 10px 26px rgba(30, 20, 70, 0.12); animation: wp-float 7s ease-in-out infinite; }

/* slides — Presentations */
.sl { position: absolute; width: 330px; height: 200px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px rgba(30, 20, 70, 0.12); left: 50%; top: 40px; }
.sl-3 { transform: translateX(-50%) rotate(-9deg) translate(-40px, 10px); background: var(--tint-2); }
.sl-2 { transform: translateX(-50%) rotate(-4deg) translate(-18px, 4px); background: var(--tint); }
.sl-1 { transform: translateX(-50%) rotate(2deg); padding: 22px; animation: wp-bob2 7s ease-in-out infinite; }
@keyframes wp-bob2 { 50% { transform: translateX(-50%) rotate(0deg) translateY(-8px); } }
.sl-title { width: 55%; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.sl-chart { display: flex; align-items: flex-end; gap: 14px; height: 120px; margin-top: 22px; }
.sl-chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--a2), var(--a1)); transform-origin: bottom; animation: wp-grow 5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); }
.sl-notes { position: absolute; right: 0; bottom: 0; width: 210px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 20px 44px rgba(30, 20, 70, 0.14); animation: wp-float 8s ease-in-out infinite; }
.sl-notes b { display: block; font-size: 0.78rem; color: var(--a1); margin-bottom: 8px; }
.sl-notes span { display: block; height: 7px; border-radius: 4px; background: #e8e4f4; margin-top: 7px; }
.sl-notes span:nth-child(3) { width: 80%; } .sl-notes span:nth-child(4) { width: 60%; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .wp-hero-grid, .wp-est-grid, .wp-receive { grid-template-columns: 1fr; gap: 2rem; }
    /* A scaled drawing still takes its FULL height in the layout, so the
       frame is sized to the scaled result and clips the rest — otherwise
       the drawing overlaps the eyebrow and the link above the heading. */
    .wp-hero-art { order: -1; height: 300px; overflow: hidden; }
    .wp-art { transform: scale(0.78); transform-origin: top center; }
    .wp-types { grid-template-columns: 1fr; }
    .wp-type-list { flex-direction: row; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
    .wp-type-list button { flex: 0 0 auto; white-space: nowrap; }
    .wp-type-list button[aria-selected="true"] { transform: none; }
    .wp-type-panel { position: static; }
    .wp-steps { grid-template-columns: 1fr 1fr; }
    .wp-steps li::after { display: none; }
    .wp-more { grid-template-columns: 1fr 1fr; }
    .wp-proof { grid-template-columns: 1fr 1fr; }
    .wp-proof-item:nth-child(3) { border-left: 0; }
    .wp-proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .wp-hero { padding-top: 2.5rem; }
    .wp-hero-art { height: 250px; }
    .wp-art { transform: scale(0.64); }
    .wp-steps, .wp-more, .wp-ticks { grid-template-columns: 1fr; }
    .wp-type-card { padding: 1.5rem; min-height: 0; }
    .wp-type-big { font-size: 4.5rem; }
    .wp-hero-cta .wp-btn { flex: 1 1 100%; }
    .wp-range { flex-wrap: wrap; }
    .wp-range input[type="range"] { flex-basis: 100%; }
    .wp-est { padding: 1.1rem; }
}

/* ── Reduced motion: still, and still meaningful ──────────────────
   main.css crushes animations to 0.001ms, and an INFINITE loop at that
   speed is a flicker, not a pause — so every loop here is stopped
   outright and left in its finished state. */
@media (prefers-reduced-motion: reduce) {
    .wp *, .wp *::before, .wp *::after { animation: none !important; transition: none !important; }
    .pa-typing { width: 70%; }
    .ch-bar span { width: 100%; }
    .br-type { width: 16ch; }
    .en-letter { transform: none; }
}