/* ════════════════════════════════════════════════════════════════════════
   Marketing stylesheet — the public site on the apex (APP_DOMAIN), loaded
   only from views/layouts/marketing.php, always after base.css.

   Art direction: ARC. The product is named Spandrel, and a spandrel is the
   shape left between an arch and the rectangle around it — the same quarter
   circle as the logo mark. So one motif carries the whole site: a single
   oversized arc corner, on the section boundaries and on a small number of
   cards. Deep indigo grounds with a dot field, warm cream paper between them,
   amber for anything you can act on.

   Two things this deliberately does NOT do, because they read as generated:
   outlined cards with hard offset shadows, and drop shadows generally. Depth
   here comes from overlap and from flat color contrast. Nothing on these
   pages casts a shadow except the hero's editor mock, which is a window.

   Structural tokens (spacing, radius, ink, surfaces) come from base.css's
   :root, as does the shared --mkt-* palette — base.css scopes those under
   `body.marketing-layout, body.guest-layout` so the apex and the guest card
   stay one palette. The tokens below are the ones only these pages use.
   Nothing here touches :root or the app's palette.

   Gabarito = headings, Poppins = body, Nunito = wordmark. All self-hosted;
   regenerate with `python3 scripts/dev/fetch-fonts.py`.

   This file does not load app.css. If a marketing page needs a shared control,
   add it to base.css — do not reach into app.css.
   ════════════════════════════════════════════════════════════════════════ */

body.marketing-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* ── Grounds ── */
    --mkt-cream: #fff8ec;        /* the paper the whole site sits on */
    --mkt-card: #ffffff;         /* a card on cream */
    --mkt-card-soft: #fbf9f3;    /* a row nested inside a white card */
    --mkt-peri: #a5b4fc;         /* periwinkle — the logo's own tint */
    --mkt-deep-2: #17143a;       /* one step below --mkt-deep, for wells */
    --mkt-indigo-2: #3730a3;     /* two steps below --mkt-primary: a screen inside an indigo frame */

    /* ── Ink ── */
    --mkt-body: #514d7a;         /* body copy on cream */
    --mkt-body-faint: #6b6790;
    --mkt-on-deep: #b9b5e4;      /* body copy on deep indigo */
    --mkt-on-deep-faint: #8985c4;
    --mkt-on-indigo: #d2cefa;    /* body copy on the indigo band */

    /* ── Lines and washes ── */
    --mkt-seam-line: #ede1cb;    /* hairline on cream */
    --mkt-hairline: #f0eae0;     /* divider inside a white card */
    --mkt-amber-wash: #fde8c0;   /* tick dot, soft amber chip */
    --mkt-indigo-wash: #e0e4fe;  /* tick dot, soft indigo chip */

    /* ── The arc, at three scales ──
       Section boundaries take --arc-lg, the panels and the configurator take
       --arc, the step cards take --arc-sm. Nothing else gets one: an arc
       inside an arc inside an arc is where the motif stops being a motif. */
    --mkt-arc-lg: 220px;
    --mkt-arc: 110px;
    --mkt-arc-sm: 88px;

    /* ── Dot fields, one per dark ground ── */
    --mkt-dots-deep: radial-gradient(rgba(165, 180, 252, 0.16) 1.5px, transparent 1.5px);
    --mkt-dots-indigo: radial-gradient(rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px);
    --mkt-dots-size: 28px 28px;

    --mkt-display: 'Gabarito', 'Poppins', sans-serif;
    --mkt-wrap: 1280px;
    --mkt-section: clamp(3.25rem, 6vw, 5.5rem);

    background: var(--mkt-cream);
    color: var(--mkt-deep);
    font-size: 16px;
}

body.marketing-layout main { flex: 1; }

.marketing-layout h1,
.marketing-layout h2,
.marketing-layout h3 {
    font-family: var(--mkt-display);
    font-weight: 700;
    /* Gabarito's counters are round and open; the tighter tracking a narrow
       face wants would crowd them. */
    letter-spacing: -0.02em;
    line-height: 1.04;
    text-wrap: pretty;
    color: var(--mkt-deep);
    margin: 0;
}


/* ── Layout helpers ───────────────────────────────────── */

.marketing-layout .wrap {
    max-width: var(--mkt-wrap);
    width: 100%;
    margin: 0 auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.marketing-section { padding: var(--mkt-section) 0; }

/* The eyebrow that replaced the blueprint site's "// mono" labels. */
.mkt-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mkt-accent-ink);
}
.mkt-eyebrow-on-deep { color: var(--mkt-accent); }

.marketing-section-head { max-width: 44rem; margin: 0 auto var(--space-6); text-align: center; }
.marketing-section-head .mkt-eyebrow { margin-bottom: var(--space-3); }
.marketing-section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0 0 var(--space-3); }
.marketing-section-head p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--mkt-body);
}

/* Head that sits left with a supporting note to its right — used wherever a
   section has something to say beyond its title. */
.mkt-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
/* The same head with the note under the title instead of beside it, at every width. */
.mkt-head-split.mkt-head-stack { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.mkt-head-split.mkt-head-stack p { max-width: none; }
.mkt-head-split h2 { font-size: clamp(1.9rem, 3.6vw, 2.875rem); max-width: 36rem; }
.mkt-head-split p {
    margin: 0;
    max-width: 24rem;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--mkt-body);
}
.mkt-band .mkt-head-split h2 { color: #fff; }
.mkt-band .mkt-head-split p { color: var(--mkt-on-indigo); }


/* ── Buttons ──────────────────────────────────────────────
   Solid amber pill. No border, no shadow, nothing to offset: the outlined
   chunky button with a hard shadow is the single most generated-looking
   control on the web and it is not on this site. */

.marketing-layout .btn-primary,
.marketing-layout .btn-primary:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--mkt-accent);
    border: none;
    border-radius: 999px;
    color: var(--mkt-deep);
    font-weight: 600;
    padding: 1rem 1.875rem;
    font-size: 1.0625rem;
    line-height: 1.2;
    transition: background 0.15s ease;
}
.marketing-layout .btn-primary:hover {
    background: #fbbf24;
    color: var(--mkt-deep);
}
.marketing-layout .btn-lg { padding: 1.125rem 2.125rem; font-size: 1.125rem; }

/* Secondary: a text action with a small ringed play mark. Not a second
   button — one primary action per screen, repeated. */
