/* =====================================================================
   R1BBIT — Home page styles (r1h-*)
   Loaded only on the front page, after custom.css. All classes are
   prefixed with r1h- so nothing here collides with custom.css rules
   (e.g. .cta-card with !important) or Bootstrap utilities.
   ===================================================================== */

:root {
    --r1h-accent: var(--primary-color, #10b981);
    --r1h-accent-dark: var(--primary-dark, #059669);
    --r1h-accent-soft: rgba(16, 185, 129, 0.12);
    --r1h-bg: var(--dark-bg, #0f172a);
    --r1h-bg-deep: #0b1120;
    --r1h-bg-raised: var(--dark-bg-light, #1e293b);
    --r1h-line: rgba(255, 255, 255, 0.08);
    --r1h-line-strong: rgba(255, 255, 255, 0.16);
    --r1h-text: #e2e8f0;
    --r1h-text-soft: var(--text-light, #cbd5e1);
    --r1h-muted: var(--text-muted, #94a3b8);
    --r1h-light-bg: #f6f8fb;
    --r1h-light-text: #0f172a;
    --r1h-light-muted: #64748b;
    --r1h-light-line: #e2e8f0;
    --r1h-radius: 18px;
    --r1h-radius-sm: 12px;
    --r1h-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- section shell ---------- */
.r1h-sec {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}
.r1h-sec--dark {
    background: var(--r1h-bg);
    color: var(--r1h-text-soft);
}
.r1h-sec--deep {
    background: var(--r1h-bg-deep);
    color: var(--r1h-text-soft);
}
.r1h-sec--light {
    background: var(--r1h-light-bg);
    color: var(--r1h-light-text);
}
.r1h-sec--white {
    background: #fff;
    color: var(--r1h-light-text);
}
.r1h-sec--dark h1, .r1h-sec--dark h2, .r1h-sec--dark h3, .r1h-sec--dark h4,
.r1h-sec--deep h1, .r1h-sec--deep h2, .r1h-sec--deep h3, .r1h-sec--deep h4 {
    color: #fff;
}
.r1h-sec--light h1, .r1h-sec--light h2, .r1h-sec--light h3, .r1h-sec--light h4,
.r1h-sec--white h1, .r1h-sec--white h2, .r1h-sec--white h3, .r1h-sec--white h4 {
    color: var(--r1h-light-text);
}

/* soft glow backdrop for dark sections */
.r1h-sec--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 85% 0%, rgba(16, 185, 129, 0.16), transparent 70%),
        radial-gradient(40% 40% at 0% 100%, rgba(16, 185, 129, 0.07), transparent 70%);
}
.r1h-sec--grid::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* grid lines, faded at the edges with a plain gradient overlay
       (mask-image over a full-viewport layer was too expensive to raster) */
    background-image:
        radial-gradient(70% 70% at 50% 40%, transparent 40%, var(--r1h-bg) 100%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
}
.r1h-sec > .container {
    position: relative;
    z-index: 1;
}

/* ---------- section header ---------- */
.r1h-head {
    max-width: 780px;
    margin: 0 auto 3.5rem;
    text-align: center;
}
.r1h-head--left {
    margin-left: 0;
    text-align: left;
}
.r1h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--r1h-accent);
    margin-bottom: 1rem;
}
.r1h-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--r1h-accent);
    box-shadow: 0 0 0 4px var(--r1h-accent-soft);
}
.r1h-title {
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 1.1rem;
}
.r1h-title .r1h-hl {
    color: var(--r1h-accent);
}
.r1h-lead {
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0;
}
.r1h-sec--dark .r1h-lead, .r1h-sec--deep .r1h-lead { color: var(--r1h-text-soft); }
.r1h-sec--light .r1h-lead, .r1h-sec--white .r1h-lead { color: #334155; }
.r1h-lead strong { font-weight: 700; }
.r1h-sec--dark .r1h-lead strong, .r1h-sec--deep .r1h-lead strong { color: #fff; }

/* ---------- buttons ---------- */
.r1h-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.r1h-btn:hover { transform: translateY(-2px); text-decoration: none; }
.r1h-btn i { font-size: 1.05em; }
.r1h-btn--primary {
    background: var(--r1h-accent);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.7);
}
.r1h-btn--primary:hover { background: var(--r1h-accent-dark); color: #fff; }
.r1h-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: var(--r1h-line-strong);
}
.r1h-btn--ghost:hover { border-color: var(--r1h-accent); color: #fff; background: rgba(255, 255, 255, 0.04); }
.r1h-btn--ghost-dark {
    background: transparent;
    color: var(--r1h-light-text);
    border-color: #cbd5e1;
}
.r1h-btn--ghost-dark:hover { border-color: var(--r1h-accent); color: var(--r1h-accent-dark); }
.r1h-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--r1h-accent);
    font-weight: 600;
    text-decoration: none;
}
.r1h-link:hover { color: var(--r1h-accent-dark); text-decoration: none; }
.r1h-link i { transition: transform 0.2s ease; }
.r1h-link:hover i { transform: translateX(3px); }

/* ---------- chips ---------- */
.r1h-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.r1h-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--r1h-line-strong);
    color: var(--r1h-text-soft);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}
