/* ============================================================
   landing-calm.css: the home page in the calm look (a preview).

   Applies only under <html data-look="calm"> (?look=calm, kept in
   localStorage bb-look; ?look=off clears it). The 3D cell, its drag, its
   scroll dissection and its labels are untouched: this changes the words
   around it, so they read at a glance, and adds the page under it (what
   the site is for, then real pictures of real resources, then a short
   store row). The bar, its menus and the free checks line are in
   css/header.css, the footer in css/footer.css. The markup for the new
   parts is in index.html, in two <script type="text/html" data-calm>
   blocks, so the page's words stay as they are until it ships.
   ============================================================ */

/* ── The hero: one sans for the words, one main button and one other ── */
:root[data-look="calm"] .stage-new,
:root[data-look="calm"] .hero-ib { display: none; }
:root[data-look="calm"] .kicker { font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: var(--calm-dim); }
:root[data-look="calm"] .stage-text h1 em,
:root[data-look="calm"] .mobile-cell-head .mobile-cell-title em { color: var(--calm-pink); }
:root[data-look="calm"] .stage-text p { font-family: var(--calm-sans); font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 430px; }
:root[data-look="calm"] .calm-cta { pointer-events: auto; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
:root[data-look="calm"] .calm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: 10px; font-family: var(--calm-sans); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color 0.15s; }
:root[data-look="calm"] .calm-btn-main { background: var(--ink); color: var(--paper-white); }
:root[data-look="calm"] .calm-btn-main:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper-white)); }
:root[data-look="calm"] .calm-btn-alt { background: var(--paper-white); color: var(--ink); }
:root[data-look="calm"] .calm-btn-alt:hover { background: var(--paper); }
:root[data-look="calm"] .calm-btn:hover { transform: none; filter: none; }
:root[data-look="calm"] .calm-btn:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 3px; }
:root[data-look="calm"] .calm-arr { display: none; }
/* Over the cell the other choice is a plain link, not a second box on the
   glass; on a phone, where there is no glass behind it, it stays a button. */
:root[data-look="calm"] .stage-text .calm-cta { align-items: center; gap: 10px 26px; }
:root[data-look="calm"] .stage-text .calm-btn-alt { min-height: 44px; padding: 0 2px; border: 0; border-radius: 4px; background: none; text-decoration: underline; text-decoration-color: var(--riso-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 5px; }
:root[data-look="calm"] .stage-text .calm-btn-alt:hover { background: none; text-decoration-thickness: 3px; }
:root[data-look="calm"] .stage-text .calm-arr { display: inline; white-space: pre; }

/* Wide screens: the cell steps right just far enough that the paragraph
   and its buttons sit on the paper beside the glass, not over its edge.
   The sphere's radius is about 37% of the screen's height, so the step is
   worked out from both sides of the screen: none on a wide one, up to
   160px on a 1280 by 800. The canvas, the labels and their connectors move
   together (their left edge goes twice as far, so the middle moves the
   step), and the rail and the hints keep under the cell. */
@media (min-width: 1181px) {
  :root[data-look="calm"] .stage { --calm-step: clamp(0px, 420px + 37vh - 45vw, 160px); }
  :root[data-look="calm"] .stage-text p { max-width: 400px; }
  :root[data-look="calm"] #cell-canvas,
  :root[data-look="calm"] .connectors,
  :root[data-look="calm"] .labels { left: calc(var(--calm-step) * 2); width: calc(100% - var(--calm-step) * 2); }
  :root[data-look="calm"] .progress-rail,
  :root[data-look="calm"] .scroll-hint,
  :root[data-look="calm"] .drag-pill { left: calc(50% + var(--calm-step)); }
}

/* The cell's own controls and hints: plain words, no offset shadows. */
:root[data-look="calm"] .recenter-pill { padding: 9px 14px; border: 1px solid var(--calm-line); border-radius: 9px; background: var(--paper-white); box-shadow: none; font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink); display: inline-block; }
:root[data-look="calm"] .recenter-pill::first-letter { text-transform: uppercase; }
:root[data-look="calm"] .recenter-pill .ico { display: none; }
:root[data-look="calm"] .recenter-pill:hover { transform: none; filter: none; background: var(--paper); box-shadow: none; }
:root[data-look="calm"] .recenter-pill:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 2px; }
:root[data-look="calm"] .drag-pill { border: 1px solid var(--calm-line); border-radius: 9px; box-shadow: 0 6px 18px rgba(20, 40, 30, 0.12); font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
:root[data-look="calm"] .drag-pill::first-letter { text-transform: uppercase; }
:root[data-look="calm"] .scroll-hint { display: block; font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--calm-dim); }
:root[data-look="calm"] .scroll-hint::first-letter { text-transform: uppercase; }
:root[data-look="calm"] .rail-label { font-family: var(--calm-sans); font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink); }
:root[data-look="calm"] .rail-label > span:first-child::first-letter { text-transform: uppercase; }
:root[data-look="calm"] .rail-label .pct { padding: 0; min-width: 0; border: 0; background: none; box-shadow: none; font-family: var(--calm-sans); font-size: 15px; font-weight: 700; color: var(--ink); }
:root[data-look="calm"] .rail-ticks { height: 22px; }
:root[data-look="calm"] .rail-ticks .tick-label { top: 13px; font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-look="calm"] .rail-ticks .tick-label::first-letter { text-transform: uppercase; }

