/* =============================================================================
   Čaroděj — page styles: the homepage.

   This is layer 3 of the system (app.css → components.css → pages/*.css) and
   the reference for how a per-area stylesheet is written: it may use every
   token and every component, and nothing outside `/` may use what is in here.

   The three bands below are the delivered mockup, section for section, with
   the fixed heights relaxed into minimums wherever real copy can be longer
   than the specimen text was — a Czech product name two words longer must not
   push an illustration out of its band.

   The illustrations bleed in from the page edges as backgrounds and masked
   images. They are decoration: every one is `alt=""` or a `background`, and
   the page reads correctly with images off.
   ============================================================================= */

/* The homepage does *not* switch off the global star field. Its four bands
   (.hero, .tarot, .offerings, .how) each paint an opaque ground of their own
   and cover it completely; what is left transparent — the ukázka and the ceník
   — is exactly where the sky should show through, so the two treatments meet
   without ever overlapping. */

/* =============================================================================
   Hero
   ============================================================================= */

.hero {
    position: relative;
    isolation: isolate;
    min-height: 560px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgb(25 29 48 / 72%), transparent 36%),
        radial-gradient(circle at 31% 52%, rgb(38 25 71 / 34%), transparent 26%),
        #040a15;
}

.hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        radial-gradient(circle at 28% 17%, rgb(255 221 160 / 90%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 67% 27%, rgb(255 218 145 / 75%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 69%, rgb(195 143 81 / 48%) 0 1px, transparent 1.5px);
    background-size: 207px 183px, 263px 227px, 171px 159px;
    opacity: 0.45;
    content: '';
}

/* The horizon: a very wide, very flat ellipse whose top edge is a brass
   hairline, so the hero appears to curve away under the section below it. */
.hero::after {
    position: absolute;
    z-index: 3;
    inset-block-end: -29px;
    inset-inline-start: 50%;
    width: 110%;
    height: 60px;
    border-top: 1px solid rgb(153 105 58 / 43%);
    border-radius: 50% 50% 0 0;
    transform: translateX(-50%);
    content: '';
}

/* The illustrations are drawn as backgrounds rather than as <img>, and the
   reason is mechanical: symfony/asset is not installed (AssetMapper does not
   need it), so a template has no asset() with which to name a hashed file,
   while AssetMapper *does* rewrite every url() it finds in a stylesheet. Every
   one of them is decoration — the card name and its sentence carry the meaning
   — so they are empty elements with aria-hidden and no alternative text to
   lose. #}
   */
.hero__art {
    position: absolute;
    z-index: 0;
    inset-block-start: 0;
    width: 625px;
    height: 625px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    user-select: none;
}

/* Masked rather than faded with opacity: the illustrations have to dissolve
   into the ground at their inner edge while staying at full strength at the
   page edge, which an opacity ramp cannot do. */
.hero__art--left {
    inset-inline-start: 0;
    background-image: url("../../images/hero-left-1M4Kw6x.webp");
    mask-image: linear-gradient(to right, #000 0%, #000 73%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 73%, transparent 100%);
}

.hero__art--right {
    inset-inline-end: 0;
    background-image: url("../../images/hero-right-5BKftzH.webp");
    mask-image: linear-gradient(to left, #000 0%, #000 73%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 73%, transparent 100%);
}

.hero__compass {
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline-start: 50%;
    width: 880px;
    aspect-ratio: 1760 / 370;
    background-image: url("../../images/hero-celestial-eQugfyR.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%);
    pointer-events: none;
    mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to top, transparent, #000 30%);
    mask-composite: intersect;
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
        linear-gradient(to top, transparent, #000 30%);
    -webkit-mask-composite: source-in;
}

.hero__content {
    position: relative;
    z-index: 4;
    width: min(100% - 40px, 760px);
    padding-block: 182px 40px;
    margin-inline: auto;
    text-align: center;
}

.hero h1,
.hero__title {
    margin-block-start: 11px;
    font-family: var(--font-serif);
    font-size: var(--text-display);
    font-weight: 430;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.hero h1 span,
.hero__gild {
    color: var(--color-accent-text);
}

.hero__lead,
.hero__lede {
    margin-block-start: 16px;
    margin-inline: auto;
    font-size: var(--text-lg);
    font-weight: 430;
    line-height: 1.516;
    color: #ddd8d1;
}

.hero__lead strong,
.hero__lede strong {
    color: var(--color-text);
}

/* The question form. `.hero__ask` is the class the functional tests select on;
   `.question-form` is the mockup's name, and both are on the element. */
.hero__ask,
.question-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    width: min(100%, 665px);
    margin-block-start: 17px;
    margin-inline: auto;
}

.hero__ask .input,
.question-form input {
    height: 57px;
    min-height: 57px;
}

.hero__note {
    margin-block-start: 21px;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: #b7b4ba;
}

.hero__daily {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-block-start: 16px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-accent-text);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: color var(--transition-fast);
}

.hero__daily:hover {
    color: #f2c97f;
}

.hero__daily span {
    color: rgb(194 139 73 / 55%);
}

/* =============================================================================
   Tarot band — the four reading cards
   ============================================================================= */

.tarot {
    position: relative;
    isolation: isolate;
    padding: 18px 20px 40px;
    overflow: hidden;
    background:
        url("../../images/cards-left-yoVy-Zk.webp") left bottom / 250px 480px no-repeat,
        url("../../images/cards-right-CCEcw6w.webp") right bottom / 250px 480px no-repeat,
        radial-gradient(ellipse at 50% 0%, rgb(25 22 45 / 15%), transparent 55%),
        var(--color-band);
}

.tarot__ornament {
    position: absolute;
    z-index: 1;
    inset-block-start: 12px;
    width: 150px;
    height: 110px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.tarot__ornament--left {
    inset-inline-start: calc(50% - 420px);
    background-image: url("../../images/tarot-moon-left-B4j8J6j.png");
}

.tarot__ornament--right {
    inset-inline-end: calc(50% - 420px);
    background-image: url("../../images/tarot-moon-right--2htjH3.png");
}

.tarot__heading {
    position: relative;
    z-index: 2;
    text-align: center;
}

.tarot__heading h2 {
    margin-block-start: 7px;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 390;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.tarot__heading > p:last-child {
    margin-block-start: 6px;
    font-size: var(--text-base);
    line-height: 1.45;
    color: #cfcbc6;
}

.reading-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: min(100%, var(--content-wide));
    margin-block-start: 18px;
    margin-inline: auto;
}

/* A reading card is an illustration and a column of copy side by side. The
   visual column has its own width per card because the four illustrations are
   drawn at four slightly different aspect ratios and a single column width
   would letterbox three of them. */
.reading-card {
    --card-visual-width: 192px;

    display: grid;
    grid-template-columns: var(--card-visual-width) minmax(0, 1fr);
    min-height: 264px;
    overflow: hidden;
    background: var(--plate-fill);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

/* One illustration per card, keyed by a modifier. `contain` rather than
   `cover`: each card art is a drawn plate with its own frame, and cropping one
   would cut the frame off. */
.reading-card__visual {
    width: 100%;
    min-width: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.reading-card__visual--tarot { background-image: url("../../images/card-tarot-OyWydFB.webp"); }
.reading-card__visual--love { background-image: url("../../images/card-love-xpraXtu.webp"); }
.reading-card__visual--dream { background-image: url("../../images/card-dream-WJem9DB.webp"); }
.reading-card__visual--day { background-image: url("../../images/card-day-0FB6PVA.webp"); }

.reading-card:nth-child(2) { --card-visual-width: 201px; }
.reading-card:nth-child(3) { --card-visual-width: 196px; }
.reading-card:nth-child(4) { --card-visual-width: 195px; }

.reading-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 23px 17px 19px 20px;
}

.reading-card:nth-child(3) .reading-card__content { padding-inline-end: 8px; }
.reading-card:nth-child(4) .reading-card__content { padding-inline-start: 20px; }

.reading-card__kind {
    font-size: var(--text-xs);
}

.reading-card h3,
.reading-card__name {
    margin-block-start: 8px;
    font-family: var(--font-serif);
    font-size: 25px;
    font-weight: 390;
    line-height: 1.13;
}

.reading-card__content > p:not(.reading-card__kind) {
    margin-block-start: 9px;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: #b9b6bf;
}

@media (min-width: 1501px) {
    .reading-grid {
        grid-template-columns: 358px 351px 349px 358px;
        width: 1458px;
        transform: translateX(5px);
    }

    /* Ten pixels off the third card's illustration, which is `contain`-fitted
       and does not notice, so that „Výklad snů" fits the one line the mockup
       renders it on instead of breaking after the first word. */
    .reading-card:nth-child(3) {
        --card-visual-width: 186px;
    }
}

/* =============================================================================
   Offerings — the three alternating service rows
   ============================================================================= */

/* The two side illustrations are drawn 1080px tall — the height the mockup's
   band had with three rows in it. This band has four, so the artwork would end
   in a hard horizontal seam partway down. The first layer is a fade to the page
   colour over the bottom third of those 1080px: invisible in the middle of the
   band, where the ground already is that colour, and it dissolves the seam at
   both edges where it is not. */
.offerings {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent 0 58%, var(--color-background) 97%) top / 100% 1080px no-repeat,
        url("../../images/services-left-rD5-Ay0.webp") left top / 380px 1080px no-repeat,
        url("../../images/services-right-R81r8Gd.webp") right top / 420px 1080px no-repeat,
        radial-gradient(circle at 48% 38%, rgb(14 25 43 / 74%), transparent 36%),
        var(--color-background);
}

.offering {
    position: relative;
    padding-block: var(--space-6);
}

/* The rule that closes each row, inset from the page edge so it never runs
   into the illustrations bleeding in on either side. */
.offering::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    width: min(100% - 80px, var(--content-wide));
    height: 1px;
    margin-inline: auto;
    background: var(--rule-gold);
    content: '';
}

.offering__inner {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 520px);
    gap: 60px;
    align-items: center;
    width: min(100% - 48px, var(--content));
    min-height: 300px;
    margin-inline: auto;
}

.offering__content {
    position: relative;
    z-index: 2;
}

.offering h2 {
    margin-block-start: 18px;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 390;
    line-height: 1.16;
    letter-spacing: -0.02em;
}

.offering h2 span {
    color: var(--color-accent-text);
}

.offering__content > p:not(.section-label) {
    max-width: 530px;
    margin-block-start: 16px;
    font-size: 14.5px;
    font-weight: 430;
    line-height: 1.9;
    color: #d7d3cd;
}

.offering__button {
    min-height: 44px;
    margin-block-start: 19px;
    padding-inline: 44px;
    font-size: var(--text-2xs);
}

.offering__visual {
    position: relative;
    z-index: 1;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.offering__visual--horoscope {
    aspect-ratio: 1000 / 620;
    background-image: url("../../images/horoscope-qyLfng0.webp");
}

.offering__visual--relationship {
    aspect-ratio: 1050 / 545;
    background-image: url("../../images/relationship-7Qfjouq.webp");
}

.offering__visual--dream {
    aspect-ratio: 1025 / 530;
    background-image: url("../../images/dream-dgva1u1.webp");
}

/* The middle row puts the art on the left. Explicit grid placement rather than
   `direction: rtl` or an order swap, because the copy must stay first in the
   reading order on every row. */
.offering--reverse .offering__content {
    grid-column: 2;
    grid-row: 1;
}

.offering--reverse .offering__visual {
    grid-column: 1;
    grid-row: 1;
}

.offering--horoscope .offering__inner {
    min-height: 402px;
}

.offering--reverse .offering__inner {
    min-height: 330px;
}

.offering--horoscope h2 {
    margin-block-start: 16px;
}

.offering--horoscope .offering__content > p:not(.section-label) {
    margin-block-start: 21px;
}

.offering--horoscope .offering__button {
    margin-block-start: 26px;
}

/* =============================================================================
   Jak to funguje

   Not in the mockup — derived from it. Same band treatment as `.tarot`, the
   same centred `.section-label` heading, and the shared `.steps` component
   underneath so the three cards are the same object as everywhere else.
   ============================================================================= */

.how {
    position: relative;
    padding-block: var(--space-8);
    background:
        radial-gradient(ellipse at 50% 0%, rgb(25 22 45 / 22%), transparent 55%),
        var(--color-band);
    border-block: 1px solid var(--color-border-soft);
}

.how__heading {
    text-align: center;
}

.how__heading h2 {
    margin-block-start: 7px;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 390;
    line-height: 1.15;
}

.how__heading > p:last-child {
    margin-block-start: 6px;
    font-size: var(--text-base);
    line-height: 1.55;
    color: #cfcbc6;
}

.how .steps {
    width: min(100% - 40px, var(--content));
    margin-block-start: var(--space-6);
    margin-inline: auto;
}

/* =============================================================================
   Responsive
   ============================================================================= */

/* Between 1180 and 1500 the four cards are narrower than the artwork they hold
   was drawn for, so the illustration column shrinks with the viewport instead
   of eating the copy. The three clamps come from the mockup; the two type
   clamps are tightened by a step, because „Partnerský" at 25px does not fit the
   column that is left at 1440 and the mockup was only ever checked at 1500. */
@media (max-width: 1500px) {
    .reading-card {
        --card-visual-width: clamp(118px, calc(23.125vw - 155px), 192px);
    }

    .reading-card:nth-child(2) {
        --card-visual-width: clamp(118px, calc(26vw - 189px), 201px);
    }

    .reading-card:nth-child(3) {
        --card-visual-width: clamp(118px, calc(24.5vw - 171.5px), 196px);
    }

    .reading-card:nth-child(4) {
        --card-visual-width: clamp(122px, calc(22.9vw - 148.5px), 195px);
    }

    .reading-card__content,
    .reading-card:nth-child(3) .reading-card__content,
    .reading-card:nth-child(4) .reading-card__content {
        padding-inline: 14px;
    }

    .reading-card h3,
    .reading-card__name {
        font-size: clamp(20px, 1.55vw, 25px);
    }

    .reading-card__content > p:not(.reading-card__kind) {
        font-size: clamp(12px, 0.9vw, 13px);
        line-height: 1.6;
    }
}

@media (max-width: 1180px) {
    /* Between 760 and 1180 the two 625px illustrations are wider than the
       viewport between them, so they stop being an edge treatment and start
       being a background the heading sits on. They are pulled outward, dimmed,
       and a scrim is laid under the copy — without it the candle flame runs
       straight through „Zeptejte se" and the lead drops below AA. */
    .hero__art {
        width: 520px;
        height: 520px;
        opacity: 0.5;
    }

    .hero__art--left {
        inset-inline-start: -130px;
    }

    .hero__art--right {
        inset-inline-end: -130px;
    }

    .hero__content {
        isolation: isolate;
    }

    .hero__content::before {
        position: absolute;
        z-index: -1;
        inset: -32px -24px;
        background: radial-gradient(ellipse at 50% 46%, rgb(4 10 21 / 88%) 0 34%, rgb(4 10 21 / 55%) 62%, transparent 82%);
        pointer-events: none;
        content: '';
    }

    .tarot {
        padding-bottom: 40px;
    }

    /* Two columns, so the viewport-derived clamps above no longer describe the
       column that is actually there — back to the drawn widths. */
    .reading-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }

    .reading-card { --card-visual-width: 192px; }
    .reading-card:nth-child(2) { --card-visual-width: 201px; }
    .reading-card:nth-child(3) { --card-visual-width: 196px; }
    .reading-card:nth-child(4) { --card-visual-width: 195px; }

    .reading-card h3,
    .reading-card__name {
        font-size: clamp(20px, 2.6vw, 25px);
    }

    .reading-card__content > p:not(.reading-card__kind) {
        font-size: 13px;
        line-height: 1.65;
    }

    .offerings {
        background-size: 300px auto, 330px auto, auto, auto;
    }

    .offering {
        padding-block: 52px;
    }

    .offering__inner,
    .offering--horoscope .offering__inner,
    .offering--reverse .offering__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 38px;
        min-height: 0;
    }

    .offering h2 {
        font-size: clamp(31px, 3.5vw, 38px);
    }
}

@media (max-width: 900px) {
    .offerings {
        background:
            radial-gradient(circle at 15% 8%, rgb(65 31 78 / 20%), transparent 20%),
            radial-gradient(circle at 88% 52%, rgb(31 27 69 / 20%), transparent 21%),
            var(--color-background);
    }

    .offering {
        padding-block: 44px;
    }

    .offering__inner {
        gap: 28px;
        width: min(100% - 40px, 820px);
    }

    .offering__content > p:not(.section-label) {
        max-width: 620px;
    }
}

@media (max-width: 760px) {
    .hero {
        min-height: 662px;
    }

    .hero__art {
        inset-block-start: 62px;
        width: 470px;
        height: 470px;
        opacity: 0.31;
    }

    .hero__art--left { inset-inline-start: -248px; }
    .hero__art--right { inset-inline-end: -248px; }

    .hero__compass {
        inset-block-start: 20px;
        width: 720px;
        opacity: 0.63;
    }

    .hero__content {
        width: min(100% - 32px, 620px);
        padding-block: 154px 57px;
    }

    .hero .eyebrow {
        font-size: 10px;
        letter-spacing: 0.13em;
    }

    .hero h1,
    .hero__title {
        margin-block-start: 10px;
        line-height: 1.03;
    }

    /* On a phone the two words stack: „Zeptejte se" over „Čaroděje". */
    .hero h1 span,
    .hero__gild {
        display: block;
    }

    .hero__lead,
    .hero__lede {
        margin-block-start: 17px;
        font-size: var(--text-sm);
        line-height: 1.65;
    }

    .desktop-break {
        display: none;
    }

    .hero__ask,
    .question-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
        margin-block-start: 21px;
    }

    .hero__ask .input,
    .question-form input,
    .hero__ask .button--primary,
    .hero__ask .btn--primary {
        height: 53px;
        min-height: 53px;
    }

    .hero__note {
        max-width: 410px;
        margin-inline: auto;
        font-size: var(--text-2xs);
    }

    .hero__daily {
        gap: 7px;
        font-size: 10px;
        letter-spacing: 0.12em;
    }

    .tarot {
        padding: 35px 16px 52px;
        background-size: 185px auto, 185px auto, auto, auto;
    }

    .tarot__ornament {
        display: none;
    }

    .tarot__heading h2 {
        font-size: clamp(27px, 8.5vw, 34px);
    }

    .tarot__heading > p:last-child {
        font-size: var(--text-xs);
    }

    .tarot__heading > p:last-child br {
        display: none;
    }

    .reading-grid {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 500px);
        margin-block-start: 27px;
    }

    .reading-card,
    .reading-card:nth-child(2),
    .reading-card:nth-child(3),
    .reading-card:nth-child(4) {
        grid-template-columns: minmax(130px, 44%) minmax(0, 1fr);
        min-height: 242px;
    }

    .reading-card__content,
    .reading-card:nth-child(3) .reading-card__content,
    .reading-card:nth-child(4) .reading-card__content {
        padding: 21px 17px 15px;
    }

    .reading-card h3,
    .reading-card__name {
        font-size: clamp(21px, 6vw, 26px);
    }

    .reading-card__content > p:not(.reading-card__kind) {
        font-size: var(--text-2xs);
    }

    .offerings {
        background-size: 180px auto, 200px auto, auto, auto;
    }

    .offering {
        padding-block: 40px;
    }

    /* Below 760 the row becomes a four-area layout: label and heading beside a
       shrunken illustration, copy and button across the full width under both.
       `display: contents` on `.offering__content` is what lets its children be
       placed into that grid without a wrapper the design does not want. */
    .offering__inner,
    .offering--horoscope .offering__inner,
    .offering--reverse .offering__inner {
        grid-template-areas:
            'label visual'
            'heading visual'
            'copy copy'
            'button button';
        grid-template-columns: minmax(0, 1fr) clamp(104px, 22vw, 150px);
        gap: 0 16px;
        width: min(100% - 36px, 620px);
    }

    .offering__content,
    .offering--reverse .offering__content {
        display: contents;
    }

    .offering__content > * {
        position: relative;
        z-index: 2;
    }

    .offering__content .section-label { grid-area: label; }
    .offering__content h2 { grid-area: heading; }
    .offering__content > p:not(.section-label) { grid-area: copy; }
    .offering__content .offering__button { grid-area: button; }

    .offering__visual,
    .offering--reverse .offering__visual {
        grid-area: visual;
        align-self: center;
        width: 100%;
        margin-inline: auto;
    }

    .offering h2 {
        margin-block-start: 14px;
        font-size: clamp(27px, 7vw, 34px);
    }

    .offering h2 br {
        display: none;
    }

    .offering__content > p:not(.section-label) {
        margin-block-start: 22px;
        font-size: var(--text-sm);
        line-height: 1.8;
    }

    .offering__button {
        width: 100%;
        min-height: 46px;
        margin-block-start: 20px;
    }

    .offering::after {
        width: calc(100% - 36px);
    }
}

