/* The calm direction across the whole site: the real header restyled as the
   heroes' thin floating card (sticky on every page, phone menu kept), the
   calm heroes on phones, and small fixes for the calm sections on phones. */

/* ---------- header: a white card floating over the page ---------- */
html.calm-on header.bar, header.bar { display: block !important; position: sticky; top: 0; height: 0; overflow: visible; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; padding-top: 0; z-index: 40; }
.bar-in { position: relative; top: 16px; margin: 0 24px; max-width: none; min-height: 64px; padding: 0 12px 0 28px; gap: 36px; background: #fff; border-radius: 14px; box-shadow: 0 1px 0 rgba(31,42,43,.1), 0 10px 30px -18px rgba(31,42,43,.25); }
.bar .logo img { width: 92px; }
.nav { margin: 0 auto; gap: 34px; }
.nav a { font: 500 12.5px/1 "Outfit", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #1F2A2B; }
.bar .btn-sm { border-radius: 10px; outline: 0 !important; box-shadow: none !important; min-height: 44px; padding: 0 22px; font-weight: 600; font-size: 15px; }
@media (min-width: 961px) and (max-width: 1180px) { .nav { gap: 20px; } .nav a { font-size: 11.5px; letter-spacing: .1em; } }
@media (max-width: 960px) {
  .bar-in { top: 10px; margin: 0 12px; padding: 0 10px 0 16px; min-height: 60px; gap: 8px; }
  .nav { margin: 0; top: calc(100% + 8px); border-radius: 14px; height: calc(100dvh - 100px); }
  .nav a { font: 400 40px/1.15 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; letter-spacing: .01em; color: var(--teal); }
  .menu-btn, .lang-cur, .lang-opt { border-width: 1px; border-radius: 10px; }
}
/* pages without a big hero start below the floating header */
.legal-top { padding-top: clamp(120px, 12vw, 160px) !important; background: #F6F2EC !important; }
.legal-top h1.display { font-size: clamp(44px, 5.6vw, 80px) !important; }

/* ---------- the calm heroes on phones and small tablets ---------- */
@media (max-width: 900px) {
  .calm .h1 { font-size: clamp(52px, 13vw, 72px) !important; }
  .calm .lead { font-size: 18px !important; }
  .calm .eb { font-size: 11px !important; letter-spacing: .14em !important; }
  .calm .act { width: 100% !important; align-items: stretch !important; }
  .calm .btn.wide { min-width: 0 !important; width: 100% !important; }
  .calm .act .small { width: 100% !important; text-align: center !important; }
  .calm .stores { justify-content: flex-start !important; }
  .calm .stores a img, .calm .soon { height: 44px !important; }
  .calm .strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; padding: 20px !important; font-size: 13.5px !important; }
  .calm .o1 .chero { grid-template-columns: 1fr !important; height: auto !important; }
  .calm .o1 .cph { height: 62vw !important; min-height: 300px !important; }
  .calm .o1 .tx { padding: 40px 20px 52px !important; }
  .calm .o1 .stores { justify-content: center !important; }
  .calm .o2 .chero { height: auto !important; min-height: 820px !important; background-position: 70% 30% !important; }
  .calm .o2 .chero::after { background: linear-gradient(180deg, rgba(15,25,25,0) 25%, rgba(15,25,25,.72) 72%) !important; }
  .calm .o2 .tx { left: 20px !important; right: 20px !important; bottom: 36px !important; max-width: none !important; }
  .calm .o2 .h1 { max-width: none !important; }
  .calm .o2 .row2 { width: auto !important; flex-wrap: wrap !important; }
  .calm .o2 .row2 .act { flex: 1 1 100% !important; }
  .calm .o3 .chero { height: auto !important; padding: 116px 20px 0 !important; }
  .calm .o3 .dev { width: 100% !important; border-radius: 22px !important; padding: 8px !important; margin-top: 24px !important; }
  .calm .o3 .dev video, .calm .o3 .dev img { border-radius: 15px !important; }
  .calm .o3 .stores { justify-content: center !important; }
  .calm .o4 .chero { grid-template-columns: 1fr !important; height: auto !important; gap: 32px !important; padding: 108px 20px 40px !important; }
  .calm .o4 .pic { height: 78vw !important; max-height: 460px !important; border-radius: 22px !important; }
}

/* ---------- calm sections: lists stack on phones ---------- */
@media (max-width: 960px) {
  .sec-calm .approach .card { border-right: 0 !important; }
  .sec-calm .few-how li { border-right: 0 !important; border-bottom: 1px solid var(--c-line) !important; }
}
@media (max-width: 900px) {
  .calm .chero .act { width: 100% !important; align-items: stretch !important; }
  .calm .chero .btn.wide { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 899px) {
  .sec-calm.sp-bento .spotlights .spot + .spot { margin-top: 16px !important; }
  .sec-calm.sp-bento .spotlights .spot { padding: 24px 20px 28px !important; }
}
/* stickers would sit on the words on phones */
@media (max-width: 760px) { .sec-calm .obj:not(.o-rider) { display: none !important; } }

/* the App Store placeholder further down matches the hero's badge */
.sec-calm main .btn.store.soon { background: #000 !important; color: #fff !important; border: 1px solid #A6A6A6 !important; border-radius: 8px !important; opacity: .55; min-height: 0; height: 58px; padding: 0 16px 0 46px !important; position: relative; align-items: flex-start; justify-content: center; gap: 0; }
.sec-calm main .btn.store.soon::before { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 26px; transform: translateY(-55%); background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.4 2-3.6 2.1-3.7-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.9C6.1 7 4.5 8 3.6 9.6c-1.8 3.1-.5 7.8 1.3 10.3.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.2-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.8-1.1-2.8-4.5zM14 5.4c.7-.9 1.2-2 1-3.2-1 .1-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3.1 1.1.1 2.2-.6 2.9-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.4 2-3.6 2.1-3.7-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.9C6.1 7 4.5 8 3.6 9.6c-1.8 3.1-.5 7.8 1.3 10.3.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.2-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.8-1.1-2.8-4.5zM14 5.4c.7-.9 1.2-2 1-3.2-1 .1-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3.1 1.1.1 2.2-.6 2.9-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-calm main .btn.store.soon small { font-size: 10px !important; letter-spacing: .03em !important; text-transform: none !important; font-weight: 500 !important; color: #fff !important; opacity: 1; }
.sec-calm main .btn.store.soon small::after { content: " to the"; }
.sec-calm main .btn.store.soon span { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.01em; color: #fff; }

/* N3's stickers: two small ones on phones, still when motion is reduced */
@media (max-width: 900px) {
  .calm .o3 .st { transform: scale(.6) !important; animation: none !important; }
  .calm .o3 .st[src*="pom"], .calm .o3 .st[src*="block"], .calm .o3 .hsp { display: none !important; }
  .calm .o3 .st[src*="candles"] { left: 4px !important; bottom: 30px !important; }
  .calm .o3 .st[src*="challah"] { right: -20px !important; bottom: 10px !important; }
}
@media (prefers-reduced-motion: reduce) { .calm .fl, .calm .hsp { animation: none !important; } }

/* ---------- one page column for everything (80px sides, up to 1440 wide) ---------- */
:root { --side: max(80px, calc((100vw - 1440px) / 2)); --colw: calc(100vw - 2 * var(--side)); }
@media (max-width: 900px) { :root { --side: 20px; } }
.calm .o4 .chero { padding-left: var(--side) !important; padding-right: var(--side) !important; }
.calm .o2 .tx { left: var(--side) !important; }
.idx.idx-12, .idx.idx-13, .idx.idx-14 { --w: var(--colw) !important; }
.hs-track { padding-left: var(--side) !important; }
.hs-bar { left: var(--side) !important; right: var(--side) !important; }
.bar-in { margin-left: calc(var(--side) - 56px) !important; margin-right: calc(var(--side) - 56px) !important; }
@media (max-width: 960px) { .bar-in { margin: 0 12px !important; } }
/* the logo and the header button sit on the same column lines as the page */
@media (min-width: 961px) { .bar-in { padding-left: 56px !important; padding-right: 56px !important; } }

/* ---------- "Gentle on purpose", polished ---------- */
.sec-calm .approach .obj, .sec-calm .approach .spark { display: none !important; }
.sec-calm .approach .wrap { width: var(--colw) !important; max-width: none !important; padding-inline: 0 !important; }
.sec-calm .approach .cards { width: 100% !important; max-width: none !important; grid-template-columns: repeat(3, 1fr) !important; border-top: 1px solid rgba(31,42,43,.12); border-bottom: 0; }
.sec-calm .approach .card { text-align: left !important; align-items: flex-start !important; justify-items: start !important; display: grid !important; grid-template-columns: 64px 1fr; column-gap: 22px; row-gap: 8px; align-content: start; padding: 40px 40px 44px 0 !important; border-bottom: 1px solid rgba(31,42,43,.12) !important; border-right: 0 !important; }
.sec-calm .approach .card:not(:nth-child(3n+1)) { padding-left: 40px !important; border-left: 1px solid rgba(31,42,43,.12) !important; }
.sec-calm .approach .card .ico.ill { grid-row: 1 / span 2; width: 64px !important; height: 64px !important; margin: 0 !important; }
.sec-calm .approach .card .ico.ill svg { width: 64px !important; height: 64px !important; }
.sec-calm .approach .card h3 { grid-column: 2; margin: 4px 0 0 !important; font: 400 25px/1.2 p22-mackinac-pro, "Fraunces", Georgia, serif !important; color: var(--teal) !important; text-wrap: balance; }
.sec-calm .approach .card p { grid-column: 2; margin: 0 !important; font-size: 16px !important; line-height: 1.55 !important; color: #4A5656 !important; max-width: 32ch; }
.sec-calm .approach .head { margin-bottom: 56px !important; }
@media (max-width: 960px) {
  .sec-calm .approach .cards { grid-template-columns: 1fr !important; }
  .sec-calm .approach .card, .sec-calm .approach .card:not(:nth-child(3n+1)) { padding: 28px 0 !important; border-left: 0 !important; grid-template-columns: 52px 1fr; }
  .sec-calm .approach .card .ico.ill, .sec-calm .approach .card .ico.ill svg { width: 52px !important; height: 52px !important; }
  .sec-calm .approach .card h3 { font-size: 22px !important; }
}
.sec-calm .approach .cards { display: grid !important; flex-wrap: nowrap !important; gap: 0 !important; border-left: 0 !important; border-right: 0 !important; }
.sec-calm .approach .card { width: auto !important; max-width: none !important; margin: 0 !important; flex: none !important; }
.sec-calm .approach .card:nth-child(3n+1) { border-left: 0 !important; }
.sec-calm .approach .card:not(:nth-child(3n)) { border-right: 0 !important; }
/* N1: the words sit in the middle of the space below the floating header */
@media (min-width: 901px) { .calm .o1 .tx { padding-top: 120px !important; padding-bottom: 40px !important; } }

/* ---------- "Come take a look around": the hero's buttons, no inner box ---------- */
.sec-calm .cta-band { background: #F6F2EC !important; padding-block: 96px !important; }
.sec-calm .cta-band .wrap { width: var(--colw) !important; max-width: none !important; background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; gap: 18px !important; }
.sec-calm .cta-band .wrap::before, .sec-calm .cta-band .wrap::after { display: none !important; }
.sec-calm .cta-band .ctas { margin-top: 18px; display: flex; justify-content: center; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cta-main { display: grid; gap: 10px; justify-items: center; }
.cta-main small { font: 400 13.5px/1 "Outfit", sans-serif; color: #5B6A69; }
.sec-calm .cta-band .btn-primary { min-width: 320px; height: 56px; min-height: 56px; font-size: 17px; font-weight: 500; border-radius: 10px !important; }
.sec-calm .cta-band .store-badge img { height: 56px; }
.sec-calm main .cta-band .btn.store.soon { height: 56px; }
@media (max-width: 700px) { .sec-calm .cta-band .btn-primary { min-width: 0; width: calc(100vw - 40px); } }

/* the band before pricing: the Pupik shelf on a tablet, on teal, cut by the band's bottom edge */
.photo-band.mock-band { background: radial-gradient(80% 120% at 50% 0%, #2C7A7D 0%, #23676A 55%, #1D5A5D 100%); display: flex; justify-content: center; align-items: flex-start; }
.mb-tab { width: min(980px, 74vw); margin-top: clamp(56px, 6vw, 96px); background: #22272E; border-radius: 44px; padding: 16px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.55); }
.mb-tab img { display: block; width: 100%; height: auto; border-radius: 30px; }
@media (max-width: 760px) { .mb-tab { width: 88vw; border-radius: 26px; padding: 9px; } .mb-tab img { border-radius: 18px; } }
.mb-tab { transform-origin: 50% 0; will-change: transform; }

/* two white sections in a row don't double their space: the second starts closer */
.sec-calm main > section.few + section.offline-sec, .sec-calm main > section.faq + section.final { padding-top: 0 !important; }
/* the held card leaves room at the bottom of its screen; the next section starts without its own top space */
.sec-calm main > section.grownups + section.few { padding-top: 0 !important; margin-top: -40px !important; }
/* a quiet "Log in" beside "Try it free" in the header */
.bar-login { font: 600 15px/1 "Outfit", sans-serif; color: var(--teal); text-decoration: none; padding: 12px 6px; white-space: nowrap; margin-left: auto; }
.bar-login:hover { color: var(--rust); }
.bar-in .nav { margin-right: 12px; }
@media (max-width: 960px) { .bar-login { font-size: 14px; padding: 10px 4px; } }
@media (max-width: 420px) { .bar-login { display: none; } }
/* "Come take a look around": the button above the store badges, like the hero */
.sec-calm .cta-band .ctas { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
.sec-calm .cta-band .ctas .store-badge, .sec-calm .cta-band .ctas .store.soon { display: inline-flex; }
.sec-calm .cta-band .ctas { display: grid !important; justify-items: center; grid-template-columns: auto auto; column-gap: 10px; }
.sec-calm .cta-band .cta-main { grid-column: 1 / -1; }
/* "Come take a look around": store badges at the hero's size, narrower than the button above */
.sec-calm .cta-band .store-badge img { height: 44px !important; }
.sec-calm main .cta-band .btn.store.soon { height: 44px !important; min-height: 44px !important; padding: 0 12px 0 38px !important; }
.sec-calm main .cta-band .btn.store.soon::before { left: 12px; width: 18px; height: 22px; }
.sec-calm main .cta-band .btn.store.soon small { font-size: 9px !important; }
.sec-calm main .cta-band .btn.store.soon span { font-size: 16px !important; }
.sec-calm main > section.grownups + section.few { margin-top: 0 !important; padding-top: 96px !important; }
.sec-calm main > section.grownups + section.few { padding-top: 48px !important; }
.sec-calm main > section.grownups + section.few { padding-top: 120px !important; }

/* phones: the hero text centred */
@media (max-width: 900px) {
  html .calm .o4 .tx { text-align: center; justify-items: center; }
  html .calm .o4 .eb { justify-content: center; }
  html .calm .o4 .act { flex-direction: column; align-items: stretch; width: 100%; }
  html .calm .o4 .act .small { width: auto; }
  html .calm .o4 .stores { justify-content: center; }
}
@media (max-width: 900px) { html .calm .eb { flex-wrap: wrap; } .calm .eb .eb-dot { display: none; } .calm .eb .eb-age { flex-basis: 100%; text-align: center; } }
.calm .eb .eb-dot { margin: 0 -6px; }
/* Spanish hero line is longer: a smaller size so it takes the same room as the English */
html[lang="es"] .calm:not(.serif) .o4 .h1 { font-size: 84px; }
@media (max-width: 1360px) { html[lang="es"] .calm:not(.serif) .o4 .h1 { font-size: 74px; } }

/* inner pages: the title block centred in the cream band below the floating header */
html main section.legal-top, html main section.pr-hero { padding-top: 170px !important; padding-bottom: 90px !important; }
@media (max-width: 900px) { html main section.legal-top, html main section.pr-hero { padding-top: 124px !important; padding-bottom: 54px !important; } }

/* the teal-wall laptop band: tall enough that the whole laptop shows at every width */
.photo-band.band-tall { height: clamp(340px, 50vw, 1000px); }
@media (max-width: 760px) { .photo-band.band-tall { height: clamp(300px, 92vw, 460px); } }