/* Zenelia website: one shared stylesheet. Design system from the app (3.0.0): Playfair Display for titles and big
   numbers, Jost for everything else; forest, parchment, warm white, seafoam, gold; the four skill colours. */

/* Fallback faces sized like the web fonts (measured in Edge: Jost 400 is 95.9% as wide as Arial, Jost 500 99.7%,
   Playfair Display 100.7% of Georgia, its italic 95.7% of Georgia Italic), so text keeps its lines when the web fonts arrive. */
@font-face{font-family:"Jost fallback";font-weight:400;src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:95.9%;ascent-override:111.6%;descent-override:39.6%;line-gap-override:0%}
@font-face{font-family:"Jost fallback";font-weight:500;src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:99.7%;ascent-override:107.3%;descent-override:38.1%;line-gap-override:0%}
@font-face{font-family:"Playfair fallback";font-style:normal;src:local("Georgia"),local("Times New Roman");size-adjust:100.7%;ascent-override:107.2%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:"Playfair fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic"),local("Georgia");size-adjust:95.7%;ascent-override:112.8%;descent-override:26.1%;line-gap-override:0%}

:root{
  --pine:#12261E; --forest:#1C3A2E; --forest-2:#244638; --parchment:#F7F3EE; --paper:#FDFBF8; --white:#FFFFFF;
  --seafoam:#5BA890; --seafoam-deep:#2D7563; --seafoam-ink:#245F50; --mint:#EBF4F1; --pale:#C8DED8;
  --gold:#B8966E; --gold-light:#D4B48A; --gold-ink:#765933;
  --ink:#1D2621; --ink-soft:#4A5A52; --line:rgba(28,58,46,.14); --line-strong:rgba(28,58,46,.3);
  --on-dark:#FDFBF8; --on-dark-soft:rgba(253,251,248,.8); --on-dark-faint:rgba(253,251,248,.64); --line-dark:rgba(253,251,248,.16);
  --memory:#2D7563; --memory-tint:#E4F0EB; --speed:#8A6A3F; --speed-ink:#7C5D33; --speed-tint:#F4EBDD;
  --attention:#2A5442; --attention-tint:#E4EDE8; --language:#5E50A3; --language-tint:#ECE9F6;
  --rose:#A94848; --rose-tint:#FBEAE8; --field:#7A8A82;
  --accent:var(--seafoam-deep); --accent-hover:var(--seafoam-ink);
  --display:"Playfair Display","Playfair fallback",Georgia,"Times New Roman",serif;
  --body:"Jost","Jost fallback","Helvetica Neue",Arial,sans-serif;
  --r-s:12px; --r-m:20px; --r-l:28px;
  --shadow:0 1px 2px rgba(18,38,30,.05),0 14px 36px rgba(18,38,30,.09);
  --shadow-deep:0 30px 70px rgba(0,0,0,.34);
  --wrap:1120px; --gut:clamp(20px,5vw,40px); --band:clamp(72px,9.5vw,128px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
/* Below a short page (a message page in a tall window) and when a phone pulls past the ends, the colour of the
   header and the footer, not a strip of parchment under the footer */
html{background:var(--pine)}
html:has(body.theme-rose){background:#33222A}
body{margin:0;font-family:var(--body);font-weight:400;font-size:18px;line-height:1.6;color:var(--ink);background:var(--parchment);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
img,svg{display:block;max-width:100%;height:auto}
/* a <picture> only chooses the file (a still one for reduced motion); the <img> inside it is laid out as before */
picture{display:contents}
picture source{display:none}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
button,input,textarea{font:inherit;color:inherit}
strong{font-weight:500;color:inherit}
[hidden]{display:none!important}
/* Focus ring: at least 3:1 against what is behind it (WCAG 1.4.11): seafoam-deep on light grounds, gold-light on dark ones */
:focus-visible{outline:3px solid var(--seafoam-deep);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.live-hero :focus-visible,.plan.featured :focus-visible{outline-color:var(--gold-light)}
.hero .screen :focus-visible{outline-color:var(--seafoam-deep)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:20;background:var(--paper);color:var(--pine);padding:12px 18px;border-radius:999px;font-weight:500;text-decoration:none}
.skip:focus{top:12px}
/* the skip link shows over the dark header, so its ring is the light one (seafoam-deep there is 2.9:1) */
.skip:focus-visible{outline-color:var(--gold-light)}

.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:calc(680px + 2*var(--gut))}

h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.012em;color:inherit;text-wrap:balance}
h1{font-size:clamp(38px,5.6vw,68px);line-height:1.06}
h2{font-size:clamp(30px,4vw,48px);line-height:1.1}
h3{font-size:clamp(22px,2.2vw,26px);line-height:1.2}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-soft);max-width:36em;margin-top:18px;text-wrap:pretty}
p,li,summary,figcaption{text-wrap:pretty}
.fine{font-size:15px;line-height:1.55;color:var(--ink-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;font-family:var(--body);font-weight:500;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-store{background:var(--paper);color:var(--pine);border-color:var(--paper)}
.btn-store:hover{background:#EAE5DC;border-color:#EAE5DC;color:var(--pine)}
.btn-gift{border-color:var(--gold);color:var(--gold-light);background:transparent}
.btn-gift:hover{background:var(--gold);color:var(--pine)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--pine)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--pine)}
.btn-ghost{border-color:var(--line-strong);color:var(--forest);background:transparent}
.btn-ghost:hover{border-color:var(--forest);color:var(--forest)}
.btn-sm{min-height:44px;padding:10px 20px;font-size:16px}
.btn-block{display:flex;width:100%}
.btn:disabled{background:#C9CEC9;border-color:#C9CEC9;color:#4A5A52;cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500}

/* Header */
.site-header{background:var(--pine);color:var(--on-dark);position:relative;z-index:10}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.logo{font-family:var(--display);font-size:25px;font-weight:500;letter-spacing:.005em;color:var(--on-dark);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.logo:hover{color:var(--on-dark)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;color:var(--on-dark-soft);text-decoration:none;font-size:16px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-dark)}
.nav a[aria-current="page"]{box-shadow:inset 0 -1.5px 0 var(--seafoam);border-radius:0}
.menu{display:none;position:static}
.menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-dark);cursor:pointer;color:var(--on-dark)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px}
.menu[open] summary{background:rgba(253,251,248,.1)}
/* the button shows three bars while the menu is closed and a close mark while it is open */
.menu .i-close{display:none}
.menu[open] .i-menu{display:none}
.menu[open] .i-close{display:inline}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--pine);border-top:1px solid var(--line-dark);padding:10px var(--gut) 22px;box-shadow:0 24px 40px rgba(0,0,0,.28)}
.menu-panel a{display:flex;align-items:center;min-height:52px;color:var(--on-dark);text-decoration:none;font-size:19px;border-bottom:1px solid var(--line-dark)}
.menu-panel a:last-child{border-bottom:0}

