/* ==========================================================================
   Ooner — landing page
   Self-contained: this page does not use the inherited marketing stylesheets,
   so none of the previous brand's type or colour leaks into it.
   ========================================================================== */

:root {
    --green: #1b9e46;
    --green-dark: #158339;
    --forest: #0f3d1e;
    --forest-deep: #0a2b15;
    --sage: #e3efe5;
    --cream: #f5f1e8;
    --white: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #4a4a45;
    --ink-mute: #7a756b;
    --border: #e6e0d5;
    --loss: #c0392b;
    --loss-soft: #f4e3e0;
    --amber: #b06a1e;
    --amber-soft: #f6e8d6;
    --gold: #e8b84a;

    /* Matches /restaurant2's own type system: Plus Jakarta Sans for
       headings/display numbers, Inter for body text (--sans already was
       Inter, so it didn't need to change). */
    --display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --shadow-1: 0 1px 2px rgba(15, 61, 30, .03), 0 4px 12px rgba(15, 61, 30, .04);
    --shadow-2: 0 2px 4px rgba(15, 61, 30, .04), 0 12px 28px rgba(15, 61, 30, .07);

    --ease: cubic-bezier(.2, 0, 0, 1);
    --max: 1200px;
}

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

html {
    scroll-behavior: smooth;
    /* Sticky header is 72px; anchored sections must not hide beneath it. */
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" on;
}

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

/* Charts carry width="100%" plus a viewBox; height belongs in CSS, because
   height="auto" is not a valid SVG attribute and browsers reject it. */
svg[width="100%"] {
    height: auto;
    display: block;
}

a {
    color: inherit;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- type ---------------------------------------------------------------- */

/* Headings match /restaurant2's own type system throughout this page:
   Plus Jakarta Sans instead of the Instrument Serif this page used to
   set here, at /restaurant2's weight/letter-spacing/line-height register
   for each level (its display-lg/headline-xl/headline-lg tokens) rather
   than the flatter, tighter serif values this rule used to share across
   all three. --display carries the font stack; the old --serif name is
   gone; --sans (Inter) already matched /restaurant2's body font and
   didn't need to change. */
h1,
h2,
h3 {
    font-family: var(--display);
    margin: 0;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
}

p {
    margin: 0;
}

.eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--ink-soft);
    line-height: 1.55;
}

.num {
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --- sections ------------------------------------------------------------ */

section {
    padding: clamp(64px, 9vw, 116px) 0;
}

.s-cream {
    background: var(--cream);
}

.s-white {
    background: var(--white);
}

.s-forest {
    background: var(--forest);
    color: var(--white);
}

.s-forest h2,
.s-forest h3 {
    color: var(--white);
}

.s-forest .lead {
    color: rgba(255, 255, 255, .72);
}

.s-forest .eyebrow {
    color: #84fb97;
}

.s-head {
    max-width: 760px;
    margin-bottom: clamp(36px, 5vw, 60px);
}

.s-head .eyebrow {
    margin-bottom: 14px;
}

.s-head .lead {
    margin-top: 18px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 13px 26px;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    color: var(--white);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), var(--shadow-1);
    transition: background 160ms var(--ease), transform 160ms var(--ease);
}

.btn:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: none;
}

.s-forest .btn--ghost {
    color: var(--white);
    border-color: rgba(255, 255, 255, .28);
}

.btn--ghost:hover {
    background: rgba(0, 0, 0, .04);
    transform: none;
}

.s-forest .btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
}

.btn--block {
    width: 100%;
}

.btn-link {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    opacity: .85;
}

.btn-link:hover {
    opacity: 1;
}

/* Section-closing CTA rail */
.cta-rail {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: clamp(36px, 5vw, 54px);
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.s-forest .cta-rail,
.panel--grow .cta-rail,
.panel--reality .cta-rail,
.pillars .cta-rail {
    border-top-color: rgba(255, 255, 255, .14);
}

.cta-rail p {
    font-size: 15px;
    color: var(--ink-mute);
    max-width: 640px;
}

.s-forest .cta-rail p,
.panel--grow .cta-rail p,
.panel--reality .cta-rail p,
.pillars .cta-rail p {
    color: rgba(255, 255, 255, .6);
}

/* --- header -------------------------------------------------------------- */

/* The header stays solid white rather than going transparent over the hero:
   the supplied logo artwork has an opaque white background baked in, and the
   brand must not be recoloured, so a white bar is what lets it sit cleanly. */
.hdr {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    height: 72px;
    display: flex;
    align-items: center;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 240ms var(--ease);
}

.hdr.is-stuck {
    box-shadow: 0 1px 12px rgba(15, 61, 30, .07);
}

.hdr__in {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.hdr__left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* margin-left:auto pushes this group flush to the end, so the CTA sits
   at the right edge and everything else -- logo, then nav right after
   it -- stays grouped on the left, with the leftover space landing as
   one gap before this group rather than being split around the nav. */
.hdr__right {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hdr__logo {
    flex: 0 0 auto;
    width: 186px;
    display: block;
    line-height: 0;
}

.hdr__logo img {
    width: 100%;
    height: auto;
}

.hdr__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hdr__nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 11px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 160ms var(--ease), color 160ms var(--ease);
}

.hdr__nav a:hover {
    background: rgba(15, 61, 30, .06);
    color: var(--ink);
}

.hdr__cta {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 20px;
    font-size: 15px;
}

/* hamburger */
.burger {
    display: none;
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 12px;
}

.burger span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}

.burger span+span {
    margin-top: 6px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mnav {
    position: fixed;
    inset: 72px 0 0 0;
    z-index: 890;
    background: var(--white);
    padding: 32px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
}

.mnav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mnav a {
    font-family: var(--display);
    font-weight: 600;
    font-size: 30px;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.mnav .btn {
    margin-top: 26px;
}

/* Hero: the home page's hero is now a verbatim port of the /restaurant2
   hero, built on the Tailwind CDN with its own token config (see the
   <head> of landing.blade.php) rather than the classes below. This
   stylesheet no longer owns the hero's look. */

/* --- stat band ----------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.stat {
    background: var(--white);
    padding: 30px 26px;
}

.stat__n {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.3rem, 4vw, 3.2rem);
    line-height: 1;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.stat__l {
    margin-top: 12px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

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

.crises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: clamp(32px, 4.5vw, 48px);
}

/* Each card carries .rv itself (rather than one .rv wrapping the grid), so
   it gets the site's normal fade-up-on-scroll for free and -- on the mobile
   single-column layout, where the three cards span real scroll distance --
   reveals in its own turn as it individually reaches the viewport. On the
   3-up desktop layout all three cross the threshold together, so the
   nth-child delays below still read as a deliberate left-to-right cascade. */
.crisis {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(26px, 2.8vw, 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-1);
}

/* Written as the two-class ".crises .crisis" (rather than plain ".crisis")
   so this reliably outranks the single-class ".rv" transition rule defined
   later in this file -- equal specificity is decided by source order, and
   this needs box-shadow in the list that ".rv" alone doesn't carry. */
.crises .crisis {
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), box-shadow 220ms var(--ease);
}

/* Higher specificity than the plain .rv.is-in transform reset, so the
   hover lift still applies once a card has already revealed. */
.crisis.is-in:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.crises .crisis:nth-child(2) {
    transition-delay: 110ms;
}

.crises .crisis:nth-child(3) {
    transition-delay: 220ms;
}

/* Coloured top rule -- wipes in left-to-right after the card has settled. */
.crisis::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 100%;
    height: 3px;
    background: var(--crisis-c, var(--green));
    transition: right 700ms var(--ease) 150ms;
}

.crisis.is-in::before {
    right: 0;
}

.crises .crisis:nth-child(2)::before {
    transition-delay: 260ms;
}

.crises .crisis:nth-child(3)::before {
    transition-delay: 370ms;
}

.crisis__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: var(--crisis-bg, var(--sage));
    color: var(--crisis-c, var(--green));
}

