/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   Maythorn — garden planner & season journal, serif display voice (the app
   replaces the paper garden agenda). Warm ivory Paper, blossom-pink Blush,
   haw-crimson accent (deliberately not garden-app green).

   Brand: haw crimson #a32638 (light) / #d4596b (dark), read upstream from the
   in-app AccentColor.colorset. The crimson fill is dark enough for large
   accents; --accent-text carries a slightly darkened crimson tuned to AA
   (≥4.5:1) for links + small text. Accent-tinted surfaces use
   color-mix(var(--accent)) so re-hueing cascades to the halo + chips
   automatically. (Header was the scaffold template text until 2026-08-13,
   while the tokens below were already re-skinned — found in the
   design-appeal pass.)

   The quiet-page components below (.may-*) arrived with the 2026-09-08
   redesign (owner direction "Product eerst"): one still per section, one
   primary action, no atmosphere photos, no in-frame films. They read only
   tokens, so dark mode is automatic.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#faf6ee; --bg-2:#f4e4e2; --surface:#fffdf8;
  --text:#26201a; --text-soft:#6b5f54;
  --accent:#a32638; --accent-2:#c24356; --accent-ink:#ffffff;
  --accent-text:#8e1f30;                 /* haw crimson, darkened for AA on --bg and on white */
  --line:#e6dccc;
  --verified:#2f7d55; --caution:#a06a1e; --caution-text:#7d5216;
  --display: var(--serif); --display-tracking: 0;   /* the app replaces the paper garden agenda */
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}

/* ---- dark (deep cool palette, faint blue atmosphere) ---- */
[data-theme="dark"] {
  --bg:#1b1714; --bg-2:#241e1a; --surface:#241f1c;
  --text:#f0ebe2; --text-soft:#b0a396;
  --accent:#d4596b; --accent-2:#e0798a; --accent-ink:#24100f;
  --accent-text:#e08494;                 /* AA ≈7.6:1 on --bg */
  --line:#3a302a;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#2a2320;
  --display: var(--serif); --display-tracking: 0;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#1b1714; --bg-2:#241e1a; --surface:#241f1c;
    --text:#f0ebe2; --text-soft:#b0a396;
    --accent:#d4596b; --accent-2:#e0798a; --accent-ink:#24100f;
    --accent-text:#e08494;                 /* AA ≈7.6:1 on --bg */
    --line:#3a302a;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#2a2320;
    --display: var(--serif); --display-tracking: 0;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}

/* ---- launch swap ----
   Wording and store link derive from ONE fact (app.toml [store] app_store_url /
   play_store_url, via {{launchState}} + the badge states), so a page can never say
   "coming soon" beside a working store button. Container-agnostic on purpose: the hero
   badge row and the price-card button swap alike. Per-brand rules by design: site.css is
   byte-identical across sites and not the place (see tondo theme.css, the worked example). */
.may-hero-cta .launch-live, .may-hero-cta .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }

/* ---- shell: the shared .nav header stays; below 860px it wraps to its own row instead of
   vanishing. No hamburger on this site: the nav used to hide behind nothing on a phone, which
   left Features, Pricing and Support unreachable (owner report 2026-09-07, tondo). ---- */
.may-page-wrap{ width:min(1180px,100% - 2 * clamp(1.4rem,5vw,3.6rem)); margin-inline:auto; }
@media (max-width:860px){
  .nav{ flex-wrap:wrap; }
  .nav nav{ flex:1 0 100%; margin:.4rem 0 0; gap:1.1rem; overflow-x:auto;
    -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none; }
  .nav nav::-webkit-scrollbar{ display:none; }
  /* The German footer trio (Datenschutz · Nutzungsbedingungen · Rechtliches) is wider than a
     320px viewport on one line (overflow harness, 2026-09-08); let it wrap. */
  footer .links{ flex-wrap:wrap; gap:.4rem 1.2rem; }
}

/* ---- type ---- */
.may-eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-soft); }
.may-lore{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--accent-text);
  margin:0 0 .9rem; }

/* ---- device frames: the shared titanium .dv-iphone from site.css, sized per slot ---- */
.may-hero-figure .device.dv-iphone{ --dv-scale:.70; --rot:.6deg; }
.may-feature-figure .device.dv-iphone{ --dv-scale:.58; --rot:0deg; }

