/* ==========================================================================
   ColorGuidedChumash.org — stylesheet
   ==========================================================================
   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Header / navigation
   5.  Buttons
   6.  COLOR CODING ENGINE  (the heart of the site)
   7.  Hebrew text rendering
   8.  Hero
   9.  Mode toggle + legend
   10. How it works
   11. Features
   12. Audiences
   13. Ideas for use
   14. Feedback
   15. Support
   16. Closing band
   17. Footer
   18. Utilities, motion & responsive
   ========================================================================== */


/* 1. DESIGN TOKENS ========================================================= */

:root {
    /* --- Product color-coding palette (taken from the seforim themselves) --- */
    --cc-root:            #9c27b0;  /* Verb Shoresh              */
    --cc-noun:            #0055ff;  /* Noun Shoresh              */
    --cc-proper:          #6b6b6b;  /* Proper noun — grey: nothing to translate */
    --cc-pre:             #009900;  /* Prefix (general)          */
    --cc-pre-eytan:       #007777;  /* Prefix — Eytan            */
    --cc-pre-hipuch:      #990033;  /* Prefix — Vav HaHipuch     */
    --cc-suf:             #cc0000;  /* Suffix (general)          */
    --cc-suf-plural:      #e65100;  /* Suffix — plural           */
    --cc-suf-past:        #0000cc;  /* Suffix — past tense       */
    --cc-suf-past-hipuch: #ff6600;  /* Suffix — past + Hipuch    */
    --cc-suf-poss:        #006633;  /* Suffix — possessive       */
    --cc-suf-semichus:    #cc7a00;  /* Suffix — semichus         */
    --cc-suf-verb-object: #a23b2a;  /* Suffix — verb object      */

    /* --- Site chrome. Deliberately distinct from every color above. ------- */
    --ink:            #17161d;
    --ink-soft:       #4b4956;
    --ink-faint:      #74707f;
    --parchment:      #fbf8f2;
    --parchment-deep: #f3ede1;
    --surface:        #ffffff;
    --line:           #e6ded0;
    --line-soft:      #f0e9dc;
    --navy:           #1f3a5f;
    --navy-deep:      #16294a;
    --navy-tint:      #eef2f8;

    /* --- Typography --- */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-hebrew:  "Noto Serif Hebrew", "David", "Times New Roman", serif;

    /* --- Spacing & shape --- */
    --gutter:      clamp(1.25rem, 4vw, 3rem);
    --section-y:   clamp(4rem, 9vw, 7.5rem);
    --radius:      14px;
    --radius-lg:   22px;
    --shadow-sm:   0 1px 2px rgba(23, 22, 29, .05),
                   0 4px 14px rgba(23, 22, 29, .05);
    --shadow-md:   0 2px 6px rgba(23, 22, 29, .06),
                   0 18px 44px rgba(23, 22, 29, .09);

    --max-width:   1180px;
}


/* 2. RESET & BASE ========================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--parchment);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); font-weight: 600; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

img { max-width: 100%; display: block; }

ul { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: .5rem; }

:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--navy);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }


/* 3. LAYOUT PRIMITIVES ===================================================== */

.wrap {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint  { background: var(--parchment-deep); }
.section--paper { background: var(--surface); }

.section__head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--navy-tint);
    padding: .35rem .75rem;
    border-radius: 100px;
    margin-bottom: 1.15rem;
}

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 42rem;
}
.section__head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

/* The features grid runs three across, but the interlinear cards need room for
   a whole pasuk, so they take half a row each. Six tracks make both possible:
   an ordinary card spans two, a wide one spans three. Below this width the
   auto-fit fallback above takes over and everything stacks. */
@media (min-width: 62rem) {
    .grid--features { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .grid--features > .card { grid-column: span 2; }
    .grid--features > .feature--wide { grid-column: span 3; }
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 2.6vw, 2rem);
    box-shadow: var(--shadow-sm);
}
.section--paper .card { background: var(--parchment); }