.r1h-chip--accent {
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
    background: var(--r1h-accent-soft);
}
.r1h-chip--mono { font-family: var(--r1h-mono); font-weight: 500; font-size: 0.8rem; }
.r1h-sec--light .r1h-chip, .r1h-sec--white .r1h-chip {
    border-color: var(--r1h-light-line);
    color: #334155;
    background: #fff;
}
.r1h-sec--light .r1h-chip--accent, .r1h-sec--white .r1h-chip--accent {
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--r1h-accent-dark);
    background: var(--r1h-accent-soft);
}

/* ---------- cards ---------- */
.r1h-card {
    position: relative;
    height: 100%;
    /* column + margin-top:auto on the footer keeps the chip rows on one line
       across the row, however uneven the paragraphs above them are */
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--r1h-radius);
    border: 1px solid var(--r1h-line);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.r1h-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(255, 255, 255, 0.045);
}
.r1h-sec--light .r1h-card, .r1h-sec--white .r1h-card {
    background: #fff;
    border-color: var(--r1h-light-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.r1h-sec--light .r1h-card:hover, .r1h-sec--white .r1h-card:hover {
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.25);
    border-color: rgba(16, 185, 129, 0.5);
    background: #fff;
}
.r1h-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--r1h-accent-soft);
    color: var(--r1h-accent);
    font-size: 1.45rem;
    margin-bottom: 1.1rem;
}
.r1h-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
}
.r1h-card__text {
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
}
.r1h-sec--dark .r1h-card__text, .r1h-sec--deep .r1h-card__text { color: var(--r1h-muted); }
.r1h-sec--light .r1h-card__text, .r1h-sec--white .r1h-card__text { color: var(--r1h-light-muted); }
.r1h-card__foot {
    margin-top: auto;
    padding-top: 1.25rem;
}

/* ---------- browser window frame ---------- */
.r1h-window {
    position: relative;
    border-radius: var(--r1h-radius);
    background: var(--r1h-bg-deep);
    border: 1px solid var(--r1h-line-strong);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(16, 185, 129, 0.08);
    overflow: hidden;
}
.r1h-window__bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--r1h-line);
}
.r1h-window__dots {
    display: inline-flex;
    gap: 6px;
}
.r1h-window__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.r1h-window__dots i:nth-child(1) { background: #f87171; }
.r1h-window__dots i:nth-child(2) { background: #fbbf24; }
.r1h-window__dots i:nth-child(3) { background: #34d399; }
.r1h-window__title {
    margin-left: auto;
    margin-right: auto;
    font-family: var(--r1h-mono);
    font-size: 0.78rem;
    color: var(--r1h-muted);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.2rem 0.75rem;
    border-radius: 6px;
}
.r1h-window__body {
    position: relative;
    display: block;
    background: var(--r1h-bg-deep);
}
.r1h-window__body img {
    display: block;
    width: 100%;
    height: auto;
}
/* The frame follows the screenshot, it does not crop it: shots come in
   different aspect ratios and a fixed ratio either cuts the widgets panel
   off the right edge (cover) or drowns the image in empty space (contain).
   The fixed ratio is kept only for the skeleton shown when a file is absent. */
.r1h-window--empty .r1h-window__body {
    aspect-ratio: 16 / 10;
}
/* near-square shots (a phone panel, not a browser page) would otherwise tower
   over the text beside them */
.r1h-window--narrow {
    max-width: 440px;
    margin-inline: auto;
}
/* skeleton placeholder shown until a screenshot file exists */
.r1h-window__ph {
    position: absolute;
    inset: 0;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem;
}
.r1h-window__ph i {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    background-size: 200% 100%;
    animation: r1h-shimmer 1.8s linear infinite;
}
@keyframes r1h-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ---------- code window ---------- */
.r1h-code {
    border-radius: var(--r1h-radius);
    background: var(--r1h-bg-deep);
    border: 1px solid var(--r1h-line-strong);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.r1h-code__bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--r1h-line);
}
.r1h-code__file {
    font-family: var(--r1h-mono);
    font-size: 0.8rem;
    color: var(--r1h-muted);
}
.r1h-code__copy {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--r1h-text-soft);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--r1h-line-strong);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.r1h-code__copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.r1h-code__copy.is-done { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.5); }
.r1h-code pre {
    margin: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    font-family: var(--r1h-mono);
    font-size: 0.86rem;
    line-height: 1.6;
    color: #cbd5e1;
    background: transparent;
    /* Wrap rather than scroll: a horizontal scrollbar inside a card hides
       the end of the longest line, and on a page meant to be skimmed nobody
       drags it. (text-indent is no help for a hanging indent here — the
       block is one text node, so it would shift every line but the first.) */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
}
.r1h-code pre code { font-family: inherit; color: inherit; background: transparent; padding: 0; }
.r1h-code .r1h-c { color: #64748b; font-style: italic; }
.r1h-code .r1h-k { color: #f59e0b; font-weight: 700; }
.r1h-code .r1h-d { color: #e4d6a9; }
.r1h-code .r1h-n { color: #60a5fa; }
.r1h-code .r1h-s { color: #86efac; }
.r1h-code .r1h-f { color: #c084fc; }
.r1h-code .r1h-v { color: #7dd3fc; }
.r1h-code__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 1.25rem;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r1h-accent);
}
.r1h-code__divider::before, .r1h-code__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.45), transparent);
}
.r1h-code__foot {
    padding: 0.65rem 1.25rem;
    border-top: 1px solid var(--r1h-line);
    font-size: 0.8rem;
    color: var(--r1h-muted);
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.r1h-hero {
    /* The body already offsets the fixed header, so the section starts
       below it — the old calc() added that height a second time. Plain
       section padding is all this needs. */
    padding: 3rem 0 4.5rem;
    /* Still tall enough to own the first screen, but the content sits at
       the top of it: centring pushed the headline down by half of whatever
       space was left over, which is what read as a dead band. */
    min-height: min(78svh, 720px);
    display: flex;
    align-items: flex-start;
}
.r1h-hero > .container { width: 100%; }
.r1h-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
.r1h-hero__title {
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.06;
    color: #fff;
    margin: 0 0 1.25rem;
}
.r1h-hero__title .r1h-hl { color: var(--r1h-accent); }
.r1h-hero__sub {
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--r1h-text-soft);
    max-width: 560px;
    margin: 0 0 2rem;
}
.r1h-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}
.r1h-hero__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--r1h-muted);
    margin: 0 0 2.5rem;
}
.r1h-hero__note i { color: var(--r1h-accent); }
.r1h-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid var(--r1h-line);
    margin-top: 4rem;
    padding-top: 1.75rem;
    gap: 1.25rem 2.5rem;
}
.r1h-hero__note { margin-bottom: 0; }
.r1h-stat__value {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
}
.r1h-stat__label {
    display: block;
    font-size: 0.8rem;
    color: var(--r1h-muted);
    margin-top: 0.2rem;
}
.r1h-hero__visual {
    position: relative;
}
.r1h-hero__visual .r1h-window {
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transform-origin: left center;
    transition: transform 0.6s ease;
}
.r1h-hero__visual:hover .r1h-window {
    transform: perspective(1400px) rotateY(-2deg) rotateX(0deg);
}
/* photograph in the hero: a plain card, not browser chrome — a phone and a
   board framed as a browser window reads as a screenshot of a browser */
