/* Calmer sections to sit under the calm heroes (?s=calm): white and cream
   only, full-width bands, smaller section headings, no dashed frames, flat
   lists instead of shadowed cards, fewer pills, one small sticker per
   section kept inside it, and the hero's flat button everywhere. */
.sec-calm { --c-off: #F6F2EC; --c-line: rgba(31, 42, 43, .1); --c-ink: #1F2A2B; }

/* 1. white and cream, full width, no inset colour panels */
.sec-calm .approach, .sec-calm .grownups, .sec-calm .offline-sec, .sec-calm .pricing, .sec-calm .practice-band {
  margin-inline: 0 !important; border-radius: 0 !important; background: var(--c-off) !important; }
.sec-calm .spotlights .spot { background: #fff !important; }
.sec-calm .spotlights { background: #fff; }
.sec-calm .inside, .sec-calm .story, .sec-calm .faq { background: #fff !important; }
.sec-calm .few { background: #fff !important; }
.sec-calm .edge::before, .sec-calm .edge::after { display: none !important; }
.sec-calm .practice .areas-rows { background: var(--c-off) !important; border-radius: 0; }
.sec-calm .practice .areas li { background: #fff !important; color: var(--c-ink) !important; border: 1px solid var(--c-line) !important; }

/* 2. the hero stays the biggest thing */
.sec-calm h2.display { font-size: clamp(44px, 5.2vw, 76px) !important; line-height: .92 !important; }
.sec-calm .spot h2.display { font-size: clamp(36px, 3.6vw, 52px) !important; }
.sec-calm .final h2.display { font-size: clamp(56px, 7vw, 104px) !important; }
.sec-calm .sub { font-size: clamp(19px, 1.7vw, 23px) !important; }
.sec-calm .head { margin-bottom: clamp(44px, 5vw, 72px) !important; gap: 18px !important; }

/* 3. no dashed frames (the App Store "coming soon" keeps its dashes) */
.sec-calm .cta-band .wrap::after, .sec-calm .final .box::after, .sec-calm .inst::after { display: none !important; }
.sec-calm .btn-primary { outline: 0 !important; }
.sec-calm .where { border-style: solid !important; border-width: 1px !important; border-color: var(--c-line) !important; }

/* 4. flat lists instead of shadowed cards */
.sec-calm .approach .cards { gap: 0 !important; border-top: 1px solid var(--c-line); }
.sec-calm .approach .card { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--c-line) !important; padding: 40px 32px !important; }
.sec-calm .approach .card:not(:nth-child(3n)) { border-right: 1px solid var(--c-line) !important; }
.sec-calm .approach .card .ico.ill, .sec-calm .approach .card .ico.ill svg { width: 72px !important; height: 72px !important; }
.sec-calm .gu-grid { gap: 0 !important; border-top: 1px solid var(--c-line); }
.sec-calm .gu-grid li { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--c-line) !important; }
.sec-calm .cta-band .wrap, .sec-calm .final .box { box-shadow: none !important; background: var(--c-off) !important; border-radius: 28px !important; }

/* 5. two quiet pills per activity */
.sec-calm .benefits li { background: transparent !important; border: 1px solid var(--c-line) !important; color: var(--c-ink); font-weight: 500; }
.sec-calm .benefits li.jv::before { display: none; }
.sec-calm .benefits li:nth-child(n+3) { display: none; }

/* 6. one small sticker per section, fully inside it */
.sec-calm .spark { display: none !important; }
.sec-calm .obj { display: none !important; }
.sec-calm .obj.o-doves, .sec-calm .obj.o-sheep, .sec-calm .obj.o-cup, .sec-calm .obj.o-etrog, .sec-calm .obj.o-rider { display: block !important; }
.sec-calm .obj.o-doves, .sec-calm .obj.o-sheep, .sec-calm .obj.o-cup, .sec-calm .obj.o-etrog { transform: scale(.7); right: 6% !important; left: auto !important; }
.sec-calm .rows2 article.row-photo .pst { width: 110px; right: -16px; top: -30px; }

/* 7. the hero's button everywhere: flat, slightly rounded, no outline */
.sec-calm main .btn { border-radius: 10px !important; box-shadow: none !important; }
.sec-calm main .btn-outline { border-width: 1px !important; border-color: rgba(31, 42, 43, .2) !important; color: var(--c-ink) !important; }

/* 9. the same space around every section */
.sec-calm main > section { padding-block: clamp(88px, 9vw, 136px) !important; margin-top: 0 !important; }
.sec-calm .spotlights { padding-top: 0 !important; }
.sec-calm .spot + .spot { margin-top: 0 !important; }

/* the bento keeps soft cream tiles so the five cards read as cards */
.sec-calm.sp-bento .spotlights .spot { background: var(--c-off) !important; border-radius: 24px !important; }
/* tints behind devices become our cream */
.sec-calm .rows2 article .stage::before, .sec-calm .action .devices::before { background: var(--c-off) !important; box-shadow: none !important; }
.sec-calm .name-card { background: var(--c-off) !important; box-shadow: none !important; }
.sec-calm .few-how li, .sec-calm .steps li { box-shadow: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.sec-calm .few-how { gap: 0 !important; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.sec-calm .few-how li:not(:last-child) { border-right: 1px solid var(--c-line) !important; }
.sec-calm .mascot.peek-right { display: none !important; }