.crisis__icon svg {
    width: 26px;
    height: 26px;
}

/* --crisis-c colours the icon glyph and top rule, which sit on a tinted
   background or carry no text, so it can stay at the brighter brand
   value. The uppercase 13px label underneath is real text on white and
   needs to clear 4.5:1 on its own, which --amber and --green fall just
   short of (4.26:1, 3.49:1) -- --crisis-c-text carries a darkened value
   for that label only, falling back to --crisis-c where the accent (like
   --loss, at 5.44:1) already clears it. */
.crisis--cost {
    --crisis-c: var(--loss);
    --crisis-bg: var(--loss-soft);
}

.crisis--rival {
    --crisis-c: var(--amber);
    --crisis-bg: var(--amber-soft);
    --crisis-c-text: #8a4c0c;
}

.crisis--tools {
    --crisis-c: var(--green);
    --crisis-bg: var(--sage);
    --crisis-c-text: var(--green-dark);
}

.crisis h3 {
    margin-bottom: 10px;
}

.crisis p {
    font-size: 15.5px;
    color: var(--ink-soft);
    line-height: 1.55;
    flex-grow: 1;
}

.crisis__foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* Card 1 has a citable range (25-34%), so it earns a real meter showing
   that range on a 0-100 track -- not a single invented number. Cards 2
   and 3 only have qualitative claims in the source copy, so they get a
   plain coloured tag instead of a bar that would imply a precise figure
   nobody measured. */
.crisis__meter {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--loss-soft);
    margin-bottom: 10px;
    overflow: hidden;
}

.crisis__meter-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%;
    width: 9%;
    border-radius: 999px;
    background: var(--loss);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 800ms var(--ease) 280ms;
}

.crisis.is-in .crisis__meter-fill {
    transform: scaleX(1);
}

.crisis__stat {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--crisis-c-text, var(--crisis-c, var(--ink-soft)));
}

.crisis__tag {
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--crisis-c-text, var(--crisis-c, var(--ink-soft)));
}

/* --- crisis callout quote --------------------------------------------------- */

.crisis-quote {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 44px) clamp(28px, 5vw, 56px);
    border-radius: 20px;
    border-left: 3px solid var(--green);
    background: var(--sage);
    text-align: center;
    overflow: hidden;
}

.crisis-quote__mark {
    position: absolute;
    top: -6px;
    left: 18px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 120px;
    line-height: 1;
    color: var(--green);
    opacity: .16;
    pointer-events: none;
    user-select: none;
}

.crisis-quote blockquote {
    position: relative;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    font-style: italic;
    color: var(--forest);
    line-height: 1.4;
    margin: 0 0 14px;
}

.crisis-quote cite {
    position: relative;
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: var(--green-dark);
}

/* --- colour panels (grow + reality) ---------------------------------------- */

/* Full-width, flush sections -- no radius, no gap -- matching how the
   hero flows straight into the stats band above them. An earlier
   rounded-corner, inset-margin treatment here was corrected after
   review: it showed a sliver of the page's own cream around and between
   the two, which wasn't the intended look. */
.panel {
    position: relative;
}

.panel--grow {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
    color: var(--white);
}

.panel--grow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 82% 12%, rgba(132, 251, 151, .16) 0%, transparent 55%);
}

.panel--grow h2,
.panel--grow h3 {
    color: var(--white);
}

.panel--grow .lead {
    color: rgba(255, 255, 255, .74);
}

/* Renamed from the earlier .grow-grid/.grow-card so this can never again
   collide with another section's grid class -- it briefly did (a dead,
   already-removed "more ways we grow" section reused the plain name later
   in this file with grid-template-columns: repeat(3, 1fr), which won on
   source order and silently forced this 4-card row into 3 columns,
   orphaning the 4th card on its own row). Named .everything-* rather than
   reusing .pillars-grid/.pillar -- that pair already belongs to the
   Discoverability/Conversion/Retention section further down this file. */
.everything-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: clamp(32px, 4vw, 44px);
}