.r1h-hero__shot {
    margin: 0;
    border-radius: var(--r1h-radius);
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
}
.r1h-hero__shot img {
    display: block;
    width: 100%;
    height: auto;
}

.r1h-hero__badge {
    position: absolute;
    left: -1.25rem;
    bottom: -1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: var(--r1h-bg-raised);
    border: 1px solid var(--r1h-line-strong);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.85rem;
    z-index: 2;
}
.r1h-hero__badge i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--r1h-accent-soft);
    color: var(--r1h-accent);
    font-size: 1.1rem;
}
.r1h-hero__badge small { display: block; color: var(--r1h-muted); font-size: 0.75rem; }

/* =====================================================================
   2. ECOSYSTEM
   ===================================================================== */
.r1h-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 5rem;
}
.r1h-pillar__num {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-family: var(--r1h-mono);
    font-size: 0.8rem;
    color: #cbd5e1;
}
.r1h-anatomy {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 5rem;
}
/* the code window is tall — keep the explanation in view while it scrolls by */
.r1h-anatomy__text {
    position: sticky;
    top: 96px;
    padding-top: 0.5rem;
}
.r1h-points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.r1h-points li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.9rem;
    align-items: start;
}
.r1h-points li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--r1h-accent-soft);
    color: var(--r1h-accent);
    font-size: 1.1rem;
}
.r1h-points strong { display: block; font-weight: 700; margin-bottom: 0.15rem; }
.r1h-sec--light .r1h-points strong { color: var(--r1h-light-text); }
.r1h-points span { font-size: 0.95rem; line-height: 1.55; color: var(--r1h-light-muted); }
.r1h-sec--dark .r1h-points span, .r1h-sec--deep .r1h-points span { color: var(--r1h-muted); }