@media (max-width: 390px) {
    .hero__content {
        width: calc(100% - 26px);
    }

    .reading-card,
    .reading-card:nth-child(2),
    .reading-card:nth-child(3),
    .reading-card:nth-child(4) {
        grid-template-columns: 42% minmax(0, 1fr);
        min-height: 230px;
    }

    .reading-card__content,
    .reading-card:nth-child(3) .reading-card__content,
    .reading-card:nth-child(4) .reading-card__content {
        padding-inline: 13px;
    }
}

/* =============================================================================
   Where the two vocabularies meet

   Each service row carries both `.offering` (the design's name, which does the
   layout) and `.feature-row` (what the rest of the application calls this shape
   and what the functional tests select on). The generic component would
   otherwise impose its own two-column grid on an element whose only child is
   `.offering__inner`, so it is switched off here rather than in components.css
   — the conflict belongs to this page and to no other.
   ============================================================================= */

.offering.feature-row {
    display: block;
    grid-template-columns: none;
    padding-block: var(--space-6);
    border-bottom: 0;
}

/* The Grimoár row has no drawn illustration — it takes the instrument mark the
   rest of the application uses for the same idea. */
.offering__visual--glyph {
    display: grid;
    place-items: center;
    padding-block: var(--space-4);
}

.offering__visual--glyph .feature-row__glyph {
    width: min(100%, 11rem);
    height: auto;
}

.offering--grimoire .offering__inner {
    min-height: 300px;
}

@media (max-width: 760px) {
    .offering.feature-row {
        padding-block: 40px;
    }

    .offering__visual--glyph .feature-row__glyph {
        width: 100%;
    }
}