.mkt-play {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    font-weight: 500;
    font-size: 1rem;
    color: var(--mkt-deep);
}
.mkt-play .ring {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--mkt-amber-wash);
    color: var(--mkt-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mkt-play:hover { color: var(--mkt-accent-ink); }

.mkt-on-deep .mkt-play { color: #fff; }
.mkt-on-deep .mkt-play .ring { background: rgba(165, 180, 252, 0.18); color: #fff; }
.mkt-on-deep .mkt-play:hover { color: var(--mkt-accent); }

/* A quiet text link that carries an amber rule instead of an underline. */
.marketing-cta-secondary {
    font-weight: 600;
    font-size: 1rem;
    color: var(--mkt-primary);
    border-bottom: 2px solid var(--mkt-accent);
    padding-bottom: 3px;
}
.marketing-cta-secondary:hover { color: var(--mkt-accent-ink); }

/* On the dark hero the indigo would sit a shade off the ground it is printed on. */
.mkt-on-deep .marketing-cta-secondary { color: #fff; }
.mkt-on-deep .marketing-cta-secondary:hover { color: var(--mkt-accent); }


/* ── Header ───────────────────────────────────────────────
   Deep indigo on every page, so a page whose hero is cream (the legal
   documents) still opens with the same bar. The hero continues it. */

.marketing-header { background: var(--mkt-deep); }
.marketing-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: 1.375rem;
    padding-bottom: 1.375rem;
}

.marketing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    text-decoration: none;
}
.marketing-brand:hover { color: #fff; }
.marketing-brand-mark { width: 38px; height: 38px; border-radius: 12px; display: block; }
.marketing-brand .wordmark {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.marketing-nav { display: flex; align-items: center; gap: 2rem; }
.marketing-nav a {
    color: var(--mkt-on-deep);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
}
.marketing-nav a:hover { color: #fff; }
.marketing-nav a[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid var(--mkt-accent);
    padding-bottom: 3px;
}
.marketing-nav .btn-primary {
    padding: 0.6875rem 1.375rem;
    font-size: 0.875rem;
}
.marketing-nav .btn-primary:hover { color: var(--mkt-deep); }


/* ── Hero ─────────────────────────────────────────────────
   The one section that carries the large arc, cut out of its bottom-right so
   the cream below reads as sitting inside the arch. */

.marketing-hero {
    position: relative;
    background: var(--mkt-deep);
    border-radius: 0 0 var(--mkt-arc-lg) 0;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4.125rem) 0 clamp(3rem, 6vw, 5.5rem);
    color: #fff;
}

/* The ghost arc — the logo shape at page scale, bled off the right edge. */
.marketing-hero::before {
    content: "";
    position: absolute;
    right: -12.5rem;
    top: 2.5rem;
    width: 41rem;
    height: 41rem;
    background: var(--mkt-accent);
    border-radius: 41rem 0 0 0;
    opacity: 0.09;
    pointer-events: none;
}

/* The dot field goes ON TOP of the ghost arc, not under it. A pseudo-element always
   paints above its own element's background-image, so drawing the dots the usual way
   let the arc mask them out — and a big flat patch in an otherwise textured field
   reads as a rendering fault rather than as a shape. */
.marketing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--mkt-dots-deep);
    background-size: var(--mkt-dots-size);
    pointer-events: none;
}
.marketing-hero > .wrap { z-index: 1; }

.marketing-hero .wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 37rem);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.marketing-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.marketing-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #fff;
    max-width: 35rem;
}
.marketing-hero h1 .built { color: var(--mkt-accent); }
.marketing-hero .lede {
    margin: 0;
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    line-height: 1.62;
    color: var(--mkt-on-deep);
    max-width: 31rem;
}
.marketing-hero .mkt-eyebrow { color: var(--mkt-accent); }
.marketing-cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.marketing-hero-note { margin: 0; font-size: 0.875rem; color: var(--mkt-on-deep-faint); }

/* A hero with no second column — the features, pricing and legal pages. */
.marketing-hero-solo .wrap { grid-template-columns: minmax(0, 1fr); }
.marketing-hero-solo .marketing-hero-copy { max-width: 52rem; }


/* ── Seam ─────────────────────────────────────────────────
   The divider between the hero and the first section. It replaced a scrolling
   marquee: a band that moves on its own earns its space by being ignored, and
   a static line that names what you get earns it by being read. */

.mkt-seam {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    padding-top: var(--space-6);
}
.mkt-seam::before,
.mkt-seam::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mkt-seam-line);
}
.mkt-seam span { color: var(--mkt-body-faint); }
.mkt-seam .dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--mkt-accent);
}


/* ── Three steps ──────────────────────────────────────────
   The number sits on the title's line. Stacked above it, the space to the
   right of a 60px circle reads as a hole. */

.marketing-stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.625rem;
}
.marketing-stage {
    background: var(--mkt-card);
    border-radius: var(--mkt-arc-sm) 24px 24px 24px;
    padding: 2.25rem 2.125rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8125rem;
}
.stage-head { display: flex; align-items: center; gap: 0.9375rem; }
.stage-no {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mkt-display);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--mkt-deep);
}
.marketing-stage:nth-child(1) .stage-no { background: var(--mkt-accent); }
.marketing-stage:nth-child(2) .stage-no { background: var(--mkt-peri); }
.marketing-stage:nth-child(3) .stage-no { background: var(--mkt-primary); color: #fff; }
.marketing-stage h3 { font-size: 1.625rem; }
.marketing-stage p { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--mkt-body); }


/* ── Showcase rows ────────────────────────────────────────
   Alternating side and alternating panel color, which is what gives a long
   page rhythm without inventing another device. */

.marketing-showcase { display: flex; flex-direction: column; gap: var(--mkt-section); }
.marketing-showrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.75rem);
    align-items: center;
}
.marketing-showrow.reverse > *:first-child { order: 2; }
.marketing-showrow h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); max-width: 32rem; }
.marketing-showrow > div > p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--mkt-body);
    max-width: 31rem;
}
.mkt-showcopy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }

.marketing-checklist { display: flex; flex-direction: column; gap: 0.8125rem; margin: 0; padding: 0; list-style: none; }
.marketing-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--mkt-deep);
}
.marketing-checklist .tick {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-amber-wash);
    color: var(--mkt-accent-ink);
}
.marketing-checklist.indigo .tick { background: var(--mkt-indigo-wash); color: var(--mkt-primary); }


/* ── Media panels ─────────────────────────────────────────
   A screenshot or a video, framed. The inner radius is the outer arc minus
   the frame's padding, so the two curves stay concentric — a square inner
   corner pokes through the arc, and clipping it just slices it flat. */

.mkt-panel {
    --panel-pad: 1.125rem;
    padding: var(--panel-pad);
    border-radius: var(--mkt-arc) 28px 28px 28px;
    background: var(--mkt-primary);
    overflow: hidden;
}
.mkt-panel.reverse-arc { border-radius: 28px 28px var(--mkt-arc) 28px; background: var(--mkt-card); }