.everything-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: clamp(22px, 2.4vw, 26px);
    transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}

.everything-card:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-3px);
}

.everything-card__num {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #84fb97;
    margin-bottom: 14px;
}

.everything-card h3 {
    margin-bottom: 8px;
}

.everything-card p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .7);
    line-height: 1.55;
}

.panel--reality {
    background: var(--forest-deep);
    color: var(--white);
}

.panel--reality h2 {
    color: var(--white);
}

.panel--reality .eyebrow {
    color: #84fb97;
}

.panel--reality .lead {
    color: rgba(255, 255, 255, .74);
}

.reality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(32px, 4vw, 44px);
}

.reality-card {
    background: var(--white);
    border-radius: 16px;
    padding: clamp(24px, 2.6vw, 28px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.reality-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.reality-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--rc-bg, var(--sage));
    color: var(--rc-c, var(--green));
}

.reality-card__icon svg {
    width: 20px;
    height: 20px;
}

.reality-card--cost {
    --rc-c: var(--loss);
    --rc-bg: var(--loss-soft);
}

.reality-card--chain {
    --rc-c: var(--amber);
    --rc-bg: var(--amber-soft);
}

.reality-card--tools {
    --rc-c: var(--green);
    --rc-bg: var(--sage);
}

.reality-card h3 {
    /* .panel--reality sets color: white for its own dark background text;
       each .reality-card is a white box nested inside it, so its heading
       needs an explicit override back to dark ink -- without this it
       inherits white-on-white and renders invisible. */
    color: var(--ink);
    margin-bottom: 0;
}

.reality-card p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    flex-grow: 1;
}

.reality-card__foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* The big serif figure sits at 27px/regular weight, which clears WCAG's
   "large text" bar (>=24px regular), so it can carry the brighter
   --rc-c straight from the icon without the darker text-only override
   the smaller crisis-card labels needed. */
.reality-card__figure {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--rc-c, var(--forest));
}

.reality-card__figure-label {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-mute);
}

.reality-callout {
    margin-top: clamp(24px, 3vw, 32px);
    padding: clamp(20px, 2.4vw, 26px) clamp(24px, 3vw, 32px);
    border-radius: 16px;
    background: var(--sage);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.reality-callout__text {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reality-callout__text svg {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--green-dark);
}

.reality-callout p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--forest);
    line-height: 1.4;
}

.reality-callout .btn {
    flex: 0 0 auto;
}

/* --- ownership comparison (trap vs. growth engine) ------------------------- */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: clamp(32px, 4vw, 44px);
}

.compare-card {
    background: var(--cc-bg, var(--white));
    border-radius: 20px;
    padding: clamp(26px, 3vw, 34px);
    display: flex;
    flex-direction: column;
}

.compare-card--trap {
    --cc-c: var(--loss);
    --cc-bg: var(--loss-soft);
}

.compare-card--engine {
    --cc-c: var(--green-dark);
    --cc-bg: var(--sage);
}

.compare-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.compare-card__head h3 {
    color: var(--cc-c);
}

.compare-card__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--cc-c);
    box-shadow: var(--shadow-1);
}

.compare-card__icon svg {
    width: 20px;
    height: 20px;
}

.compare-card__desc {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 20px;
}

.compare-card__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.compare-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.5;
}

.compare-card__list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--cc-c);
}

.compare-card__outcome {
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.compare-card--trap .compare-card__outcome {
    background: rgba(192, 57, 43, .12);
    color: var(--loss);
}

.compare-card--engine .compare-card__outcome {
    background: var(--green);
    color: var(--white);
}

/* --- growth pillars --------------------------------------------------------- */

/* Combines two source sections into one: /restaurant2's "Get Discovered /
   Convert More Orders / Build Customer Loyalty" pillars (the description
   and checklist per card) with /restaurant1's "Operational Architecture"
   for the same three stages (the big cited stat headline and one of the
   two proof chips per card). Same three-stage framework in both sources,
   so each pillar below carries both: the stat headline is what changes,
   the checklist is what you get, the chips are the receipts. */
.pillars {
    position: relative;
    background: var(--forest);
    color: var(--white);
    overflow: hidden;
}

.pillars::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 88%, rgba(132, 251, 151, .14) 0%, transparent 55%);
}

.pillars h2 {
    color: var(--white);
}

.pillars .lead {
    color: rgba(255, 255, 255, .74);
}

.pillars .eyebrow {
    color: #84fb97;
}

.pillars-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: clamp(32px, 4vw, 44px);
}

.pillar {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: clamp(26px, 2.6vw, 30px);
    display: flex;
    flex-direction: column;
}

/* Two-class selector so this reliably outranks the single-class .rv
   transition rule defined later in the file -- see the note on
   .crises .crisis in the crisis-cards block for why that matters. */
.pillars-grid .pillar {
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), background 220ms var(--ease),
        border-color 220ms var(--ease);
}

.pillars-grid .pillar:nth-child(2) {
    transition-delay: 110ms;
}

.pillars-grid .pillar:nth-child(3) {
    transition-delay: 220ms;
}

.pillar:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
}

.pillar__art {
    margin-bottom: 20px;
    line-height: 0;
}

.pillar__art svg {
    width: 100%;
    height: auto;
    display: block;
}

.pillar__eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #84fb97;
    margin-bottom: 10px;
}

.pillar h3 {
    color: var(--white);
    margin-bottom: 10px;
}

.pillar__desc {
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.55;
    margin-bottom: 20px;
}

.pillar__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pillar__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.4;
}

.pillar__list svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: #84fb97;
}

.pillar__chips {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pillar__chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #84fb97;
    background: rgba(132, 251, 151, .12);
    padding: 6px 11px;
    border-radius: 999px;
}

/* --- owner infrastructure -------------------------------------------------- */

