/* IoT Workshop - public home screen. Uses the admin.css design tokens. */

.home-body { display: flex; flex-direction: column; min-height: 100vh; }

.home-topbar { position: sticky; top: 0; z-index: 30; }
.home-nav { display: flex; align-items: center; gap: 18px; }
.home-nav .btn { width: auto; padding: 10px 18px; }
.home-nav .topnav-link { font-weight: 600; }

.home-main { flex: 1; }

/* Hero. Copy on the left, the device photograph on the right; one column
   below 900px, where the photograph follows the actions. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 64px;
}

.hero-eyebrow {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.hero-title {
    margin: 0 0 18px;
    font-size: 48px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.hero-text { margin: 0 0 30px; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }

.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--text-soft);
}

.hero-points li { display: flex; align-items: center; gap: 8px; }

.hero-points li::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.hero-figure {
    position: relative;
    margin: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(16, 24, 40, 0.35);
}

.hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: var(--page-bg);
}

/* The reading card overlaps the photograph's lower left corner. */
.hero-badge {
    position: absolute;
    left: -14px;
    bottom: -18px;
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 24px -14px rgba(16, 24, 40, 0.45);
}

.hero-badge-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.hero-badge-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hero-badge-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #12855b); }
/* The primary button is defined in app.css, which only the signed-in layout
   loads. The public pages get the same treatment here so a call to action
   looks like one. */