.mkt-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8125rem;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--mkt-arc) - var(--panel-pad)) 16px 16px 16px;
    background: var(--mkt-indigo-2);
    color: var(--mkt-on-deep);
    text-align: center;
    padding: var(--space-4);
}
.mkt-panel.reverse-arc .mkt-slot {
    border-radius: 16px 16px calc(var(--mkt-arc) - var(--panel-pad)) 16px;
    background: #f4f1fb;
    color: #9a93b8;
}
.mkt-slot .mark {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.mkt-panel.reverse-arc .mkt-slot .mark { background: var(--mkt-amber-wash); color: var(--mkt-accent-ink); }
.mkt-slot .mkt-eyebrow { color: inherit; }

/* A filled slot: the same box, with a real screenshot in it instead of the placeholder. Every
   showcase row carries one now, so .mkt-slot above is unused by the shipped pages -- it is kept as
   the placeholder for a row added before its screenshot exists, and the two must keep the same
   aspect-ratio or a filled row and an empty one are different shapes in one section. It
   carries its own radii rather than reusing .mkt-slot's, because an <img> is a replaced element
   and a flex placeholder is not, and only one of the two ever needs object-fit. Shot at 2x by
   scripts/dev/shoot-app.php. The aspect-ratio here, the tag's width/height attributes, the `out` block
   in scripts/dev/app-shots.json and .mkt-slot above all have to agree: disagree and either the image
   is cropped by object-fit or a filled row and an empty placeholder are different shapes. */
.mkt-shot {
    display: block;
    width: 100%;
    /* height:auto is load-bearing, not tidiness. The width/height ATTRIBUTES on the tag (which
       reserve the space and stop the row reflowing) map to presentational hints, so without this
       the used height stays at the file's intrinsic height, aspect-ratio is ignored (it applies
       only when the height is auto), and object-fit shears the sides off an image that already
       had exactly the right aspect. */
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--mkt-arc) - var(--panel-pad)) 16px 16px 16px;
    background: var(--mkt-indigo-2);
}
.mkt-panel.reverse-arc .mkt-shot { border-radius: 16px 16px calc(var(--mkt-arc) - var(--panel-pad)) 16px; }


/* ── Lightbox ─────────────────────────────────────────────
   The button, the hint chip and the dialog are all created by
   public/js/marketing-lightbox.js, so none of this styles anything until that
   script has run -- with no JS the shots stay plain images and none of these
   selectors match. */

.mkt-shot-btn {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    /* The button is a new box around the image inside .mkt-panel, so it has to add nothing:
       a stray line-height leaves a few pixels under the image and the arc stops being
       concentric with the frame. */
    line-height: 0;
    font: inherit;
    color: inherit;
}
/* base.css styles EVERY <button> as a button -- including `button:hover { background: #44403c }`,
   which painted a dark slab behind the screenshot on hover. That rule is (0,1,1) and the class
   above is only (0,1,0), so it wins; naming the states here takes it to (0,2,0). The wrapper is a
   button for the keyboard, not for the look, so every state has to stay invisible. */
.mkt-shot-btn:hover,
.mkt-shot-btn:focus,
.mkt-shot-btn:focus-visible,
.mkt-shot-btn:active {
    background: none;
    color: inherit;
    box-shadow: none;
}
.mkt-shot-btn:focus-visible { outline: 3px solid var(--mkt-accent); outline-offset: 3px; border-radius: 18px; }

/* The affordance. Hidden until hover or keyboard focus: an always-on chip on every screenshot is
   clutter on a page that is trying to sell calm. Touch has no hover and needs none -- the tap
   just works. */
.mkt-shot-hint {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--mkt-deep);
    color: var(--mkt-on-deep);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.mkt-shot-btn:hover .mkt-shot-hint,
.mkt-shot-btn:focus-visible .mkt-shot-hint { opacity: 1; }

/* The dialog fills the viewport and centres the image inside itself, rather than shrinking to
   the image. Two things fall out of that, and both were wrong the other way round: the close
   button can sit in a corner of the SCREEN instead of half over the screenshot it is covering,
   and "did the click land outside the image" becomes exactly `event.target === dialog`. */
.mkt-lightbox {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: clamp(1rem, 4vw, 3rem);
    border: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Giving the dialog a display value overrides the UA sheet's `dialog:not([open]) { display: none }`,
   so a closed lightbox would sit invisibly over the page and eat every click. */
.mkt-lightbox:not([open]) { display: none; }
.mkt-lightbox::backdrop { background: rgba(15, 13, 40, 0.82); }
.mkt-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 14px;
}
.mkt-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--mkt-accent);
    color: var(--mkt-deep);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkt-lightbox-close:hover { background: #fbbf24; }
.mkt-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
    .mkt-lightbox { padding: 0.75rem; }
    .mkt-lightbox-close { top: 0.5rem; right: 0.5rem; width: 36px; height: 36px; }
}

/* The dialog animates in; the hint chip does not need to, and neither does anything for someone
   who has asked for less motion. */
@keyframes mkt-lightbox-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}
.mkt-lightbox[open] { animation: mkt-lightbox-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
    .mkt-lightbox[open] { animation: none; }
    .mkt-shot-hint { transition: none; }
}