/* ---- hero ---- */
.may-hero{ position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2.4rem,5vw,3.6rem); }
/* The halo stays INSIDE the wrap: a negative horizontal inset (the first draft bled it 50vw each
   side) set the document's scrollWidth and the page scrolled sideways at every width. */
.may-hero::before{ content:""; position:absolute; inset:-4rem 0 0; background:var(--halo);
  pointer-events:none; }
.may-hero > div{ position:relative; }
.may-hero h1{ font-family:var(--display); font-size:clamp(2.6rem,4.8vw,3.9rem); font-weight:560;
  line-height:1.05; letter-spacing:0; margin:1rem 0 1.4rem; max-width:15ch; text-wrap:balance; }
.may-reading{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 1.4rem; }
.may-reading > div{ display:grid; gap:.15rem; padding:.9rem 1rem .9rem 0; }
.may-reading > div + div{ padding-left:1rem; border-left:1px solid var(--line); }
.may-reading-label{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft); }
.may-reading-value{ font-family:var(--serif); font-size:1.35rem; line-height:1.2; color:var(--text); }
.may-reading-sub{ font-size:.86rem; color:var(--text-soft); line-height:1.3; }
.may-lede{ font-family:var(--serif); font-size:1.18rem; line-height:1.6; color:var(--text-soft);
  max-width:32rem; margin:0 0 1.9rem; }
.may-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.may-coming{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--text); }
.may-ghost{ display:inline-flex; align-items:center; padding:.6rem 1.25rem; border-radius:var(--radius-pill);
  border:1px solid var(--line); color:var(--text); font-size:.95rem; font-weight:600;
  text-decoration:none; transition:transform var(--dur-1) ease; }
.may-ghost:hover{ color:var(--accent-text); transform:translateY(-1px); }
.may-store{ display:inline-flex; align-items:center; gap:.7rem; text-align:left; padding:.6rem 1.15rem;
  border-radius:12px; background:var(--text); color:var(--bg); text-decoration:none;
  transition:transform var(--dur-1) ease; }
.may-store:hover{ color:var(--bg); transform:translateY(-1px); }
.may-store small{ display:block; font-size:10px; font-weight:500; letter-spacing:.03em; line-height:1.15; }
.may-store b{ display:block; font-size:16px; font-weight:650; line-height:1.15; }
.may-hero-note{ font-size:.92rem; color:var(--text-soft); margin:1.5rem 0 0; }
.may-hero-note b{ color:var(--text); }
.may-hero .app-langs{ margin-top:1.1rem; }
.may-hero-figure{ display:grid; justify-items:center; }

/* ---- four facts, no devices ---- */
.may-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.2rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(1.4rem,3vw,1.9rem) 0; font-size:.95rem; line-height:1.5; }
.may-fact b{ color:var(--text); }
.may-fact span{ color:var(--text-soft); }