.home-body .btn { text-decoration: none; }
.btn-primary-green { background: var(--green); color: #fff; border-color: transparent; }
.btn-primary-green:hover { background: #0e6f4b; }

.btn-lg { padding: 14px 26px; font-size: 16px; width: auto; text-decoration: none; }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { background: #f9fafb; }

/* Sections */
.section { padding: 60px 24px; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-heading {
    max-width: 1100px;
    margin: 0 auto 12px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
}

.section-lead {
    max-width: 620px;
    margin: 0 auto 34px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* A heading with no lead under it keeps the original spacing. */
.section-heading + .feature-grid,
.section-heading + .step-grid { margin-top: 34px; }

.feature-grid {
    display: grid;
    /* min() lets a track shrink to the container instead of overflowing it
       on a narrow phone; at any width with room for 280px nothing changes. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-card {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.section-alt .feature-card, .step-card { background: var(--page-bg); }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #eaf1fb;
    color: var(--blue);
}

.feature-icon svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.feature-name { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.feature-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* Steps */
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* Four numbered steps hold their row down to tablet width. */
.step-grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.step-card { padding: 24px 22px; border: 1px solid var(--border); border-radius: 10px; }

.step-number {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--blue);
}

.step-name { margin: 0 0 8px; font-size: 17px; font-weight: 700; }

/* Workshop period notice. Informative, not an advertisement: one card, the
   page's own blue, no colour it does not already use. */
.workshop-section { padding-top: 46px; padding-bottom: 46px; }

.workshop-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 12px;
    box-shadow: 0 10px 26px -22px rgba(16, 24, 40, 0.5);
}

.workshop-main { display: flex; align-items: flex-start; gap: 18px; }

.workshop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #eaf1fb;
    color: var(--blue);
}

.workshop-icon svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.workshop-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.workshop-title { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.workshop-text { margin: 0 0 12px; max-width: 760px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }

.workshop-highlight {
    display: inline-block;
    margin: 0;
    padding: 9px 14px;
    background: #eaf1fb;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue);
}

/* Three columns, so five answers read as 3 + 2 rather than leaving a single
   orphan at the end of a row of four. */
.workshop-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
    margin: 26px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--border);
}

.workshop-fact dt { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.workshop-fact dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* Per-account status. Tone shifts with how much time is left. */
.workshop-status {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--page-bg);
}

.workshop-status.is-open { border-color: #cddffa; background: #f4f8fe; }
.workshop-status.is-soon { border-color: #f3d19b; background: #fffaf0; }
.workshop-status.is-done { border-color: var(--border); background: var(--page-bg); }

.workshop-status-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.workshop-status-dot {
    flex: none;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--blue);
}

.is-soon .workshop-status-dot { background: #d9860b; }
.is-done .workshop-status-dot { background: var(--text-soft); }

.workshop-status-meta { margin: 6px 0 0 19px; font-size: 14px; color: var(--text-muted); }

.workshop-bar {
    height: 6px;
    margin: 14px 0 0 19px;
    background: #e4e7ec;
    border-radius: 999px;
    overflow: hidden;
}

.workshop-bar span { display: block; height: 100%; background: var(--blue); }
.is-soon .workshop-bar span { background: #d9860b; }
.is-done .workshop-bar span { background: var(--text-soft); }

/* Platform flow diagram */
.flow-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 26px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
}

.flow-svg { display: block; width: 100%; min-width: 640px; height: auto; }

.flow-node rect { fill: var(--page-bg); stroke: var(--border); stroke-width: 1.5; }
.flow-node-primary rect { fill: #eaf1fb; stroke: var(--blue); }

.flow-icon {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow-title { font-size: 17px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.flow-sub { font-size: 13px; fill: var(--text-muted); text-anchor: middle; }

.flow-line path { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.flow-line .flow-arrow { stroke: var(--blue); stroke-linejoin: round; }

/* Who it is for */
.audience {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
}

.audience-image {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.audience-heading { margin: 0 0 14px; text-align: left; }

.audience-list {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.audience-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text); }

.audience-tick {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    fill: none;
    stroke: var(--blue);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* CTA */
.cta { padding: 66px 24px 74px; text-align: center; }
/* The hero's actions sit at the start of their column; here the section is
   centred, so its actions are too. */
.cta .hero-actions { justify-content: center; }
.cta-text { max-width: 520px; margin: 0 auto 28px; }
.cta-link { font-size: 15px; }

/* Footer */
.home-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 28px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.home-footer .footer-left { display: flex; align-items: center; gap: 10px; }
.home-footer .footer-right { display: flex; gap: 18px; }
.home-footer a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
.home-footer a:hover { color: var(--text); }

/* Responsive */
/* The public header shows its own navigation from 640px up, so the burger -
   which admin.css turns on at 980 for the signed-in sidebar - stays hidden. */
@media (min-width: 641px) {
    .home-topbar .nav-toggle { display: none; }
}

@media (max-width: 980px) {
    /* Tablet: one column, copy first, photograph under the actions. */
    .hero { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px 52px; }
    .hero-text { max-width: none; }
    .hero-visual { max-width: 560px; }
    /* Inside the photograph now: the hero is no longer indented by a second
       column, so an overhanging card would sit against the window edge. */
    .hero-badge { left: 16px; bottom: -14px; }
    /* Two by two reads better than a row of three and an orphan. */
    .step-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workshop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audience { grid-template-columns: 1fr; gap: 32px; }
    .audience-visual { max-width: 460px; }
}

@media (max-width: 860px) {
    .hero { padding: 56px 20px 48px; }
    .hero-title { font-size: 38px; }
    .hero-text { font-size: 16px; }
    .section, .cta { padding: 46px 20px; }
    .section-heading { font-size: 25px; }
    .flow-wrap { padding: 18px 14px; }
}

@media (max-width: 640px) {
    .home-topbar { flex-wrap: wrap; height: auto; padding: 12px 16px; }
    .nav-toggle { display: inline-flex; }
    .home-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 8px; }
    .home-nav.is-open { display: flex; }

    /* The burger keeps its place: second on the header's first row, hard
       right, open or closed. admin.css gives it order:3 for the signed-in
       sidebar, which on this wrapping public header pushed it onto a row of
       its own the moment the menu opened. Pinning both orders holds it. */
    .home-topbar .nav-toggle { order: 2; }
    .home-nav { order: 3; }

    /* admin.css hides .topnav-link at this width - right for the signed-in
       header, wrong here, where it is the Login entry and the dropdown was
       left offering Sign Up alone. It comes back as a real button, sitting
       above Sign Up in the order the markup already has them. */
    .home-nav .topnav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .home-nav .topnav-link:hover { background: #f9fafb; color: var(--text); }

    .home-nav .btn, .home-nav .topnav-link { width: 100%; text-align: center; }
    .hero-title { font-size: 31px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .home-footer { flex-direction: column; align-items: flex-start; }

    /* Phone: the overlapping reading card would hang off the screen, so it
       sits under the photograph instead. */
    .hero-figure { padding: 12px; }
    .hero-badge { position: static; margin-top: 12px; box-shadow: none; }
    .hero-points { gap: 8px 16px; }

    /* The notice stays readable on a phone: icon above the copy, one column
       of facts, nothing shrunk. */
    .workshop-card { padding: 22px 18px; }
    .workshop-main { flex-direction: column; gap: 14px; }
    .workshop-title { font-size: 22px; }
    .workshop-highlight { display: block; }
    .workshop-facts { grid-template-columns: 1fr; gap: 14px; }
    .workshop-status-line { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Legal pages: Terms and Privacy. Documentation layout on the public shell -
   contents beside the text on desktop, one column on a phone.
   --------------------------------------------------------------------------- */

.legal-doc {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
        "head head"
        "notice notice"
        "toc body";
    align-items: start;
    gap: 0 34px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 24px 72px;
}

.legal-head { grid-area: head; margin-bottom: 26px; }
.legal-head .page-title { font-size: 38px; }
.legal-head .page-subtitle { margin-bottom: 10px; }
.legal-updated { margin: 0; font-size: 14px; color: var(--text-soft); }

.legal-toc {
    grid-area: toc;
    position: sticky;
    top: 88px;
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.legal-toc-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 4px; font-size: 13.5px; line-height: 1.45; }
.legal-toc a { color: var(--text-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--blue); text-decoration: underline; }

/* The reading column: comfortable measure, plain typography. */
.legal-body {
    grid-area: body;
    max-width: 760px;
    padding: 30px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.legal-body section { scroll-margin-top: 88px; }
.legal-body section + section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.legal-body section:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

.legal-body h2 { margin: 0 0 12px; font-size: 21px; font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }
.legal-body h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.legal-body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--blue); font-weight: 600; }

.legal-body ul, .legal-body ol { margin: 0 0 12px; padding-left: 22px; }
.legal-body li { margin-bottom: 7px; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); }

.legal-body dl { margin: 0 0 12px; }
.legal-body dt { margin-top: 12px; font-weight: 700; color: var(--text); font-size: 15.5px; }
.legal-body dt:first-child { margin-top: 0; }
.legal-body dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); }

.legal-body code {
    padding: 1px 6px;
    background: #eef0f4;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    color: var(--text);
}

.legal-contact { list-style: none; padding-left: 0; }
.legal-contact li { margin-bottom: 6px; }

/* An unconfirmed legal fact, wherever it would have appeared. */
.legal-todo {
    display: inline-block;
    padding: 1px 8px;
    background: #fffaf0;
    border: 1px dashed #e0a33a;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #8a5a08;
}

/* A point the company must review before publishing. */
.legal-flag {
    margin-top: 14px;
    padding: 12px 15px;
    background: #fffaf0;
    border: 1px solid #f3d19b;
    border-radius: 8px;
    font-size: 14.5px;
    color: #8a5a08;
}

.legal-pending {
    grid-area: notice;
    margin-bottom: 26px;
    padding: 18px 22px;
    background: #fffaf0;
    border: 1px solid #f3d19b;
    border-left: 4px solid #d9860b;
    border-radius: 10px;
}

.legal-pending-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #8a5a08; }
.legal-pending p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #8a5a08; }
.legal-pending ul { margin: 0; padding-left: 20px; }
.legal-pending li { font-size: 14.5px; line-height: 1.6; color: #8a5a08; }
.legal-pending code { background: #fff3dc; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

@media (max-width: 900px) {
    .legal-doc {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "notice" "toc" "body";
        gap: 0;
        padding: 32px 20px 56px;
    }

    .legal-head .page-title { font-size: 30px; }
    .legal-toc { position: static; margin-bottom: 20px; }
    .legal-body { max-width: none; padding: 22px 20px; }
    .legal-body section + section { margin-top: 24px; padding-top: 20px; }
}

/* ------------------------------------------------------------------
   Outer shell inset

   Same treatment as the signed-in shell (app.css): the public layout
   also renders three siblings of <body> - .home-topbar, .home-main and
   .home-footer - so insetting the body is what holds the header, the
   full-bleed section bands and the footer on one shared left and right
   edge. The sections keep their own 1100px centred content; only the
   outer edge moves.

   Scoped to .home-body, so the signed-in shell and the admin panel,
   which share admin.css, are unaffected.
   ------------------------------------------------------------------ */
.home-body {
    /* Matches app.css so both shells sit on the same edge. */
    --shell-inset: 40px;
    --shell-max: 1680px;

    padding-left: var(--shell-inset);
    padding-right: var(--shell-inset);
}

/* box-sizing: border-box (admin.css) keeps the padding inside 100vw, so
   the inset never introduces body-level horizontal scrolling. */
.home-body > .home-topbar,
.home-body > .home-main,
.home-body > .home-footer {
    width: 100%;
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 980px) {
    .home-body { --shell-inset: 20px; }
}

@media (max-width: 640px) {
    .home-body { --shell-inset: 12px; }
}

/* Small phones: a safe margin only, so the header and the hero keep the
   compact padding they already switch to at this width. */
@media (max-width: 420px) {
    .home-body { --shell-inset: 8px; }
}

/* ------------------------------------------------------------------
   Full-bleed bars

   The header and footer keep their content on the shell edge set above,
   but their white surface runs to the browser edge. Two stacked spread
   shadows do that without touching layout, so the logo, the navigation
   and the footer links stay exactly where they were: the first shadow
   paints the surface across the bleed, and the second shows through
   along one edge as the 1px rule, continuing the bar's own border.
   clip-path holds the bleed to the bar's own height.

   Neither a box-shadow nor a clip-path contributes to scrollable
   overflow, so this cannot reintroduce horizontal scrolling - which
   rules out the usual full-bleed tricks (100vw, or an absolutely
   positioned pseudo-element) that do.
   ------------------------------------------------------------------ */

/* The surface is pushed up by the spread plus 1px, so it stops one pixel
   short of the bar's bottom and leaves the border colour exposed exactly
   where .topbar already draws its border-bottom. Offsetting by 1px alone
   would do nothing - the 100vmax spread dwarfs it. */
.home-body > .home-topbar {
    box-shadow:
        0 calc(-100vmax - 1px) 0 100vmax var(--surface),
        0 0 0 100vmax var(--border);
    clip-path: inset(0 -100vmax);
}

/* Mirrored: the rule stays at the top, matching the footer's border-top. */
.home-body > .home-footer {
    box-shadow:
        0 calc(100vmax + 1px) 0 100vmax var(--surface),
        0 0 0 100vmax var(--border);
    clip-path: inset(0 -100vmax);
}

/* ------------------------------------------------------------------
   Home content alignment

   The body content shares the header's content area exactly: it starts
   where the brand starts and ends where the header's last control ends.

   That boundary is the shell inset (above) plus the header's own
   horizontal padding, so one gutter variable - kept equal to what
   .topbar/.home-topbar use at each width - aligns every section to it.
   The gutter goes on the section elements; the containers inside them
   drop their 1100px cap and fill the resulting content box.

   A new Home section needs no rule of its own: give it class="section"
   and it picks up this alignment.
   ------------------------------------------------------------------ */
.home-body {
    /* admin.css: .topbar padding is 28px, dropping to 16px at 980, and
       home.css keeps .home-topbar on 16px below that. */
    --home-gutter: 28px;
}

@media (max-width: 980px) {
    .home-body { --home-gutter: 16px; }
}

/* The section elements carry the gutter. Only the horizontal padding is
   set, so every vertical rhythm already defined per breakpoint stands. */
.home-main > .hero,
.home-main > .section,
.home-main > .cta {
    padding-left: var(--home-gutter);
    padding-right: var(--home-gutter);
}

/* The containers inside fill that box instead of capping at 1100px.
   .hero and .audience are section and container in one element, so they
   appear here as well as above. */
.home-main .hero,
.home-main .audience,
.home-main .section-heading,
.home-main .feature-grid,
.home-main .step-grid,
.home-main .workshop-card,
.home-main .flow-wrap {
    max-width: none;
}

/* ------------------------------------------------------------------
   Tinted sections as panels

   The alternating sections used to be full-width bands, so their
   surface ran the whole width of the shell and finished 28px outside
   the content boundary the rest of the page aligns to, with square
   corners cutting across it.

   They now sit on that boundary as panels, matching the workshop card
   that already sits there: the gutter moves from padding to margin, so
   the panel edge lands exactly where the brand and the header's last
   control do, and the panel carries the card's border and radius. The
   horizontal padding inside matches the workshop card too, so content
   in every panel on the page shares one inset.
   ------------------------------------------------------------------ */
.home-main > .section-alt {
    margin-left: var(--home-gutter);
    margin-right: var(--home-gutter);
    padding-left: 32px;
    padding-right: 32px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* The workshop card tightens here, and these follow it. */
@media (max-width: 640px) {
    .home-main > .section-alt {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* The four numbered steps hold two columns from tablet down, which the panel
   inset leaves too narrow on a small phone: words like "Visualization" then
   spill out of their card. They get a column each here instead. */
@media (max-width: 420px) {
    .step-grid-4 { grid-template-columns: 1fr; }
}