/* =========================================================================
   RevRaptor -- revraptor.com marketing site.

   Deliberately standalone: the app's app.css is not loaded here, because the
   root domain and app.revraptor.com are different docroots and a marketing
   page should not be one 404 away from unstyled. What IS shared is the design
   language -- the tokens below are copied verbatim from public/assets/css/
   app.css, and the component names (.btn, .card, .pack, .tag) match it, so
   the two properties look like one product.

   Mobile-first throughout. The only breakpoints are 640px and 900px, and
   everything above them is an enhancement -- the 360px layout is the base.
   ========================================================================= */

:root {
    --volt:        #C8F135;   /* primary / CTA */
    --redline:     #FF6B2C;   /* alerts, urgency */
    --jungle:      #0D1512;   /* backgrounds */
    --offwhite:    #F4F6F0;   /* text on dark */

    --surface:     #131E1A;   /* raised panels against --jungle */
    --surface-2:   #1A2823;   /* hover / nested panels */
    --line:        #24332D;   /* hairlines */
    --muted:       #8FA098;   /* secondary text */

    --radius:      10px;
    --radius-lg:   16px;
    --font:        "Space Grotesk", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    --wrap:        1060px;
    --gut:         1.25rem;   /* page gutter; widens on larger screens */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--jungle);
    color: var(--offwhite);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* No overflow-x:hidden on body. It is the usual reflex for stopping sideways
   scroll on phones, and it is also the usual way people break position:sticky
   in Safari -- the header at the top of this page. Nothing here is wider than
   its column instead: every grid collapses to one track at 360px, art is
   max-width capped, and the long strings (email addresses, pasteable copy)
   carry their own break rules. */

a { color: var(--volt); text-decoration: none; }
a:hover { text-decoration: underline; }

img, picture { max-width: 100%; }
img { height: auto; }
/* <picture> is inline by default, which breaks `margin: 0 auto` centering on
   the block <img> inside it. All the art on this site is a standalone block. */
picture { display: block; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 8.5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 5.5vw, 2.15rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
h4 { font-size: 0.98rem; letter-spacing: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.muted   { color: var(--muted); }
.volt    { color: var(--volt); }
.redline { color: var(--redline); }
.small   { font-size: 0.875rem; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }

/* Spacing utilities. Deliberately three of them -- the moment there is a
   .mt-4 this becomes a framework and the components stop carrying their own
   spacing. */
.mt      { margin-top: 1.5rem; }
.mt-sm   { margin-top: 1.25rem; }
.mb      { margin-bottom: 1.25rem; }

::selection { background: var(--volt); color: var(--jungle); }

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

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: 0.7em 1.1em; background: var(--volt); color: var(--jungle);
    font-weight: 700; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

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

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gut);
    padding-right: var(--gut);
}
@media (min-width: 640px) { :root { --gut: 1.75rem; } }

/* Sections paint edge to edge; .wrap inside holds the column. */
.sec { padding: 3.25rem 0; }
.sec--alt    { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec--tight  { padding-top: 1.5rem; }
.sec--cta    { padding: 3rem 0; background: var(--surface); border-top: 1px solid var(--line); }

.sec__head { max-width: 44ch; margin-bottom: 2rem; }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec__head p { color: var(--muted); font-size: 1.02rem; margin-bottom: 0; }

.eyebrow {
    display: block; margin-bottom: 0.7rem;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--volt);
}
.eyebrow--redline { color: var(--redline); }

.lede { font-size: 1.06rem; color: var(--muted); }

.rule {
    height: 3px; width: 120px; margin: 0 0 1.5rem; border-radius: 3px;
    background: linear-gradient(90deg, var(--volt) 0%, var(--volt) 68%, var(--redline) 100%);
}

/* ---------------------------------------------------------------- top nav */

