/* Brand layer for the generated pages (features, bundles, subscriptions, bundles-and-subscriptions), Nov 2026.
   Matches the home page: soft wash, eyebrow pills, gradient headline words, white hairline cards. No accent-edge borders. */
body.gen { background: radial-gradient(900px 520px at 100% 0, rgba(165, 58, 240, 0.12), transparent 65%), radial-gradient(800px 520px at 0 0, rgba(255, 107, 44, 0.1), transparent 65%), var(--surface); background-repeat: no-repeat; background-size: 100% 760px, 100% 760px, auto; }
body.gen .kicker { display: inline-block; background: var(--purple-soft); color: var(--purple-deep); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 14px; }

/* hero */
body.gen .landing .lp-hero h1, body.gen .gen main > .container > h1 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.04; }
body.gen .landing .lp-hero h1 { font-size: clamp(38px, 5.2vw, 66px); }
body.gen .landing .lp-hero h1 em { font-style: normal; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.gen .landing .lp-hero .lead { font-size: 19px; color: var(--ink-secondary); }
body.gen .landing .lp-hero .lead b { color: var(--ink-primary); }
body.gen .lp-chips li { background: #fff; border: 1px solid var(--border); color: var(--ink-primary); font-weight: 600; box-shadow: 0 2px 10px rgba(26, 21, 35, 0.04); }
body.gen .lp-hero-art::before { background: radial-gradient(420px 260px at 20% 10%, rgba(255, 107, 44, 0.16), transparent 70%), radial-gradient(420px 280px at 90% 90%, rgba(165, 58, 240, 0.2), transparent 70%); }
body.gen .mock { border-radius: 24px; box-shadow: 0 30px 70px rgba(165, 58, 240, 0.16), 0 4px 12px rgba(26, 21, 35, 0.05); }
body.gen .mock-btn { background: var(--brand-gradient); box-shadow: none; border-radius: 999px; font-family: var(--font-display); font-weight: 700; }
body.gen .seg { border: 1px solid var(--border); }
body.gen .seg.on { background: var(--sub-gradient); border-color: transparent; }
body.gen .mock-opt { border: 1px solid var(--border); }
body.gen .mock-opt.on { border: 2px solid var(--purple); background: #fbf7ff; }
body.gen .float-chip, body.gen .pill-y { background: var(--green-soft); color: var(--green-deep); border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(26, 21, 35, 0.08); }
body.gen .pill-p { background: var(--sub-gradient); }
body.gen .stat, body.gen .stat-row .stat { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); }
body.gen .stat b { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* section heads */
body.gen .landing .lp-head { max-width: 720px; margin-bottom: 30px; }
body.gen .landing .lp-head h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.07; margin: 10px 0 10px; letter-spacing: -0.01em; }

/* cards */
body.gen .type-card, body.gen .goal, body.gen .ic-card, body.gen .store, body.gen .how3 li, body.gen .lp-details-card, body.gen .hl, body.gen .suite-card, body.gen .vis-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
body.gen .type-card:hover, body.gen .goal:hover, body.gen .ic-card:hover, body.gen .suite-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
body.gen .store { padding: 20px 22px; }
body.gen .hl { background: #fff; border-radius: 18px; }
body.gen .lp-tint { background: linear-gradient(180deg, #fff 0%, #fdf1f5 100%); border: 1px solid var(--border); border-radius: 32px; max-width: 1180px; margin: 20px auto; }
body.gen .goal .g-label { color: var(--purple-deep); }
body.gen .goal .g-type { color: var(--green-deep); }
body.gen .how3 .n { background: var(--brand-gradient); color: #fff; }
body.gen .chip-link, body.gen .more { color: var(--green-deep); font-weight: 700; }
body.gen .vis { background: linear-gradient(160deg, #fff, #fdf1f4); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-card); }
body.gen .lp-row-vis .vis-cap { color: var(--ink-muted); }
body.gen .tile { background: linear-gradient(150deg, #ffd9cc, #ffb8a3); }
body.gen .tile.t2 { background: linear-gradient(150deg, #e9ddff, #c9b0f5); }
body.gen .tile.t3 { background: linear-gradient(150deg, #fff0c9, #ffd37a); }

/* band and final call to action */
body.gen .band-card { background: var(--surface-plum); color: #fff; border: 0; border-radius: 32px; box-shadow: none; }
body.gen .band-card h2, body.gen .band-card p { color: #fff; }
body.gen .band-card p { color: var(--ink-inverse-secondary); }
body.gen .lp-final .cta-card, body.gen .cta-card { background: var(--brand-gradient); border: 0; border-radius: 32px; box-shadow: 0 24px 60px rgba(165, 58, 240, 0.28); }

/* features page */
body.gen .suite-grid { gap: 16px; }
body.gen .suite-card { padding: 20px 22px; box-shadow: var(--shadow-card); }
body.gen .suite-card .suite-n, body.gen .sec-ico { background: var(--brand-gradient); color: #fff; border: 0; box-shadow: none; }
body.gen .suite-card:nth-child(even) .suite-n { background: var(--sub-gradient); }
body.gen .suite-card .suite-count { color: var(--purple-deep); }
body.gen .sec-title { font-weight: 800; }
body.gen .suite-sec { padding-top: 56px; }
body.gen .all-features summary { background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(26, 21, 35, 0.05); font-weight: 700; }
body.gen .all-features summary:hover { background: var(--purple-soft); }
body.gen .hl-ico { background: var(--purple-soft); color: var(--purple-deep); border-radius: 12px; }
body.gen .feat-table { border: 1px solid var(--border); border-radius: 16px; }
body.gen .feat-table thead th { background: var(--purple-soft); color: var(--purple-deep); }
body.gen .tick { background: var(--yes); color: #fff; }

/* product art instead of flat colour squares */
body.gen .landing .lp-hero h1 { font-size: clamp(36px, 4.4vw, 56px); }
body.gen .box-grid i:not(.empty), body.gen .art-fixed i, body.gen .tile { background-color: #ffe9e1; background-repeat: no-repeat; background-position: center; background-size: 74%; background-image: url("../img/products/soap.svg"); border: 0; }
body.gen .box-grid i:not(.empty):nth-child(4n+2), body.gen .art-fixed i:nth-child(4n+2), body.gen .tile.t2 { background-color: #efe5ff; background-image: url("../img/products/dropper.svg"); }
body.gen .box-grid i:not(.empty):nth-child(4n+3), body.gen .art-fixed i:nth-child(4n+3), body.gen .tile.t3 { background-color: #fff3d6; background-image: url("../img/products/balm.svg"); }
body.gen .box-grid i:not(.empty):nth-child(4n), body.gen .art-fixed i:nth-child(4n) { background-color: #ffe6ef; background-image: url("../img/products/mist.svg"); }
body.gen .box-grid i.empty { background: #fdf6f5; border: 2px dashed #f0cfc9; }