.r1h-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    counter-reset: r1h-step;
}
.r1h-flow__step {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    border-radius: var(--r1h-radius);
    background: #fff;
    border: 1px solid var(--r1h-light-line);
}
.r1h-flow__step::before {
    counter-increment: r1h-step;
    content: "0" counter(r1h-step);
    display: inline-block;
    font-family: var(--r1h-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--r1h-accent-dark);
    background: var(--r1h-accent-soft);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    margin-bottom: 1rem;
}
.r1h-flow__step::after {
    content: "\F135";
    font-family: "bootstrap-icons";
    position: absolute;
    right: -0.95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--r1h-light-line);
    color: var(--r1h-accent);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.r1h-flow__step:last-child::after { display: none; }
.r1h-flow__step h4 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.45rem; }
.r1h-flow__step p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--r1h-light-muted); }
.r1h-flow__step .r1h-chips { margin-top: 0.85rem; }

/* =====================================================================
   3. WHY
   ===================================================================== */
.r1h-stories { display: grid; gap: 4.5rem; margin-bottom: 4.5rem; }
.r1h-story {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}
.r1h-story--flip .r1h-story__text { order: 2; }
.r1h-story--flip .r1h-story__visual { order: 1; }
.r1h-story__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
}
.r1h-story__text p { color: var(--r1h-text-soft); line-height: 1.65; font-size: 1.02rem; }
/* the same story markup is reused on a light section (editor tools) */
.r1h-sec--light .r1h-story__text p,
.r1h-sec--light .r1h-story__facts li { color: #334155; }
.r1h-sec--light .r1h-story__against { color: var(--r1h-light-muted); border-left-color: #cbd5e1; }
.r1h-story__facts {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    gap: 0.6rem;
}
.r1h-story__facts li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    color: var(--r1h-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}
.r1h-story__facts li::before {
    content: "\F26A";
    font-family: "bootstrap-icons";
    color: var(--r1h-accent);
    flex: 0 0 auto;
    margin-top: 0.1rem;
}
.r1h-story__against {
    margin-top: 1.25rem;
    padding-left: 0.9rem;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    font-size: 0.88rem;
    color: var(--r1h-muted);
}
.r1h-also {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.r1h-also .r1h-card { padding: 1.4rem 1.5rem; }
.r1h-also .r1h-card__icon { width: 44px; height: 44px; font-size: 1.2rem; border-radius: 12px; margin-bottom: 0.9rem; }
.r1h-also .r1h-card__title { font-size: 1.02rem; }
.r1h-also .r1h-card__text { font-size: 0.92rem; }

/* =====================================================================
   3b. MOBILE APPS
   ===================================================================== */
.r1h-mobile__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
}
.r1h-mobile__head { margin-bottom: 2rem; }
.r1h-mobile__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2.5rem;
    margin-bottom: 2.5rem;
}
.r1h-mobile__feature {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.85rem;
    align-items: start;
}
.r1h-mobile__feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--r1h-accent-soft);
    color: var(--r1h-accent);
    font-size: 1.05rem;
}
.r1h-mobile__feature strong { display: block; color: #fff; font-weight: 700; margin-bottom: 0.15rem; font-size: 1rem; }
.r1h-mobile__feature span { font-size: 0.92rem; line-height: 1.5; color: var(--r1h-muted); }

.r1h-stores { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.r1h-store {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--r1h-line-strong);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.r1h-store:hover { border-color: var(--r1h-accent); background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; transform: translateY(-2px); }
.r1h-store i { font-size: 1.6rem; }
.r1h-store span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 1.02rem; }
.r1h-store small { font-weight: 500; font-size: 0.72rem; color: var(--r1h-muted); }

.r1h-mobile__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.75rem;
    padding: 1.5rem 0 3rem;
}
.r1h-phone {
    position: relative;
    flex: 0 0 auto;
    width: 268px;
    border-radius: 30px;
    padding: 9px;
    background: linear-gradient(160deg, #2b3648, #131a26);
    border: 1px solid var(--r1h-line-strong);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.85);
}
/* no forced aspect-ratio + cover here: it silently crops the app's bottom
   navigation off the screenshot. Let the image set its own height. */
.r1h-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
    background: var(--r1h-bg-deep);
}
.r1h-phone__ph {
    display: block;
    width: 100%;
    aspect-ratio: 1080 / 2220;
    border-radius: 22px;
    background: var(--r1h-bg-deep);
}
.r1h-phone--left   { transform: translateY(-18px) rotate(-5deg); z-index: 1; }
.r1h-phone--centre { transform: translateY(16px); z-index: 3; }
.r1h-phone--right  { transform: translateY(-18px) rotate(5deg); z-index: 2; }
.r1h-phone__cap {
    position: absolute;
    left: 50%;
    bottom: -1.9rem;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--r1h-muted);
    white-space: nowrap;
}