/* ---- feature bands: one still beside one column of text ---- */
.may-feature{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(3rem,7vw,5rem) 0; }
.may-feature + .may-feature{ border-top:1px solid var(--line); }
.may-feature.may-flip{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.may-feature h2{ font-family:var(--display); font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:560;
  line-height:1.12; letter-spacing:0; margin:.9rem 0 1.1rem; text-wrap:balance; }
.may-feature p{ color:var(--text-soft); line-height:1.65; margin:0 0 1rem; max-width:34rem; }
.may-feature-figure{ display:grid; justify-items:center; margin:0; }

/* ---- pricing ---- */
.may-pricing{ border-top:1px solid var(--line); padding:clamp(3.6rem,8vw,6rem) 0; display:grid;
  justify-items:center; gap:1.6rem; text-align:center; }
.may-price-card{ position:relative; width:min(30rem,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(2rem,5vw,2.8rem);
  box-shadow:var(--shadow-3); overflow:hidden; }
.may-price-card::before{ content:""; position:absolute; inset:0; background:var(--halo); pointer-events:none; }
.may-price-card > *{ position:relative; }
.may-badge{ display:inline-flex; padding:.35rem .8rem; border-radius:var(--radius-pill); font-size:11px;
  font-weight:750; letter-spacing:.08em; background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-text); }
.may-price{ font-family:var(--display); font-size:3.4rem; font-weight:560; margin:.9rem 0 .1rem; }
.may-cadence{ color:var(--text-soft); margin:0 0 1.2rem; }
.may-price-lead{ color:var(--text-soft); margin:0 0 1.2rem; line-height:1.55; }
.may-price-card ul{ list-style:none; padding:0; margin:0 auto 1.6rem; display:grid; gap:.6rem;
  font-size:.96rem; color:var(--text-soft); text-align:left; max-width:24rem; }
.may-price-card li{ display:flex; gap:.6rem; align-items:baseline; }
.may-check{ color:var(--verified); font-weight:800; flex:none; }
.may-price-cta{ display:inline-flex; padding:.8rem 1.7rem; border-radius:var(--radius-pill); background:var(--accent);
  color:var(--accent-ink); font-weight:650; text-decoration:none; transition:transform var(--dur-1) ease; }
.may-price-cta:hover{ color:var(--accent-ink); transform:translateY(-1px); }
.may-price-note{ font-size:.88rem; color:var(--text-soft); line-height:1.6; margin:1.1rem 0 0; }

/* ---- faq ---- */
.may-faq{ padding:0 0 clamp(3.6rem,8vw,6rem); }
.may-faq-inner{ width:min(46rem,100%); margin:0 auto; }
.may-faq-inner .may-head{ margin-bottom:2rem; }
.may-faq h2{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.2rem); font-weight:560; margin:0; }
.may-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin:0 0 .7rem; }
.may-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:1rem; padding:1rem 1.2rem; font-weight:620; }
.may-faq summary::-webkit-details-marker{ display:none; }
.may-faq summary .pl{ color:var(--accent-text); font-weight:700; transition:transform .2s ease; }
.may-faq details[open] summary .pl{ transform:rotate(45deg); }
.may-faq details p{ padding:0 1.2rem 1.1rem; margin:0; color:var(--text-soft); line-height:1.65;
  font-size:.97rem; }
.may-faq details a{ color:var(--accent-text); }

/* ---- responsive + motion ----
   The shared frame's footprint is FIXED px (--dv-fw × --dv-scale, 430px native iPhone) while the
   columns around it are fluid, so each band narrower than the base footprint gets its own scale,
   measured at the band's tightest width. */
@media (max-width:1100px){
  .may-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:861px) and (max-width:1152px){
  .may-hero-figure .device.dv-iphone{ --dv-scale:.6; }
  .may-feature-figure .device.dv-iphone{ --dv-scale:.5; }
}
@media (max-width:860px){
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, and a long Dutch or Finnish word
     in the hero would push the column past a 320px viewport. */
  .may-hero, .may-feature, .may-feature.may-flip{ grid-template-columns:minmax(0,1fr); }
  .may-feature-figure{ order:-1; }
  .may-hero-figure .device.dv-iphone, .may-feature-figure .device.dv-iphone{ --dv-scale:.6; }
}
@media (max-width:560px){
  .may-facts{ grid-template-columns:1fr; }
  .may-reading{ grid-template-columns:1fr; }
  .may-reading > div{ padding:.7rem 0; }
  .may-reading > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .may-hero-figure .device.dv-iphone, .may-feature-figure .device.dv-iphone{ --dv-scale:.56; }
}
@media (max-width:440px){
  .may-hero h1{ font-size:2.2rem; }
  .may-hero-figure .device.dv-iphone, .may-feature-figure .device.dv-iphone{ --dv-scale:.5; }
}
@media (prefers-reduced-motion: reduce){
  .may-ghost, .may-store, .may-price-cta{ transition:none; }
}

/* ============================================================================
   "Het seizoenswiel" (owner brief 2026-09-29: unique, audience-built sites).
   Gardeners plan by the calendar and distrust a map, so the hero is a dial around the phone: the year
   as a ring with the frost risk drawn on it from the station's own dates, and a pin at today. Month
   names and dates are formatted in the browser in the page language. The fact row is a row of seed
   packets and every language is a garden tag. Scoped to .mw-*, .may-* and the shell chrome; the
   features / pricing / support pages keep their quiet rules above.
   ============================================================================ */