/* 4. HEADER / NAVIGATION =================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 248, 242, .88);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { color: var(--ink); }

/* Brand mark: the color system in miniature */
.brand__mark {
    display: inline-flex;
    gap: 2px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.brand__mark i {
    display: block;
    width: 4px;
    height: 15px;
    border-radius: 2px;
}
.brand__mark i:nth-child(1) { background: var(--cc-pre); }
.brand__mark i:nth-child(2) { background: var(--cc-root); }
.brand__mark i:nth-child(3) { background: var(--cc-suf); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__list {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__list a {
    font-size: .94rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.nav__list a:hover { color: var(--navy); }

.nav-toggle {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .55rem .8rem;
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    cursor: pointer;
}


/* 5. BUTTONS =============================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.55rem;
    border-radius: 100px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); color: #fff; }

.btn--ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--navy); }

.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: #f2f5fa; color: var(--navy-deep); }

.btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn--sm { padding: .6rem 1.15rem; font-size: .92rem; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    align-items: center;
}


/* 6. COLOR CODING ENGINE =================================================== */
/*
   Every colored piece of a word reads its color from a CSS custom property.
   Switching mode simply redefines those properties on the container, so the
   text never reflows — only the colors cross-fade. This is what makes the
   Plain -> Simple -> Advanced transition feel like the page is teaching.
*/

.cc {
    /* PLAIN — the "before" state. Everything is black. */
    --c-root:            var(--ink);
    --c-noun:            var(--ink);
    --c-proper:          var(--ink);
    --c-pre:             var(--ink);
    --c-pre-eytan:       var(--ink);
    --c-pre-hipuch:      var(--ink);
    --c-suf:             var(--ink);
    --c-suf-plural:      var(--ink);
    --c-suf-past:        var(--ink);
    --c-suf-past-hipuch: var(--ink);
    --c-suf-poss:        var(--ink);
    --c-suf-semichus:    var(--ink);
    --c-suf-verb-object: var(--ink);
}

/* SIMPLE — one color for all prefixes, one for all suffixes,
   plus verb Shoresh, noun Shoresh and proper nouns. */
.cc[data-mode="simple"] {
    --c-root:            var(--cc-root);
    --c-noun:            var(--cc-noun);
    --c-proper:          var(--cc-proper);
    --c-pre:             var(--cc-pre);
    --c-pre-eytan:       var(--cc-pre);
    --c-pre-hipuch:      var(--cc-pre);
    --c-suf:             var(--cc-suf);
    --c-suf-plural:      var(--cc-suf);
    --c-suf-past:        var(--cc-suf);
    --c-suf-past-hipuch: var(--cc-suf);
    --c-suf-poss:        var(--cc-suf);
    --c-suf-semichus:    var(--cc-suf);
    --c-suf-verb-object: var(--cc-suf);
}

/* ADVANCED — every prefix and suffix type gets its own color. */
.cc[data-mode="advanced"] {
    --c-root:            var(--cc-root);
    --c-noun:            var(--cc-noun);
    --c-proper:          var(--cc-proper);
    --c-pre:             var(--cc-pre);
    --c-pre-eytan:       var(--cc-pre-eytan);
    --c-pre-hipuch:      var(--cc-pre-hipuch);
    --c-suf:             var(--cc-suf);
    --c-suf-plural:      var(--cc-suf-plural);
    --c-suf-past:        var(--cc-suf-past);
    --c-suf-past-hipuch: var(--cc-suf-past-hipuch);
    --c-suf-poss:        var(--cc-suf-poss);
    --c-suf-semichus:    var(--cc-suf-semichus);
    --c-suf-verb-object: var(--cc-suf-verb-object);
}

/* Order matters below: later rules win at equal specificity, which is how
   `class="body noun proper"` resolves to the proper-noun color. */
.cc .body             { color: var(--ink); }
.cc .noun             { color: var(--c-noun); }
.cc .proper           { color: var(--c-proper); }
.cc .root             { color: var(--c-root); }
.cc .pre              { color: var(--c-pre); }
.cc .pre-eytan        { color: var(--c-pre-eytan); }
.cc .pre-hipuch       { color: var(--c-pre-hipuch); }
.cc .suf              { color: var(--c-suf); }
.cc .suf-plural       { color: var(--c-suf-plural); }
.cc .suf-past         { color: var(--c-suf-past); }
.cc .suf-past-hipuch  { color: var(--c-suf-past-hipuch); }
.cc .suf-poss         { color: var(--c-suf-poss); }
.cc .suf-semichus     { color: var(--c-suf-semichus); }
.cc .suf-verb-object  { color: var(--c-suf-verb-object); }

.cc .heb-word span { transition: color .4s ease; }

/* Optional proper-noun highlighting can be switched off independently. */
.cc.hide-proper .proper { color: var(--ink); }


/* 7. HEBREW TEXT RENDERING ================================================= */

.hebrew {
    direction: rtl;
    text-align: right;
    font-family: var(--font-hebrew);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.95;
}

.word-container {
    display: inline-block;
    position: relative;
    margin: 0 .1em;
}

.heb-word { display: inline-block; }

/* The Shoresh printed above the word and the literal translation below it are
   part of the interlinear view — hidden everywhere else. */
.root-above,
.translation { display: none; }

.interlinear .word-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 .22em 1em;
    vertical-align: top;
}
.interlinear .root-above {
    display: block;
    order: -1;
    /* Never let the Shoresh shrink below a legible size. */
    font-size: max(.8rem, .42em);
    line-height: 1.5;
    letter-spacing: .04em;
    min-height: 1.5em;
}
.interlinear .root-above.verb-root { color: var(--c-root); }
.interlinear .root-above.noun-root { color: var(--c-noun); }
.interlinear .root-above.proper    { color: var(--c-proper); }
.interlinear .translation {
    display: block;
    direction: ltr;
    font-family: var(--font-body);
    font-size: max(.72rem, .3em);
    line-height: 1.35;
    color: var(--ink-faint);
    margin-top: .4em;
    max-width: 7.5em;
    text-align: center;
}

/* Either interlinear layer can be switched off on its own. */
.interlinear.hide-roots .root-above,
.interlinear.hide-translation .translation { display: none; }


/* 8. HERO ================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
    background:
        radial-gradient(1100px 520px at 78% -12%, #fff 0%, rgba(255,255,255,0) 62%),
        var(--parchment);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(2.25rem, 4.5vw, 4rem);
    align-items: center;
}

.hero__copy { max-width: 34rem; }

.hero h1 { margin-bottom: .55rem; }

.hero__sub {
    font-size: clamp(1.08rem, 1.65vw, 1.28rem);
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 1.85rem;
}

.hero .btn-row { margin-bottom: 1.5rem; }

.trust-line {
    font-size: .875rem;
    color: var(--ink-faint);
    margin: 0;
}
.trust-line span { white-space: nowrap; }


/* --- The live demo panel: centerpiece of the hero --- */

.demo {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(1.35rem, 2.6vw, 2rem);
}

.demo__caption {
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.demo__stage {
    background: var(--parchment);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1rem, 2.2vw, 1.5rem);
    margin-bottom: 1.1rem;
}

.demo__pasuk { font-size: clamp(1.55rem, 3.4vw, 2.35rem); }

.demo__ref {
    direction: ltr;
    text-align: center;
    font-family: var(--font-body);
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
    margin: 1rem 0 0;
}


/* 9. MODE TOGGLE + LEGEND ================================================== */

.mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--parchment-deep);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 1.15rem;
}

.mode-toggle__btn {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 100px;
    padding: .6rem .5rem;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mode-toggle__btn:hover { color: var(--ink); }
.mode-toggle__btn[aria-pressed="true"] {
    background: var(--surface);
    color: var(--navy);
    box-shadow: var(--shadow-sm);
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .3rem .7rem .3rem .5rem;
    background: var(--parchment);
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Never rely on color alone: every swatch carries a written label. */
.legend__swatch {
    width: .7rem;
    height: .7rem;
    border-radius: 3px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.legend__swatch--plain           { background: var(--ink); }
.legend__swatch--root            { background: var(--cc-root); }
.legend__swatch--noun            { background: var(--cc-noun); }
.legend__swatch--proper          { background: var(--cc-proper); }
.legend__swatch--pre             { background: var(--cc-pre); }
.legend__swatch--pre-eytan       { background: var(--cc-pre-eytan); }
.legend__swatch--pre-hipuch      { background: var(--cc-pre-hipuch); }
.legend__swatch--suf             { background: var(--cc-suf); }
.legend__swatch--suf-plural      { background: var(--cc-suf-plural); }
.legend__swatch--suf-past        { background: var(--cc-suf-past); }
.legend__swatch--suf-past-hipuch { background: var(--cc-suf-past-hipuch); }
.legend__swatch--suf-poss        { background: var(--cc-suf-poss); }
.legend__swatch--suf-semichus    { background: var(--cc-suf-semichus); }
.legend__swatch--suf-verb-object { background: var(--cc-suf-verb-object); }

/* --- Editable swatches: a real color picker dressed as a legend chip ----- */

.legend__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: .95rem;
    height: .95rem;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    /* The dashed ring is the affordance: it reads as "you can edit this". */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2),
                0 0 0 2px var(--parchment),
                0 0 0 3px var(--line);
    transition: box-shadow .18s ease, transform .18s ease;
}
.legend__input::-webkit-color-swatch-wrapper { padding: 0; }
.legend__input::-webkit-color-swatch { border: 0; border-radius: 4px; }
.legend__input::-moz-color-swatch { border: 0; border-radius: 4px; }

.legend__item:hover .legend__input,
.legend__input:focus-visible {
    transform: scale(1.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2),
                0 0 0 2px var(--parchment),
                0 0 0 3px var(--navy);
}

.legend__item:has(.legend__input) { cursor: pointer; }
.legend__item:has(.legend__input):hover {
    border-color: var(--line);
    background: var(--surface);
}

/* One-time nudge so visitors notice the swatches are interactive. */
@keyframes swatch-nudge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.28); }
}
.demo.is-hinting .legend[data-for="advanced"] .legend__input {
    animation: swatch-nudge .75s ease 2;
}