/* The organelle cards, once the cell is pulled apart: the same cards, read
   in the sans; the organelle's name in --calm-dim (its colour stays on the
   dot), no number, sentence case. */
:root[data-look="calm"] .label-head .organelle { font-family: var(--calm-sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--calm-dim); font-weight: 700; }
:root[data-look="calm"] .label-head .organelle::first-letter { text-transform: uppercase; }
:root[data-look="calm"] .label-title { font-size: 21px; }
:root[data-look="calm"] .label-tag { font-family: var(--calm-sans); font-size: 15px; color: var(--calm-dim); }
:root[data-look="calm"] .labels.is-compact .label-tag { font-size: 14px; line-height: 1.3; }
:root[data-look="calm"] .label-arrow { font-family: var(--calm-sans); font-size: 15px; color: var(--calm-dim); }
:root[data-look="calm"] .label-arrow::first-letter { text-transform: uppercase; }

/* Phones: the flat cell's hero */
:root[data-look="calm"] .mobile-cell-head .kicker { font-family: var(--calm-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: var(--calm-dim); }
:root[data-look="calm"] .mobile-cell-head > p:not(.mobile-cell-title) { font-family: var(--calm-sans); font-size: 17px; line-height: 1.55; color: var(--ink); }
:root[data-look="calm"] .mobile-cell-head .calm-cta { flex-direction: column; gap: 10px; margin-top: 20px; }
:root[data-look="calm"] .mobile-cell-head .calm-btn { width: 100%; }
:root[data-look="calm"] .mobile-cell-svg text { font-family: var(--calm-sans); font-size: 13.5px; font-weight: 700; }
:root[data-look="calm"] .mobile-cell-svg .chip-n { display: none; }
:root[data-look="calm"] .mobile-cell-svg .chip-w { text-transform: capitalize; }
:root[data-look="calm"] .mobile-cell-svg > text { font-size: 13px; letter-spacing: 0.06em; fill: var(--calm-dim); opacity: 1; }

/* ── Under the cell: what the site is for, then the things themselves ── */
:root[data-look="calm"] .calm-below { display: block; background: var(--paper); color: var(--ink); font-family: var(--calm-sans); }
:root[data-look="calm"] .calm-below ~ footer { margin-top: 0; }
:root[data-look="calm"] .calm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
:root[data-look="calm"] .calm-shelf { padding: 112px 0 104px; }
:root[data-look="calm"] .calm-head { max-width: 780px; margin: 0 0 48px; }
:root[data-look="calm"] .calm-head h2 { font-family: var(--font-display); font-size: clamp(38px, 4.4vw, 60px); font-weight: 650; line-height: 1.02; letter-spacing: -.01em; color: var(--ink); }
:root[data-look="calm"] .calm-head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--calm-pink); text-shadow: 2px 1.5px 0 var(--riso-green); }
:root[data-look="calm"] .calm-lede { margin-top: 16px; max-width: 40em; font-size: 19px; line-height: 1.55; color: var(--calm-dim); text-wrap: pretty; }

/* What the site is for: four kinds in one row on a quiet panel, like a
   category bar, so they read as the way in rather than as more cards. */
:root[data-look="calm"] .calm-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 10px; border: 1px solid var(--calm-line); border-radius: 16px; background: var(--paper-white); }
:root[data-look="calm"] .calm-kind { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color 0.15s; }
:root[data-look="calm"] .calm-kind:hover { background: var(--calm-hover); }
:root[data-look="calm"] .calm-kind:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: -3px; }
:root[data-look="calm"] .calm-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--riso-green) 24%, var(--paper-white)); }
:root[data-look="calm"] .calm-ico[data-tone="pink"] { background: color-mix(in srgb, var(--riso-pink) 26%, var(--paper-white)); }
:root[data-look="calm"] .calm-ico[data-tone="yellow"] { background: color-mix(in srgb, var(--riso-yellow) 34%, var(--paper-white)); }
:root[data-look="calm"] .calm-ico[data-tone="coral"] { background: color-mix(in srgb, var(--riso-coral) 28%, var(--paper-white)); }
:root[data-look="calm"] .calm-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-look="calm"] .calm-kind b { display: block; font-size: 19px; line-height: 1.25; }
:root[data-look="calm"] .calm-kind-line { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--calm-dim); }