/* ---------- tool gallery (light section, tabbed screenshots) ---------- */
.r1h-toolgal { margin-top: 4.5rem; }
.r1h-toolgal .r1h-head { max-width: 640px; margin-inline: auto; }
.r1h-toolgal .r1h-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.r1h-tabs--light { justify-content: center; margin-bottom: 2rem; }
.r1h-tabs--light .r1h-tabs__btn {
    border-color: var(--r1h-light-line);
    background: #fff;
    color: #334155;
}
.r1h-tabs--light .r1h-tabs__btn:hover { border-color: var(--r1h-accent); color: var(--r1h-accent-dark); }
.r1h-tabs--light .r1h-tabs__btn.is-active { background: var(--r1h-light-text); border-color: var(--r1h-light-text); color: #fff; }
.r1h-toolgal__body {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.r1h-toolgal__body > * { min-width: 0; }
.r1h-toolgal__text h4 { font-size: 1.35rem; font-weight: 800; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.r1h-toolgal__text p { color: #334155; line-height: 1.65; margin: 0 0 1.25rem; }
.r1h-toolgal__note {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--r1h-light-muted);
}
.r1h-toolgal__note i { color: var(--r1h-accent); }

/* =====================================================================
   3bb. MULTIMEDIA
   ===================================================================== */
.r1h-media__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.r1h-media__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    border-radius: var(--r1h-radius);
    border: 1px solid var(--r1h-line);
    background: rgba(255, 255, 255, 0.03);
}
.r1h-media__code { margin-top: 1.25rem; }
.r1h-media__code .r1h-code { box-shadow: none; }
.r1h-media__code .r1h-code pre { font-size: 0.78rem; line-height: 1.55; padding: 0.9rem 1rem 1rem; }
.r1h-media__chips { margin-top: auto; padding-top: 1.25rem; }
.r1h-media__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: 2.5rem;
    text-align: center;
}
.r1h-media__foot p { margin: 0; max-width: 760px; color: var(--r1h-muted); font-size: 0.95rem; line-height: 1.6; }

/* =====================================================================
   3c. CLASSROOMS
   ===================================================================== */
/* ---------- lesson ladder: three real scripts, growing ---------- */
.r1h-ladder { margin: 3.5rem 0 4rem; }
.r1h-ladder__title {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}
/* One shared grid rather than three independent columns: headings, code
   windows and captions each get their own row, so they line up across the
   row no matter how differently the text wraps in another language. */
.r1h-ladder__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 0.9rem 1.5rem;
}
.r1h-ladder__step { display: contents; }
.r1h-ladder__head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}
.r1h-ladder__num {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--r1h-accent);
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.1);
}
.r1h-ladder__when {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--r1h-accent);
    margin-bottom: 0.2rem;
}
.r1h-ladder__name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
/* the three scripts differ in length; stretch the windows so the captions
   underneath start on one line instead of stepping down the row */
.r1h-ladder__step .r1h-code {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.r1h-ladder__step .r1h-code pre { flex: 1; }
.r1h-ladder__learns { min-width: 0; }
.r1h-ladder__learns-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--r1h-muted);
    margin-bottom: 0.6rem;
}
.r1h-ladder__note {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--r1h-muted);
}
.r1h-ladder__note i { color: var(--r1h-accent); }

/* ---------- what a class needs ---------- */
.r1h-kit {
    max-width: 780px;
    margin: 0 auto 2rem;
    padding: 1.75rem 2rem;
    border-radius: var(--r1h-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
.r1h-kit__title {
    margin: 0 0 1.1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.r1h-kit__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.r1h-kit__list li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
}
.r1h-kit__list i { color: var(--r1h-accent); flex: none; }
.r1h-kit__note {
    margin: 1.2rem 0 0;
    font-size: 0.9rem;
    color: var(--r1h-muted);
}

.r1h-edu__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.r1h-edu__fit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--r1h-radius);
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.05);
}
.r1h-edu__fit-label {
    font-weight: 700;
    color: #fff;
    margin-right: 0.25rem;
}
.r1h-edu__foot { text-align: center; margin-top: 2.5rem; }
.r1h-edu__note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--r1h-muted); }

/* =====================================================================
   4. DEVICES
   ===================================================================== */
.r1h-families {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}
.r1h-family__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.r1h-family__name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.r1h-family__count {
    font-family: var(--r1h-mono);
    font-size: 0.78rem;
    color: var(--r1h-accent-dark);
    background: var(--r1h-accent-soft);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}