:root{ --w-frost:#b9d0e3; --w-risk:#e7a4ab; --w-mild:#f0cf9a; --w-grow:#8fbb91; --w-ink:#26201a; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --w-frost:#47637d; --w-risk:#a94a59; --w-mild:#9b7c3f; --w-grow:#4f7f57; --w-ink:#f0ebe2; } }
[data-theme="dark"]{ --w-frost:#47637d; --w-risk:#a94a59; --w-mild:#9b7c3f; --w-grow:#4f7f57; --w-ink:#f0ebe2; }

/* ---- languages: garden tags, each named in its own language ---- */
.site-langs-wrap{ max-width:none; padding-inline:0; background:color-mix(in srgb,var(--bg-2) 70%,transparent); border-bottom:1px dashed var(--line); }
.site-langs{ max-width:1180px; margin-inline:auto; padding:.65rem clamp(1.4rem,5vw,3.6rem); gap:.5rem .55rem; justify-content:flex-start; flex-wrap:wrap; }
.site-langs .sl-flag{ width:auto; height:2.2rem; display:inline-flex; align-items:center; gap:.5rem; padding:0 .8rem 0 1.5rem; position:relative; opacity:1;
  border-radius:4px 10px 10px 4px; background:var(--surface); border:1px solid var(--line); color:var(--text-soft); font-size:.84rem; font-weight:600; white-space:nowrap;
  text-decoration:none; box-shadow:0 2px 0 color-mix(in srgb,var(--text) 8%,transparent); transition:transform .2s, border-color .2s, color .2s; }
.site-langs .sl-flag::before{ content:""; position:absolute; left:.5rem; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem; border-radius:50%; background:var(--bg);
  box-shadow:inset 0 1px 1px color-mix(in srgb,var(--text) 30%,transparent); }
.site-langs .sl-flag::after{ content:attr(aria-label); position:static; width:auto; height:auto; background:none; }
.site-langs .sl-flag svg{ width:20px; height:13.5px; border-radius:2px; box-shadow:0 0 0 1px #0002; flex:none; order:-1; }
.site-langs a.sl-flag:hover{ transform:translateY(-2px) rotate(-1deg); color:var(--text); border-color:var(--accent-text); }
.site-langs .sl-cur{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.site-langs .sl-cur::before{ background:color-mix(in srgb,var(--accent) 60%,#000); }
.app-langs{ margin-top:1.6rem; }
.app-langs-lead{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--accent-text); font-weight:400; }
.may-hero .app-langs-flags{ gap:.4rem; }
.may-hero .app-langs .lang-flag{ width:auto; height:auto; overflow:visible; box-shadow:none; display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .65rem .28rem .5rem;
  border-radius:4px 9px 9px 4px; background:var(--surface); border:1px solid var(--line); font-size:.78rem; font-weight:600; color:var(--text-soft); }
.may-hero .app-langs .lang-flag::after{ content:attr(aria-label); }
.may-hero .app-langs .lang-flag svg{ width:18px; height:12px; border-radius:2px; }
@media (max-width:860px){
  .site-langs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .site-langs::-webkit-scrollbar{ display:none; }
}

/* ---- the hero ---- */
.may-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.may-hero::after{ content:""; position:absolute; right:-2rem; top:-1rem; width:22rem; height:22rem; pointer-events:none; opacity:.9; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M290 10C220 60 150 70 90 130 60 160 40 200 20 290' fill='none' stroke='%237a5a3c' stroke-opacity='.45' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23f6d3d8' stroke='%23d98b98' stroke-width='1.2'%3E%3Cg transform='translate(226 46)'%3E%3Ccircle cx='0' cy='-11' r='8'/%3E%3Ccircle cx='10' cy='-3' r='8'/%3E%3Ccircle cx='6' cy='9' r='8'/%3E%3Ccircle cx='-6' cy='9' r='8'/%3E%3Ccircle cx='-10' cy='-3' r='8'/%3E%3C/g%3E%3Cg transform='translate(150 92)'%3E%3Ccircle cx='0' cy='-11' r='8'/%3E%3Ccircle cx='10' cy='-3' r='8'/%3E%3Ccircle cx='6' cy='9' r='8'/%3E%3Ccircle cx='-6' cy='9' r='8'/%3E%3Ccircle cx='-10' cy='-3' r='8'/%3E%3C/g%3E%3Cg transform='translate(96 150)'%3E%3Ccircle cx='0' cy='-11' r='8'/%3E%3Ccircle cx='10' cy='-3' r='8'/%3E%3Ccircle cx='6' cy='9' r='8'/%3E%3Ccircle cx='-6' cy='9' r='8'/%3E%3Ccircle cx='-10' cy='-3' r='8'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23a32638'%3E%3Ccircle cx='60' cy='210' r='7'/%3E%3Ccircle cx='47' cy='232' r='6'/%3E%3Ccircle cx='34' cy='256' r='7'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; }
.may-hero > div{ z-index:1; }
.may-hero h1{ font-size:clamp(2.7rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.02em; font-weight:500; }
.may-lore{ font-size:1.35rem; }
.may-reading{ gap:.6rem; border:0; grid-template-columns:repeat(3,minmax(0,1fr)); margin-block:1.4rem 1.6rem; }
.may-reading > div, .may-reading > div + div{ padding:.8rem .9rem; border:1.5px dashed color-mix(in srgb,var(--text) 26%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface) 75%,transparent); }
.may-reading-value{ font-size:1.5rem; }
.mw-figure{ position:relative; width:100%; max-width:38rem; aspect-ratio:1; justify-self:center; }
.mw-wheel{ position:absolute; inset:0; }
.mw-wheel svg{ width:100%; height:100%; overflow:visible; }
.w-frost{ fill:var(--w-frost); } .w-risk{ fill:var(--w-risk); } .w-mild{ fill:var(--w-mild); } .w-grow{ fill:var(--w-grow); }
.w-tick{ stroke:var(--bg); stroke-width:2.5; }
.w-month{ font:italic 400 15px var(--serif); fill:var(--text-soft); }
.w-pin{ stroke-width:2; stroke:var(--accent-text); } .w-pin.p-warm{ stroke:#3d7a4c; }
.w-dot{ fill:var(--accent-text); } .w-dot.p-warm{ fill:#3d7a4c; }
.w-date{ font:700 15px var(--sans); fill:var(--text); }
.w-now{ stroke:var(--w-ink); stroke-width:3; stroke-linecap:round; } .w-now-dot{ fill:var(--w-ink); stroke:var(--bg); stroke-width:3; }
.w-hub{ fill:color-mix(in srgb,var(--surface) 55%,transparent); stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 6; }
.mw-phone{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; filter:drop-shadow(0 30px 34px rgba(60,30,20,.32)); }
.mw-phone .device.dv-iphone{ --dv-scale:.42; --rot:-2deg; }
@media (prefers-reduced-motion:no-preference){
  .w-frost, .w-risk, .w-mild, .w-grow{ animation:mw-in 1s cubic-bezier(.2,.8,.2,1) both; transform-origin:center; }
  .w-risk{ animation-delay:.15s; } .w-mild{ animation-delay:.25s; } .w-grow{ animation-delay:.35s; }
  .w-today{ transform-origin:center; animation:mw-turn 2.2s .3s cubic-bezier(.3,.8,.2,1) both; }
  @keyframes mw-in{ from{ opacity:0; transform:scale(.9) rotate(-8deg); } to{ opacity:1; transform:none; } }
  @keyframes mw-turn{ from{ transform:rotate(-200deg); opacity:0; } to{ transform:none; opacity:1; } }
}

/* ---- four facts: seed packets ---- */
.may-facts{ gap:clamp(.9rem,2vw,1.4rem); border:0; padding-block:clamp(1.4rem,3vw,2.4rem); }
.may-fact{ position:relative; padding:1.7rem 1.1rem 1.1rem; border-radius:6px 6px 14px 14px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 12px 24px -18px rgba(60,30,20,.45); transition:transform .3s cubic-bezier(.2,.9,.3,1); }
.may-fact:hover{ transform:translateY(-5px) rotate(-.8deg); }
.may-fact::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:.9rem; border-radius:6px 6px 0 0;
  background:linear-gradient(135deg,var(--sp,#a32638) 25%,transparent 25%) -.45rem 0/.9rem .9rem, linear-gradient(225deg,var(--sp,#a32638) 25%,transparent 25%) -.45rem 0/.9rem .9rem, var(--sp,#a32638); }
.may-fact:nth-child(1){ --sp:#a32638; } .may-fact:nth-child(2){ --sp:#4f8a5b; } .may-fact:nth-child(3){ --sp:#d29a3a; } .may-fact:nth-child(4){ --sp:#4b7aa6; }
.may-fact b{ display:block; font-family:var(--serif); font-size:1.2rem; font-weight:600; line-height:1.2; margin-bottom:.3rem; }

/* ---- features and price: the phone on paper ---- */
.may-feature-figure{ position:relative; }
.may-feature-figure::before{ content:""; position:absolute; inset:8% 10%; border-radius:44% 56% 52% 48% / 50% 44% 56% 50%; background:color-mix(in srgb,var(--accent) 9%,transparent); z-index:0; }
.may-feature-figure .device{ position:relative; z-index:1; }
.may-price-card{ border-radius:8px 8px 22px 22px; padding-top:clamp(2.6rem,5vw,3.2rem); overflow:visible; }
.may-price-card::after{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:1.1rem; border-radius:8px 8px 0 0;
  background:linear-gradient(135deg,var(--accent) 25%,transparent 25%) -.55rem 0/1.1rem 1.1rem, linear-gradient(225deg,var(--accent) 25%,transparent 25%) -.55rem 0/1.1rem 1.1rem, var(--accent); }
.may-price{ font-size:clamp(3.4rem,7vw,5rem); letter-spacing:-.03em; }

@media (max-width:860px){
  .may-hero{ grid-template-columns:minmax(0,1fr); }
  .may-hero::after{ width:14rem; height:14rem; right:-3rem; top:-2rem; opacity:.6; }
  .mw-figure{ max-width:30rem; }
  .may-reading{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px){
  .mw-phone .device.dv-iphone{ --dv-scale:.38; }
  .w-month{ font-size:17px; } .w-date{ font-size:17px; }
}
.may-page-wrap{ overflow-x:clip; }
.may-hero .app-langs-flags{ display:none; }
.mw-figure{ max-width:34rem; align-self:start; margin-top:1.5rem; }


/* ============================================================================
   Round 3 (owner feedback 2026-09-29: "in veel gevallen dezelfde soort site"). Maythorn's four
   feature bands stop being alternating text/phone rows: they become ONE HORIZONTAL YEAR, four
   season cards on a snap strip (spring: which station, summer: sow now, autumn: the journal,
   winter: your own record) with a month tab row built in the page language. The DOM and the
   text-unit order are untouched (the strip is the existing [data-standard="features"] wrapper).
   Languages are seed packets: every language a packet with a zig-zag top, all visible, wrapping.
   ============================================================================ */
main [data-standard="features"]{ position:relative; margin-inline:calc(50% - 50vw); padding:clamp(1.2rem,3vw,2rem) max(1.4rem,calc(50vw - 590px)) clamp(2rem,4vw,3rem);
  display:flex; gap:clamp(1rem,2vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(1.4rem,calc(50vw - 590px));
  overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg-2) 55%,transparent) 20%,color-mix(in srgb,var(--bg-2) 55%,transparent) 80%,transparent); }
main [data-standard="features"] > .may-feature{ flex:0 0 min(88vw,62rem); scroll-snap-align:start; position:relative; overflow:hidden; isolation:isolate;
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent); border-radius:32px; padding:clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) 0;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1rem,3vw,2.2rem); align-items:stretch; border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  background:color-mix(in srgb,var(--sea,var(--w-grow)) 22%,var(--surface)); }
main [data-standard="features"] > #station{ --sea:var(--w-grow); }
main [data-standard="features"] > #sow{ --sea:var(--w-mild); }
main [data-standard="features"] > #journal{ --sea:#d98a4a; }
main [data-standard="features"] > #record{ --sea:var(--w-frost); }
main [data-standard="features"] > .may-feature > .may-feature-figure{ order:2; align-self:end; margin-bottom:-6rem; }
main [data-standard="features"] > .may-feature > div:not(.may-feature-figure){ padding-bottom:clamp(1.4rem,3vw,2.4rem); align-self:center; }
main [data-standard="features"] .may-feature-figure::before{ background:color-mix(in srgb,var(--sea) 35%,transparent); inset:2% 4% 12%; }
main [data-standard="features"] .may-feature-figure .device.dv-iphone{ --dv-scale:.56; }
main [data-standard="features"] .may-feature h2{ font-size:clamp(1.6rem,2.7vw,2.15rem); }
main [data-standard="features"] > .may-feature::after{ content:""; position:absolute; z-index:-1; right:-4rem; top:-4rem; width:16rem; height:16rem; border-radius:50%;
  background:color-mix(in srgb,var(--sea) 40%,transparent); filter:blur(2px); }
.mw-months{ display:flex; gap:.5rem; flex-wrap:wrap; margin:clamp(1.4rem,3vw,2.2rem) 0 .2rem; align-items:center; }
.mw-months-lead{ font:italic 400 1.05rem var(--serif); color:var(--text-soft); margin-right:.4rem; }
.mw-months button{ font:650 .88rem var(--sans); border:1.5px solid var(--line); background:var(--surface); color:var(--text-soft); padding:.5rem 1rem .5rem .8rem; border-radius:999px;
  cursor:pointer; display:inline-flex; gap:.5rem; align-items:center; transition:all .2s; }
.mw-months button i{ width:.7rem; height:.7rem; border-radius:50%; background:var(--sea); }
.mw-months button:hover{ border-color:var(--accent-text); color:var(--text); }
.mw-months button[aria-current="true"]{ background:var(--text); color:var(--bg); border-color:var(--text); }
.mw-months button:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; }
@media (max-width:860px){
  main [data-standard="features"] > .may-feature{ flex-basis:86vw; grid-template-columns:minmax(0,1fr); }
  main [data-standard="features"] > .may-feature > .may-feature-figure{ margin-bottom:-8rem; }
  main [data-standard="features"] .may-feature-figure .device.dv-iphone{ --dv-scale:.5; }
}

/* ---- languages: seed packets ---- */
.site-langs-wrap{ background:transparent; border-bottom:0; }
body .site-langs{ max-width:1180px; gap:.55rem; padding:.9rem clamp(1.4rem,5vw,3.6rem) .3rem; justify-content:flex-start; flex-wrap:wrap; overflow:visible; }
.site-langs .sl-flag{ flex-direction:column; justify-content:flex-end; gap:.22rem; width:5.9rem; height:3.7rem; padding:.7rem .3rem .45rem; border-radius:3px 3px 10px 10px;
  border:1px solid var(--line); box-shadow:0 8px 14px -10px rgba(60,30,20,.5); font-size:.74rem; line-height:1.1; white-space:normal; text-align:center; position:relative; }
.site-langs .sl-flag::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; width:auto; height:.55rem; margin:0; border-radius:3px 3px 0 0; box-shadow:none;
  background:var(--sp,#4f8a5b); }
.site-langs .sl-flag:nth-child(4n+1){ --sp:#a32638; } .site-langs .sl-flag:nth-child(4n+2){ --sp:#4f8a5b; }
.site-langs .sl-flag:nth-child(4n+3){ --sp:#d29a3a; } .site-langs .sl-flag:nth-child(4n){ --sp:#4b7aa6; }
.site-langs .sl-flag svg{ order:0; width:22px; height:14.5px; }
.site-langs .sl-flag::after{ order:1; overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap; }
.site-langs .sl-cur{ background:var(--surface); color:var(--text); border-color:var(--text); transform:translateY(-3px); box-shadow:0 12px 16px -10px rgba(60,30,20,.55); }
.site-langs .sl-cur::before{ background:var(--sp,#4f8a5b); }
@media (max-width:860px){
  body .site-langs{ gap:.4rem; padding-inline:1rem; }
  .site-langs .sl-flag{ width:calc((100% - 1.6rem) / 5); min-width:3.5rem; height:3.4rem; font-size:.66rem; padding-inline:.15rem; }
  .site-langs .sl-flag svg{ width:20px; height:13.3px; }
}
.may-page-wrap{ overflow-x:visible; }
html, body{ overflow-x:clip; }
@media (max-width:860px){ .may-hero{ overflow-x:clip; } }