/* Combines two source sections that both describe the same
   discovery/orders/repeat stack: /restaurant2's "Platform Architecture"
   (a mini-card per feature, four per column) and /restaurant1's
   "Everything Included" (a bold-label checklist, five per column, with
   two or three features per column that /restaurant2 doesn't have --
   multi-channel listings, catering, real-time push). Merged into one
   checklist per column, deduplicated rather than concatenated, in
   /restaurant1's more compact checklist treatment -- /restaurant2's
   one-feature-per-shadowed-box style runs to roughly triple the height
   for the same information. */
.stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: clamp(32px, 4vw, 44px);
}

.stack-card {
    background: var(--white);
    border-radius: 18px;
    padding: clamp(26px, 2.6vw, 30px);
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
}

/* Two-class selector so this reliably outranks the single-class .rv
   transition rule defined later in the file -- see the note on
   .crises .crisis in the crisis-cards block for why that matters. */
.stack-grid .stack-card {
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), box-shadow 220ms var(--ease);
}

.stack-grid .stack-card:nth-child(2) {
    transition-delay: 110ms;
}

.stack-grid .stack-card:nth-child(3) {
    transition-delay: 220ms;
}

.stack-card.is-in:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.stack-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.stack-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sage);
    color: var(--green-dark);
}

.stack-card__icon svg {
    width: 22px;
    height: 22px;
}

.stack-card h3 {
    margin-bottom: 2px;
}

.stack-card__tagline {
    font-size: 13.5px;
    color: var(--ink-mute);
}

.stack-card__desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 20px;
}

.stack-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.stack-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.stack-card__list li strong {
    color: var(--ink);
    font-weight: 600;
}

.stack-card__list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--green);
}

/* --- fits your operation (POS / delivery / AI phone) ----------------------- */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: clamp(32px, 4vw, 44px);
}

.trust-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(26px, 2.6vw, 30px);
    box-shadow: var(--shadow-1);
    transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}

.trust-grid .trust-card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}

.trust-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sage);
    color: var(--green-dark);
    margin-bottom: 18px;
}

.trust-card__icon svg {
    width: 22px;
    height: 22px;
}

.trust-card h3 {
    margin-bottom: 10px;
}

.trust-card p {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.trust-card__badges {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.trust-card__badge {
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--cream);
    border: 1px solid var(--border);
    color: var(--ink);
}

/* --- numbers + arithmetic (matched to /restaurant3) ------------------------ */

/* /restaurant3's own colour tokens (forest #0F3D1E, loss #C0392B, growth
   #1B9E46, cream #F5F1E8, borderWarm #E6E0D5) are exactly this page's
   --forest/--loss/--green/--cream/--border, so this needed no new colour
   variables -- only new classes, kept separate from .stats/.chart-card/
   .pullquote/.cta-rail since those are shared with other sections on this
   page and must not change for them. Font is this page's own --display
   (Plus Jakarta Sans), not /restaurant3's Instrument Serif -- the one
   deliberate difference from a literal port, kept for consistency with
   the rest of the page. */
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: clamp(32px, 4vw, 44px);
}

.number-card {
    padding: 32px;
    border-radius: 16px;
    background: var(--cream);
    border: 1px solid var(--border);
    transition: box-shadow 250ms var(--ease), transform 250ms var(--ease);
}

.number-card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-4px);
}

.number-card__n {
    font-family: var(--display);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--forest);
    white-space: nowrap;
}

.number-card__n--loss {
    color: var(--loss);
}

.number-card__label {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.375;
}

.number-card__desc {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.5;
}

.numbers-callout {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    background: rgba(227, 239, 229, .5);
    border: 1px solid rgba(27, 158, 70, .2);
}

.numbers-callout p {
    font-size: 14px;
    font-weight: 500;
    color: var(--forest);
}

.arith-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: var(--shadow-1);
}

/* /restaurant3 draws these two bars as one inline SVG with a fixed
   viewBox; its text scales down with the SVG's rendered width like
   everything else in it, which is illegible well before mobile width
   (measured ~5px actual height at 390px). Built in HTML/CSS instead --
   same colours, proportions and in-bar labels, but text that stays
   real, readable text at every width instead of shrinking with the
   container. */
.arith-bars {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.arith-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.arith-bar__stat {
    font-weight: 700;
    white-space: nowrap;
}

.arith-bar__stat--loss {
    color: var(--loss);
}

.arith-bar__stat--green {
    color: var(--green);
}

.arith-bar__track {
    border-radius: 8px;
    overflow: hidden;
}

.arith-bar__track--loss {
    background: #fadbd8;
}

.arith-bar__track--green {
    background: var(--sage);
}

.arith-bar__fill {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.arith-bar__fill--loss {
    background: var(--loss);
}

.arith-bar__fill--green {
    background: var(--green);
}

.arith-quote {
    /* A bare <blockquote> carries a 40px left/right browser margin by
       default; left unreset, it narrowed the text column on mobile and
       wrapped far more than the width actually needed to. */
    margin: 48px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.35;
    color: var(--forest);
}

.arith-foot {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.arith-foot span {
    font-size: 12px;
    color: var(--ink-mute);
}

/* --- charts -------------------------------------------------------------- */

.chart-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(24px, 3.4vw, 40px);
    box-shadow: var(--shadow-1);
}

.s-forest .chart-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.chart-note {
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.5;
}

.s-forest .chart-note {
    color: rgba(255, 255, 255, .5);
}

/* --- map pack worked-example card (layout ported from /restaurant3,
   typography kept on this page's own Plus Jakarta Sans/Inter system --
   .mapcard, .mapcard__grid, .mapcard__step etc. are new and scoped to
   just this card, so they don't touch .chart-card/.pullquote above). */

.mapcard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(24px, 3.4vw, 48px);
    box-shadow: var(--shadow-1);
}

.mapcard__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.mapcard__step {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.mapcard__step--hi {
    background: rgba(27, 158, 70, .1);
    border-color: rgba(27, 158, 70, .22);
}

.mapcard__label {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.mapcard__label--hi {
    color: var(--green-dark);
}

.mapcard__num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.3rem, 1.7vw, 1.55rem);
    line-height: 1.15;
    color: var(--forest);
    margin: 10px 0 6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mapcard__num--hi {
    color: var(--green);
}

.mapcard__note {
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.mapcard__note--hi {
    color: var(--forest);
    font-weight: 500;
}

.mapcard__foot {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mapcard__quote {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    color: var(--forest);
}

.mapcard__asterisk {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-mute);
    max-width: 480px;
}

.mapcard__cta {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

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

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

    .mapcard__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .mapcard__cta {
        justify-content: stretch;
    }

    .mapcard__cta .btn {
        width: 100%;
        text-align: center;
    }
}

/* --- pricing ---------------------------------------------------------------- */

.pricing-includes {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.pricing-includes__label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-mute);
}

.pricing-includes__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pricing-includes__grid span {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cream);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--ink-soft);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pricecard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow-1);
}