.top {
    position: sticky; top: 0; z-index: 30;
    background: rgba(13, 21, 18, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}
.top__in {
    display: flex; align-items: center; gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 60px;
    padding-top: 0.5rem; padding-bottom: 0.5rem;
}

.brand { display: flex; align-items: center; gap: 0.55rem; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand__icon { width: 34px; height: 34px; display: block; }
.brand__word {
    font-size: 1.12rem; font-weight: 700; letter-spacing: -0.03em;
    color: var(--volt);
}
.brand__word span { color: var(--offwhite); }

.burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 38px; padding: 0 9px;
    background: transparent; border: 1px solid var(--line);
    border-radius: 9px; cursor: pointer;
}
.burger span {
    display: block; height: 2px; background: var(--offwhite); border-radius: 2px;
    transition: transform .16s ease, opacity .12s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile base: the nav is a stacked panel below the bar. JS toggles [hidden],
   so with JS off it simply stays open -- never unreachable. */
.topnav {
    order: 3; width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--line);
    margin-top: 0.4rem;
}
.topnav[hidden] { display: none; }

.topnav__link {
    padding: 0.6em 0.2em; color: var(--offwhite);
    font-weight: 600; font-size: 0.98rem;
}
.topnav__link:hover { color: var(--volt); text-decoration: none; }
.topnav__link.is-active { color: var(--volt); }
.topnav__link--quiet { color: var(--muted); font-weight: 500; }
.topnav__cta { margin-top: 0.5rem; text-align: center; }

@media (min-width: 900px) {
    .burger { display: none; }
    .topnav {
        order: 0; width: auto; flex-direction: row; align-items: center; gap: 1.6rem;
        padding: 0; border-top: 0; margin-top: 0;
    }
    /* The button is gone at this width, so an aria state left over from a
       narrow window must not hide the desktop nav. */
    .topnav[hidden] { display: flex; }
    .topnav__link { padding: 0.35em 0; font-size: 0.94rem; }
    .topnav__cta { margin-top: 0; margin-left: 0.4rem; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-block; padding: 0.78em 1.5em; border: 0;
    border-radius: var(--radius); background: var(--volt); color: var(--jungle);
    font: inherit; font-weight: 700; cursor: pointer; text-align: center;
    line-height: 1.25;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn--urgent { background: var(--redline); color: var(--offwhite); }
.btn--ghost  { background: transparent; color: var(--offwhite); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--volt); color: var(--volt); filter: none; }
.btn--sm     { padding: 0.5em 1em; font-size: 0.88rem; }
.btn--lg     { padding: 0.9em 1.8em; font-size: 1.05rem; }
.btn--full   { display: block; width: 100%; }

.btnrow { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }
@media (min-width: 480px) {
    .btnrow { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

.aside-note { margin-top: 1rem; font-size: 0.86rem; color: var(--muted); }

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

.hero { padding: 2.5rem 0 3rem; }
.hero__in { display: flex; flex-direction: column; gap: 1.75rem; }

/* Art first in the source on mobile so the pose greets you above the fold;
   on desktop it moves to the right of the copy. */
.hero__art { order: -1; align-self: center; max-width: 300px; }
.hero__art img { display: block; width: 100%; height: auto; }

.hero h1 { margin-bottom: 0.4em; }
.hero h1 .hl { color: var(--volt); }
.hero__sub { font-size: 1.08rem; color: var(--muted); max-width: 48ch; }
.hero__proof {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
    margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted);
}
.hero__proof span { display: flex; align-items: center; gap: 0.4em; }
.hero__proof span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--volt); flex-shrink: 0;
}

@media (min-width: 900px) {
    .hero { padding: 4.5rem 0 4rem; }
    .hero__in {
        flex-direction: row; align-items: center; gap: 3rem;
    }
    .hero__copy { flex: 1 1 56%; }
    .hero__art { order: 0; flex: 0 0 40%; max-width: 440px; align-self: center; }
}

/* ------------------------------------------------------------------ cards */

.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.4rem;
}
.sec--alt .card { background: var(--jungle); }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--muted); font-size: 0.95rem; }

.grid { display: grid; gap: 1rem; }
/* Order matters: the 640px rule must come first so the 900px one overrides it. */
@media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.tag {
    display: inline-block; padding: 0.2em 0.65em; border-radius: 999px;
    border: 1px solid var(--line); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.tag--new    { border-color: var(--volt);    color: var(--volt); }
.tag--urgent { border-color: var(--redline); color: var(--redline); }

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

.steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
    position: relative;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.5rem 1.4rem 1.4rem;
}
.sec--alt .step { background: var(--jungle); }
.step::before {
    counter-increment: step; content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-bottom: 1rem;
    border-radius: 50%; background: var(--volt); color: var(--jungle);
    font-size: 1rem; font-weight: 700; line-height: 1;
}
.step h3 { margin-bottom: 0.45em; }
.step p { color: var(--muted); font-size: 0.95rem; }
.step__time {
    display: inline-block; margin-top: 0.9rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--volt);
}

/* ------------------------------------------------------- sample hunt card */

.hunt {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
}
.sec--alt .hunt { background: var(--jungle); }

.hunt__head { padding: 1.25rem 1.25rem 1.1rem; border-bottom: 1px solid var(--line); }
.hunt__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.85rem; }
.hunt__title { font-size: clamp(1.2rem, 4.6vw, 1.55rem); margin-bottom: 0.35em; }
.hunt__from { font-size: 0.84rem; color: var(--muted); margin: 0; }