/* Bands */
.band{padding:var(--band) 0}
.band-paper{background:var(--paper)}
.band-mint{background:var(--mint)}
.band-forest{background:var(--forest);color:var(--on-dark)}
.band-pine{background:var(--pine);color:var(--on-dark)}
.on-dark .lede,.on-dark p{color:var(--on-dark-soft)}
.on-dark .fine{color:var(--on-dark-faint)}
.on-dark a:not(.btn){color:var(--on-dark)}
.band-head{max-width:40em}
.center{text-align:center}
.center .lede,.center .band-head{margin-left:auto;margin-right:auto}

/* Hero (home) */
.hero{background:var(--pine);color:var(--on-dark);padding:clamp(40px,6vw,84px) 0 clamp(72px,9vw,120px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(91,168,144,.2),rgba(91,168,144,0));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(40px,6vw,88px);align-items:center;position:relative}
.hero h1{font-size:clamp(40px,5.4vw,68px);line-height:1.05}
.hero h1 span{display:block}
.hero h1 span+span{color:var(--gold-light);font-style:italic}
.hero-sub{font-size:clamp(18px,1.55vw,20px);line-height:1.6;color:var(--on-dark-soft);max-width:31em;margin-top:26px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}
.hero .fine{margin-top:20px}
.live-pill{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 20px 6px 8px;margin-bottom:30px;border-radius:999px;border:1px solid var(--line-dark);background:rgba(253,251,248,.06);color:var(--on-dark);text-decoration:none;font-size:16px;line-height:1.3}
.live-pill:hover{background:rgba(253,251,248,.11);color:var(--on-dark)}
.live-pill img{width:36px;height:36px;border-radius:50%;background:var(--mint)}
.live-pill b{font-weight:500}
.live-pill span{color:var(--on-dark-soft)}