/* The walkthrough: a wide dark block with the arc on one corner only. */
.mkt-demo {
    background: var(--mkt-deep);
    border-radius: var(--mkt-arc) 28px 28px 28px;
    padding: clamp(2rem, 3.5vw, 3.25rem) clamp(2rem, 3.5vw, 3.5rem) clamp(2.25rem, 3.5vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.25rem);
    align-items: center;
}
.mkt-demo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mkt-demo h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); color: #fff; }
.mkt-demo p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--mkt-on-deep); }
.mkt-demo-slot {
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    background: var(--mkt-deep-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    color: var(--mkt-on-deep-faint);
}
.mkt-demo-slot .mark {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: var(--mkt-accent);
    color: var(--mkt-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The walkthrough: poster + play ring until clicked, then marketing-video.js swaps in a real
   <video>. .mkt-demo-slot already supplies the 16:9 box, the radius and the ground. */
.mkt-demo-play {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.mkt-demo-play img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mkt-demo-play .mark {
    position: relative;   /* lifts the ring above the poster */
    transition: transform 0.18s ease;
}
/* Same trap as .mkt-shot-btn: base.css styles EVERY <button>, and `button:hover { background:
   #44403c }` is (0,1,1) against this single class's (0,1,0), so it would paint a dark slab over
   the poster. Naming the states takes them to (0,2,0). The ring grows instead. */
.mkt-demo-play:hover,
.mkt-demo-play:focus,
.mkt-demo-play:focus-visible,
.mkt-demo-play:active {
    background: var(--mkt-deep-2);
    color: var(--mkt-on-deep-faint);
}
.mkt-demo-play:hover .mark,
.mkt-demo-play:focus-visible .mark {
    transform: scale(1.08);
}
.mkt-demo-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    background: #000;
}


/* ── Indigo band (examples, and the features spec grid) ───
   Arc on two opposite corners, which is the only place two are allowed. */

.mkt-band {
    background-color: var(--mkt-primary);
    background-image: var(--mkt-dots-indigo);
    background-size: var(--mkt-dots-size);
    border-radius: var(--mkt-arc-lg) 0 var(--mkt-arc-lg) 0;
    padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.25rem, 5vw, 5rem);
    color: #fff;
}
.mkt-band-outer { padding: var(--mkt-section) 0 0; }

.mkt-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
/* Not a link and not clickable -- so no text-decoration reset to undo, and deliberately no hover
   lift: movement under the pointer promises something will happen when you click. */
.mkt-thumb {
    display: block;
    background: var(--mkt-cream);
    border-radius: 18px;
    padding: 0.875rem;
}
/* A cropped hero screenshot of a real starter template (scripts/dev/shoot-example-card.php).
   --tb is what it loads over, and the whole tile if a shot is missing. aspect-ratio rather than a
   fixed height: the column is fluid, so only a ratio keeps the box right at every breakpoint, and
   it reserves the space before the image lands. */
.mkt-thumb .tb-hero {
    aspect-ratio: 5 / 2;
    border-radius: 10px;
    background: var(--tb, var(--mkt-primary));
    overflow: hidden;
}
.mkt-thumb .tb-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mkt-thumb .tb-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.9375rem 0.5rem 0.3125rem;
}
.mkt-thumb .name { font-weight: 600; font-size: 1rem; color: var(--mkt-deep); }
.mkt-thumb .tag { font-size: 0.75rem; color: var(--mkt-body-faint); }

/* The features page's "included on every website" grid, on the same band. */
.mkt-spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.mkt-spec {
    background: var(--mkt-cream);
    border-radius: 18px;
    padding: 1.5rem 1.5rem 1.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}
.mkt-spec strong { font-family: var(--mkt-display); font-weight: 700; font-size: 1.1875rem; color: var(--mkt-deep); }
.mkt-spec span { font-size: 0.875rem; color: var(--mkt-body-faint); line-height: 1.55; }


/* ── Price, on the landing page ───────────────────────────
   A circle, not a badge with a starburst edge. It is the only circle at that
   size on the site, which is what makes it read. */

.mkt-price-row {
    display: grid;
    grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.mkt-price-circle {
    width: 20rem;
    height: 20rem;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--mkt-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mkt-price-circle .figure {
    font-family: var(--mkt-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1;
    color: var(--mkt-deep);
}
.mkt-price-circle .unit { font-size: 1rem; font-weight: 600; color: var(--mkt-deep); }
.mkt-price-circle .fine { font-size: 0.8125rem; color: #7c4b06; }

.mkt-price-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.mkt-price-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); max-width: 33rem; }
.mkt-includes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6875rem 1.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkt-includes li { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; color: var(--mkt-deep); }
.mkt-includes svg { color: var(--mkt-primary); flex-shrink: 0; }

.marketing-addon-strip { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.marketing-addon {
    background: var(--mkt-card);
    border-radius: 999px;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--mkt-body);
}
.marketing-addon strong { color: var(--mkt-accent-ink); font-weight: 600; }


/* ── FAQ ──────────────────────────────────────────────────
   Answered, not collapsed. At six items an accordion hides the thing the
   visitor came to check behind a click. */

.marketing-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
.mkt-faq-item {
    background: var(--mkt-card);
    border-radius: 18px;
    padding: 1.75rem 2rem 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
}
.mkt-faq-item h3 { font-size: 1.3125rem; }
.mkt-faq-item p { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--mkt-body); }


/* ── Closing CTA band ─────────────────────────────────────
   The arc on the top-left, mirroring the hero's bottom-right, so the page is
   bracketed by the same shape it opened with. */

.marketing-cta-band {
    position: relative;
    margin-top: var(--mkt-section);
    background: var(--mkt-deep);
    border-radius: var(--mkt-arc-lg) 0 0 0;
    padding: clamp(3.25rem, 5vw, 5.125rem) 0 clamp(3.5rem, 5vw, 5.25rem);
    overflow: hidden;
    text-align: center;
}
.marketing-cta-band::before {
    content: "";
    position: absolute;
    left: -8.75rem;
    bottom: -11.25rem;
    width: 30rem;
    height: 30rem;
    border-radius: 999px;
    background: var(--mkt-primary);
    opacity: 0.45;
    pointer-events: none;
}
.marketing-cta-band .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}
.marketing-cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; max-width: 41rem; }
.marketing-cta-band p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--mkt-on-deep); max-width: 34rem; }
.marketing-cta-band .marketing-cta { justify-content: center; }
.marketing-cta-note { margin: 0; font-size: 0.875rem; color: var(--mkt-on-deep-faint); }


/* ── Footer ───────────────────────────────────────────────
   Continuous with the closing band, so the page ends in one dark field
   rather than a band, a gap, and then a second darker strip. */

.marketing-footer { background: var(--mkt-deep); color: var(--mkt-on-deep); }
.marketing-footer .wrap { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.marketing-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-6);
}
.marketing-footer-brand p {
    margin: var(--space-3) 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mkt-on-deep);
    max-width: 22rem;
}
.marketing-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
.marketing-footer-col { display: flex; flex-direction: column; gap: 0.625rem; }
.marketing-footer-col h3 {
    font-family: var(--mkt-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.125rem;
}
.marketing-footer-col a { color: var(--mkt-on-deep); font-size: 0.9375rem; text-decoration: none; }
.marketing-footer-col a:hover { color: var(--mkt-accent); }
.marketing-footer-legal {
    border-top: 1px solid rgba(165, 180, 252, 0.16);
    padding-top: var(--space-4);
    font-size: 0.8125rem;
    color: var(--mkt-on-deep-faint);
}


/* ── Pricing configurator ─────────────────────────────────
   A configurator rather than a row of tier cards: the pricing page's whole
   argument is that the arithmetic is in the open, and someone ticking boxes
   and watching one number move is being shown that rather than told it.
   Every price comes from App\AddonCatalog, so what a visitor totals up is
   what Stripe bills.

   All four corners match. This carried the big arc for a while and it was too
   much on the one element the page is built around. */

.mkt-build {
    max-width: 58.75rem;
    margin: 0 auto;
    background: var(--mkt-card);
    border-radius: 28px;
    overflow: hidden;
}

.mkt-build-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--mkt-deep);
    padding: 1.25rem 2.5rem;
}
.mkt-build-head-label { color: var(--mkt-accent); }
.mkt-build-head-note { font-size: 0.8125rem; color: var(--mkt-on-deep); }

.mkt-build-line {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem 2.5rem 1.5rem 2.75rem;
    border-bottom: 1px solid var(--mkt-hairline);
    cursor: pointer;
    transition: background 0.15s ease;
}
.mkt-build-line--base { align-items: start; padding-top: 1.875rem; padding-bottom: 1.875rem; cursor: default; }
.mkt-build-line.is-on { background: #fffbf2; }

/* The tick. A real checkbox underneath, so the label and keyboard both work. */
.mkt-build-check input {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    background: #f6f3fc;
    display: block;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mkt-build-check input:checked {
    background: var(--mkt-accent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1b4b' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")
        center / 15px 15px no-repeat;
}
.mkt-build-check input:focus-visible { outline: 2px solid var(--mkt-primary); outline-offset: 2px; }

/* The base line is not a choice, so it shows a filled indigo mark instead. */
.mkt-build-base-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--mkt-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

.mkt-build-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-width: 0; }
.mkt-build-line--base .mkt-build-body { gap: 0.875rem; }
.mkt-build-name { font-family: var(--mkt-display); font-weight: 700; font-size: 1.25rem; color: var(--mkt-deep); }
.mkt-build-line--base .mkt-build-name { font-size: 1.375rem; }
.mkt-build-summary { font-size: 0.9375rem; color: var(--mkt-body-faint); }

.mkt-build-name-row { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; }

.mkt-qty {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #f6f3fc;
    border-radius: 999px;
    padding: 4px;
}
.mkt-qty button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mkt-body-faint);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}
.mkt-qty button:hover { background: #fff; color: var(--mkt-deep); }
.mkt-qty-value { min-width: 26px; text-align: center; font-weight: 600; font-size: 1rem; }

.mkt-build-includes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5625rem 1.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkt-build-includes li { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.9375rem; color: var(--mkt-body); }
.mkt-build-includes svg { color: var(--mkt-primary); flex-shrink: 0; }

/* Hidden until the add-on is ticked — offering a size for something they have
   not chosen is a decision about a decision. */
.mkt-variant {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 0.5rem;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8299' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        right 1rem center / 13px 13px no-repeat;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--mkt-deep);
    cursor: pointer;
}

.mkt-build-price {
    font-family: var(--mkt-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--mkt-deep);
    white-space: nowrap;
}
.mkt-build-line--base .mkt-build-price { font-size: 1.5rem; }
.mkt-build-price .per {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--mkt-body-faint);
}
/* An unticked add-on's price is a quote, not a charge. */
.mkt-build-line:not(.is-on):not(.mkt-build-line--base) .mkt-build-price { color: var(--mkt-body-faint); }