.r1h-family__tag { font-size: 0.85rem; color: var(--r1h-light-muted); margin: 0 0 1rem; }
.r1h-family__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; line-height: 1.45; }
.r1h-family__list li { display: flex; gap: 0.5rem; align-items: flex-start; color: #334155; }
.r1h-family__list li::before { font-family: "bootstrap-icons"; flex: 0 0 auto; margin-top: 0.1rem; }
.r1h-family__list--can li::before { content: "\F26A"; color: var(--r1h-accent); }
.r1h-family__list--cant li::before { content: "\F62A"; color: #94a3b8; }
.r1h-family__list--cant li { color: var(--r1h-light-muted); }
.r1h-family__list + .r1h-family__list { margin-top: 0.75rem; }

.r1h-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.r1h-filter__btn {
    border: 1px solid var(--r1h-light-line);
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.r1h-filter__btn:hover { border-color: var(--r1h-accent); color: var(--r1h-accent-dark); }
.r1h-filter__btn.is-active { background: var(--r1h-light-text); color: #fff; border-color: var(--r1h-light-text); }
.r1h-filter__btn span { opacity: 0.6; font-family: var(--r1h-mono); font-size: 0.78rem; margin-left: 0.3rem; }

.r1h-boards-swiper {
    padding-bottom: 3rem;
}
.r1h-boards-swiper .swiper-slide {
    height: auto;
    display: flex;
}
/* light section: the theme's default (dark) bullets are invisible here */
.r1h-boards-swiper .swiper-pagination-bullet {
    background: #94a3b8;
    opacity: 0.5;
}
.r1h-boards-swiper .swiper-pagination-bullet-active {
    background: var(--r1h-accent);
    opacity: 1;
}
.r1h-board {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--r1h-radius);
    background: #fff;
    border: 1px solid var(--r1h-light-line);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.r1h-board:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
    color: inherit;
    text-decoration: none;
}
.r1h-board.is-hidden { display: none; }
.r1h-board__img {
    aspect-ratio: 4 / 3;
    /* plain white: half the product shots come with a white background baked in */
    background: #fff;
    border-bottom: 1px solid var(--r1h-light-line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
}
/* NB: don't position the image absolutely here — a percentage height against a
   parent sized by aspect-ratio collapses to 0. Flex centring keeps it honest. */
.r1h-board__img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.r1h-board__img > i { font-size: 2.5rem; color: #cbd5e1; }
.r1h-board:hover .r1h-board__img img { transform: scale(1.06); }
.r1h-board__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.r1h-board__fam {
    align-self: flex-start;
    font-family: var(--r1h-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--r1h-accent-dark);
    background: var(--r1h-accent-soft);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.r1h-board__name { font-size: 0.98rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--r1h-light-text); }
.r1h-board__link { margin-top: auto; font-size: 0.85rem; }
.r1h-devices__foot { text-align: center; margin-top: 2.5rem; }

/* =====================================================================
   5. CONFIGS
   ===================================================================== */
.r1h-cfg {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 3.5rem;
}
.r1h-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.r1h-tabs__btn {
    border: 1px solid var(--r1h-line-strong);
    background: rgba(255, 255, 255, 0.03);
    color: var(--r1h-text-soft);
    border-radius: 10px;
    padding: 0.5rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.r1h-tabs__btn:hover { border-color: var(--r1h-accent); color: #fff; }
.r1h-tabs__btn.is-active { background: var(--r1h-accent); border-color: var(--r1h-accent); color: #fff; }
.r1h-tabs__panel { display: none; }
.r1h-tabs__panel.is-active { display: block; }
.r1h-cfg__note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--r1h-muted); display: flex; gap: 0.5rem; align-items: flex-start; }
.r1h-cfg__note i { color: var(--r1h-accent); margin-top: 0.15rem; }
.r1h-drivers { display: grid; gap: 1.25rem; }
.r1h-drivers__group h4 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r1h-muted); margin: 0 0 0.6rem; }
.r1h-drivers__group h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--r1h-muted); opacity: 0.8; }
.r1h-cfg__aside-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.5rem; }
.r1h-cfg__aside-text { color: var(--r1h-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.5rem; }

.r1h-ready {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--r1h-radius);
    border: 1px dashed rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.05);
    margin-bottom: 3rem;
}
.r1h-ready__label { font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
.r1h-ready__label i { color: var(--r1h-accent); }
.r1h-ready a.r1h-chip { text-decoration: none; }
.r1h-ready a.r1h-chip:hover { border-color: var(--r1h-accent); color: #fff; }

.r1h-gallery {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: var(--r1h-radius);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.02) 60%);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.r1h-gallery__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.r1h-gallery__text { color: var(--r1h-text-soft); line-height: 1.6; margin: 0 0 1.25rem; }
.r1h-gallery .r1h-chips { margin-bottom: 1.5rem; }

/* grid/flex children must be allowed to shrink below their content width,
   otherwise a long code line or chip row widens the whole column */
.r1h-hero__grid > *, .r1h-anatomy > *, .r1h-story > *, .r1h-cfg > *, .r1h-gallery > *,
.r1h-pillars > *, .r1h-flow > *, .r1h-families > *, .r1h-boards > *, .r1h-also > *,
.r1h-mobile__grid > *, .r1h-mobile__features > * {
    min-width: 0;
}

/* ---- commercial scale -------------------------------------------- */
.r1h-biz__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--r1h-line);
}
.r1h-biz__foot p {
    margin: 0;
    max-width: 62ch;
    color: var(--r1h-muted);
}

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width: 1199.98px) {
    .r1h-pillars, .r1h-families, .r1h-boards { grid-template-columns: repeat(2, 1fr); }
    .r1h-boards { grid-template-columns: repeat(3, 1fr); }
    .r1h-flow { grid-template-columns: repeat(2, 1fr); }
    .r1h-flow__step:nth-child(2)::after { display: none; }
}
@media (max-width: 991.98px) {
    .r1h-sec { padding: 4.5rem 0; }
    .r1h-hero { padding-top: calc(68px + 3.5rem); min-height: 0; }
    .r1h-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .r1h-hero__visual .r1h-window, .r1h-hero__visual:hover .r1h-window { transform: none; }
    .r1h-hero__badge { left: 1rem; bottom: -1rem; }
    .r1h-anatomy, .r1h-story, .r1h-story--flip, .r1h-cfg, .r1h-gallery, .r1h-toolgal__body { grid-template-columns: 1fr; }
    .r1h-anatomy__text { order: -1; position: static; padding-top: 0; }
    .r1h-mobile__features { grid-template-columns: repeat(2, 1fr); }
    .r1h-phone { width: 208px; }
    .r1h-story--flip .r1h-story__text { order: 1; }
    .r1h-story--flip .r1h-story__visual { order: 2; }
    .r1h-stories { gap: 3.5rem; }
    .r1h-also, .r1h-edu__grid, .r1h-media__grid { grid-template-columns: repeat(2, 1fr); }
    .r1h-ladder__grid {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
        max-width: 620px;
        margin-inline: auto;
    }
}
@media (max-width: 767.98px) {
    .r1h-sec { padding: 3.75rem 0; }
    .r1h-head { margin-bottom: 2.5rem; }
    .r1h-pillars, .r1h-families, .r1h-also, .r1h-flow, .r1h-mobile__features, .r1h-edu__grid, .r1h-media__grid { grid-template-columns: 1fr; }
    .r1h-kit__list { grid-template-columns: 1fr; }
    /* three phones don't fit — show the middle one only */
    .r1h-mobile__visual { gap: 0; padding-bottom: 2.5rem; }
    .r1h-phone { width: min(72vw, 260px); }
    .r1h-phone--left, .r1h-phone--right { display: none; }
    .r1h-phone--centre { transform: none; }
    .r1h-flow__step::after { display: none; }
    .r1h-boards { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .r1h-board__body { padding: 0.85rem; }
    .r1h-stats { gap: 1rem 1.5rem; }
    .r1h-stat__value { font-size: 1.3rem; }
    .r1h-hero__sub { font-size: 1.05rem; }
    .r1h-hero__badge { display: none; }
    .r1h-gallery { padding: 1.5rem; }
    .r1h-code pre { font-size: 0.8rem; }
    .r1h-btn { padding: 0.8rem 1.15rem; font-size: 0.95rem; }
}
@media (max-width: 479.98px) {
    .r1h-boards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .r1h-window__ph i { animation: none; }
    .r1h-card, .r1h-board, .r1h-btn, .r1h-hero__visual .r1h-window { transition: none; }
}

/* ---- pricing -------------------------------------------------------- */
.r1h-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 1.75rem 2rem;
    border-radius: var(--r1h-radius);
    border: 1px solid var(--r1h-accent);
    background: #fff;
    box-shadow: 0 24px 50px -34px rgba(16, 185, 129, 0.55);
}
.r1h-offer__price { display: flex; flex-direction: column; min-width: 8rem; }
.r1h-offer__amount { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--r1h-light-text); }
.r1h-offer__note { margin-top: 0.35rem; font-size: 0.82rem; color: var(--r1h-light-muted); }
.r1h-offer__body { flex: 1 1 22rem; min-width: 0; }
.r1h-offer__title { margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--r1h-light-text); }
.r1h-offer__text { margin: 0; color: var(--r1h-light-muted); }