.pricecard__title {
    margin: 0 0 4px;
    font-size: 1.2rem;
}

.pricecard__sub {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--ink-mute);
}

.pricecard__tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.pricecard__tier {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.pricecard__tier-label {
    font-size: 13.5px;
    color: var(--ink-soft);
}

.pricecard__tier-price {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.pricecard__tier-price span {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-mute);
}

.pricecard__fees {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.pricecard__fee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 3px 0;
}

.pricecard__fee strong {
    color: var(--green-dark);
}

.pricecard__fee-note {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--ink-mute);
}

.pricecard__terms {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.pricing-foot {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pricing-foot__item {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
}

.pricing-foot__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-mute);
}

.pricing-foot__num {
    margin: 0 0 8px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--ink);
}

.pricing-foot__num span {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-mute);
}

.pricing-foot__desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .pricing-grid,
    .pricing-foot {
        grid-template-columns: 1fr;
    }
}

/* --- ranking-value comparison table (spotcard) ----------------------------- */

.spotcard {
    margin-top: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow-1);
}

.spotcard__head {
    margin: 0 0 20px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

.spotcard__head-sub {
    display: block;
    margin-top: 4px;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-mute);
}

.spotcard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.spottable {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

.spottable__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
}

.spottable__sub {
    margin: 2px 0 14px;
    font-size: 12px;
    color: var(--ink-mute);
}

.spottable__row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--ink-soft);
}

.spottable__row--head {
    border-top: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-mute);
    padding-bottom: 6px;
}

.spottable__money {
    font-weight: 700;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.spottable__foot {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--ink-mute);
}

.spotcard__asterisk {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: var(--ink-mute);
}

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

@media (max-width: 420px) {
    .spottable__row {
        grid-template-columns: 1.3fr 0.7fr 0.7fr 0.9fr;
        font-size: 11.5px;
    }
}

.pullquote {
    /* A bare <blockquote> carries a 40px left/right browser margin by
       default; this class is used on a <blockquote>, so left unreset it
       narrowed the text column on mobile and wrapped far more than the
       width actually needed to -- same root cause as .arith-quote. */
    margin: clamp(32px, 4vw, 48px) 0 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.25;
    padding-left: 24px;
    border-left: 3px solid var(--green);
    max-width: 24em;
}

/* --- calculator ---------------------------------------------------------- */

.calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 52px);
    align-items: center;
}

.calc__controls {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.field-slider label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.field-slider output {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    border: 3px solid var(--white);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green);
    border: 3px solid var(--white);
    cursor: pointer;
}

.calc__out {
    background: var(--forest);
    color: var(--white);
    border-radius: 18px;
    padding: clamp(26px, 3.4vw, 40px);
}

.calc__out .eyebrow {
    color: #84fb97;
}

.calc__big {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    line-height: 1;
    margin: 14px 0 6px;
    font-variant-numeric: tabular-nums;
}

.calc__sub {
    font-size: 15px;
    color: rgba(255, 255, 255, .66);
    line-height: 1.5;
}

.calc__split {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.calc__split div span {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 5px;
}

.calc__split div strong {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- journey (onboarding steps) -------------------------------------------- */

/* Combines two source sections into one: /restaurant2's "Simple
   Onboarding" (demo call -> audit -> launch -> scale) and
   /restaurant1's "Concierge Onboarding" (demo call -> build -> launch
   -> zero commissions) -- both a 4-step version of the same journey,
   with step 2 covering different halves of the same phase (r2 audits,
   r1 builds) and each source citing figures the other doesn't ($970
   waiver, Google/Instagram launch channels, SMS/email automation).
   Merged into one 4-step arc rather than a 5th step, since both
   sources' own headlines promise "4 steps" and splitting audit from
   build would break that promise for no real gain -- the audit is what
   the build is based on anyway. */
.journey {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: clamp(32px, 4vw, 44px);
}

.journey-step {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(24px, 2.6vw, 28px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-1);
}

/* Two-class selector so this reliably outranks the single-class .rv
   transition rule defined later in the file -- see the note on
   .crises .crisis in the crisis-cards block for why that matters. */
.journey .journey-step {
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), box-shadow 220ms var(--ease);
}

.journey .journey-step:nth-child(2) {
    transition-delay: 90ms;
}

.journey .journey-step:nth-child(3) {
    transition-delay: 180ms;
}

.journey .journey-step:nth-child(4) {
    transition-delay: 270ms;
}

.journey-step.is-in:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

.journey-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.journey-step__n {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
}

.journey-step__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sage);
    color: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-step__icon svg {
    width: 19px;
    height: 19px;
}

.journey-step h3 {
    margin-bottom: 9px;
}

.journey-step p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    flex-grow: 1;
}

.journey-step__tag {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--green-dark);
}

/* --- qualification matrix (who it's for) ---------------------------------
   Merged content from all four pages' own fit/not-fit sections -- see the
   note above the markup in landing.blade.php. .qual__card--yes carries a
   visible light-green tint (not just a hairline), .qual__card--no stays
   plain white with a border/shadow so it still reads against the section's
   own white background. */