.mkt-build-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--mkt-card-soft);
    /* Lines up with the add-on names: 2.75rem padding + 26px mark + 1.25rem gap. */
    padding: 1.625rem 2.5rem 1.625rem 7.25rem;
}
.mkt-build-total-label { color: var(--mkt-body-faint); }
.mkt-build-total strong {
    font-family: var(--mkt-display);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--mkt-deep);
}
.mkt-build-total .per {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--mkt-body-faint);
}

.mkt-build-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 2.5rem 2.5rem;
}
.mkt-build-fineprint { margin: 0; font-size: 0.875rem; color: var(--mkt-body-faint); }


/* ── 404 (lot vacant) ─────────────────────────────────────
   The construction scene survives from the blueprint site, redrawn flat: no
   outlines, no gradients, ground shadows as flat ellipses. */

.marketing-404 .wrap {
    display: grid;
    grid-template-columns: minmax(0, 26.25rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.25rem);
    align-items: center;
}
.m404-scene { display: flex; align-items: flex-end; justify-content: center; }
.m404-scene svg { width: 100%; max-width: 23.75rem; height: auto; }
.m404-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.m404-copy h1 { font-size: clamp(2.25rem, 4.5vw, 3.625rem); color: #fff; max-width: 39rem; }
.m404-copy .built { color: var(--mkt-accent); }

/* A dead end that only offers "go home" makes the visitor guess where they
   meant to be. */
.m404-ways { padding: var(--space-6) 0 var(--mkt-section); }
.m404-ways .mkt-seam { padding-top: 0; margin-bottom: 1.75rem; }
.m404-way-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.m404-way {
    background: var(--mkt-card);
    border-radius: 24px;
    padding: 1.75rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
}
.m404-way:first-child { border-radius: var(--mkt-arc-sm) 24px 24px 24px; }
.m404-way strong { font-family: var(--mkt-display); font-weight: 700; font-size: 1.3125rem; color: var(--mkt-deep); }
.m404-way span { font-size: 0.9375rem; color: var(--mkt-body-faint); line-height: 1.55; }
.m404-way:hover strong { color: var(--mkt-accent-ink); }


/* ── Custom work ──────────────────────────────────────────
   /custom, and the callout card that points at it from the landing,
   features and pricing pages. The page's whole job is to get a project
   described and sent, so the form is the one white card on it that carries
   an arc, and everything above it is a signpost. */

.mkt-faq-item a { color: var(--mkt-primary); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--mkt-accent); }
.mkt-faq-item a:hover { color: var(--mkt-accent-ink); }

/* The examples grid on cream (the band's cream-on-indigo cards inverted), and the why-here
   showrow inside the indigo band: white type, the panel a step darker so it does not vanish
   into the band it sits on. */
.mkt-spec-grid.on-paper .mkt-spec { background: var(--mkt-card); }
/* Pushed down past the band's top-left arc: at the wrap's left edge the curve reaches ~135px
   into the band at desktop, and the heading otherwise starts inside it. */
.mkt-band .marketing-showrow { padding-top: clamp(2rem, 6vw, 5.5rem); }
.mkt-band .marketing-showrow h2 { color: #fff; }
.mkt-band .marketing-showrow > div > p { color: var(--mkt-on-indigo); }
.mkt-band .marketing-checklist li { color: #fff; }
.mkt-band .mkt-panel { background: var(--mkt-deep); }
.mkt-panel.mkt-panel-even { border-radius: 28px; }

/* The callout card: copy on the left, the six shapes we build as quiet chips on the right. */
.mkt-custom-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    background: var(--mkt-card);
    border-radius: var(--mkt-arc-sm) 24px 24px 24px;
    padding: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3.25rem);
}
.mkt-custom-callout-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mkt-custom-callout-copy h2 { font-size: clamp(1.625rem, 2.8vw, 2.375rem); max-width: 26rem; }
.mkt-custom-callout-copy p { margin: 0; font-size: 1.0625rem; line-height: 1.62; color: var(--mkt-body); max-width: 31rem; }
.mkt-custom-callout-copy .marketing-cta-secondary { display: inline-flex; align-items: center; gap: 0.4rem; }
.mkt-custom-callout-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkt-custom-callout-list li {
    background: var(--mkt-card-soft);
    border-radius: 12px;
    padding: 0.75rem 0.9375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mkt-deep);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mkt-custom-callout-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--mkt-accent);
}

/* The drawn mock in the "why build it here" row: a page with a listings search embedded in it.
   Flat shapes in the site's own palette so it reads as a diagram, not a screenshot. */
.mkt-custom-mock {
    background: var(--mkt-cream);
    border-radius: 16px;
    padding: 1rem 1.125rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    aspect-ratio: 16 / 10;
}
.mkt-custom-mock span { display: block; }
.mkt-custom-mock .cm-nav { display: flex; align-items: center; gap: 0.625rem; }
.mkt-custom-mock .cm-nav span { height: 6px; width: 34px; border-radius: 999px; background: var(--mkt-seam-line); }
.mkt-custom-mock .cm-nav .cm-logo { width: 16px; height: 16px; border-radius: 6px 6px 6px 0; background: var(--mkt-primary); margin-right: auto; }
.mkt-custom-mock .cm-hero { display: flex; flex-direction: column; gap: 0.4rem; }
.mkt-custom-mock .cm-title { height: 12px; width: 52%; border-radius: 999px; background: var(--mkt-deep); }
.mkt-custom-mock .cm-sub { height: 7px; width: 70%; border-radius: 999px; background: var(--mkt-seam-line); }
.mkt-custom-mock .cm-module {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 2px dashed var(--mkt-accent);
    border-radius: 14px;
    background: var(--mkt-card);
}
.mkt-custom-mock .cm-tag {
    position: absolute;
    top: -0.75rem;
    right: 0.875rem;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background: var(--mkt-accent);
    color: var(--mkt-deep);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mkt-custom-mock .cm-search { display: flex; gap: 0.5rem; }
.mkt-custom-mock .cm-input { flex: 1; height: 22px; border-radius: 8px; border: 1.5px solid var(--mkt-seam-line); background: #fff; }
.mkt-custom-mock .cm-btn { width: 54px; height: 22px; border-radius: 8px; background: var(--mkt-primary); }
.mkt-custom-mock .cm-filters { display: flex; gap: 0.4rem; }
.mkt-custom-mock .cm-filters span { height: 14px; width: 58px; border-radius: 999px; background: var(--mkt-indigo-wash); }
.mkt-custom-mock .cm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; flex: 1; }
.mkt-custom-mock .cm-card { display: flex; flex-direction: column; gap: 0.35rem; }
.mkt-custom-mock .cm-photo { flex: 1; min-height: 34px; border-radius: 8px; background: var(--mkt-peri); }
.mkt-custom-mock .cm-photo.alt { background: var(--mkt-amber-wash); }
.mkt-custom-mock .cm-line { height: 6px; width: 80%; border-radius: 999px; background: var(--mkt-seam-line); }
.mkt-custom-mock .cm-line.short { width: 45%; }
.mkt-custom-mock .cm-foot { display: flex; gap: 0.5rem; }
.mkt-custom-mock .cm-foot span { height: 6px; width: 60px; border-radius: 999px; background: var(--mkt-seam-line); }

/* The inquiry: copy beside the form, the form being the page's one arc-cornered white card. */
.mkt-inquire {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38rem);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.mkt-inquire-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; position: sticky; top: 6rem; }
.mkt-inquire-copy h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); max-width: 22rem; }
.mkt-inquire-copy p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--mkt-body); max-width: 28rem; }