/* --- Palette bar: the "make it yours" hint + reset ---------------------- */

.palette-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .9rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--line);
}
.demo[data-mode="simple"]   .palette-bar,
.demo[data-mode="advanced"] .palette-bar { display: flex; }

.palette-bar__hint {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink-soft);
}

/* A miniature rainbow pip that mirrors the product's own palette. */
.palette-bar__pip {
    width: .78rem;
    height: .78rem;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(
        var(--cc-root) 0deg 72deg,
        var(--cc-pre) 72deg 144deg,
        var(--cc-suf) 144deg 216deg,
        var(--cc-noun) 216deg 288deg,
        var(--cc-suf-semichus) 288deg 360deg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.palette-bar__reset {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--parchment);
    border-radius: 100px;
    padding: .35rem .85rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.palette-bar__reset:hover {
    border-color: var(--navy);
    color: var(--navy);
    background: var(--surface);
}

.legend[data-for] { display: none; }
.demo[data-mode="plain"]    .legend[data-for="plain"],
.demo[data-mode="simple"]   .legend[data-for="simple"],
.demo[data-mode="advanced"] .legend[data-for="advanced"] { display: flex; }

.legend__note {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-faint);
}


/* 10. HOW IT WORKS ========================================================= */

.steps {
    counter-reset: step;
    list-style: none;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    padding: 0;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.steps li {
    counter-increment: step;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-top: 1.15rem;
    border-top: 3px solid var(--line);
}
.steps li::before {
    content: counter(step);
    display: block;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .35rem;
}
.steps h3 { margin-bottom: .35rem; }
.steps p { font-size: .97rem; margin: 0 0 1.15rem; }

/* Illustration sitting under a step. It follows the text immediately so all
   three line up right under their paragraphs; any slack in the row is left at
   the bottom of the column rather than opening a gap under the words. */
.step__shot,
.step__panel {
    width: 100%;
    margin: 0;
}
.step__shot {
    justify-self: stretch;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.step__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius) - .35rem);
}

/* The Before / After panels live inside steps 1 and 2, so they are narrower
   and lighter than a standalone card. Specificity has to clear the
   .section--paper .compare__panel rule further down. */
.steps li .step__panel {
    padding: .9rem 1rem 1rem;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: none;
}
.step__panel .compare__label { margin-bottom: .5rem; }
.step__panel .hebrew {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    margin: 0;
}

.compare__panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2.4vw, 1.85rem);
    box-shadow: var(--shadow-sm);
}
.section--paper .compare__panel { background: var(--parchment); }

.compare__label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .9rem;
}

.compare__caption {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink-soft);
    margin: 0;
}


/* 11. FEATURES ============================================================= */

.feature__title { display: flex; align-items: baseline; gap: .6rem; }

.feature__kicker {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: .5rem;
}

.feature h3 { margin-bottom: .5rem; }
.feature p { font-size: .97rem; }

/* Live mini-samples inside feature cards — real markup, not screenshots. */
.sample {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-top: 1.15rem;
}
.section--paper .sample { background: var(--surface); }
.sample .hebrew { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

.sample__note {
    direction: ltr;
    font-size: .8rem;
    color: var(--ink-faint);
    margin: .6rem 0 0;
    text-align: left;
}

/* Buttons that strip the Shoresh / translation layer out of a live sample. */
.layer-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    direction: ltr;
    margin-top: .9rem;
}
.layer-toggle__btn {
    appearance: none;
    flex: 1 1 9rem;
    border: 1px solid var(--line);
    background: var(--parchment-deep);
    border-radius: 100px;
    padding: .5rem .9rem;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.layer-toggle__btn:hover {
    color: var(--ink);
    border-color: var(--navy);
}
.layer-toggle__btn[aria-pressed="true"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* The palette sample recolors itself on a loop, so it carries the point on
   its own and is set larger than the other mini-samples. */
#palette-sample {
    display: grid;
    place-items: center;
    padding: 1.4rem 1.1rem;
}
#palette-sample .hebrew {
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1.9;
    margin: 0;
}