.s-head--center {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.s-head--center .eyebrow {
    display: block;
}

.qual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.qual__card {
    border-radius: 20px;
    padding: clamp(26px, 3vw, 40px);
    border: 1px solid var(--border);
}

.qual__card--yes {
    background: rgba(27, 158, 70, .1);
    border-color: rgba(27, 158, 70, .28);
}

.qual__card--no {
    background: var(--white);
    box-shadow: var(--shadow-1);
}

.qual__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.qual__badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qual__badge--yes {
    background: var(--green);
    color: var(--white);
}

.qual__badge--no {
    background: var(--border);
    color: var(--ink-mute);
}

.qual__head h3 {
    font-size: 1.35rem;
}

.qual__intro {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 20px;
}

.qual__card--no .qual__intro {
    color: var(--ink-mute);
}

.qual__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qual__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.qual__card--no .qual__list li {
    color: var(--ink-mute);
}

.qual__list li strong {
    color: var(--ink);
    font-weight: 600;
}

.qual__ico {
    flex: 0 0 auto;
    margin-top: 2px;
}

.qual__ico--yes {
    color: var(--green);
}

.qual__ico--no {
    color: #b8b2a4;
}

.qual__badgebox {
    margin-top: 22px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(27, 158, 70, .16);
    color: var(--green-dark);
    font-size: 13.5px;
    font-weight: 700;
}

.qual__note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(27, 158, 70, .22);
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.5;
}

.qual__card--no .qual__note {
    border-top-color: var(--border);
}

/* --- the plan (merged pricing card, /restaurant2 layout) ----------------- */

.plancard {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 28px;
    padding: clamp(32px, 5vw, 56px);
    box-shadow: var(--shadow-1);
    text-align: center;
}

.plancard__eyebrow {
    display: block;
    margin-bottom: 10px;
}

.plancard__h {
    margin-bottom: 16px;
}

.plancard__lead {
    max-width: 640px;
    margin: 0 auto;
}

.plancard__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: clamp(28px, 4vw, 40px) 0 28px;
    text-align: left;
}

.plancard__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.plancard__item {
    background: var(--cream);
    border-radius: 16px;
    padding: 22px;
}

.plancard__ico {
    color: var(--green);
    margin-bottom: 10px;
}

.plancard__item h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--ink);
}

.plancard__item p {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.plancard__note {
    font-size: 13px;
    color: var(--ink-mute);
    margin-bottom: 22px;
}

.plancard__cta {
    display: inline-flex;
}

/* --- referral program card -------------------------------------------- */

.refercard {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--shadow-1);
}

.refercard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.refercard__item {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.refercard__item--hi {
    background: rgba(27, 158, 70, .1);
    border-color: rgba(27, 158, 70, .28);
}

.refercard__label {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.refercard__num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--forest);
    margin: 10px 0 6px;
    font-variant-numeric: tabular-nums;
}

.refercard__item--hi .refercard__num {
    color: var(--green);
}

.refercard__note {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.refercard__example {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--cream);
    border-radius: 12px;
}

.refercard__example-text {
    margin: 0;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.5;
}

.refercard__example-text strong {
    color: var(--green-dark);
}

.refercard__example-tag {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-mute);
}

.refercard__foot {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.refercard__foot p {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-mute);
    max-width: 420px;
}

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

    .refercard__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .refercard__foot .btn {
        width: 100%;
        text-align: center;
    }
}

/* --- referral process steps ------------------------------------------------ */

.refer-steps {
    margin-top: 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.refer-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    position: relative;
}

.refer-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 27px);
    width: calc(100% - 54px);
    height: 2px;
    background: var(--border);
}

.refer-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.refer-step__label {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.4;
    max-width: 110px;
}

@media (max-width: 720px) {
    .refer-steps {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 24px;
    }

    .refer-step {
        flex: 0 0 calc(33.333% - 6px);
    }

    .refer-step:nth-child(3)::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .refer-steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .refer-step {
        flex-direction: row;
        text-align: left;
        width: 100%;
    }

    .refer-step:not(:last-child)::after {
        display: none;
    }

    .refer-step__label {
        max-width: none;
    }
}

/* --- real results grid --------------------------------------------------- */

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.rescard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: var(--shadow-1);
}

.rescard__tag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--green-dark);
    background: rgba(27, 158, 70, .1);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.rescard__stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.rescard__from {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink-mute);
    text-decoration: line-through;
    text-decoration-color: rgba(122, 117, 107, .4);
}

.rescard__arrow {
    color: var(--ink-mute);
    font-size: 1.1rem;
}

.rescard__to {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    color: var(--forest);
    font-variant-numeric: tabular-nums;
}

.rescard__label {
    margin: 4px 0 16px;
    font-size: 13px;
    color: var(--ink-mute);
}

.rescard__list {
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rescard__list li {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.4;
}

.results-foot {
    margin: 24px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-mute);
    line-height: 1.5;
}

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

/* --- how it works grid ---------------------------------------------------- */

.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.howcard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(22px, 2.6vw, 28px);
}