.mkt-form-card {
    background: var(--mkt-card);
    border-radius: 28px 28px var(--mkt-arc) 28px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.mkt-form { display: flex; flex-direction: column; gap: 1.25rem; }
.mkt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.125rem; }
.mkt-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mkt-field label { font-size: 0.9375rem; font-weight: 600; color: var(--mkt-deep); }
.mkt-field label .optional { font-weight: 400; color: var(--mkt-body-faint); font-size: 0.8125rem; margin-left: 0.25rem; }
/* base.css sizes controls for the app's dense forms; a marketing form wants a hand-sized target.
   The input selector repeats base's :not() clauses so it outranks the (0,3,1) base rule. */
.mkt-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.mkt-form textarea {
    width: 100%;
    padding: 0.8125rem 1rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--mkt-deep);
    background: var(--mkt-card-soft);
    border: 1.5px solid var(--mkt-seam-line);
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mkt-form textarea { resize: vertical; min-height: 5.5rem; }
.mkt-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
.mkt-form textarea:focus {
    background: #fff;
    border-color: var(--mkt-primary);
    box-shadow: 0 0 0 3px var(--mkt-indigo-wash);
}
.mkt-form input:not([type=submit]):not([type=checkbox]):not([type=radio]).has-error,
.mkt-form textarea.has-error { border-color: var(--danger); background: #fff; }
.mkt-form ::placeholder { color: var(--mkt-body-faint); opacity: 1; }
.mkt-form .field-error { margin-top: 0; font-size: 0.875rem; }
.mkt-form-alert {
    margin: 0;
    padding: 0.875rem 1.125rem;
    border-radius: 12px;
    background: var(--mkt-amber-wash);
    color: var(--mkt-accent-ink);
    font-size: 0.9375rem;
    font-weight: 500;
}
.mkt-form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; padding-top: 0.25rem; }
.mkt-form-fine { margin: 0; font-size: 0.8125rem; color: var(--mkt-body-faint); }
/* The Turnstile widget, when keys are configured. Left-aligned with the fields; the managed
   mode is invisible to most visitors, so this is mostly reserved space. */
.mkt-form .cf-turnstile:empty { display: none; }

.mkt-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.875rem;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.mkt-sent-mark {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mkt-accent);
    color: var(--mkt-deep);
    margin-bottom: 0.5rem;
}
.mkt-sent h3 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.mkt-sent p { margin: 0; font-size: 1.0625rem; line-height: 1.62; color: var(--mkt-body); max-width: 26rem; }
.mkt-sent .mkt-sent-note { font-size: 0.9375rem; color: var(--mkt-body-faint); }


/* ── Responsive ───────────────────────────────────────────
   The arcs scale with the viewport: a 220px cut-out is a gesture on a 1440px
   band and eats the whole corner of a 380px one. */

@media (max-width: 1080px) {
    .marketing-hero .wrap { grid-template-columns: minmax(0, 1fr); }
    .marketing-hero-copy { max-width: 40rem; }
    .mkt-editor { max-width: 40rem; }
    .mkt-demo { grid-template-columns: minmax(0, 1fr); }
    /* Stacked, the slot is barely wider than a phone, and a 68px ring eats a quarter of it. */
    .mkt-demo-slot .mark { width: 54px; height: 54px; }
    .marketing-404 .wrap { grid-template-columns: minmax(0, 1fr); }
    .m404-scene { order: 2; }
    .mkt-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .marketing-stages { grid-template-columns: minmax(0, 1fr); }
    .marketing-showrow { grid-template-columns: minmax(0, 1fr); }
    .marketing-showrow.reverse > *:first-child { order: 0; }
    .mkt-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marketing-faq { grid-template-columns: minmax(0, 1fr); }
    .mkt-price-row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .mkt-custom-callout { grid-template-columns: minmax(0, 1fr); }
    .mkt-custom-callout-copy h2 { max-width: none; }
    .mkt-inquire { grid-template-columns: minmax(0, 1fr); }
    .mkt-inquire-copy { position: static; }
    .mkt-price-copy { align-items: center; }
    .mkt-includes { text-align: left; }
    .marketing-addon-strip { justify-content: center; }
    .marketing-footer-top { grid-template-columns: minmax(0, 1fr); }
    .m404-way-grid { grid-template-columns: minmax(0, 1fr); }
    /* Title and its supporting note stop sharing a line before either gets narrow
       enough to set badly. */
    .mkt-head-split { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
    .mkt-head-split p { max-width: 34rem; }
}

@media (max-width: 720px) {
    body.marketing-layout {
        --mkt-arc-lg: 120px;
        --mkt-arc: 64px;
        --mkt-arc-sm: 56px;
    }
    .marketing-nav { gap: 1rem; }
    /* The nav links fall away before the action does — someone on a phone who
       came to sign up should still see the button. */
    .marketing-nav a:not(.btn-primary) { display: none; }
    .mkt-seam { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; }
    .mkt-seam::before, .mkt-seam::after { display: none; }
    .marketing-cta { gap: 1rem; }
    .marketing-cta .btn-primary { width: 100%; justify-content: center; }
    .mkt-gallery { grid-template-columns: minmax(0, 1fr); }
    .mkt-spec-grid { grid-template-columns: minmax(0, 1fr); }
    .mkt-includes { grid-template-columns: minmax(0, 1fr); }
    .mkt-form-grid { grid-template-columns: minmax(0, 1fr); }
    .mkt-form-foot .btn-primary { width: 100%; justify-content: center; }
    .mkt-custom-callout-list { grid-template-columns: minmax(0, 1fr); }
    .marketing-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .mkt-build-head { padding: 1rem 1.25rem; }
    .mkt-build-line { padding: 1.25rem 1.25rem 1.25rem 1.25rem; gap: 0.875rem; grid-template-columns: 26px minmax(0, 1fr); }
    .mkt-build-price { grid-column: 2; }
    .mkt-build-includes { grid-template-columns: minmax(0, 1fr); }
    .mkt-build-total { padding: 1.25rem; }
    .mkt-build-total strong { font-size: 2rem; }
    .mkt-build-foot { padding: 1.5rem 1.25rem 1.75rem; }
}


/* ── Hero build demo ──────────────────────────────────────
   The self-assembling editor mock, carried over intact: public/js/marketing-hero.js
   binds to the data-demo-* hooks and swaps which .mb-canvas carries .on, and with no
   JS the first variant stays visible with every block already .built.
   ───────────────────────────────────────────────────────── */

.mkt-editor {
    /* Editor chrome, matched to public/css/generator-chat.css. */
    --ed-side: #292524;
    --ed-foot: #1c1917;
    --ed-line: rgba(255, 255, 255, 0.06);
    --ed-ink: #e7e5e4;
    --ed-ink-dim: #a8a29e;
    --ed-msg: #3a3530;
    --ed-msg-user: #57534e;

    background: var(--surface);
    border: none;
    /* The one shadow on the site. It is a window floating over the hero's dark
       ground, not a card pretending to be lifted off the page. */
    border-radius: 20px;
    box-shadow: 0 26px 64px rgba(12, 10, 38, 0.42);
    overflow: hidden;
}
.mb-chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.55rem var(--space-4);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.mb-dots { display: flex; gap: 6px; }
.mb-dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); }
.mb-url {
    flex: 1;
    padding: 0.2rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-split { display: flex; align-items: stretch; }

/* Left: the chat sidebar. 38% rather than the editor's fixed 360px -- at hero scale a hard
   360px would swallow the preview it's supposed to be framing. */
.mb-side {
    flex: 0 0 38%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--ed-side);
    border-right: 1px solid var(--ed-line);
}
.mb-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--ed-line);
    font-weight: 800;
    font-size: 0.8rem;
    color: #fafaf9;
}
.mb-brand .mark { width: 14px; height: 14px; border-radius: 4px; background: var(--accent-soft); }