/* Phone with the playable game */
.device-col{display:flex;flex-direction:column;align-items:center;gap:16px}
.device{width:304px;max-width:100%;background:#0A1611;border-radius:48px;padding:12px;box-shadow:var(--shadow-deep),inset 0 0 0 1px rgba(255,255,255,.07)}
.screen{background:var(--parchment);border-radius:37px;height:548px;padding:34px 22px 20px;display:flex;flex-direction:column;color:var(--forest)}
.screen-title{font-family:var(--display);font-size:25px;font-weight:500;line-height:1.2}
.screen-how{font-size:16px;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.trail{position:relative;flex:1;margin:14px 0 6px}
.dot{position:absolute;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:2px solid var(--forest);background:var(--paper);color:var(--forest);font-family:var(--body);font-size:21px;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.dot:hover{border-color:var(--seafoam-deep)}
.dot.hit{background:#2F7D4E;border-color:#2F7D4E;color:#fff;cursor:default}
.dot.miss{animation:miss .35s;background:var(--rose-tint);border-color:var(--rose)}
@keyframes miss{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-58%,-50%)}75%{transform:translate(-42%,-50%)}}
.status{font-size:16px;color:var(--ink-soft);text-align:center;min-height:26px}
.done{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.done-time{font-family:var(--display);font-size:48px;line-height:1}
.done p{font-size:16px;color:var(--ink-soft);max-width:15em;line-height:1.45}
.device-caption{font-size:15px;color:var(--on-dark-faint);text-align:center}

/* Zenelia Live band */
.live-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,80px);align-items:center}
.ticks{list-style:none;margin-top:28px;display:grid;gap:14px;max-width:30em}
.ticks li{position:relative;padding-left:34px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.36em;width:20px;height:20px;border-radius:60% 0 60% 0;background:var(--seafoam);transform:rotate(8deg)}
.on-dark .ticks li{color:var(--on-dark-soft)}
/* the "How it works" button of the home page's Live band (the Live page's hero has its buttons in .ctas) */
#live .live-grid .btn{margin-top:34px}
.art-frame{border-radius:var(--r-l);overflow:hidden;background:var(--mint);box-shadow:var(--shadow)}
.art-frame img{width:100%}
.live-art{position:relative;padding-bottom:clamp(90px,11vw,140px)}
.live-art .art-frame.main{box-shadow:0 2px 4px rgba(18,38,30,.05),0 30px 60px rgba(18,38,30,.16)}
.world-card{position:absolute;right:clamp(-8px,-1vw,-20px);bottom:0;width:min(46%,270px);background:var(--paper);border-radius:var(--r-m);padding:10px 10px 12px;box-shadow:0 2px 4px rgba(18,38,30,.06),0 22px 48px rgba(18,38,30,.2)}
.world-card img{border-radius:14px;width:100%}
.world-card figcaption,.cap{font-size:15px;line-height:1.4;color:var(--ink-soft);text-align:center;margin-top:10px}
.art-note{font-size:15px;line-height:1.5;color:var(--ink-soft);margin-top:18px;max-width:30em}
.live-art .art-note{position:absolute;left:0;bottom:0;width:44%;margin:0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,64px);list-style:none;counter-reset:step}
.steps li{border-top:1px solid var(--line-strong);padding-top:24px;counter-increment:step}
.steps li::before{content:counter(step);font-family:var(--display);font-variant-numeric:lining-nums;font-size:22px;color:var(--seafoam-deep);display:block;margin-bottom:8px}
.steps h3{margin-bottom:10px}
.steps p{color:var(--ink-soft)}
.on-dark .steps li{border-color:var(--line-dark)}
.on-dark .steps li::before{color:var(--gold-light)}

/* Skills */
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,60px);list-style:none}
.skill{border-radius:var(--r-m);padding:28px 24px 26px;background:var(--tint);display:flex;flex-direction:column;gap:10px}
.skill h3{color:var(--deep);font-size:28px}
.skill p{font-size:17px;line-height:1.5;color:var(--ink)}
.skill .games{margin-top:auto;padding-top:14px;font-size:15px;line-height:1.45;color:var(--deep);font-weight:500;border-top:1px solid color-mix(in srgb,var(--deep) 22%,transparent)}
.skill.memory{--deep:var(--memory);--tint:var(--memory-tint)}
.skill.speed{--deep:var(--speed-ink);--tint:var(--speed-tint)}
.skill.attention{--deep:var(--attention);--tint:var(--attention-tint)}
.skill.language{--deep:var(--language);--tint:var(--language-tint)}

/* Coach */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:center}
.bubble{background:var(--paper);color:var(--ink);border-radius:28px 28px 28px 8px;padding:30px 32px;max-width:480px;box-shadow:0 24px 50px rgba(0,0,0,.24);justify-self:end}
.bubble .who{font-size:15px;color:var(--seafoam-deep);font-weight:500}
.bubble .msg{font-family:var(--display);font-size:clamp(19px,1.9vw,22px);line-height:1.45;margin-top:10px;color:var(--ink)}
.bubble .ex{font-size:14px;color:var(--ink-soft);margin-top:14px}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 11px;border-radius:999px;font-family:var(--body);letter-spacing:0;font-size:14px;font-weight:500;line-height:1.2;background:var(--mint);color:var(--seafoam-ink);white-space:nowrap}
.on-dark .tag{background:rgba(253,251,248,.12);color:var(--on-dark)}
.tag-gold{background:#F4EBDD;color:var(--gold-ink)}
/* next-update: start. The label "Coming in the next update" (Nav, 16 Oct 2026) on the parts of the site that present
   Zenelia Live, and on the lines that are true only from 3.1.0 (saving a session finished without a connection, and
   Export My Data with Zenelia Live), until 3.1.0 is on the App Store. One class. It sits inside the heading, name,
   question or answer it belongs to (Export My Data: at the end of the answer, since 3.0.1 already exports; the support
   page's two Zenelia Live lines of its privacy answers: at the end of their sentence, since the rest of those answers is
   true today), on a line of its own under the words, so a screen reader reads the two together. Gold ink on
   the gold tint 5.5:1; gold-light on the dark grounds about 6:1. Each use in the pages is marked with the comment
   "next-update"; to take them all off, delete each marked label from the pages and this block (release-3.1.0/website-copy.md
   in the app says how). */
.next-update{display:flex;align-items:center;width:fit-content;max-width:100%;min-height:26px;margin-top:10px;padding:2px 11px;border-radius:999px;font-family:var(--body);font-style:normal;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.2;text-transform:none;white-space:nowrap;background:#F4EBDD;color:var(--gold-ink)}
.hero .next-update,.live-hero .next-update,.on-dark .next-update{background:rgba(212,180,138,.16);color:var(--gold-light)}
.live-pill .next-update{margin:5px 0 3px}
.live-pill:hover .next-update{background:rgba(212,180,138,.08)}
.compare .next-update{white-space:normal}
.closing .next-update{margin-left:auto;margin-right:auto}
.features h3:has(> .next-update){display:block}
.faq summary:has(> .next-update){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 18px}
.faq summary:has(> .next-update)::after{grid-column:2;grid-row:1}
.faq summary .next-update{grid-column:1;grid-row:2}
.faq .answer .next-update:not(:last-child){margin-bottom:10px}
/* next-update: end */

/* Feature grid */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line);list-style:none}
.features li{padding:30px 0;border-bottom:1px solid var(--line)}
.features li:nth-child(odd){padding-right:clamp(20px,4vw,48px);border-right:1px solid var(--line)}
.features li:nth-child(even){padding-left:clamp(20px,4vw,48px)}
.features h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.features p{color:var(--ink-soft);margin-top:8px;max-width:30em}
.features .tag{margin-top:10px}