.howcard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.howcard__title {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.howcard__desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

@media (max-width: 860px) and (min-width: 641px) {
    .how-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- SEO growth grid ------------------------------------------------------- */

.seo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.seocard {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow-1);
}

.seocard img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.seocard__name {
    display: block;
    margin-top: 12px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    text-align: center;
}

@media (max-width: 860px) and (min-width: 641px) {
    .seo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Scoped to a min-width floor rather than a plain max-width: a plain
   max-width:860px rule here would still be in effect at mobile widths
   too (both conditions true at once), and since it sits later in the
   file than the 720px rule below, it would win that tie and undo the
   1-up mobile stack. The range keeps tablet's 2-up and mobile's 1-up
   from ever both applying at the same viewport. */
@media (max-width: 860px) and (min-width: 721px) {
    /* Four cards split evenly, unlike the three-up grids above -- 2-up
       here avoids the plan card running unnecessarily tall on tablet
       before the 720px breakpoint below takes it to 1-up. */
    .plancard__grid--4 {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* --- FAQ ----------------------------------------------------------------- */

.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    border-top: 1px solid var(--border);
}

.faq details {
    border-bottom: 1px solid var(--border);
    border-radius: 12px;
    transition: background-color 200ms var(--ease);
}

.faq details[open] {
    background: rgba(27, 158, 70, .08);
    border-bottom-color: transparent;
}

.faq details[open] summary {
    padding-left: 16px;
    color: var(--green-dark);
}

.faq details[open] .faq__a {
    padding-left: 16px;
    padding-bottom: 22px;
}

/* Narrower than this page's usual ~860px tablet breakpoint on purpose --
   two columns of FAQ still read fine on tablet widths; only true phone
   widths need to drop to one. */
@media (max-width: 640px) {
    .faq {
        grid-template-columns: 1fr;
    }
}

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 24px 44px 24px 0;
    position: relative;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.3;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--ink-mute);
    border-bottom: 2px solid var(--ink-mute);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 240ms var(--ease);
}

.faq details[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

.faq__a {
    padding: 0 60px 26px 0;
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
}

/* --- form ---------------------------------------------------------------- */

.close {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.close__badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .85);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
}

.close__points {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.close__points li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.close__points li>span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.close__points strong {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}

.close__points small {
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.45;
}

.close__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--forest-deep);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.close__trust {
    margin-top: 34px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--forest-deep);
    font-size: 13.5px;
    color: #84fb97;
    line-height: 1.5;
}

.formcard {
    background: var(--white);
    color: var(--ink);
    border-radius: 20px;
    padding: clamp(26px, 3.4vw, 38px);
    box-shadow: 0 24px 48px -12px rgba(15, 61, 30, .28);
}

.formcard--lg {
    padding: clamp(40px, 5.5vw, 64px);
    border-radius: 26px;
}

.prog {
    margin-bottom: 30px;
}

.formcard--lg .prog__row {
    font-size: 15px;
    margin-bottom: 12px;
}

.formcard--lg .prog__row #prog-label,
.formcard--lg .prog__row #prog-pct {
    font-size: 15px;
}

.formcard--lg .prog__bar {
    height: 8px;
}

.prog__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.prog__row #prog-label {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--forest);
}

.prog__row #prog-pct {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.prog__bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--cream);
    overflow: hidden;
}

.prog__fill {
    display: block;
    height: 100%;
    width: 50%;
    background: var(--green);
    border-radius: 999px;
    transition: width 300ms var(--ease);
}

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

.f {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.f--full {
    grid-column: 1 / -1;
}

.f label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
}

.req {
    color: var(--loss);
}

.f input,
.f select,
.f textarea {
    font-family: var(--sans);
    font-size: 15.5px;
    color: var(--ink);
    background: #fbf9f5;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 13px;
    min-height: 46px;
    width: 100%;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}

.formcard--lg .fgrid {
    gap: 22px;
}

.formcard--lg .f {
    gap: 9px;
}

.formcard--lg .f label {
    font-size: 15px;
}

.formcard--lg .f input,
.formcard--lg .f select,
.formcard--lg .f textarea {
    font-size: 17px;
    padding: 16px 18px;
    min-height: 58px;
    border-radius: 12px;
}

.formcard--lg .f textarea {
    min-height: 96px;
}

.formcard--lg .btn--block {
    min-height: 64px;
    font-size: 18px;
    border-radius: 12px;
    margin-top: 8px;
}

.formcard--lg .formcard__foot {
    font-size: 14.5px;
    margin-top: 20px;
}

.f textarea {
    min-height: 84px;
    resize: vertical;
}

.f input:focus,
.f select:focus,
.f textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(27, 158, 70, .15);
}

.f .err {
    font-size: 13px;
    color: var(--loss);
    display: none;
}

.f.is-bad input,
.f.is-bad select {
    border-color: var(--loss);
}

.f.is-bad .err {
    display: block;
}

.step-pane[hidden] {
    display: none;
}

.formcard__foot {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--ink-mute);
    line-height: 1.5;
}

.formback {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-mute);
    cursor: pointer;
    text-decoration: underline;
}

.done {
    text-align: center;
    padding: 24px 0 8px;
}

.done__tick {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sage);
    color: var(--green);
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
}

/* --- sticky mobile CTA --------------------------------------------------- */

.mcta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 880;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(245, 241, 232, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform 280ms var(--ease);
}

.mcta.is-on {
    transform: none;
}

/* --- scroll reveal ------------------------------------------------------- */

.rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

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

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {

    .hero__grid,
    .calc,
    .close,
    .compare-grid {
        grid-template-columns: 1fr;
    }

    .stats,
    .everything-grid,
    .numbers-grid,
    .journey {
        grid-template-columns: 1fr 1fr;
    }

    .steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    /* Three cards don't split evenly into two columns (an orphan third on
       its own row), so this stacks straight to one rather than following
       .stats/.steps to a 2-up tablet step. */
    .crises,
    .reality-grid,
    .pillars-grid,
    .stack-grid,
    .trust-grid {
        grid-template-columns: 1fr;
    }

    /* Once a pillar card goes full-width here, it has room for its
       four-item checklist to read as two short rows instead of one
       long column -- keeps the card, and the whole section, from
       running far taller than the graphic and copy above it. Desktop's
       narrower 3-up cards keep the single column; two columns there
       wraps every line and cramps rather than shortens. */
    .pillar__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 10px;
    }

    .reality-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .reality-callout .btn {
        width: 100%;
    }

    .qual {
        grid-template-columns: 1fr;
    }

    body {
        font-size: 16px;
    }
}

/* The header switches to the burger menu at its own, wider breakpoint
   rather than the shared 860px one above: with 6 nav links now (was 4),
   logo + nav + CTA need ~1055px of unshrinkable width, measured -- this
   switches to the burger with a safety margin above that, since a
   fallback-font render can measure a little wider than Google Fonts. */