.mb-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0.6rem;
    overflow: hidden;
}
.mb-msg {
    max-width: 92%;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--ed-ink);
}
.mb-msg-user { align-self: flex-end; background: var(--ed-msg-user); }
.mb-msg-assistant { background: var(--ed-msg); }

/* Thinking state: three pulsing dots, no wording -- see the copy note in marketing-hero.js. */
.mb-msg-thinking { display: flex; gap: 4px; padding: 8px; background: var(--ed-msg); }
.mb-msg-thinking span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--ed-ink-dim);
    animation: mb-pulse 1.2s ease-in-out infinite;
}
.mb-msg-thinking span:nth-child(2) { animation-delay: 0.15s; }
.mb-msg-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mb-pulse { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* The composer -- the "describe it" input being typed. */
.mb-composer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 46px;
    padding: 0.55rem 0.65rem;
    background: var(--ed-foot);
    border-top: 1px solid var(--ed-line);
    font-family: var(--mono);
    font-size: var(--text-xs);
    color: #dbe6ff;
}
.mb-composer .txt { white-space: pre-wrap; min-width: 0; }
.mb-composer .caret {
    flex: none;
    width: 7px;
    height: 1.05em;
    background: var(--accent-soft);
    animation: mb-blink 1s steps(1) infinite;
}
.mb-composer .mb-send {
    flex: none;
    width: 18px;
    height: 14px;
    margin-left: auto;
    border-radius: 3px;
    background: var(--mkt-primary);
}
@keyframes mb-blink { 50% { opacity: 0; } }

/* Right: the preview pane. */
.mb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ed-foot); }
.mb-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--ed-line);
}
.mb-toolbar-label { margin-right: auto; font-family: var(--mono); font-size: var(--text-xs); color: var(--ed-ink-dim); }
.mb-toolbar .chip { width: 10px; height: 12px; border-radius: 2px; border: 1px solid #57534e; }
.mb-toolbar .chip.wide { width: 16px; height: 11px; border-color: var(--ed-ink-dim); }

/* The variants are stacked and crossfaded rather than swapped in flow: they have different
   natural heights, and a mock that resizes every loop would reflow the whole hero. */
.mb-stage { position: relative; flex: 1; min-height: 320px; }
.mb-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--space-4);
    background-image: var(--mkt-grid-paper);
    background-size: 20px 20px;
    background-color: var(--sv-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.mb-canvas.on { opacity: 1; visibility: visible; }

/* Skeleton blocks: wireframe by default, "built" once revealed (JS adds .built; with no JS the
   markup ships the first variant's pre-built so the frame looks complete). */
.mb-block {
    border: 1px dashed var(--mkt-line-soft);
    border-radius: var(--radius);
    opacity: 0.35;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    overflow: hidden;
}
.mb-block.built { opacity: 1; transform: none; border-color: transparent; }

/* Per-variant palettes. Every block below reads only these, so a new site theme is a palette
   plus its own layout -- not a re-skin of the shared skeleton. */
.mb-canvas[data-variant="gallery"] {
    --sv-bg: #1c1917;
    --sv-nav: #0c0a09;
    --sv-ink: #e7e5e4;
    --sv-muted: #44403c;
    --sv-accent: #f59e0b;
}
.mb-canvas[data-variant="shop"] {
    --sv-bg: #fdf6ec;
    --sv-nav: #7c2d12;
    --sv-ink: #7c2d12;
    --sv-muted: #e7d5c0;
    --sv-accent: #c2410c;
}
.mb-canvas[data-variant="booking"] {
    --sv-bg: #18181b;
    --sv-nav: #09090b;
    --sv-ink: #fafaf9;
    --sv-muted: #3f3f46;
    --sv-accent: #d4af37;
}

/* Shared nav shape -- the one place all three agree. */
.gal-nav, .shop-nav, .book-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--sv-nav);
}
.gal-nav .logo, .shop-nav .logo, .book-nav .logo {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--sv-accent);
}
.gal-nav .links, .shop-nav .links, .book-nav .links { display: flex; gap: 6px; margin-left: auto; }
.gal-nav .links span, .shop-nav .links span, .book-nav .links span {
    width: 20px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
}

/* gallery — split hero over a masonry photo grid. */
.gal-hero { display: flex; gap: 10px; padding: 12px; background: var(--sv-bg); }
.gal-hero .col { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.gal-hero .h { width: 85%; height: 11px; border-radius: 3px; background: var(--sv-ink); }
.gal-hero .h.short { width: 50%; background: var(--sv-accent); }
.gal-hero .l { width: 70%; height: 6px; border-radius: 3px; background: var(--sv-muted); }
.gal-hero .art { width: 74px; aspect-ratio: 1; border-radius: 4px; background: var(--sv-muted); }
.gal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 26px;
    gap: 6px;
    padding: 0 12px;
    background: var(--sv-bg);
}
.gal-item { border-radius: 3px; background: var(--sv-muted); }
.gal-item.tall { grid-row: span 2; }
.gal-item.short { opacity: 0.6; }
.gal-foot { height: 20px; background: var(--sv-nav); }