/* Pricing */
.compare{width:100%;border-collapse:collapse;margin-top:clamp(36px,5vw,56px);font-size:17px;line-height:1.4}
.compare caption{text-align:left;font-size:15px;color:var(--ink-soft);padding-bottom:12px;caption-side:bottom;padding-top:14px}
.compare th,.compare td{text-align:left;padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-family:var(--display);font-weight:500;font-size:24px;border-bottom:1.5px solid var(--line-strong);padding-top:16px}
.compare thead td{border-bottom:1.5px solid var(--line-strong)}
.compare tbody th{font-weight:400;color:var(--ink-soft);width:34%;padding-left:0}
.compare td{width:33%}
.compare .prem{background:var(--mint)}
.compare thead .prem{border-radius:16px 16px 0 0}
.compare tbody tr:last-child .prem{border-radius:0 0 16px 16px}
.compare .no{color:var(--ink-soft)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vw,56px);list-style:none}
.plan{border:1px solid var(--line);border-radius:var(--r-l);padding:32px 28px 28px;display:flex;flex-direction:column;background:var(--paper)}
.plan.featured{background:var(--forest);border-color:var(--forest);color:var(--on-dark)}
.plan-name{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px;font-size:17px;font-weight:500}
.plan .save{font-size:14px;font-weight:500;background:var(--paper);color:var(--forest);border-radius:999px;padding:3px 11px}
.plan .amt{font-family:var(--display);font-size:clamp(42px,4.4vw,52px);line-height:1;margin-top:20px}
.plan .per{font-size:16px;color:var(--ink-soft);margin-top:8px}
.plan.featured .per{color:var(--on-dark-soft)}
.plan ul{list-style:none;margin:24px 0 28px;flex:1}
.plan li{padding:10px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.4}
.plan.featured li{border-color:var(--line-dark)}
.plan.featured .btn-primary{background:var(--paper);color:var(--pine)}
.plan.featured .btn-primary:hover{background:#EAE5DC}
.plan-foot{display:flex;flex-direction:column;align-items:center}
.plan .opens{font-size:14px;line-height:1.5;color:var(--ink-soft);text-align:center;margin-top:10px}
.plan.featured .opens{color:var(--on-dark-faint)}
.plan .alt{font-size:16px;text-align:center;margin-top:6px}
.plan .alt a{color:var(--gold-ink);font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.price-note{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:26px;max-width:38em}

/* Gift band */
.gift-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(36px,6vw,72px);align-items:center}
.gift-card{border:1px solid rgba(184,150,110,.6);border-radius:var(--r-l);padding:34px 30px 26px}
.gift-card .price{font-family:var(--display);font-size:54px;line-height:1;color:var(--gold-light)}
.gift-card .per{font-size:16px;color:var(--on-dark-soft);margin:10px 0 26px}
.gift-card .redeem{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;font-size:16px;color:var(--on-dark-soft);text-align:center}

/* Notes (privacy, research) */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,88px)}
.notes > div{max-width:36em}
.notes h2{font-size:clamp(26px,3vw,34px)}
.notes p{margin-top:16px;color:var(--ink-soft)}
.notes .small{font-size:15px;line-height:1.6;border-top:1px solid var(--line);padding-top:16px;margin-top:22px}

/* Closing */
.closing{text-align:center}
.closing p{margin-top:16px;font-size:19px}
.closing .ctas{justify-content:center}

/* Footer */
.site-footer{background:var(--pine);color:var(--on-dark-faint);border-top:1px solid var(--line-dark);padding:44px 0 52px;font-size:16px}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:start}
.site-footer .logo{font-size:23px;margin:0}
.site-footer .copyright{margin-top:6px;font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 28px;list-style:none;max-width:560px;justify-content:flex-end}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft);text-decoration:none}
.foot-links a:hover{color:var(--on-dark);text-decoration:underline}