@media (max-width: 1140px) {
    .hdr__nav,
    .hdr__cta {
        display: none;
    }

    .burger {
        display: block;
    }

    .mcta {
        display: block;
    }

    /* .mcta is position:fixed, so it reserves no space in normal flow --
       on a page this short, scrolling to the actual bottom put the last
       section's content behind it. Reserved space here is sized for the
       bar's tallest case (its own padding + button height + a notched
       phone's safe-area-inset-bottom), not just the common case. */
    main {
        padding-bottom: 100px;
    }
}

@media (max-width: 560px) {
    .wrap,
    .hdr__in {
        padding: 0 16px;
    }

    /* The bigger 15px .prog__row text (see .formcard--lg) wraps to two
       lines on both sides at phone widths -- dropped down and the gap
       tightened so "Step 1 of 2: Your Details" and "50% Complete" each
       stay on one line (this pairing measured right at the wrap boundary
       even at 13px, so this needs real margin, not just a smaller size). */
    .formcard--lg .prog__row {
        font-size: 12px;
        gap: 6px;
    }

    .formcard--lg .prog__row #prog-label,
    .formcard--lg .prog__row #prog-pct {
        font-size: 12px;
    }

    .formcard--lg {
        padding-left: 24px;
        padding-right: 24px;
    }

    .stats,
    .everything-grid,
    .numbers-grid,
    .journey {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .fgrid {
        grid-template-columns: 1fr;
    }

    .calc__split {
        grid-template-columns: 1fr;
    }

    .hdr__logo {
        width: 150px;
    }
}

/* --- reduced motion ------------------------------------------------------
   Replaced with instant state, not zeroed durations, so nothing reads broken.
   -------------------------------------------------------------------------- */

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

    .rv {
        opacity: 1;
        transform: none;
        transition: opacity 120ms linear;
    }

    .btn:hover {
        transform: none;
    }

    .mcta,
    .mnav,
    .hdr__cta {
        transition: opacity 120ms linear;
    }

    [data-draw] {
        stroke-dashoffset: 0 !important;
    }
}

/* ==========================================================================
   ROOT PAGE VISUAL REFRESH -- scoped to '/' only
   ==========================================================================
   Everything below is gated behind body.page-root (set only on
   landing.blade.php's <body> tag -- info.blade.php's own <body> never
   carries this class) or targets an #id that only exists on '/'. Nothing
   here edits a base rule a shared class depends on (.s-white, .btn, .wrap,
   .eyebrow, .lead, .s-head, .rv, .hdr*, .mnav, .mcta, .mapcard__cta,
   .pricecard*, .pricing-*), so /info's hero and Pricing section render
   exactly as before. Where a background needed to change on a section that
   uses the shared .s-white class, the override is written against that
   section's own unique #id (e.g. #numbers.s-white) rather than .s-white
   itself, for the same reason.

   Goal: break up the run of consecutive white/cream sections in the back
   half of the page with the existing --sage (soft green) token, add one
   deeper --forest-deep moment distinct from the hero/grow/pillars brand
   green, and layer in a few subtle --gold accents -- without touching
   content, section order, or any card class not exclusive to this page.
   ========================================================================== */

/* --- section background rhythm -------------------------------------------- */

.page-root #numbers.s-white,
.page-root #calculator.s-white,
.page-root #seo.s-cream,
.page-root #refer.s-white,
.page-root #fits.s-white {
    background: var(--sage);
}

.page-root #results.s-white {
    background: var(--cream);
}

.page-root #data.s-forest {
    background: var(--forest-deep);
}

/* number-card already reads fine on white/cream; on the new sage section
   background a plain white card gives cleaner separation than the cream
   it used before. */
.page-root #numbers .number-card {
    background: var(--white);
}

/* --- eyebrow: subtle gold accent rule ------------------------------------- */

.page-root .eyebrow {
    position: relative;
    padding-left: 20px;
}

.page-root .eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.page-root .s-forest .eyebrow::before,
.page-root .panel--grow .eyebrow::before,
.page-root .panel--reality .eyebrow::before,
.page-root .pillars .eyebrow::before {
    background: var(--gold);
    opacity: .85;
}

/* --- gold accent on featured/"hi" elements -------------------------------- */

.page-root .mapcard__step--hi,
.page-root .refercard__item--hi {
    position: relative;
}

.page-root .mapcard__step--hi::before,
.page-root .refercard__item--hi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gold);
}

/* --- card lift on hover: premium, subtle, desktop-only (avoids sticky
   :hover states lingering on touch devices) -------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .page-root .crisis,
    .page-root .reality-card,
    .page-root .number-card,
    .page-root .compare-card,
    .page-root .rescard,
    .page-root .seocard {
        transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
    }

    .page-root .crisis:hover,
    .page-root .reality-card:hover,
    .page-root .number-card:hover,
    .page-root .compare-card:hover,
    .page-root .rescard:hover,
    .page-root .seocard:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-2);
    }
}

/* --- crises intro: centered heading, single-line lead on desktop ---------
   The eyebrow gets display:inline-block (rather than .s-head--center's
   display:block) so its dash pseudo-element -- absolutely positioned at
   left:0 of the eyebrow's own box -- hugs the now-centered text instead of
   sitting pinned to the far-left edge of the full-width block.
   max-width is dropped (not just widened) at the same breakpoint the lead
   goes nowrap: the box needs to be genuinely as wide as .wrap so the long
   lead sentence lays out within real layout width instead of visually
   overflowing a narrower box -- text that overflows a box via nowrap still
   paints outside it, which pushes the page's scrollable width even though
   no element's own bounding rect crosses the viewport edge. */
.page-root #crises .crises__intro {
    text-align: center;
}

.page-root #crises .crises__intro .eyebrow {
    display: inline-block;
}

@media (min-width: 1024px) {
    .page-root #crises .crises__intro {
        max-width: none;
    }

    .page-root #crises .crises__intro .lead {
        white-space: nowrap;
    }
}

/* --- crisis cards: icon + heading share one row --------------------------
   crisis__head wraps the icon and <h3> that used to stack vertically. */
.page-root #crises .crisis__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.page-root #crises .crisis__icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.page-root #crises .crisis h3 {
    margin-bottom: 0;
}