.r1h-plans__title {
    margin: 2.75rem 0 1.25rem;
    font-size: 1.15rem;
    color: var(--r1h-light-text);
}
.r1h-plans {
    display: grid;
    /* auto-fit, not a fixed count: hiding a plan must close the gap it
       leaves rather than stranding the cards in the left-hand columns. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.r1h-plan { display: flex; flex-direction: column; padding: 1.4rem 1.35rem; }
.r1h-plan__name { margin: 0 0 0.6rem; font-size: 1.02rem; color: var(--r1h-light-text); }
.r1h-plan__price { margin: 0; line-height: 1.1; }
.r1h-plan__price strong { font-size: 1.7rem; font-weight: 800; color: var(--r1h-light-text); }
.r1h-plan__price span { font-size: 0.85rem; color: var(--r1h-light-muted); }
.r1h-plan__yearly { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--r1h-light-muted); }
.r1h-plan__list {
    list-style: none;
    margin: 1.1rem 0 1.4rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--r1h-light-muted);
}
.r1h-plan__list li { padding-left: 1.1rem; position: relative; }
.r1h-plan__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--r1h-accent);
}
.r1h-plan__btn { margin-top: auto; justify-content: center; }
.r1h-plans__note {
    margin: 1.5rem 0 0;
    font-size: 0.88rem;
    color: var(--r1h-light-muted);
}
.r1h-plans > *, .r1h-offer > * { min-width: 0; }
@media (max-width: 1199.98px) {
    .r1h-plans { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .r1h-plans { grid-template-columns: repeat(2, 1fr); }
    .r1h-offer { padding: 1.4rem; }
    .r1h-offer__amount { font-size: 2.1rem; }
}
@media (max-width: 479.98px) {
    .r1h-plans { grid-template-columns: 1fr; }
}

/* ---- schools landing ------------------------------------------------ */
.r1h-sum {
    max-width: 46rem;
    margin: 0 auto;
    border: 1px solid var(--r1h-line-strong);
    border-radius: var(--r1h-radius);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}
.r1h-sum__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--r1h-line);
}
.r1h-sum__what { color: var(--r1h-text-soft); }
.r1h-sum__how { font-weight: 700; font-size: 1.15rem; color: #fff; white-space: nowrap; }
.r1h-sum__row--total { background: rgba(16, 185, 129, 0.08); border-bottom: none; }
.r1h-sum__row--total .r1h-sum__what { color: #fff; font-weight: 600; }
.r1h-sum__row--total .r1h-sum__how { color: var(--r1h-accent); font-size: 1.5rem; }
.r1h-sum__after {
    margin: 0;
    padding: 1rem 1.4rem 1.2rem;
    font-size: 0.9rem;
    color: var(--r1h-muted);
    border-top: 1px solid var(--r1h-line);
}
.r1h-sum__note {
    max-width: 46rem;
    margin: 1.25rem auto 0;
    font-size: 0.9rem;
    color: var(--r1h-muted);
}
.r1h-school-need .r1h-kit__list { max-width: 46rem; margin-inline: auto; }
.r1h-school-cta__box { max-width: 40rem; margin: 0 auto; text-align: center; }
.r1h-school-cta__box h2 { margin: 0 0 0.8rem; color: #fff; }
.r1h-school-cta__box p { color: var(--r1h-text-soft); }
.r1h-school-cta__note { margin-top: 1rem; font-size: 0.88rem; color: var(--r1h-muted); }
.r1h-sum > *, .r1h-sum__row > * { min-width: 0; }

/* A lead of more than one paragraph needs air between them: the theme's
   16px is set for body copy at a smaller size than this. */
.r1h-lead p + p { margin-top: 1.1rem; }
.r1h-lead p:last-child { margin-bottom: 0; }

/* ---- quick start ---------------------------------------------------- */
.r1h-qs-need {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--r1h-line-strong);
    border-radius: var(--r1h-radius);
    background: rgba(255, 255, 255, 0.03);
}
.r1h-qs-need h2 {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    color: #fff;
}
.r1h-qs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4rem;
}
.r1h-qs__step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem;
    align-items: start;
}
/* Alternate sides so a column of five steps does not read as a list of
   captions with pictures bolted on. The track widths swap along with the
   order — otherwise the screenshot lands in the narrow column on every
   second step and the two sides stop matching. */