/* Inner pages */
.page-hero{background:var(--pine);color:var(--on-dark);padding:clamp(36px,5vw,64px) 0 clamp(52px,7vw,88px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-10%;top:-60%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(91,168,144,.16),rgba(91,168,144,0));pointer-events:none}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(36px,5vw,60px)}
.page-hero h1 em{font-style:italic;color:var(--gold-light)}
.page-hero .lede{color:var(--on-dark-soft)}
.page-hero .meta{font-size:15px;color:var(--on-dark-faint);margin-top:14px}
.page-hero.with-card{padding-bottom:clamp(110px,12vw,150px)}

/* Form cards (gift, redeem) */
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(32px,6vw,80px);align-items:start}
.card{background:var(--white);border-radius:var(--r-l);padding:clamp(26px,3.6vw,38px);box-shadow:var(--shadow);color:var(--ink)}
.card.lift{margin-top:calc(-1 * clamp(70px,8vw,100px));position:relative;z-index:2}
.card h2{font-size:26px;text-align:left;margin-bottom:22px}
.card .sub{font-size:16px;color:var(--ink-soft);margin:-12px 0 22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:16px;font-weight:500;color:var(--ink);margin-bottom:6px}
.field input,.field textarea{width:100%;min-height:52px;padding:13px 16px;border:1.5px solid var(--field);border-radius:var(--r-s);font-family:var(--body);font-size:17px;line-height:1.4;color:var(--ink);background:var(--paper);transition:border-color .18s}
.field input::placeholder,.field textarea::placeholder{color:#66756D;opacity:1}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.field textarea{resize:none;height:96px}
.field .hint{font-size:14px;line-height:1.45;color:var(--ink-soft);margin-top:6px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card .btn{margin-top:8px}
.form-error{color:var(--rose);font-size:16px;text-align:center;margin-top:14px;display:none}
.form-loading{text-align:center;color:var(--ink-soft);font-size:16px;margin-top:14px;display:none}
.card .terms{font-size:14px;line-height:1.6;color:var(--ink-soft);text-align:center;margin-top:18px}
.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-size:20px!important;letter-spacing:3px;text-align:center;text-transform:uppercase}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:30px;font-family:var(--display);font-size:clamp(40px,4.6vw,54px);line-height:1;color:var(--gold-light)}
.price-line small{font-family:var(--body);font-size:17px;color:var(--on-dark-soft)}
.price-sub{font-size:15px;color:var(--on-dark-faint);margin-top:10px}
.success{display:none;text-align:center;padding:8px 0}
.success h3{margin:18px 0 12px;font-size:26px}
.success p{color:var(--ink-soft);margin-bottom:22px}
.mark{width:68px;height:68px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto}
.mark svg{width:30px;height:30px}
.mark.soft{background:var(--mint);color:var(--seafoam-deep)}
.included{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px);margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.included li{padding:24px 0;border-bottom:1px solid var(--line)}
.included h3{font-size:22px}
.included p{font-size:17px;color:var(--ink-soft);margin-top:6px}
.numbered{list-style:none;counter-reset:n;display:grid;gap:4px;margin-top:22px}
.numbered li{counter-increment:n;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.numbered li::before{content:counter(n);font-family:var(--display);font-variant-numeric:lining-nums;font-size:26px;line-height:1;color:var(--seafoam-deep)}

/* Message pages (gift bought, email confirmed, reset, 404) */
.message{min-height:62vh;display:flex;align-items:center;justify-content:center;padding:clamp(48px,8vw,96px) var(--gut)}
.message-card{text-align:center;max-width:520px;width:100%}
.message-card h1{font-size:clamp(32px,4.4vw,44px);margin:26px 0 14px;color:var(--forest)}
.message-card p{color:var(--ink-soft);margin-bottom:14px}
.message-card .note{background:var(--white);border-radius:var(--r-m);padding:24px 26px;margin:26px 0;text-align:left;box-shadow:var(--shadow)}
.message-card .note p{font-size:16px;line-height:1.6;margin-bottom:12px}
.message-card .note p:last-child{margin-bottom:0}
.message-card .note strong{color:var(--ink)}
.message-card .subtle{font-size:16px}
.message-card img.character{margin:0 auto;width:132px;height:132px}
/* The two pages a sign-up or password email opens (auth-confirm, reset-password). Their scripts are the live site's,
   carried over byte for byte: they show one part of the page at a time by moving the class "active" between the
   .state blocks, and show or hide a button or the form's error line with style.display. The spinner stands still
   when the device asks for reduced motion (the rule near the end of this file stops every animation). */
.state{display:none}
.state.active{display:block}
.spinner{width:44px;height:44px;margin:0 auto;border-radius:50%;border:3px solid var(--pale);border-top-color:var(--seafoam-deep);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mark.alert{background:var(--rose-tint);color:var(--rose)}
.message-card .state > .btn{margin-top:22px}
.message-card .actions{display:grid;gap:12px;margin-top:22px}
/* reset-password on an iPhone: once its script shows "Open Zenelia" (it clears that button's display:none), that is
   the first choice and "Reset password here" becomes the outlined second one; on a computer it stays the only, filled
   button. Markup and script are website main's, unchanged: this reads the state the script sets. */
#open-app-btn:not([style*="none"]) + #reset-on-web-btn,#open-app-btn:not([style*="none"]) + #reset-on-web-btn:hover{background:transparent;border-color:var(--line-strong);color:var(--forest)}
#open-app-btn:not([style*="none"]) + #reset-on-web-btn:hover{border-color:var(--forest)}
.message-card .help{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.message-card .help strong{color:var(--ink)}
.message-card form{text-align:left;margin-top:22px}
.message-card .field .hint{margin:6px 0 0}
.message-card form .btn{margin-top:12px}
.alert-error{background:var(--rose-tint);color:var(--rose);border-radius:var(--r-s);padding:12px 16px;margin-top:20px;font-size:16px;line-height:1.5;text-align:left}
.message-card .back{margin:22px 0 0}

/* Support */
.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.contact h2{font-size:28px}
.contact p{color:var(--ink-soft);margin-top:8px}
.contact .mail{font-family:var(--display);font-size:clamp(22px,2.6vw,28px);color:var(--forest);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.faq-group{margin-top:clamp(44px,6vw,64px)}
.faq-group h2{font-size:clamp(26px,3vw,32px);padding-bottom:14px;border-bottom:1.5px solid var(--line-strong)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:60px;padding:14px 0;cursor:pointer;font-size:19px;font-weight:500;color:var(--forest)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--seafoam-deep);border-bottom:2px solid var(--seafoam-deep);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .answer{padding:0 0 22px;color:var(--ink-soft);max-width:44em}
.faq .answer p+p{margin-top:12px}
.faq .answer ol{margin:12px 0 0 22px}
.faq .answer li{margin-bottom:6px}
.quote{color:var(--ink);font-weight:500}

/* Legal pages: the text itself is carried over word for word */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(64px,8vw,104px)}
.legal .intro{font-size:clamp(18px,1.6vw,20px);line-height:1.65;color:var(--ink-soft)}
.legal .meta{font-size:15px;color:var(--ink-soft);margin:10px 0 18px}
.legal h1{color:var(--forest);font-size:clamp(36px,5vw,56px)}
.toc{background:var(--white);border-radius:var(--r-m);padding:26px 30px;margin:36px 0 12px;box-shadow:var(--shadow)}
.toc-title{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:8px}
.toc ol{margin:0 0 0 22px;columns:2;column-gap:40px}
.toc li{font-size:17px;line-height:1.4;color:var(--ink-soft);break-inside:avoid}
.toc li a{display:inline-flex;align-items:center;min-height:44px}
.legal h2{font-size:clamp(24px,2.6vw,30px);margin-top:56px;margin-bottom:14px;color:var(--forest);scroll-margin-top:24px}
.legal h3{font-family:var(--body);font-size:18px;font-weight:500;letter-spacing:0;margin-top:26px;margin-bottom:8px;color:var(--forest)}
.legal p{color:var(--ink-soft);margin-bottom:16px;line-height:1.7}
.legal ul{margin:0 0 16px 22px}
.legal li{color:var(--ink-soft);margin-bottom:6px;line-height:1.65}
.legal strong{color:var(--ink)}

/* Zenelia Live page */
.live-hero{background:var(--pine);color:var(--on-dark);padding:clamp(36px,5vw,64px) 0 0;overflow:hidden}
.live-hero .live-grid{align-items:end}
.live-hero .copy{padding-bottom:clamp(48px,7vw,96px)}
/* The drawing sits flat on the band edge. Its own ground has rounded bottom corners, so the frame behind them is
   the ground's colour (#A9D3C3, the drawing's front ground) and no pale notch shows on the edge. */
.live-hero .art-frame{position:relative;border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:0 -10px 60px rgba(0,0,0,.3);background:linear-gradient(var(--mint) 50%,#A9D3C3 50%)}
/* and the two corner squares (20 of the drawing's 360 by 200 units, plain ground there) are filled in the same colour,
   so the faint line the browser draws along the rounded edge does not show either */
.live-hero .art-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#A9D3C3,#A9D3C3) left bottom / 5.6% 10% no-repeat,linear-gradient(#A9D3C3,#A9D3C3) right bottom / 5.6% 10% no-repeat}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,56px);list-style:none}
.stages .art-frame{border-radius:16px;box-shadow:none;border:1px solid var(--line)}
.stages p{font-size:16px;font-weight:500;color:var(--forest);margin-top:10px;text-align:center}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:clamp(36px,5vw,56px);list-style:none}
.flow img{width:104px;height:104px}
.flow h3{margin-top:16px;font-size:22px}
.flow p{color:var(--ink-soft);margin-top:8px;font-size:17px}
.regions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,48px);list-style:none}
.region{background:var(--paper);border-radius:var(--r-m);padding:24px 22px;border:1px solid var(--line)}
.region h3{font-size:23px}
.region p{font-size:16px;color:var(--ink-soft);margin-top:8px}
.region .mine{font-size:16px;color:var(--forest);font-weight:500;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.region .mine .lt{font-weight:400;font-size:15px;color:var(--ink-soft)}
.notifs{display:grid;gap:12px;max-width:440px;justify-self:end;width:100%}
.notif{background:rgba(253,251,248,.96);color:var(--ink);border-radius:20px;padding:14px 18px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;box-shadow:0 18px 40px rgba(0,0,0,.26)}
.notif img{width:40px;height:40px;border-radius:10px}
.notif .t,.on-dark .notif .t{font-weight:500;font-size:16px;line-height:1.3;color:var(--ink)}
.notif .b,.on-dark .notif .b{font-size:16px;line-height:1.35;color:var(--ink)}
.world-wide{max-width:640px;margin:clamp(32px,4vw,48px) auto 0}
.helpers{display:flex;gap:14px;align-items:center;margin-top:22px}
.helpers img{width:52px;height:52px}
.helpers img.sprout{width:84px;height:84px}

/* Mother's Day: the same system with a warm accent */
.theme-rose{--accent:#9C4A63;--accent-hover:#84394F}
.theme-rose .page-hero{background:#33222A}
.theme-rose .page-hero::before{background:radial-gradient(closest-side,rgba(232,160,191,.2),rgba(232,160,191,0))}
.theme-rose .page-hero h1 em,.theme-rose .price-line{color:#F0C2D2}
.theme-rose .band-mint{background:#F7ECE8}

/* Responsive */
@media (max-width:1020px){
  .skills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
  .menu{display:block}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero-grid,.live-grid,.split,.gift-grid,.notes,.form-layout{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:56px}
  .steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .plans{grid-template-columns:minmax(0,1fr)}
  .bubble,.notifs{justify-self:start}
  .card.lift{margin-top:0}
  .page-hero.with-card{padding-bottom:clamp(52px,7vw,88px)}
  .form-layout .card{margin-top:calc(-1 * clamp(20px,4vw,36px))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stages li{grid-column:span 2}
  .stages li:nth-child(n+4){grid-column:span 3}
  .site-footer .wrap{grid-template-columns:minmax(0,1fr)}
  .foot-links{justify-content:flex-start}
  .live-hero .copy{padding-bottom:8px}
  .contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .features,.included{grid-template-columns:minmax(0,1fr)}
  .features li:nth-child(odd){padding-right:0;border-right:0}
  .features li:nth-child(even){padding-left:0}
  .skills{grid-template-columns:minmax(0,1fr)}
  .ctas .btn{width:100%}
  .row{grid-template-columns:minmax(0,1fr);gap:0}
  .toc ol{columns:1}
  .live-art{padding-bottom:0}
  .world-card{position:static;width:100%;margin-top:16px}
  .live-art .art-note{position:static;width:auto;margin-top:16px}
  .compare{font-size:16px}
  .compare th,.compare td{padding:13px 10px}
  .compare tbody th{width:36%}
  .compare thead th{font-size:21px}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages li,.stages li:nth-child(n+4){grid-column:auto}
  .stages li:last-child{grid-column:1 / -1}
  .screen{height:520px}
  .site-header .wrap{min-height:68px;gap:12px}
  .regions{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .site-header .btn-sm{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Additions: Live page details, legal top, form layout placement */
.live-hero .lede{color:var(--on-dark-soft)}
.live-hero .fine{color:var(--on-dark-faint);margin-top:20px}
.hero .fine{color:var(--on-dark-faint)}
.fine.wide{margin-top:18px;max-width:36em}
.features.three{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0;margin-top:0}
.features.three li{border-bottom:0;border-right:0;padding:0 clamp(16px,2.6vw,36px);border-left:1px solid var(--line)}
.features.three li:first-child{padding-left:0;border-left:0}
.features.three li:last-child{padding-right:0}
.features.three h3{font-size:clamp(21px,2vw,24px);line-height:1.25}
.characters{margin-top:clamp(40px,5vw,64px);align-items:center}
.says{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.says li{background:var(--paper);border-radius:22px 22px 22px 6px;padding:12px 18px;font-size:17px;line-height:1.35;box-shadow:0 1px 2px rgba(18,38,30,.05),0 8px 20px rgba(18,38,30,.07)}
.says .who{color:var(--seafoam-ink);font-weight:500}
.legal-top{padding-bottom:clamp(40px,5vw,64px)}
.legal-top .meta{font-size:15px;color:var(--on-dark-faint);margin:14px 0 0}
.legal-top .intro{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--on-dark-soft);margin-top:18px}
.legal{padding-top:clamp(8px,2vw,24px)}
.form-band{padding-top:0}
.form-layout .card{grid-column:2;grid-row:1}
.form-layout .about{grid-column:1;grid-row:1;padding-top:clamp(44px,6vw,72px)}
.form-layout .card.lift{margin-top:calc(-1 * var(--lift,260px))}
.page-hero.with-card{padding-bottom:clamp(52px,7vw,88px)}
.page-hero.with-card .hero-text{max-width:calc(100% - 480px - clamp(32px,6vw,80px))}
.about h2{font-size:clamp(26px,3vw,34px)}
.about-lede{color:var(--ink-soft);margin-top:14px;max-width:34em}
.included.one{grid-template-columns:minmax(0,1fr);margin-top:24px}
.fine.after{margin-top:18px}
.support{padding-top:clamp(40px,5vw,64px)}
@media (max-width:860px){
  .features.three{grid-template-columns:minmax(0,1fr)}
  .features.three li{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
  .features.three li:first-child{border-top:0;padding-top:0}
  .form-layout .card,.form-layout .about{grid-column:1;grid-row:auto}
  .form-layout .card.lift{margin-top:-28px}
  .form-layout .about{padding-top:8px}
  .page-hero.with-card .hero-text{max-width:none}
  .page-hero.with-card{padding-bottom:64px}
}
@media (max-width:860px){
  .hero h1{font-size:clamp(30px,9.2vw,60px)}
}
@media (max-width:520px){
  .live-pill{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 12px;border-radius:22px;padding:10px 16px 10px 10px;width:100%}
  .live-pill img{grid-row:1 / span 2;align-self:center}
}
.theme-rose .site-header,.theme-rose .menu-panel,.theme-rose .site-footer{background:#33222A}
.contact .mail{margin-top:8px}

/* Plans: the three buttons sit on one line at every width where the cards stand side by side */
@media (min-width:861px){.plan-foot{min-height:82px}}
/* Plans on a tablet (700 to 860 px): Monthly and Yearly side by side, Lifetime centred under them at the same width
   (three columns would put "Start free trial in the app" on two lines) */
@media (min-width:700px) and (max-width:860px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans > .plan:nth-child(3){grid-column:1 / -1;justify-self:center;width:calc(50% - 9px)}
  .plan{padding:30px 24px 26px}
  .plan .btn{padding-left:18px;padding-right:18px}
}
/* One column: a plan card keeps a card's width (centred) instead of stretching across a large phone held sideways */
@media (max-width:699px){.plans{max-width:480px;margin-left:auto;margin-right:auto}}
/* The gift band in one column: the gift card keeps a card's width under the words */
@media (max-width:860px){.gift-card{max-width:420px}}
.nowrap{white-space:nowrap}
/* Free and Premium on a narrow phone: each row's label above its two values */
@media (max-width:420px){
  .compare,.compare thead,.compare tbody{display:block}
  .compare tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px}
  .compare thead td{display:none}
  .compare thead th{padding:12px 0 10px;font-size:20px}
  .compare tbody th{grid-column:1 / -1;width:auto;padding:16px 0 4px;border-bottom:0;color:var(--ink);font-weight:500}
  .compare td{width:auto;padding:4px 0 14px}
  /* the label line splits the rows, so the Premium column is not a mint block here (it would break into one tile per
     row): its heading and its values are in seafoam ink instead */
  .compare .prem,.compare tbody tr:last-child .prem{background:none;border-radius:0}
  .compare thead .prem,.compare tbody .prem{color:var(--seafoam-ink)}
  .compare tbody .prem{font-weight:500}
  /* one line under each row, across both columns */
  .compare th,.compare td,.compare thead th{border-bottom:0}
  .compare tr{border-bottom:1px solid var(--line)}
  .compare thead tr{border-bottom:1.5px solid var(--line-strong)}
}
/* Zenelia Live band on a phone: the garden picture first, then the words, then the world garden */
@media (max-width:640px){
  .live-art{display:contents}
  .live-art .art-frame.main{order:-1}
  #live .live-grid{gap:28px}
  #live .live-grid .world-card{margin-top:0}
  #live .live-grid .art-note{margin-top:-8px}
}
/* Screens from the app (home page): real screens, photographed with sample data */
.screens-wrap{margin-top:clamp(44px,6vw,72px)}
/* .screens is the region (a sideways scroller on narrow screens; site.js makes it a keyboard stop only while it
   scrolls); the list inside it holds the three screens */
.screens-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:center;gap:clamp(20px,4vw,56px)}
.screens li{display:flex;flex-direction:column;align-items:center}
.device.mini{width:100%;border-radius:40px;padding:9px;box-shadow:0 2px 4px rgba(18,38,30,.06),0 26px 54px rgba(18,38,30,.22)}
.device.mini img{width:100%;border-radius:31px;background:var(--parchment)}
.screens .cap{font-size:16px;font-weight:500;color:var(--forest);margin-top:14px}
.screens-wrap .fine{margin-top:22px}
@media (max-width:860px){
  /* the scroller clips what is inside it: room above and below for the phones' (lighter) shadow, given back with
     negative margins so the layout stays where it was */
  .screens{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:thin;padding:22px 0 52px;margin:-16px calc(-1 * var(--gut)) -34px}
  .screens-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(62vw,250px);justify-content:start;width:max-content;padding:0 var(--gut)}
  .screens li{scroll-snap-align:start}
  .device.mini{box-shadow:0 2px 4px rgba(18,38,30,.06),0 14px 30px rgba(18,38,30,.2)}
}
/* Narrow phones: the gift button keeps its price on one line ("Send gift to Mom · $129.99 USD") */
@media (max-width:400px){
  .card{padding:24px 20px}
  .card .btn{padding-left:18px;padding-right:18px;font-size:16px}
}