/* Placeholder slots for real application screenshots. */
.shot {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 13rem;
    padding: 1.5rem;
    /* Full shorthand, not margin-top: a <figure> carries a UA default
       margin-inline of 40px which would shove the box out of its card. */
    margin: 1.15rem 0 0;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--parchment-deep);
    color: var(--ink-faint);
    font-size: .85rem;
}
.shot img { border-radius: var(--radius); }
.shot__hint { max-width: 22rem; margin: 0; }
.shot__hint strong { color: var(--ink-soft); display: block; margin-bottom: .3rem; }

/* Once a real screenshot is in place the dashed "empty slot" treatment goes
   away and the image sits on a plain card instead. */
.shot--filled {
    display: block;
    width: 100%;
    justify-self: stretch;
    min-height: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    background: #fff;
}
.shot--filled img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 22rem;
}
.shot__caption {
    margin: .9rem 0 0;
    text-align: center;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-faint);
}
.hebrew-inline {
    font-family: var(--font-hebrew);
    font-size: 1.05em;
    font-weight: 400;
    color: var(--ink-soft);
}


/* 12. AUDIENCES ============================================================ */

.audience { display: flex; flex-direction: column; }

.audience__who {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: .6rem;
}

.audience h3 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    margin-bottom: .65rem;
}

.audience ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.audience li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .95rem;
}
.audience li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .55rem;
    height: .55rem;
    border-radius: 2px;
    background: var(--navy);
}


/* 13. IDEAS FOR USE ======================================================== */

.ideas { display: grid; gap: 1rem; }

.idea {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.section--paper .idea { background: var(--parchment); }

.idea > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.idea > summary::-webkit-details-marker { display: none; }
.idea > summary::after {
    content: "+";
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--navy);
    flex: none;
    transition: transform .2s ease;
}
.idea[open] > summary::after { transform: rotate(45deg); }
.idea__body {
    padding: 0 1.35rem 1.35rem;
    font-size: .97rem;
}


/* 14. FEEDBACK ============================================================= */

.feedback__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .4rem;
}

.field__optional { font-weight: 400; color: var(--ink-faint); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    font-size: .97rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy); }

.form-note {
    font-size: .84rem;
    color: var(--ink-faint);
    margin-top: .9rem;
}

.form-status {
    margin-top: .9rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--navy);
}
.form-status:empty { margin-top: 0; }


/* 15. SUPPORT ============================================================== */

.support__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.support__card h3 { margin-bottom: .5rem; }
.support__card p  { font-size: .97rem; }
.support__card .btn { margin-top: .85rem; }


/* 16. CLOSING BAND ========================================================= */

.closing {
    background: var(--navy);
    color: rgba(255, 255, 255, .82);
    text-align: center;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.closing h2 { color: #fff; }
.closing p { max-width: 34rem; margin-inline: auto; }
.closing .btn-row { justify-content: center; margin-top: 1.85rem; }


/* 17. FOOTER =============================================================== */

.site-footer {
    background: var(--parchment-deep);
    border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    font-size: .9rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.site-footer h4 { margin-bottom: .6rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--navy); text-decoration: underline; }

.site-footer__about { margin-top: .75rem; max-width: 22rem; }

.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .85rem;
}
.site-footer__base p { margin: 0; }


/* 18. UTILITIES, MOTION & RESPONSIVE ======================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

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

    /* On phones the demo must sit directly under the subhead, above the CTAs. */
    .hero__copy { display: contents; }
    .hero__text  { order: 1; }
    .hero__demo  { order: 2; margin-block: 1.75rem; }
    .hero__cta   { order: 3; }
}

@media (max-width: 780px) {
    .nav__list {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        gap: 0;
        padding: .5rem var(--gutter) 1.25rem;
        background: var(--parchment);
        border-bottom: 1px solid var(--line);
    }
    .nav__list.is-open { display: flex; }
    .nav__list li { margin: 0; }
    .nav__list a { display: block; padding: .75rem 0; }
    .nav-toggle { display: inline-block; }
    .nav .btn { display: none; }
    .site-header__inner { position: relative; }
}

@media (max-width: 540px) {
    .mode-toggle__btn { font-size: .85rem; padding: .55rem .3rem; }
    .btn { width: 100%; }
    .btn-row { flex-direction: column; align-items: stretch; }
}

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

@media print {
    .site-header, .mode-toggle, .closing, .btn { display: none !important; }
    body { background: #fff; }
}


/* 19. GET STARTED PAGE ===================================================== */
/*
   Everything below belongs to get-started.html: the page hero, the interactive
   tour widget (a working model of the real toolbar) and the "What's new"
   cards. It reuses the color engine from section 6, so the model pasuk
   recolors through exactly the same custom properties as the home page demo.
*/

/* --- Page hero ----------------------------------------------------------- */

.page-hero {
    padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem);
    background:
        radial-gradient(900px 420px at 70% -20%, #fff 0%, rgba(255,255,255,0) 60%),
        var(--parchment);
    border-bottom: 1px solid var(--line-soft);
}

.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: .5rem 0 0;
}

.page-hero__lede { max-width: 46ch; }

.page-hero .btn-row { margin-top: 1.75rem; }


/* --- Tour layout --------------------------------------------------------- */