/* The things themselves: three across, each picture one bold part of a real page. */
:root[data-look="calm"] .calm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin: 64px 0 0; padding: 0; list-style: none; }
:root[data-look="calm"] .calm-card { position: relative; display: block; color: var(--ink); text-decoration: none; border-radius: 12px; }
:root[data-look="calm"] .calm-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--calm-line); border-radius: 12px; background: var(--paper-white); }
:root[data-look="calm"] .calm-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
:root[data-look="calm"][data-theme="dark"] .calm-pic img { filter: brightness(0.92); }
:root[data-look="calm"] .calm-card:hover .calm-pic img { transform: scale(1.03); }
:root[data-look="calm"] .calm-card h3 { margin: 18px 0 6px; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
:root[data-look="calm"] .calm-card:hover h3 { text-decoration: underline; text-decoration-color: var(--riso-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 5px; }
:root[data-look="calm"] .calm-card p { font-size: 17px; line-height: 1.5; color: var(--calm-dim); }
:root[data-look="calm"] .calm-card:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 6px; }
/* New, or Credits on the one that is paid: a small label after the title, off
   the picture so it never covers what the picture shows. */
:root[data-look="calm"] .calm-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 6px; background: color-mix(in srgb, var(--riso-pink) 22%, var(--paper-white)); color: var(--ink); font-family: var(--calm-sans); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; vertical-align: 4px; }
:root[data-look="calm"] .calm-card:hover .calm-tag { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { :root[data-look="calm"] .calm-pic img { transition: none; } }

/* Straight to: the plain links that used to sit in the hero, one quiet line. */
:root[data-look="calm"] .calm-also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--calm-line); }
:root[data-look="calm"] .calm-also h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
:root[data-look="calm"] .calm-also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; line-height: 1.4; color: var(--calm-dim); }
:root[data-look="calm"] .calm-also a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--calm-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:root[data-look="calm"] .calm-also a:hover { text-decoration-color: var(--riso-pink-deep); }
:root[data-look="calm"] .calm-also a:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 2px; border-radius: 3px; }

/* ── From the store (optional: the whole block can go) ── */
:root[data-look="calm"] .calm-store { padding: 52px 0 60px; background: var(--paper-white); border-top: 1px solid var(--calm-line); }
:root[data-look="calm"] .calm-store-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; margin-bottom: 28px; }
:root[data-look="calm"] .calm-store h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
:root[data-look="calm"] .calm-store-note { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--calm-dim); }
:root[data-look="calm"] .calm-more { padding: 6px 0; font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--riso-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
:root[data-look="calm"] .calm-more:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 3px; border-radius: 3px; }
:root[data-look="calm"] .calm-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 0; list-style: none; }
:root[data-look="calm"] .calm-prod { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; color: var(--ink); text-decoration: none; border-radius: 10px; }
:root[data-look="calm"] .calm-prod img { display: block; width: 84px; height: 105px; object-fit: cover; border: 1px solid var(--calm-line); border-radius: 6px; background: var(--paper); }
:root[data-look="calm"] .calm-prod b { display: block; font-size: 17px; line-height: 1.3; }
:root[data-look="calm"] .calm-prod:hover b { text-decoration: underline; text-decoration-color: var(--riso-pink-deep); text-underline-offset: 3px; }
:root[data-look="calm"] .calm-prod:focus-visible { outline: 3px solid var(--riso-pink-deep); outline-offset: 4px; }
:root[data-look="calm"] .calm-sub { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--calm-dim); }
:root[data-look="calm"] .calm-price { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }

/* Narrower screens: the kinds two by two, then the cards two across. */
@media (max-width: 1100px) {
  :root[data-look="calm"] .calm-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root[data-look="calm"] .calm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  :root[data-look="calm"] .calm-prods { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  :root[data-look="calm"] .calm-wrap { padding: 0 16px; }
  :root[data-look="calm"] .calm-shelf { padding: 64px 0 56px; }
  :root[data-look="calm"] .calm-head { margin-bottom: 28px; }
  :root[data-look="calm"] .calm-lede { font-size: 17px; }
  :root[data-look="calm"] .calm-kinds { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px; }
  :root[data-look="calm"] .calm-kind { padding: 12px 10px; }
  :root[data-look="calm"] .calm-cards { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 44px; }
  :root[data-look="calm"] .calm-card h3 { font-size: 24px; }
  :root[data-look="calm"] .calm-also { display: block; margin-top: 48px; }
  :root[data-look="calm"] .calm-also h3 { margin-bottom: 10px; }
  :root[data-look="calm"] .calm-also ul { display: grid; gap: 10px; }
  :root[data-look="calm"] .calm-store { padding: 40px 0 44px; }
  :root[data-look="calm"] .calm-store-head { display: block; margin-bottom: 22px; }
  :root[data-look="calm"] .calm-more { display: inline-block; margin-top: 10px; }
}