/*

Writeup pages — additive over the Spectrum kit. Same tokens, same 2px-ink language.
Also holds the shared "demo" frame that every writeup page uses.

*/

.svc-hero {
    padding: 130px 0 40px;
    border-bottom: 2px solid var(--ink);
}

.svc-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.svc-eyebrow {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 18px;
}

.svc-hero h1 {
    font-weight: 700;
    font-size: clamp(2.2rem, 5.6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.035em;
}

.svc-lede {
    margin-top: 20px;
    font-size: 1.08rem;
    color: #444;
    max-width: 540px;
}

.svc-tags {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.svc-tag {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border: 2px solid var(--ink);
    border-radius: 30px;
    padding: 6px 14px;
}

.svc-cta-row {
    margin-top: 30px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.svc-cta {
    display: inline-block;
    font-weight: 600;
    font-size: 0.98rem;
    background: var(--ink);
    color: var(--white);
    text-decoration: none;
    padding: 15px 34px;
    border-radius: 40px;
    transition: background 0.2s ease;
}

.svc-cta:hover {
    background: var(--orange);
}

.svc-cta-ghost {
    display: inline-block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    text-decoration: none;
    padding: 4px 2px;
    border-bottom: 3px solid var(--green);
}

.svc-cta-ghost:hover {
    border-bottom-color: var(--magenta);
    color: var(--magenta);
}

.svc-diagram {
    border: 2px solid var(--ink);
    background: var(--white);
}

.svc-diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.svc-body {
    padding: 62px 0 20px;
}

.svc-section {
    max-width: 760px;
    margin-bottom: 42px;
}

.svc-section h2 {
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}

.svc-section p {
    font-size: 1.02rem;
    line-height: 1.68;
    color: #3a3a3a;
}

.svc-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 54px 0 20px;
}

.svc-step {
    border: 2px solid var(--ink);
    padding: 26px 24px 28px;
    background: var(--white);
    transition: background 0.16s linear, color 0.16s linear;
}

.svc-step:hover {
    background: var(--ink);
    color: var(--white);
}

.svc-step .n {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--orange);
    display: block;
    margin-bottom: 14px;
}

.svc-step:hover .n {
    color: var(--green);
}

.svc-step h3 {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.svc-step p {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------- disclaimer, reference and the related strip ---------- */

.svc-disclaimer {
    font-size: 0.9rem;
    color: #666;
    max-width: 760px;
    margin-bottom: 26px;
}

.svc-ref {
    font-size: 0.86rem;
    color: #666;
    border-left: 3px solid var(--green);
    padding-left: 12px;
    margin-bottom: 40px;
}

.svc-ref a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.svc-ref a:hover {
    color: var(--magenta);
}

.svc-related {
    border-top: 2px solid var(--ink);
    padding-top: 34px;
    margin-bottom: 40px;
}

.svc-related h2 {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.svc-related-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.svc-related-links a {
    border: 2px solid var(--ink);
    padding: 18px 18px 20px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.16s linear, color 0.16s linear;
}

.svc-related-links a:hover {
    background: var(--ink);
    color: var(--white);
}

.svc-related-links b {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
}

.svc-related-links span {
    font-size: 0.85rem;
    color: #666;
}

.svc-related-links a:hover span {
    color: var(--green);
}

@media (max-width: 900px) {
    .svc-related-links {
        grid-template-columns: 1fr;
    }
}

/* ---------- shared demo frame ---------- */

.demo {
    border: 2px solid var(--ink);
    background: var(--white);
    margin: 18px 0 26px;
}

.demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--ink);
    padding: 14px 20px;
}

.demo-head h3 {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.demo-head span {
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 2px solid var(--ink);
    border-radius: 30px;
    padding: 4px 12px;
}

.demo-head span.live {
    background: var(--green);
    border-color: var(--green);
}

.demo-body {
    padding: 22px 20px 26px;
}

/* The dock the Orin demo notice sits in - inside the demo panel, so the warning lives with the
   demo instead of floating over the page beneath it (Norm, 5 Oct 2026: "Maybe consider having the
   warning within the demo area?"). The notice itself is a shadow-DOM banner copied from the
   extension, so its own styles are generated in build_services.py's bannerCss(); this rule only
   positions the dock, and collapses when the dock is empty so it adds no gap before you score. */
.demo-notice {
    margin-top: 14px;
}

.demo-notice:empty {
    margin-top: 0;
}

.demo-note {
    font-size: 0.86rem;
    color: #666;
    border-top: 2px solid var(--ink);
    padding: 12px 20px 14px;
    background: #fbfbfc;
}

.demo label {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 7px;
    color: #444;
}

.demo textarea,
.demo input[type="text"],
.demo input[type="number"] {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--ink);
    padding: 11px 13px;
    border-radius: 0;
}

.demo textarea:focus,
.demo input:focus {
    outline: none;
    border-color: var(--magenta);
}

.demo-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.demo-btn {
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.92rem;
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: 40px;
    padding: 13px 30px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.demo-btn:hover {
    background: var(--orange);
}

.demo-findings {
    list-style: none;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@keyframes demo-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.demo-findings li {
    animation: demo-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.94rem;
    line-height: 1.5;
    border: 2px solid var(--ink);
    padding: 12px 14px;
}

.demo-findings li.ok {
    border-color: var(--green);
    background: rgba(0, 250, 154, 0.12);
}

.demo-findings li.hit {
    border-color: var(--orange);
    background: rgba(255, 69, 0, 0.1);
}

/* The scorer's "nothing fired" state — deliberately NOT the green pass treatment the other demos
   use for a genuine pass. This state can appear for text the heuristic simply cannot read (a
   threat built from words it does not know), and a green tick beside it reads as a clearance.
   Neutral ink, no tick: it reports, it does not approve. */
.demo-findings li.none {
    border-color: var(--ink);
    background: transparent;
}

.demo-findings b {
    font-weight: 700;
}

.demo-kv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.demo-kv div {
    border: 2px solid var(--ink);
    border-radius: 30px;
    padding: 7px 15px;
    font-size: 0.86rem;
    font-weight: 600;
}

/* The dimension that actually fired, on the one demo whose badges carry numbers.
   Additive: the pill is unchanged, it just carries the hit treatment so the reader
   can see WHICH of the five tripped. */
.demo-kv div.fired {
    border-color: var(--orange);
    background: rgba(255, 69, 0, 0.1);
}

/* per-demo bits */
.demo-terminal {
    background: var(--ink);
    color: #d8d8d8;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.75;
    padding: 18px;
    min-height: 190px;
}

.demo-terminal .ok {
    color: var(--green);
}

.demo-terminal .warn {
    color: var(--orange);
}

/* The step rows carry hidden="hidden" in the markup so the sequence can be replayed, but a
   display:flex rule here was beating that attribute: every step rendered at once and the Run
   button looked like it did nothing. This is what restores the reveal. */
.demo-row[hidden] {
    display: none;
}

.demo-row {
    /* the reveal: each row rises and fades in as the runner steps through it */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-row.is-in {
    opacity: 1;
    transform: none;
}

.demo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e4e4e4;
    padding: 9px 2px;
    font-size: 0.9rem;
}

.demo-row:last-child {
    border-bottom: 0;
}

.demo-row .amt {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.demo-row.flag {
    background: rgba(255, 69, 0, 0.1);
}

.demo-swatch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.demo-swatch i {
    width: 38px;
    height: 38px;
    border: 2px solid var(--ink);
    display: block;
}

.demo-preview {
    border: 2px solid var(--ink);
    padding: 16px;
    margin-top: 14px;
    background: var(--pv-bg, #fff);
    color: var(--pv-ink, #111);
}

.demo-preview h4 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.demo-preview p {
    font-size: 0.9rem;
    color: var(--pv-muted, #555);
}

.demo-preview .pill {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 30px;
    background: var(--pv-accent, #00fa9a);
    color: var(--pv-bg, #fff);
}

.demo-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.demo-node {
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    background: var(--white);
}

.demo-node.active {
    background: var(--green);
}

.demo-arrow {
    font-weight: 700;
    color: #999;
}

.blink {
    animation: demo-blink 1.4s steps(2, start) infinite;
}

@keyframes demo-blink {
    to {
        visibility: hidden;
    }
}

@media (max-width: 900px) {
    .svc-hero {
        padding: 112px 0 30px;
    }
    .svc-hero .container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .svc-steps {
        grid-template-columns: 1fr;
    }
    .demo-grid2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   WRITE-UP LAYOUT SYSTEM — ten pages, ten shells.
   Five hero treatments x five body rhythms x three step
   treatments, assigned so that no two pages share a hero+body
   pairing. Same blocks as before, a different page each time.
   ============================================================ */

/* ---------------- heroes ---------------- */

.svc-hero.h-centred .container { display: block; text-align: center; }
.svc-hero.h-centred .svc-lede { margin-left: auto; margin-right: auto; max-width: 68ch; }
.svc-hero.h-centred .svc-tags,
.svc-hero.h-centred .svc-cta-row { justify-content: center; }

/* Every product page's hero is WHITE. No colour-block hero: Norm, 5 Oct 2026 - "Why is only
   this pg green? The rest are white. What rationale? MAKE THEM ALL WHITE!" The green was my
   call (the kit's own hero colour, to keep two pages from looking identical once the black
   went); it is overruled, and the hero treatments here are now white-only. */
.svc-hero.h-half { padding: 0; border-bottom: 2px solid var(--ink); }
.svc-hero.h-half .container { grid-template-columns: 1fr 1fr; max-width: none; width: 100%; gap: 0; }
.svc-hero.h-half .container > div:first-child { padding: 140px clamp(24px, 4vw, 64px) 70px clamp(24px, 6vw, 96px); }
.svc-hero.h-half .svc-diagram { background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 48px; }
.svc-hero.h-half .svc-diagram svg { width: 100%; max-width: 470px; height: auto; }

.svc-hero.h-type { padding-bottom: 34px; }
.svc-hero.h-type .container { display: block; max-width: 900px; }
.svc-hero.h-type h1 { font-size: clamp(2.4rem, 6.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 24ch; }
.svc-hero.h-type .svc-lede { font-size: 1.14rem; max-width: 62ch; }

/* the diagram band used by the centred + type heroes */
.svc-band { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: #fafafa; padding: 34px 0; margin-bottom: 46px; }
.svc-band svg { display: block; width: 100%; max-width: 880px; height: auto; margin: 0 auto; }

/* ---------------- bodies ---------------- */

.svc-body.b-alt .svc-section:nth-child(even) { margin-left: 12%; }

.svc-body.b-bands .svc-section { max-width: none; display: grid; grid-template-columns: minmax(170px, 260px) 1fr; gap: 40px; border-top: 2px solid var(--ink); padding: 28px 0; margin-bottom: 0; }
.svc-body.b-bands .svc-section h2 { margin-bottom: 0; font-size: clamp(1.15rem, 2.1vw, 1.45rem); }
.svc-body.b-bands .svc-section p { max-width: none; }

.svc-body.b-lede .svc-section:first-of-type { max-width: 900px; }
.svc-body.b-lede .svc-section:first-of-type p { font-size: 1.2rem; line-height: 1.58; color: var(--ink); }
.svc-body.b-lede .svc-section + .svc-section { max-width: 620px; margin-left: 14%; }


/* ---------------- steps ---------------- */

.svc-steps.s-list { display: block; border-top: 2px solid var(--ink); margin: 46px 0 20px; }
.svc-steps.s-list .svc-step { display: grid; grid-template-columns: 76px minmax(190px, 280px) 1fr; gap: 20px; align-items: baseline; border: 0; border-bottom: 1px solid rgba(17, 17, 17, 0.16); padding: 18px 0; background: transparent; }
.svc-steps.s-list .svc-step:hover { background: transparent; color: inherit; }
.svc-steps.s-list .svc-step .n { margin-bottom: 0; font-size: 1.6rem; letter-spacing: -0.04em; }
/* The step is number + title + paragraph in a two-column grid, so without this the paragraph
   took the NEXT cell - the 76px number column - and rendered as a narrow ribbon with the rest
   of the row empty. It belongs beside the title. */
.svc-steps.s-list .svc-step h3 { grid-column: 2; }
.svc-steps.s-list .svc-step p { grid-column: 3; max-width: 62ch; margin: 0; }

.svc-steps.s-strip { grid-template-columns: repeat(3, 1fr); }
.svc-steps.s-strip .svc-step { border: 0; border-top: 4px solid var(--ink); padding: 22px 18px 0 0; background: transparent; }
.svc-steps.s-strip .svc-step:hover { background: transparent; color: inherit; }
.svc-steps.s-strip .svc-step .n { font-size: 2.3rem; letter-spacing: -0.05em; margin-bottom: 10px; }

@media (max-width: 880px) {
    .svc-hero.h-half .container { grid-template-columns: 1fr; }
    .svc-hero.h-half .container > div:first-child { padding: 122px 24px 44px; }
    .svc-hero.h-half .svc-diagram { padding: 30px 24px; }
    .svc-body.b-bands .svc-section { grid-template-columns: 1fr; gap: 10px; }
    .svc-body.b-lede .svc-section + .svc-section { margin-left: 0; }
    .svc-body.b-alt .svc-section:nth-child(even) { margin-left: 0; }
    .svc-steps.s-strip { grid-template-columns: 1fr; }
}

/* ---------------- polish from the first render pass ----------------
   Three things the screenshots showed: a dead gap between the centred
   hero and its diagram band, a diagram squeezed small in the half hero
   (its inner labels became unreadable), and the type hero reading too
   close to the other white heroes at the fold. */

.svc-hero.h-centred { padding-bottom: 14px; }

.svc-hero.h-half .svc-diagram { padding: 22px; }
.svc-hero.h-half .svc-diagram svg { max-width: 660px; }

/* the type hero gets a dark diagram band, so the page reads as its own shape */
.svc-hero.h-type { padding-bottom: 46px; }
.svc-hero.h-type h1 { max-width: 20ch; }
/* Was an ink band. It made the diagram cell read as a black hole in the middle of a white
   page, so the band is white like the others; the 2px rules and the diagram's own white
   panel keep it a distinct band without the dark fill. */
.svc-hero.h-type + .svc-band { background: var(--white); border-color: var(--ink); }
.svc-hero.h-type + .svc-band svg { background: var(--white); }

/* The pill said "Live demo" on all ten demos, including the six that only reveal
   pre-written rows - a claim the note two lines below it contradicted. Each demo now
   carries what it actually is: "Sample run" for a scripted walk-through, "Try it - runs
   in your browser" for the ones that compute from your input, and "Real market data"
   only for the one fed by an actual feed. This is the honest grey one. */
.demo-head span.sample {
    background: #f1f1f1;
    color: #444;
    border: 2px solid #d5d5d5;
}

@media (prefers-reduced-motion: reduce) {
    .demo-row { transition: none; transform: none; }
    .demo-findings li { animation: none; }
}

/* The step row for the four pages using the `s-list` treatment is number | title | paragraph
   with a fixed 76px and a minmax(190px, 280px) column. On a phone that cannot fit: the
   paragraph was squeezed to a ~65px ribbon and the row measured 417px wide on a 400px
   viewport, so every s-list page scrolled sideways. Below 600px the title and paragraph stack
   beside the number instead. */
@media (max-width: 600px) {
    .svc-steps.s-list .svc-step {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 6px 14px;
    }
    .svc-steps.s-list .svc-step h3 { grid-column: 2; }
    .svc-steps.s-list .svc-step p { grid-column: 2; }
}