.hunt__body { padding: 1.25rem; display: grid; gap: 1.35rem; }

.field__label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.45em;
}
.field p { font-size: 0.95rem; margin-bottom: 0; }
.field p strong { color: var(--offwhite); }
.field--why p { color: var(--offwhite); }
.field--why strong { color: var(--redline); }

@media (min-width: 640px) {
    .hunt__body { grid-template-columns: 1fr 1fr; }
    .hunt__body > .span2 { grid-column: 1 / -1; }
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.6em 0; border-bottom: 1px solid var(--line);
    font-size: 0.94rem;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
    content: ""; flex-shrink: 0; margin-top: 0.42em;
    width: 13px; height: 13px; border-radius: 4px;
    border: 1.5px solid var(--line);
}
.checklist li b { font-weight: 700; }
.checklist li span { color: var(--muted); }

/* Ready-to-paste copy blocks -- same shape as the app's hunt detail view. */
.channel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.85rem; }
.channel:last-child { margin-bottom: 0; }
.channel__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.2rem 0.75rem;
    padding: 0.6em 0.9em; background: var(--surface-2);
    font-weight: 700; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.channel__head span { font-size: 0.72rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.channel__body {
    margin: 0; padding: 0.95em; background: var(--jungle);
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
    font-family: inherit; font-size: 0.92rem; line-height: 1.6;
}
.sec--alt .channel__body { background: var(--surface); }

.hunt__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 1rem 1.25rem; border-top: 1px solid var(--line);
    background: var(--surface-2); font-size: 0.86rem; color: var(--muted);
}
.hunt__foot .btn { margin-left: auto; }

/* ----------------------------------------------------------- credit packs */

.packs { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .packs { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.pack {
    position: relative; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.75rem 1.35rem 1.35rem;
    text-align: center;
}
.sec--alt .pack { background: var(--jungle); }
.pack--popular { border-color: var(--volt); }

.pack__flag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    padding: 0.28em 0.85em; border-radius: 999px;
    background: var(--volt); color: var(--jungle);
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap;
}
.pack__credits {
    font-size: 3rem; font-weight: 700; line-height: 1;
    color: var(--volt); letter-spacing: -0.04em;
}
.pack__bonus { font-size: 1.15rem; color: var(--redline); vertical-align: super; }
.pack__label {
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted); margin: 0.35rem 0 1rem;
}
.pack__price { font-size: 1.6rem; font-weight: 700; }
.pack__each { font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; }
.pack__blurb { flex: 1; margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--muted); }
.pack .btn { margin-top: auto; }

/* --------------------------------------------------------------- callouts */

.callout {
    display: flex; flex-direction: column; gap: 1.25rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.5rem;
}
.sec--alt .callout { background: var(--jungle); }
.callout--volt    { border-color: var(--volt); }
.callout--redline { border-color: var(--redline); }
.callout__art { flex-shrink: 0; align-self: center; width: 150px; }
.callout__art img { display: block; width: 100%; height: auto; }
.callout__text h3 { font-size: 1.25rem; }
.callout__text p { color: var(--muted); }
.callout__text p:last-of-type { margin-bottom: 0; }

@media (min-width: 640px) {
    .callout { flex-direction: row; align-items: center; gap: 1.75rem; padding: 1.75rem; }
    .callout__art { align-self: center; width: 170px; }
}

.bonus-line {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    margin: 1rem 0 0; padding: 0.9rem 1rem;
    border: 1px dashed var(--line); border-radius: var(--radius);
    font-size: 0.9rem;
}
.bonus-line b { color: var(--redline); }

/* -------------------------------------------------------------------- FAQ */
/* <details>/<summary>: an accordion with no JavaScript, and it stays open and
   findable when the browser's in-page search hits text inside a closed one. */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 1.1rem 0; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; margin-left: auto; flex-shrink: 0;
    font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--volt);
    transition: transform .16s ease;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--volt); }