.tour {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    align-items: start;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.tour__stage { position: relative; }

.tour__hint {
    margin: .9rem 0 0;
    font-size: .88rem;
    color: var(--ink-faint);
    text-align: center;
}


/* --- The model application window ---------------------------------------- */

.appwin {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Mock toolbar -- mirrors the pill toolbar in the real sefer. */
.appbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .7rem .85rem;
    background: linear-gradient(180deg, #fdfcfa 0%, #f6f1e8 100%);
    border-bottom: 1px solid var(--line);
}

.appbar__spacer { flex: 1 1 auto; }

.appbar__chip,
.appbar__icon {
    position: relative;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .78rem;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: .4rem .72rem;
    cursor: pointer;
    color: #fff;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.appbar__chip:hover,
.appbar__icon:hover { filter: brightness(1.07); }

.appbar__chip--lang        { background: #e2e8f0; color: #334155; cursor: default; }
.appbar__chip--sefer       { background: var(--navy); }
.appbar__chip--perek       { background: #9c27b0; }
.appbar__chip--pasuk       { background: #2563eb; }
.appbar__chip--edition     { background: #0f766e; }
.appbar__chip--layers      { background: #b45309; }
.appbar__chip--interactive { background: #7c3aed; }

.appbar__icon {
    background: #fff;
    color: var(--ink-soft);
    border-color: var(--line);
    font-size: .95rem;
    padding: .34rem .58rem;
}

/* Little dropdown arrow on the pills that really are dropdowns. */
.appbar__caret {
    display: inline-block;
    margin-left: .25rem;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

/* The active control in the tour: a ring that keeps breathing so the eye
   goes straight to it. */
.appbar__chip.is-active,
.appbar__icon.is-active {
    box-shadow: 0 0 0 3px var(--parchment), 0 0 0 6px var(--navy);
    animation: tour-pulse 1.9s ease-in-out infinite;
    z-index: 2;
}

@keyframes tour-pulse {
    0%, 100% { transform: translateY(0)     scale(1); }
    50%      { transform: translateY(-2px)  scale(1.05); }
}

/* Everything that is *not* the current target steps back. */
.tour.is-guiding .appbar__chip:not(.is-active),
.tour.is-guiding .appbar__icon:not(.is-active) { opacity: .5; }


/* --- The page inside the model window ------------------------------------ */

.appwin__page {
    position: relative;
    padding: clamp(1.1rem, 2.6vw, 1.9rem);
    background:
        linear-gradient(180deg, #fff 0%, var(--parchment) 130%);
    min-height: 260px;
}

.appwin__ref {
    margin: 0 0 .6rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.appwin__text .hebrew { font-size: clamp(1.15rem, 2.5vw, 1.6rem); }

/* Interactive mode: the page is plain until a word is chosen. */
.appwin__text.is-interactive .heb-word span { color: var(--ink); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .noun            { color: var(--cc-noun); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .root            { color: var(--cc-root); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .pre             { color: var(--cc-pre); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .suf             { color: var(--cc-suf); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .suf-plural      { color: var(--cc-suf-plural); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .suf-past        { color: var(--cc-suf-past); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .suf-poss        { color: var(--cc-suf-poss); }
.appwin__text.is-interactive .word-container.is-picked .heb-word .suf-semichus    { color: var(--cc-suf-semichus); }

.appwin__text.is-interactive .word-container.is-picked .heb-word {
    background: rgba(156, 39, 176, .1);
    border-radius: 6px;
}

/* Text-effect preview inside the tour. */
.appwin__text.fx-outline .suf,
.appwin__text.fx-outline .suf-plural,
.appwin__text.fx-outline .suf-past,
.appwin__text.fx-outline .suf-poss,
.appwin__text.fx-outline .suf-semichus {
    -webkit-text-stroke: .9px var(--ink);
    paint-order: stroke fill;
}

.appwin__text.fx-outline .root {
    text-shadow: 0 0 10px rgba(255, 192, 0, .95);
}

/* Settings drawer slides in from the side on its step. */
.appwin__drawer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: min(230px, 62%);
    padding: .9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(14px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.tour[data-fx="settings"] .appwin__drawer {
    opacity: 1;
    transform: translateX(0);
}

.appwin__drawer-title {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .6rem;
}

.appwin__drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem;
}

.appwin__drawer-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--ink-soft);
}

.appwin__drawer-list .dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.dot--root { background: var(--cc-root); }
.dot--noun { background: var(--cc-noun); }
.dot--pre  { background: var(--cc-pre); }
.dot--suf  { background: var(--cc-suf); }

.appwin__drawer-note {
    margin: .75rem 0 0;
    font-size: .74rem;
    color: var(--ink-faint);
}


/* --- The floating callout label ------------------------------------------ */

.tour__label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    padding: .35rem .7rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--navy-deep);
    border-radius: 50px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease, top .3s ease, left .3s ease;
}

.tour__label.is-shown { opacity: 1; transform: translateY(0); }

/* Small pointer joining the label to the control it names. */
.tour__label::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 14px;
    border: 5px solid transparent;
    border-top: 0;
    border-bottom-color: var(--navy-deep);
}


/* --- Step list ----------------------------------------------------------- */

.tour__panel {
    position: sticky;
    top: 92px;
}

.tour__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tour;
}

.tour__step {
    counter-increment: tour;
    position: relative;
    padding: .9rem 1rem .9rem 3.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
    opacity: .55;
}

.tour__step::before {
    content: counter(tour);
    position: absolute;
    left: .85rem;
    top: .95rem;
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink-faint);
    background: var(--parchment-deep);
    transition: background .25s ease, color .25s ease;
}

.tour__step h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
}

.tour__step p {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: var(--ink-soft);
    /* Collapsed until the step is the active one. */
    display: none;
}

.tour__step:hover { opacity: .85; }

.tour__step.is-active {
    opacity: 1;
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.tour__step.is-active::before {
    background: var(--navy);
    color: #fff;
}

.tour__step.is-active p { display: block; }


/* --- Tour controls ------------------------------------------------------- */

.tour__controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.1rem;
    padding-left: 1rem;
}

.tour__dots {
    display: flex;
    gap: .35rem;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
}

.tour__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.tour__dot:hover { background: var(--ink-faint); }

.tour__dot.is-active {
    background: var(--navy);
    transform: scale(1.35);
}


/* --- What's new: release cards ------------------------------------------- */

.release {
    position: relative;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.4rem, 3vw, 2.25rem);
}

.release__tag {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .28rem .7rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--navy);
    border-radius: 50px;
}

.release__tag--alt { background: var(--cc-pre); }

.release h3 {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.release__foot,
.release__note {
    margin: 1.1rem 0 0;
    font-size: .9rem;
    color: var(--ink-soft);
}

.release__foot {
    font-size: calc(.9rem + 2pt);
    font-weight: 700;
}

.release__note {
    padding: .8rem 1rem;
    background: var(--navy-tint);
    border-radius: var(--radius);
}

.release__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.release__list li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    font-weight: 600;
    font-size: .92rem;
    background: var(--parchment-deep);
    border-radius: 50px;
}

.release__check {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    background: var(--cc-pre);
    position: relative;
}

.release__check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* --- What's new: effect samples ------------------------------------------ */

.fx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}

.fx-card {
    padding: 1.1rem;
    background: var(--parchment);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.fx-card h4 {
    margin: 0 0 .35rem;
    font-size: .98rem;
}

.fx-card__note {
    margin: 0;
    font-size: .84rem;
    color: var(--ink-soft);
}

.fx-sample {
    margin: .9rem 0 0;
    padding: .75rem .5rem;
    text-align: center;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    background: var(--surface);
    border-radius: var(--radius);
}

/* Hollow letters: white fill, black outline, ready to be colored in. */
.fx-sample--fill .heb-word span {
    color: #fff !important;
    -webkit-text-stroke: 1.1px #111;
    paint-order: stroke fill;
}

/* One suffix color, told apart by the outline instead. */
.fx-sample--vary .suf-plural,
.fx-sample--vary .suf-past,
.fx-sample--vary .suf-semichus { color: var(--cc-suf) !important; }

.fx-sample--vary .suf-plural {
    -webkit-text-stroke: 1.1px #0000cc;
    paint-order: stroke fill;
}
.fx-sample--vary .suf-semichus {
    -webkit-text-stroke: 1.1px #006633;
    paint-order: stroke fill;
}
.fx-sample--vary .suf-past {
    -webkit-text-stroke: 1.1px #ff6600;
    paint-order: stroke fill;
}

/* Shadow on the prefix, glow on the Shoresh. */
.fx-sample--glow .pre  { text-shadow: 2px 3px 0 rgba(128,128,128,.55); }
.fx-sample--glow .root { text-shadow: 0 0 12px rgba(255, 192, 0, 1); }

/* Everything fades back except the word being taught. */
.fx-sample--focus .word-container { opacity: .28; transition: opacity .4s ease; }
.fx-sample--focus .word-container.is-focus {
    opacity: 1;
    text-shadow: 0 0 14px rgba(255, 192, 0, .8);
}


/* --- Get Started responsive ---------------------------------------------- */

@media (max-width: 900px) {
    .tour { grid-template-columns: minmax(0, 1fr); }
    .tour__panel { position: static; }
    .tour__controls { padding-left: 0; }
    .appwin__drawer { width: min(230px, 80%); }
}

@media (max-width: 540px) {
    .appbar { gap: .3rem; padding: .6rem; }
    .appbar__chip, .appbar__icon { font-size: .7rem; padding: .34rem .55rem; }
    .appbar__spacer { display: none; }
    .tour__step { padding-left: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .appbar__chip.is-active,
    .appbar__icon.is-active { animation: none; }
}


/* --- Faithful reader model (Get Started tour) --------------------------- */
/* This mirrors the live reader's white sticky bar, its source-order
   controls, two small menus, and the settings drawer. */

.reader-model {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe1e8;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .15);
}

.reader-model__progress {
    height: 4px;
    background: linear-gradient(90deg, #9c27b0 0 35%, #0055ff 35% 70%, #009900 70% 100%);
}

.reader-model__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 58px;
    padding: .5rem .7rem;
    background: #fff;
    border-bottom: 1px solid #dbe1e8;
    font-family: Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.reader-model__left,
.reader-model__right {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.reader-model__brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-right: .25rem;
    color: #17161d;
    font-size: .92rem;
    font-weight: 700;
}

.reader-model__mark {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 8px;
}

.reader-model__mark i {
    display: block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.reader-model__mark i:nth-child(1) { background: var(--cc-pre); }
.reader-model__mark i:nth-child(2) { background: var(--cc-root); }
.reader-model__mark i:nth-child(3) { background: var(--cc-suf); }

.reader-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-height: 30px;
    padding: .28rem .56rem;
    border: 0;
    border-radius: 7px;
    font-family: Inter, system-ui, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    color: #334155;
    background: #f1f5f9;
    cursor: pointer;
    transition: opacity .2s ease, box-shadow .2s ease, transform .2s ease;
}

.reader-control b { font-size: .58rem; }

.reader-control--settings {
    padding-inline: .44rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    font-size: .85rem;
}

.reader-control--settings span { font-size: .68rem; }
.reader-control--mode { color: #713f12; background: #fde047; }
.reader-control--layers { color: #fff; background: #7c3aed; }

.reader-control--edition {
    color: #111827;
    background: #fff;
    border: 1px solid #dbe1e8;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.reader-control--parsha { color: #fff; background: #059669; }
.reader-control--perek { color: #fff; background: #9c27b0; }
.reader-control--pasuk { color: #fff; background: #2563eb; }
.reader-control--sefer { color: #6b5428; background: #f7edce; }
.reader-control--language { color: #2563eb; background: #e8efff; cursor: default; }

.reader-tier {
    display: inline-flex;
    align-items: end;
    gap: 2px;
    height: 12px;
}

.reader-tier i {
    display: block;
    width: 3px;
    border-radius: 1px;
    background: #1f2937;
}

.reader-tier i:nth-child(1) { height: 5px; }
.reader-tier i:nth-child(2) { height: 8px; }
.reader-tier i:nth-child(3) { height: 11px; }

.reader-popover-wrap { position: relative; }

.reader-popover {
    position: absolute;
    z-index: 4;
    top: calc(100% + 8px);
    min-width: 190px;
    padding: .45rem;
    background: #fff;
    border: 1px solid #dbe1e8;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.reader-popover-wrap:has(.reader-control--layers) .reader-popover,
.reader-popover-wrap:has(.reader-control--edition) .reader-popover { left: 0; }
.reader-popover-wrap:has(.reader-control--sefer) .reader-popover { right: 0; }

.reader-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.reader-popover strong {
    display: block;
    padding: .35rem .5rem .55rem;
    color: #64748b;
    font-size: .64rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.reader-popover button,
.reader-popover label {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .55rem;
    padding: .55rem .5rem;
    color: #334155;
    background: none;
    border: 0;
    border-radius: 5px;
    font-family: Inter, system-ui, sans-serif;
    font-size: .74rem;
    text-align: left;
}

.reader-popover button { cursor: pointer; }
.reader-popover button:hover { background: #f1f5f9; }
.reader-popover button > span:nth-child(2) { flex: 1; }
.reader-popover button b,
.reader-popover button small { display: block; }
.reader-popover button small { margin-top: .14rem; color: #64748b; font-size: .64rem; font-weight: 500; }
.reader-popover button em { margin-left: auto; color: #059669; font-style: normal; opacity: 0; }
.reader-popover button.is-current { background: #eef2f8; }
.reader-popover button.is-current em { opacity: 1; }
.reader-popover--sefer button { justify-content: space-between; direction: rtl; }
.reader-popover--sefer button small { direction: ltr; margin: 0; }
.reader-popover--layers label { cursor: pointer; }
.reader-popover--layers input { accent-color: #7c3aed; }
.reader-popover--layers input:disabled + span { color: #94a3b8; }

/* The one ring used in the tour is the only decoration added to the reader UI. */
.reader-control.is-active {
    z-index: 5;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1f3a5f;
    animation: tour-pulse 1.9s ease-in-out infinite;
}

.tour.is-guiding .reader-control:not(.is-active) { opacity: .48; }

.reader-model__page {
    position: relative;
    min-height: 275px;
    padding: clamp(1.1rem, 2.6vw, 1.9rem);
    background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
}

/* The actual side drawer is flush to the reader's right edge, with three tabs. */
.reader-drawer {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(315px, 74%);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #dbe1e8;
    box-shadow: -12px 0 24px rgba(15, 23, 42, .14);
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.tour[data-fx="settings"] .reader-drawer,
.tour[data-fx="outline"] .reader-drawer { opacity: 1; transform: translateX(0); }

.reader-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem .9rem;
    color: #1e293b;
    border-bottom: 1px solid #dbe1e8;
    font-size: .74rem;
}

.reader-drawer__tabs { display: flex; border-bottom: 1px solid #dbe1e8; }

.reader-drawer__tabs button {
    flex: 1;
    padding: .6rem .25rem;
    color: #64748b;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: .65rem;
    font-weight: 700;
}

.reader-drawer__tabs button.is-active { color: #7c3aed; border-bottom-color: #7c3aed; }
.reader-drawer__body { padding: .75rem; overflow: hidden; }

.reader-color-control {
    display: grid;
    grid-template-columns: 1fr 84px 24px;
    gap: .35rem;
    align-items: center;
    padding: .42rem 0;
    border-bottom: 1px solid #edf0f4;
    color: #334155;
    font-size: .68rem;
    font-weight: 700;
}

.reader-color-control select,
.reader-color-control button,
.reader-effect-control button {
    min-height: 24px;
    border: 1px solid #dbe1e8;
    border-radius: 4px;
    color: #334155;
    background: #fff;
    font-size: .62rem;
}

.reader-effect-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .7rem;
    color: #334155;
    font-size: .64rem;
}

.reader-effect-control b { width: 100%; color: #64748b; letter-spacing: .06em; text-transform: uppercase; }
.reader-effect-control button { width: 25px; font-weight: 700; }
.reader-outline-control { color: #111 !important; box-shadow: inset 0 0 0 1px #111; }
.reader-effect-control small { width: 100%; color: #64748b; }

@media (max-width: 900px) {
    .reader-model__bar { gap: .25rem; padding: .42rem; }
    .reader-model__left, .reader-model__right { gap: .22rem; }
    .reader-model__brand { margin: 0; font-size: 0; }
    .reader-model__mark { padding: 3px; }
    .reader-model__mark i { width: 3px; height: 13px; }
    .reader-control { min-height: 25px; padding: .22rem .36rem; font-size: .58rem; }
    .reader-control--settings { font-size: .68rem; }
    .reader-control--edition { text-transform: none; letter-spacing: 0; }
    .reader-edition-label { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    .reader-tier { height: 10px; }
    .reader-tier i:nth-child(1) { height: 4px; }
    .reader-tier i:nth-child(2) { height: 6px; }
    .reader-tier i:nth-child(3) { height: 9px; }
    .reader-popover--sefer { right: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reader-control.is-active { animation: none; }
}


/* --- Full-width reader stage -------------------------------------------- */
/* The model needs the width of a real reader toolbar. The tour directions
   therefore live below it as a short, scannable step rail rather than taking
   a third of the available screen from the model. */

.tour {
    display: block;
    max-width: none;
}

.tour__stage { width: 100%; }

.reader-model {
    width: 100%;
    border-radius: 12px;
}

.reader-model__bar {
    min-height: 72px;
    padding: .8rem 1rem;
    flex-direction: column;
    align-items: stretch;
}

.reader-model__left,
.reader-model__right {
    width: 100%;
    gap: .55rem;
}

.reader-model__right { justify-content: flex-end; }

/* Place the right-side toolbar exactly as it appears in the reader: English
    at the far right, then Sefer, Parsha, Perek and Pasuk moving left. Hebrew
    text remains RTL inside its own control; flex placement remains explicit. */
.reader-model__right { direction: ltr; }
.reader-model__right .reader-control--pasuk { order: 1; direction: rtl; }
.reader-model__right .reader-control--perek { order: 2; direction: rtl; }
.reader-model__right .reader-control--parsha { order: 3; direction: rtl; }
.reader-model__right .reader-popover-wrap:has(.reader-control--sefer) { order: 4; }
.reader-model__right .reader-control--sefer { direction: rtl; }
.reader-model__right .reader-control--language { order: 5; direction: ltr; }

.reader-model__brand {
    margin-right: .5rem;
    font-size: 1rem;
}

.reader-control {
    min-height: 34px;
    padding: .42rem .72rem;
    font-size: .78rem;
}

.reader-control--settings { padding-inline: .58rem; font-size: .95rem; }
.reader-control--settings span { font-size: .75rem; }
.reader-tier { height: 13px; }
.reader-tier i:nth-child(1) { height: 6px; }
.reader-tier i:nth-child(2) { height: 9px; }
.reader-tier i:nth-child(3) { height: 12px; }

.reader-model__page {
    min-height: 390px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.appwin__text .hebrew { font-size: clamp(1.45rem, 2.9vw, 2rem); }
.reader-drawer { width: min(390px, 48%); }
.reader-drawer__header { padding: 1rem 1.15rem; font-size: .85rem; }
.reader-drawer__tabs button { padding: .75rem .4rem; font-size: .72rem; }
.reader-drawer__body { padding: 1rem; overflow-y: auto; }

.reader-drawer__heading {
    margin: 0 0 .7rem;
    color: #334155;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
}

.reader-color-control {
    grid-template-columns: minmax(0, 1fr) 116px 30px 28px;
    font-size: .75rem;
}

.reader-color-control > label:first-child {
    min-width: 0;
    line-height: 1.2;
}

.reader-color-control select,
.reader-color-control button,
.reader-effect-control button { min-height: 28px; }

.reader-color-control input[type="color"] {
    width: 30px;
    height: 28px;
    padding: 1px;
    border: 1px solid #dbe1e8;
    border-radius: 4px;
    background: #fff;
}

.reader-inline-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-top: .2rem;
    color: #64748b;
    font-size: .63rem;
    font-weight: 500;
}

.reader-inline-check input { accent-color: #7c3aed; }
.reader-effect-control { font-size: .72rem; }

.tour__panel {
    position: static;
    margin-top: 1.5rem;
}

.tour__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.tour__step {
    min-height: 80px;
    padding: .75rem .8rem .75rem 2.7rem;
    opacity: .72;
}

.tour__step::before {
    left: .7rem;
    top: .76rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .68rem;
}

.tour__step h3 { font-size: .86rem; }
.tour__step p { font-size: .8rem; line-height: 1.45; }
.tour__step.is-active { box-shadow: var(--shadow-sm); }

.tour__controls {
    justify-content: center;
    padding-left: 0;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .reader-model__bar {
        min-height: 58px;
        padding: .5rem .65rem;
    }

    .reader-model__left,
    .reader-model__right {
        gap: .35rem;
    }

    .reader-model__brand { margin-right: .25rem; font-size: .88rem; }
    .reader-control { min-height: 29px; padding: .3rem .5rem; font-size: .66rem; }
    .reader-control--settings { font-size: .78rem; }
    .reader-model__page { min-height: 325px; }
    .reader-drawer { width: min(340px, 58%); }
    .reader-color-control { grid-template-columns: minmax(0, 1fr) 94px 28px 26px; font-size: .68rem; }
    .reader-color-control input[type="color"] { width: 28px; height: 26px; }
    .tour__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .reader-model__brand { font-size: 0; margin: 0; }
    .reader-model__mark { padding: 3px; }
    .reader-model__mark i { width: 3px; height: 13px; }
    .reader-control--perek, .reader-control--pasuk { display: none; }
    .reader-edition-label { max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
    .reader-model__page { min-height: 295px; padding: 1rem; }
    .reader-drawer { width: min(315px, 82%); }
    .tour__steps { grid-template-columns: minmax(0, 1fr); }
    .tour__step { min-height: 0; }
}


/* --- Wide desktop reader canvas ----------------------------------------- */
/* The real reader toolbar is a desktop-width control bar. Keep it as one
   uninterrupted row; a narrow browser can pan this preview rather than seeing
   its controls compressed or split into a misleading second line. */

.tour {
    width: min(1360px, calc(100vw - (var(--gutter) * 2)));
    position: relative;
    left: 50%;
    margin-inline: 0;
    transform: translateX(-50%);
}

/* The tour is also a shared reveal element, whose visible-state rule resets
   transform. Keep this viewport-centering transform after it is revealed. */
#tour-widget { transform: translateX(-50%); }

.tour__stage {
    overflow-x: auto;
    padding: 8px;
}

.reader-model {
    width: 100%;
    min-width: 1220px;
}

.reader-model__bar {
    flex-direction: row;
    align-items: center;
    min-height: 72px;
}

.reader-model__left,
.reader-model__right { width: auto; }
.reader-model__right { margin-left: auto; justify-content: flex-start; }

@media (max-width: 900px) {
    .reader-model__bar {
        flex-direction: row;
        align-items: center;
        min-height: 72px;
        padding: .8rem 1rem;
    }

    .reader-model__left,
    .reader-model__right { width: auto; gap: .55rem; }

    .reader-model__brand { margin-right: .5rem; font-size: 1rem; }
    .reader-control { min-height: 34px; padding: .42rem .72rem; font-size: .78rem; }
    .reader-control--settings { font-size: .95rem; }
    .reader-control--perek, .reader-control--pasuk { display: inline-flex; }
    .reader-edition-label { max-width: none; }
}