/* shop — centered hero band over three product cards. */
.shop-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 16px 12px;
    background: var(--sv-muted);
}
.shop-hero .h { width: 55%; height: 11px; border-radius: 3px; background: var(--sv-ink); }
.shop-hero .l { width: 38%; height: 6px; border-radius: 3px; background: var(--sv-accent); opacity: 0.5; }
.shop-hero .btn { width: 52px; height: 15px; border-radius: 999px; background: var(--sv-accent); margin-top: 2px; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; }
.shop-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid var(--sv-muted);
}
.shop-card .swatch { height: 30px; border-radius: 3px; background: var(--sv-muted); }
.shop-card .tick { width: 70%; height: 5px; border-radius: 3px; background: var(--sv-ink); opacity: 0.7; }
.shop-card .price { width: 30%; height: 5px; border-radius: 3px; background: var(--sv-accent); }
.shop-foot { height: 20px; background: var(--sv-nav); }

/* booking — hero split with a booking card, then an hours list. */
.book-hero { display: flex; gap: 10px; padding: 12px; background: var(--sv-bg); }
.book-hero .col { flex: 1; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.book-hero .h { width: 80%; height: 11px; border-radius: 3px; background: var(--sv-ink); }
.book-hero .h.short { width: 45%; background: var(--sv-accent); }
.book-hero .l { width: 65%; height: 6px; border-radius: 3px; background: var(--sv-muted); }
.book-form {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: 5px;
    background: var(--sv-muted);
}
.book-form .field { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.book-form .btn { height: 12px; border-radius: 2px; background: var(--sv-accent); margin-top: 2px; }
.book-hours { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--sv-nav); }
.book-hours .row { display: flex; align-items: center; gap: 8px; }
.book-hours .day { width: 34px; height: 5px; border-radius: 3px; background: var(--sv-accent); }
.book-hours .time { flex: 1; height: 5px; border-radius: 3px; background: var(--sv-muted); }
.book-foot { height: 20px; background: var(--sv-nav); }

/* ── Legal documents (/privacy, /terms) ───────────────────
   A reading column, deliberately plain: these are read start to finish, not
   scanned, so they get none of the arcs or bands.
   ───────────────────────────────────────────────────────── */

/* A reading column, not a marketing page: the drafting-grid furniture the rest of the site uses
   would fight a wall of prose. Deliberately plain, and sized for a long read rather than a scan. */

.marketing-legal { max-width: 46rem; margin: 0 auto; }
.marketing-legal h1 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
}
.marketing-legal h2 {
    margin: var(--space-6) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.marketing-legal p,
.marketing-legal li { line-height: 1.65; color: var(--ink); }
.marketing-legal p { margin: 0 0 var(--space-4); }
.marketing-legal ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.marketing-legal li { margin-bottom: var(--space-2); }
.marketing-legal a { color: var(--mkt-primary); }
.marketing-legal code {
    font-family: var(--mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--mkt-paper);
}

.marketing-legal .legal-lede { font-size: 1.05rem; color: var(--ink-muted); }
.marketing-legal .legal-meta {
    font-family: var(--mono);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
}

/* Shown while App\Legal still holds placeholders. Loud on purpose — the failure mode it guards
   against is a legal page going live with "[REGISTERED ENTITY NAME]" in it, which nobody would
   notice from the outside until a customer did. */
.marketing-legal .legal-review {
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    border: 2px dashed #b45309;
    border-radius: 8px;
    background: #fffbeb;
    color: #78350f;
}
.marketing-legal .legal-review code { background: rgba(180, 83, 9, 0.1); }

/* The subprocessor list. Scrolls in its own box rather than widening the page on a phone. */
.legal-table-scroll { overflow-x: auto; margin: 0 0 var(--space-4); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.legal-table th,
.legal-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
}
.legal-table th { font-weight: 700; white-space: nowrap; }

/* ── Documents: the guides, and anything else read start to finish ───────────
   A reading column, not a landing page. Everything here is measured for prose:
   one narrow column, generous line height, and headings that separate sections
   without shouting. Nothing in this block is decorative except .beam.

   .marketing-doc is also the slice GuideCorpus takes for the help assistant --
   see App\Help\GuideDoc::slice(). A page meant to be citable MUST wrap its body
   in this div: without it the corpus falls back to the whole rendered page and
   the site nav, the footer and a live copyright year end up in a cached prompt
   prefix. GuideCorpus now refuses such a page rather than including it, so the
   symptom is a guide missing from the corpus rather than a silent leak. */
.marketing-doc {
    position: relative;
    max-width: 46rem;
    margin: 0 auto;
    color: var(--mkt-body);
    font-size: 1.02rem;
    line-height: 1.7;
}
.marketing-doc h1 {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 var(--space-4);
    color: var(--mkt-deep);
}
.marketing-doc .doc-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--mkt-body-faint);
    margin: 0 0 2.75rem;
}
/* The section rhythm. The top margin is large and the bottom small on purpose:
   a heading belongs to what follows it, and equal margins make it float between
   two sections looking like it belongs to neither. */
.marketing-doc h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    /* Literal rather than a token: base.css's scale stops at --space-6 (2rem), and a
       reading column wants more air above a section heading than that. Adding a
       --space-7 to the shared scale for one page type would fork it for everything. */
    margin: 2.75rem 0 var(--space-3);
    color: var(--mkt-deep);
    scroll-margin-top: 5rem;
}
.marketing-doc h3 {
    font-size: 1.12rem;
    margin: var(--space-5) 0 var(--space-2);
    color: var(--mkt-deep);
    scroll-margin-top: 5rem;
}
.marketing-doc p { margin: 0 0 var(--space-4); }
.marketing-doc ul,
.marketing-doc ol { margin: 0 0 var(--space-4); padding-left: 1.4rem; }
.marketing-doc li { margin-bottom: var(--space-2); }
.marketing-doc strong { color: var(--mkt-deep); font-weight: 600; }
.marketing-doc a { color: var(--mkt-primary); }

.marketing-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-5);
    font-size: 0.95rem;
}
.marketing-doc th,
.marketing-doc td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--mkt-hairline);
}
.marketing-doc th { color: var(--mkt-deep); font-weight: 600; }
/* A wide table scrolls inside its own container rather than making the page
   scroll sideways. */
.doc-table-scroll { overflow-x: auto; margin: 0 0 var(--space-5); }
.doc-table-scroll table { margin: 0; }

/* The guide index. */
.guide-index { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.guide-index li { margin: 0 0 var(--space-4); }
.guide-index a { display: block; text-decoration: none; color: inherit; }
.guide-index a strong {
    display: block;
    font-size: 1.05rem;
    color: var(--mkt-deep);
    margin-bottom: 0.15rem;
}
.guide-index a span { display: block; color: var(--mkt-body-faint); font-size: 0.95rem; }
.guide-index a:hover strong { text-decoration: underline; }

@media (max-width: 640px) {
    .marketing-doc { font-size: 1rem; }
    .marketing-doc .doc-lede { font-size: 1.05rem; }
}