.faq__a { padding: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; max-width: 68ch; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ------------------------------------------------------------ closing CTA */

.cta { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
.cta__art { width: 150px; flex-shrink: 0; }
.cta__art img { display: block; width: 100%; height: auto; }
.cta__text h2 { margin-bottom: 0.35em; }
.cta__text p { max-width: 52ch; margin-bottom: 1.5rem; }

@media (min-width: 640px) {
    .cta { flex-direction: row; text-align: left; gap: 2rem; }
    .cta__art { width: 180px; }
    .cta__text p { margin-left: 0; }
}

/* ----------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; }
.foot__in { display: grid; gap: 2rem; }
@media (min-width: 640px) { .foot__in { grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; } }

.foot__brand img { width: 120px; height: auto; display: block; margin-bottom: 0.9rem; }
.foot__brand p { margin: 0; }

.foot__col { display: flex; flex-direction: column; gap: 0.5rem; }
.foot__h {
    margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.foot__col a { color: var(--offwhite); font-size: 0.92rem; }
.foot__col a:hover { color: var(--volt); text-decoration: none; }

.foot__legal {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}

/* =========================================================================
   Page-specific
   ========================================================================= */

/* --- how it works: what Rev watches --------------------------------------- */

.signals { display: grid; gap: 0.85rem; }
@media (min-width: 640px) { .signals { grid-template-columns: repeat(2, 1fr); } }

.signal {
    display: flex; gap: 0.9rem; align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sec--alt .signal { background: var(--jungle); }
.signal__dot {
    flex-shrink: 0; width: 8px; height: 8px; margin-top: 0.55em;
    border-radius: 50%; background: var(--volt);
}
.signal--redline .signal__dot { background: var(--redline); }
.signal h4 { margin-bottom: 0.2em; }
.signal p { margin: 0; font-size: 0.88rem; color: var(--muted); }

/* --- how it works: anatomy of a hunt -------------------------------------- */

.anatomy { display: grid; gap: 0; border-top: 1px solid var(--line); }
.anatomy__row {
    display: grid; gap: 0.25rem 1.5rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .anatomy__row { grid-template-columns: 200px 1fr; } }
.anatomy__row dt { font-weight: 700; font-size: 0.95rem; }
.anatomy__row dd { margin: 0; color: var(--muted); font-size: 0.94rem; }

/* --- cadence table -------------------------------------------------------- */

.cadence { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .cadence { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cadence { grid-template-columns: repeat(4, 1fr); } }

.cad {
    padding: 1.1rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sec--alt .cad { background: var(--jungle); }
.cad--free { border-color: var(--volt); }
.cad__n { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15em; }
.cad__c { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--volt); margin-bottom: 0.5em; }
.cad p { margin: 0; font-size: 0.88rem; color: var(--muted); }

/* --- about Rev ------------------------------------------------------------ */

.dossier { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .dossier { grid-template-columns: repeat(2, 1fr); } }

.dos {
    padding: 0.95rem 1.1rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.sec--alt .dos { background: var(--jungle); }
.dos dt {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.3em;
}
.dos dd { margin: 0; font-size: 0.95rem; }

.moods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .moods { grid-template-columns: repeat(4, 1fr); } }

.mood {
    text-align: center;
    padding: 1.1rem 0.75rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.sec--alt .mood { background: var(--jungle); }
.mood img { display: block; width: 96px; height: 96px; margin: 0 auto 0.65rem; }
.mood__n { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.2em; }
.mood p { margin: 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* Rev talking. The quote is the point, so it gets the space. */
.says { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .says { grid-template-columns: repeat(2, 1fr); } }

.say {
    padding: 1.1rem 1.25rem;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--volt);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.sec--alt .say { background: var(--jungle); }
.say--never { border-left-color: var(--redline); }
.say q { display: block; font-size: 1.02rem; font-weight: 600; quotes: none; }
.say q::before, .say q::after { content: none; }
.say cite {
    display: block; margin-top: 0.5em;
    font-size: 0.82rem; font-style: normal; color: var(--muted);
}

/* --- contact -------------------------------------------------------------- */

.contact { display: grid; gap: 1rem; }
@media (min-width: 640px) { .contact { grid-template-columns: repeat(2, 1fr); } }

.contact .card { display: flex; flex-direction: column; }
.contact .card .btn { margin-top: auto; align-self: flex-start; }
.contact__addr {
    display: block; margin: 0.35rem 0 1rem;
    font-size: 1.05rem; font-weight: 700; word-break: break-word;
}

/* ------------------------------------------------------------------ misc */

.stat { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; margin: 2rem 0 0; }
.stat__n { font-size: 2rem; font-weight: 700; color: var(--volt); line-height: 1; }
.stat__l { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.35em; }

.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
    position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem;
    font-size: 0.95rem;
}
.ticks li::before {
    content: ""; position: absolute; left: 0; top: 0.42em;
    width: 9px; height: 5px; border-left: 2px solid var(--volt);
    border-bottom: 2px solid var(--volt); transform: rotate(-45deg);
}
.ticks li:last-child { margin-bottom: 0; }