.r1h-qs__step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.r1h-qs__step:nth-child(even) .r1h-qs__text { order: 2; }
.r1h-qs__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--r1h-accent);
    color: #052e1d;
    font-weight: 800;
    font-size: 1.05rem;
}
.r1h-qs__title {
    margin: 0 0 0.7rem;
    font-size: 1.45rem;
    color: var(--r1h-light-text);
}
.r1h-qs__body {
    margin: 0;
    color: var(--r1h-light-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}
.r1h-qs__tip {
    margin: 1.1rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--r1h-accent);
    border-radius: 0 10px 10px 0;
    background: rgba(16, 185, 129, 0.08);
    font-size: 0.92rem;
    color: #334155;
}
.r1h-qs__tip i { color: var(--r1h-accent-dark); margin-right: 0.35rem; }
.r1h-qs__shot {
    margin: 0;
    border-radius: var(--r1h-radius);
    overflow: hidden;
    border: 1px solid var(--r1h-light-line);
    background: #fff;
    box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.45);
}
.r1h-qs__shot img { display: block; width: 100%; height: auto; }
.r1h-qs__shot figcaption {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--r1h-light-line);
    font-size: 0.85rem;
    color: var(--r1h-light-muted);
}
.r1h-qs-next__card { text-decoration: none; display: block; transition: border-color 0.2s ease, transform 0.2s ease; }
.r1h-qs-next__card:hover { border-color: var(--r1h-accent); transform: translateY(-2px); text-decoration: none; }
.r1h-qs__step > * { min-width: 0; }
@media (max-width: 991.98px) {
    .r1h-qs__step { grid-template-columns: 1fr; gap: 1.5rem; }
    .r1h-qs__step:nth-child(even) .r1h-qs__text { order: 0; }
    .r1h-qs__list { gap: 3rem; }
}