/*
 * RAVO — public website.
 *
 * The page is built from the app's own design system (src/styles/system): the same cream ground and
 * night ground, the same olive, clay and area colours, Rubik for display and Assistant for text, the
 * same radii, the same spring. Its signature is the app's too — the sky over Today, with the house
 * on its hill, at the visitor's own hour. Glass is used only for what floats: the header capsule,
 * the notifications beside the phone, and the download bar on a phone.
 *
 * It follows the visitor's light or dark setting, and so do the app screenshots inside it.
 * Every animation is transform or opacity, and prefers-reduced-motion stops all of it.
 */

@font-face{font-family:Assistant;src:url('assets/fonts/assistant-hebrew.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Assistant;src:url('assets/fonts/assistant-latin.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;src:url('assets/fonts/rubik-hebrew.woff2') format('woff2');font-weight:500 800;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Rubik;src:url('assets/fonts/rubik-latin.woff2') format('woff2');font-weight:500 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens: the app's, by name ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --brand:#55613A; --brand-strong:#3E4A29; --brand-soft:#E9ECDD; --sage:#A7B394;
  --clay:#C56347; --sand:#B98B3E;
  --cream:#F3F1EA; --surface:#FFFFFF; --surface-2:#F8F6F0; --surface-3:#EFEDE5;
  --line:rgba(60,56,40,.12); --line-strong:rgba(60,56,40,.2);
  --ink:#1F221C; --ink-2:#5E6355; --ink-3:#8B8F82; --paper:#F6F4EF; --muted:var(--ink-2);
  --action:var(--brand); --on-action:#FFF;
  --c-tasks:#6F8C4A; --c-shop:#C56347; --c-cal:#4F8A7E; --c-money:#B98B3E; --c-people:#7C7FB8;
  --glass:rgba(252,251,247,.72); --glass-edge:inset 0 .5px 0 rgba(255,255,255,.7);
  --e2:0 0 0 .5px var(--line),0 1px 2px rgba(40,36,24,.05),0 14px 30px -18px rgba(40,36,24,.3);
  --font:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Rubik','Assistant',system-ui,sans-serif;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-2xl:34px;
  --spring:linear(0,0.0483,0.1582,0.2922,0.4275,0.5516,0.6588,0.7472,0.8177,0.8722,0.9132,0.9432,0.9646,0.9794,0.9892,0.9956,0.9994,1.0016,1.0026,1.003,1.0029,1.0026,1.0022,1.0018,1.0014,1.0011,1.0008,1.0006,1.0004,1.0003,1.0002,1.0001,1);
  --spring-bounce:linear(0,0.046,0.1589,0.3069,0.4655,0.6176,0.7521,0.8634,0.9496,1.0115,1.0519,1.0744,1.0831,1.0817,1.0737,1.062,1.0489,1.0359,1.0241,1.0142,1.0063,1.0005,0.9966,0.9942,0.9932,0.9931,0.9936,0.9945,0.9956,0.9967,0.9977,0.9986,0.9993,0.9998,1.0002,1.0004,1.0006,1.0006,1.0006,1.0005,1);
  --ease:cubic-bezier(.2,.7,.3,1);
  --gutter:clamp(18px,5vw,40px);
  --header:72px;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --brand:#9BAA72; --brand-strong:#B7C38F; --brand-soft:#29301F; --sage:#9BAA72; --clay:#E0A088;
    --cream:#10120F; --surface:#181B17; --surface-2:#21251E; --surface-3:#2A2F26;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
    --ink:#F1F0EA; --ink-2:#A7AA9C; --ink-3:#7C8073;
    --action:#9BAA72; --on-action:#10120F;
    --glass:rgba(28,31,26,.66); --glass-edge:inset 0 .5px 0 rgba(255,255,255,.12);
    --e2:0 0 0 .5px var(--line),0 14px 30px -18px rgba(0,0,0,.7);
  }
}

/* ── base ───────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:750;line-height:1.08;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--brand)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:200;inset-block-start:10px;inset-inline-start:10px;padding:10px 16px;border-radius:12px;background:var(--brand);color:var(--on-action);font-weight:700;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{inline-size:min(100% - 2 * var(--gutter),1180px);margin-inline:auto}
.narrow{inline-size:min(100% - 2 * var(--gutter),780px);margin-inline:auto}
.section{padding-block:clamp(84px,12vw,150px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-block-end:14px;color:var(--tone,var(--clay));font-size:14px;font-weight:750;letter-spacing:.02em}
.eyebrow::before{content:'';inline-size:8px;block-size:8px;border-radius:50%;background:currentColor}
.lede{margin-block-start:18px;color:var(--ink-2);font-size:clamp(17px,1.6vw,19.5px);line-height:1.6;max-inline-size:56ch}
.fine{margin-block-start:14px;color:var(--ink-3);font-size:14px}
.head{max-inline-size:760px}
.head h2,.chapter h2,.try-band h2{font-size:clamp(32px,4.6vw,56px)}

/* ── the download button ─────────────────────────────────────────────────────────────────────── */
.store-badge{display:inline-flex;align-items:center;gap:10px;min-block-size:56px;padding-inline:18px 22px;border-radius:16px;background:#11120F;color:#FFF;box-shadow:0 14px 30px -14px rgba(17,18,15,.7);transition:transform 420ms var(--spring-bounce),box-shadow 300ms ease}
@media (prefers-color-scheme:dark){.store-badge{background:#FFF;color:#11120F;box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}}
.store-badge:hover{transform:translateY(-2px)}
.store-badge:active{transform:scale(.97)}
.store-badge__mark{inline-size:24px;block-size:24px;margin-block-start:-3px;flex:none}
.store-badge__text{display:grid;line-height:1.05;text-align:start}
.store-badge__text small{font-size:11.5px;font-weight:600;opacity:.8}
.store-badge__text strong{font-family:var(--display);font-size:20px;font-weight:650}
.store-badge--big{min-block-size:62px;padding-inline:22px 26px}
.store-badge--big .store-badge__text strong{font-size:22px}
.ghost{display:inline-flex;align-items:center;gap:8px;min-block-size:56px;padding-inline:20px;border-radius:16px;color:var(--ink);font-weight:700;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--glass-edge),0 0 0 .5px var(--line);transition:transform 420ms var(--spring-bounce)}
.ghost svg{inline-size:18px;block-size:18px;transition:transform 300ms var(--ease)}
.ghost:hover svg{transform:translateY(3px)}
.ghost:active{transform:scale(.97)}

/* ── header: the dock, at the top ───────────────────────────────────────────────────────────── */
.site-header{position:fixed;z-index:100;inset-block-start:0;inset-inline:0;padding:calc(env(safe-area-inset-top) + 12px) var(--gutter) 0;pointer-events:none}
.capsule{position:relative;display:flex;align-items:center;gap:14px;inline-size:min(100%,1180px);min-block-size:58px;margin-inline:auto;padding:7px 8px;padding-inline-start:14px;border-radius:999px;pointer-events:auto;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:var(--glass-edge),0 0 0 .5px var(--line),0 12px 30px -18px rgba(30,30,20,.4)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:.06em}
.brand img{border-radius:10px}
.site-nav{display:flex;gap:2px;margin-inline:auto}
.site-nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);font-size:15px;font-weight:650;transition:background 200ms ease,color 200ms ease}
.site-nav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.header-tools{display:flex;align-items:center;gap:6px}
.lang{min-inline-size:44px;min-block-size:44px;padding-inline:10px;border-radius:999px;color:var(--ink-2);font-size:14px;font-weight:750}
.lang:hover{color:var(--ink)}
.header-cta{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:16px 18px;border-radius:999px;background:var(--brand);color:var(--on-action);font-size:15px;font-weight:750;transition:transform 380ms var(--spring-bounce)}
.header-cta svg{inline-size:17px;block-size:17px;margin-block-start:-2px}
.header-cta:active{transform:scale(.96)}
.menu-toggle{display:none;position:relative;inline-size:44px;block-size:44px;border-radius:50%}
.menu-toggle i{position:absolute;inset-inline:13px;block-size:2px;border-radius:2px;background:var(--ink);transition:transform 320ms var(--spring),inset 320ms var(--spring)}
.menu-toggle i:first-child{inset-block-start:17px}
.menu-toggle i:last-child{inset-block-start:25px}
.menu-toggle[aria-expanded='true'] i:first-child{inset-block-start:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded='true'] i:last-child{inset-block-start:21px;transform:rotate(-45deg)}
@media (max-width:900px){
  .menu-toggle{display:block}
  .header-tools{margin-inline-start:auto}
  .site-nav{position:absolute;inset-block-start:calc(100% + 8px);inset-inline:0;display:grid;gap:2px;margin:0;padding:10px;border-radius:24px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:var(--glass-edge),0 0 0 .5px var(--line),0 24px 50px -24px rgba(30,30,20,.5);
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;pointer-events:none;visibility:hidden;transition:opacity 220ms ease,transform 380ms var(--spring),visibility 0s 380ms}
  .site-nav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity 220ms ease,transform 380ms var(--spring)}
  .site-nav a{padding:14px 16px;font-size:17px;color:var(--ink)}
}
@media (max-width:420px){.header-cta span{display:none}.header-cta{padding-inline:13px}}

/* ── the phone ──────────────────────────────────────────────────────────────────────────────── */
.phone{position:relative;aspect-ratio:1290/2796;border-radius:52px;background:linear-gradient(150deg,#3A3F35,#151713 60%,#2A2E26);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),0 40px 80px -30px rgba(20,22,16,.55),0 18px 40px -24px rgba(20,22,16,.5)}
.phone::after{content:'';position:absolute;z-index:3;inset-block-start:4.2%;inset-inline:0;margin-inline:auto;inline-size:29%;block-size:3.4%;border-radius:999px;background:#0B0C0A}
.phone picture{position:absolute;inset:2.8%;border-radius:44px;overflow:hidden;background:#11130F}
.phone picture img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top}

/* ── hero ───────────────────────────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;min-block-size:max(700px,100svh);padding-block:calc(var(--header) + env(safe-area-inset-top) + clamp(48px,9vh,110px)) 0;overflow:clip;color:#F6F4EF;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 55%,var(--sky-low))}
:is(.hero,.finale)[data-part='dawn']{--sky-top:#263246;--sky-mid:#6A5B72;--sky-low:#D39B7A;--sky-body:#FFD8A2;--sky-hill-far:#56603F;--sky-hill-near:#343D27;--sky-roof:#F6F4EF;--sky-window:#F0A68D}
:is(.hero,.finale)[data-part='day']{--sky-top:#2B5566;--sky-mid:#6F9A97;--sky-low:#C9C194;--sky-body:#FFF1C4;--sky-hill-far:#5F7246;--sky-hill-near:#3A482B;--sky-roof:#F6F4EF;--sky-window:#F0A68D}
:is(.hero,.finale)[data-part='dusk']{--sky-top:#251F3B;--sky-mid:#7D4458;--sky-low:#D97E55;--sky-body:#FFC58C;--sky-hill-far:#4D3C3B;--sky-hill-near:#2A2421;--sky-roof:#F6F4EF;--sky-window:#FFB27F}
:is(.hero,.finale)[data-part='night']{--sky-top:#0B101D;--sky-mid:#161E31;--sky-low:#262C40;--sky-body:#F3EFE0;--sky-hill-far:#1E281B;--sky-hill-near:#121910;--sky-roof:#DCD8CC;--sky-window:#F0A68D}
:is(.hero,.finale):is([data-part='night'],[data-part='dusk']){--sky-wall:#D9CDB8;--sky-roof-fill:#A9533C;--sky-leaf:#3E5228;--sky-leaf-lit:#55703A;--sky-door:#3B4529;--sky-chimney:#74402F}

.scene{position:absolute;z-index:-1;inset:0;pointer-events:none}
.scene svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.stars circle{fill:#FFF;opacity:0}
:is(.hero,.finale)[data-part='night'] .stars circle{opacity:.9;transform-box:fill-box;transform-origin:center;animation:twinkle 3.6s ease-in-out infinite}
.stars circle:nth-child(3n){animation-delay:-1.2s}.stars circle:nth-child(3n+1){animation-delay:-2.3s}
.body .sun circle{fill:var(--sky-body)}
.body .rays path{stroke:var(--sky-body);stroke-width:7;stroke-linecap:round;opacity:.55}
.body .rays{animation:turn 70s linear infinite}
.body .halo{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite}
.moon{fill:var(--sky-body);display:none}
:is(.hero,.finale)[data-part='night'] .moon{display:block}
.hero[data-part='night'] .sun{display:none}
.cloud{fill:rgba(255,255,255,.24)}
.hero[data-part='dusk'] .cloud{fill:rgba(255,214,190,.22)}
.hero[data-part='night'] .clouds{display:none}
.cloud--a{animation:wander 34s ease-in-out infinite alternate}
.cloud--b{animation:wander 44s ease-in-out -12s infinite alternate-reverse}
.cloud--c{animation:wander 38s ease-in-out -6s infinite alternate}
.birds{fill:none;stroke:color-mix(in srgb,var(--sky-hill-near) 80%,#000);stroke-width:3;stroke-linecap:round;opacity:0;animation:birds 26s linear 3s infinite}
.hero[data-part='night'] .birds{display:none}
.meteor{stroke:#FFF;stroke-width:3;stroke-linecap:round;opacity:0}
.hero[data-part='night'] .meteor{animation:meteor 12s ease-in 4s infinite}
.hill--far{fill:var(--sky-hill-far)}
.hill--near{fill:var(--sky-hill-near)}
.house .trunk{fill:var(--sky-trunk,#5B4A36)}.house .leaf{fill:var(--sky-leaf,#5E7A3C)}.house .leaf-lit{fill:var(--sky-leaf-lit,#7E9B57)}
.house .chimney{fill:var(--sky-chimney,#8C4A36)}.house .wall{fill:var(--sky-wall,#F3EBDD)}.house .roof-fill{fill:var(--sky-roof-fill,#C56347)}
.house .roof{stroke:var(--sky-roof)}.house .window{fill:var(--sky-window)}.house .door{fill:var(--sky-door,#55613A)}
.house .window-glow{fill:var(--sky-window);opacity:.22;transform-box:fill-box;transform-origin:center;animation:glow 4.8s ease-in-out infinite}
.house .smoke circle{fill:color-mix(in srgb,var(--sky-roof) 40%,#FFF);opacity:0;transform-box:fill-box;transform-origin:center}
:is(.hero,.finale):is([data-part='dusk'],[data-part='night'],[data-part='dawn']) .smoke circle{animation:smoke 4.5s ease-out infinite}
.smoke circle:nth-child(2){animation-delay:1.5s}.smoke circle:nth-child(3){animation-delay:3s}

.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:clamp(24px,5vw,72px);min-block-size:calc(max(700px,100svh) - var(--header) - 110px)}
.hero__copy{align-self:start;text-shadow:0 1px 18px rgba(10,14,8,.35)}
.hero h1{font-size:clamp(44px,6.2vw,84px);line-height:1.02}
.hero h1 em{color:#FFE2B8}
.hero .lede{color:rgba(246,244,239,.88);max-inline-size:44ch}
.pill{display:inline-flex;align-items:center;gap:9px;margin-block-end:22px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 0 0 .5px rgba(255,255,255,.14);font-size:14px;font-weight:700;text-shadow:none}
.pill__dot{inline-size:8px;block-size:8px;border-radius:50%;background:#B9D27C;box-shadow:0 0 0 4px rgba(185,210,124,.25)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block-start:32px}
.hero .ghost{color:#F6F4EF;background:rgba(255,255,255,.12);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 0 0 .5px rgba(255,255,255,.16);text-shadow:none}
.hero .store-badge,.finale .store-badge{background:#FFF;color:#11120F}

.hero__device{position:relative;align-self:end;justify-self:center;inline-size:min(320px,82%);margin-block-end:-140px}
.phone--hero{transition:transform 700ms var(--ease)}
.ping{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;inline-size:max-content;max-inline-size:260px;padding:10px 14px;padding-inline-start:10px;border-radius:18px;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:var(--glass-edge),0 0 0 .5px var(--line),0 18px 36px -18px rgba(10,12,8,.55);text-shadow:none;opacity:0}
.ping img{border-radius:8px;flex:none}
.ping span{display:grid;line-height:1.25}
.ping b{font-size:13px;font-weight:750}
.ping small{color:var(--ink-2);font-size:13px}
.ping--a{inset-block-start:14%;inset-inline-start:-34%}
.ping--b{inset-block-start:40%;inset-inline-end:-30%}
.hero.is-in .ping--a{animation:ping-in 800ms var(--spring-bounce) 1.2s both,float 6s ease-in-out 2.2s infinite}
.hero.is-in .ping--b{animation:ping-in 800ms var(--spring-bounce) 1.7s both,float 7s ease-in-out 2.7s infinite}

/* the entrance: the sky first, then the words, then the house settles and the phone rises */
.js .rise{opacity:0}
.js .hero.is-in .rise{animation:rise 900ms var(--spring) calc(var(--i,0) * 110ms + 150ms) both}
.js .hero.is-in .hero__device.rise{animation:rise-phone 1400ms var(--spring) 350ms both}
.js .hero .house{opacity:0}
.js .hero.is-in .house{animation:settle 1100ms var(--spring) 550ms both}

@media (max-width:860px){
  .hero{min-block-size:0;padding-block-start:calc(var(--header) + env(safe-area-inset-top) + 38px)}
  .hero__grid{grid-template-columns:1fr;min-block-size:0;gap:40px}
  .hero h1{font-size:clamp(38px,10.6vw,58px)}
  .hero .lede{font-size:17px;margin-block-start:14px}
  .cta-row{margin-block-start:24px}
  /* On a phone the phone stands in the middle, and its own screen carries the house on the hill —
     the scene behind keeps the sky, the hills and the sun low beside it. */
  .hero__device{justify-self:center;inline-size:min(236px,60vw);margin-block-end:-170px}
  .hero .house{display:none}
  .ping{max-inline-size:200px;padding:8px 10px}
  .ping small{font-size:12px}
  .ping--a{inset-block-start:40%;inset-inline-start:-16%}
  .ping--b{display:none}
}

/* ── A · one place ──────────────────────────────────────────────────────────────────────────── */
.place{position:relative}
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-block-start:56px}
.shelf__item{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:26px 14px 22px;border-radius:var(--r-xl);text-align:center;background:var(--surface);box-shadow:var(--e2);transition:transform 500ms var(--spring-bounce)}
.shelf__item::before{content:'';position:absolute;inset-inline:20%;inset-block-start:18px;block-size:92px;border-radius:50%;background:color-mix(in srgb,var(--tone) 20%,transparent);filter:blur(6px)}
.shelf__item:hover{transform:translateY(-4px)}
.shelf__item .area-art{position:relative;inline-size:96px;block-size:96px;margin-block-end:8px}
.shelf__item b{font-family:var(--display);font-size:19px;font-weight:700}
.shelf__item span{color:var(--ink-2);font-size:14.5px;line-height:1.4}
.faces{position:relative;display:flex;justify-content:center;align-items:center;block-size:96px;margin-block-end:8px}
.faces i{display:grid;place-items:center;inline-size:46px;block-size:46px;margin-inline:-7px;border-radius:50%;background:var(--c);color:#FFF;font-family:var(--display);font-style:normal;font-weight:700;font-size:18px;box-shadow:0 0 0 3px var(--surface);animation:bob 4s ease-in-out infinite}
.faces i:nth-child(2){animation-delay:-1s}.faces i:nth-child(3){animation-delay:-2s}.faces i:nth-child(4){animation-delay:-3s}
@media (max-width:980px){.shelf{grid-template-columns:repeat(6,1fr)}.shelf__item{grid-column:span 2}.shelf__item:nth-child(4){grid-column:2 / span 2}.shelf__item:nth-child(5){grid-column:4 / span 2}}
@media (max-width:620px){.shelf{grid-template-columns:1fr 1fr;gap:12px;margin-block-start:36px}.shelf__item,.shelf__item:nth-child(4){grid-column:auto}.shelf__item:nth-child(5){grid-column:1 / -1}.shelf__item{padding:20px 10px 18px}.shelf__item .area-art{inline-size:78px;block-size:78px}.shelf__item::before{block-size:76px}}

/* area art motion — the app's own keyframes (src/styles/system/art.css) */
.area-art :is(.aa-fill,.aa-tick,.aa-drop,.aa-basket,.aa-today,.aa-paid,.aa-coin,.aa-receipt){transform-box:fill-box;transform-origin:center}
.aa-fill{opacity:0;transform:scale(.4);animation:aa-fill 6s var(--spring-bounce) infinite}
.aa-tick{stroke-dasharray:10;stroke-dashoffset:10;animation:aa-tick 6s ease infinite}
.aa-fill--1,.aa-tick--1{animation-delay:.7s}.aa-fill--2,.aa-tick--2{animation-delay:1.4s}
.aa-pencil{transform-origin:20% 80%;animation:aa-write 1.4s ease-in-out infinite}
.aa-drop{opacity:0;animation:aa-drop 6s var(--spring-bounce) infinite}
.aa-drop--1{animation-delay:.45s}.aa-drop--2{animation-delay:.9s}
.aa-basket{transform-origin:50% 100%;animation:aa-give 6s ease infinite}
.aa-page{transform-origin:50% 0;animation:aa-turn 5s cubic-bezier(.6,0,.3,1) infinite}
.aa-today{animation:aa-today 5s var(--spring-bounce) infinite}
.aa-hand{transform-box:view-box;transform-origin:0 0}
.area-art--calendar .aa-hand--m{animation:turn 4s linear infinite}
.area-art--calendar .aa-hand--h{animation:turn 48s linear infinite}
.aa-coin{opacity:0;animation:aa-coin 6s var(--spring-bounce) infinite}
.aa-coin--1{animation-delay:.3s}.aa-coin--2{animation-delay:.6s}
.aa-receipt{animation:aa-receipt 6s ease-in-out infinite}
.aa-paid{opacity:0;animation:aa-paid 6s var(--spring-bounce) infinite}
@keyframes aa-fill{0%,8%{opacity:0;transform:scale(.4)}14%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.4)}}
@keyframes aa-tick{0%,12%{stroke-dashoffset:10}20%,80%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:10}}
@keyframes aa-write{50%{transform:translate(-3px,3px) rotate(-6deg)}}
@keyframes aa-drop{0%{opacity:0;transform:translateY(-46px)}8%{opacity:1}18%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes aa-give{16%,24%,31%{transform:scaleY(.95) scaleX(1.02)}20%,27%,36%,100%{transform:none}}
@keyframes aa-turn{0%,30%{transform:none;opacity:1}48%{transform:scaleY(0);opacity:.6}49%,100%{transform:scaleY(0);opacity:0}}
@keyframes aa-today{0%,46%{transform:scale(1)}56%{transform:scale(1.5)}66%,100%{transform:scale(1)}}
@keyframes aa-coin{0%{opacity:0;translate:0 -30px}10%,84%{opacity:1;translate:0 0}94%,100%{opacity:0;translate:0 0}}
@keyframes aa-receipt{0%,100%{transform:translateY(4px)}50%{transform:translateY(-3px)}}
@keyframes aa-paid{0%,30%{opacity:0;scale:.2}40%,84%{opacity:1;scale:1}94%,100%{opacity:0;scale:.2}}

/* ── B–E · the story ────────────────────────────────────────────────────────────────────────── */
.story{position:relative;padding-block:clamp(24px,4vw,60px) clamp(60px,8vw,120px)}
.story__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px)}
.story__stage{position:sticky;inset-block-start:calc(var(--header) + 30px);align-self:start;display:grid;place-items:center;block-size:calc(100svh - var(--header) - 60px);min-block-size:540px}
.story__orb{position:absolute;inline-size:min(560px,110%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--stage-tone,var(--c-tasks)) 32%,transparent),transparent 64%);transition:background 800ms ease}
.phone--story{inline-size:auto;block-size:min(640px,86%);max-inline-size:90%}
.phone--story picture{opacity:0;transform:scale(.97) translateY(10px);transition:opacity 520ms ease,transform 700ms var(--spring)}
.phone--story picture.is-on{opacity:1;transform:none}
.chapter{display:grid;align-content:center;min-block-size:86svh;padding-block:48px}
.chapter .eyebrow{color:var(--tone)}
.chapter .lede{max-inline-size:44ch}
.chapter h2{max-inline-size:15ch}
.chapter__phone{display:none}

/* each chapter's small demonstration plays once, when the chapter comes into view */
.mini{display:grid;gap:10px;margin-block-start:30px;max-inline-size:440px}
.mini li{display:flex;align-items:center;gap:12px;min-block-size:56px;padding:10px 14px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--e2);font-weight:650;font-size:16px}
.js .mini li{opacity:0}
.js .chapter.is-in .mini li{animation:rise 700ms var(--spring) calc(var(--i) * 120ms) both}
.mini span{flex:1;min-inline-size:0}
.mini small{color:var(--ink-3);font-size:13px;font-weight:600}
.mini__tick{display:grid;place-items:center;flex:none;inline-size:26px;block-size:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-strong);color:transparent}
.mini__tick svg{inline-size:15px;block-size:15px}
.chapter.is-in .mini li:nth-child(-n+2) .mini__tick{animation:tick 600ms var(--spring-bounce) calc(1.1s + var(--i) * .7s) both}
.chapter.is-in .mini--tasks li:nth-child(-n+2) span{animation:done 400ms ease calc(1.2s + var(--i) * .7s) both}
.who{display:grid;place-items:center;flex:none;inline-size:30px;block-size:30px;border-radius:50%;background:var(--c);color:#FFF;font-style:normal;font-family:var(--display);font-size:13px;font-weight:700}
.notes{display:grid;gap:12px;margin-block-start:30px;max-inline-size:420px}
.note{padding:14px 16px;border-radius:22px;background:var(--surface);box-shadow:var(--e2)}
.js .note{opacity:0}
.js .chapter.is-in .note{animation:note-in 800ms var(--spring-bounce) calc(var(--i) * 450ms + 200ms) both}
.note__top{display:flex;align-items:center;gap:7px;margin-block-end:4px;color:var(--ink-3);font-size:12.5px;font-weight:650}
.note__top img{border-radius:5px}
.note__top b{color:var(--ink-2)}
.note__top span{margin-inline-start:auto}
.note strong{display:block;font-size:15.5px}
.note p{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.bill{display:grid;gap:12px;margin-block-start:30px;max-inline-size:420px;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e2)}
.js .bill{opacity:0}
.js .chapter.is-in .bill{animation:rise 700ms var(--spring) 100ms both}
.bill__row{display:flex;align-items:center;gap:12px}
.bill__row span:nth-child(2){display:grid;flex:1;line-height:1.3}
.bill__row small{color:var(--ink-3);font-size:13px}
.bill__row strong{font-family:var(--display);font-size:22px}
.bill__ico{display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:14px;background:color-mix(in srgb,var(--c-money) 18%,transparent);font-size:20px}
.bill__state{display:flex;gap:8px;flex-wrap:wrap}
.bill__state > span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:700}
.bill__state svg{inline-size:15px;block-size:15px}
.bill__paid{background:var(--surface-3);color:var(--ink-3)}
.chapter.is-in .bill__paid{animation:paid 600ms var(--spring-bounce) 1.4s both}
.bill__lock{background:color-mix(in srgb,var(--c-money) 14%,transparent);color:var(--sand)}

@media (max-width:860px){
  .story__grid{grid-template-columns:1fr}
  .story__stage{display:none}
  .chapter{min-block-size:0;padding-block:52px}
  .chapter h2{max-inline-size:none}
  .chapter__phone{display:block;position:relative;inline-size:min(250px,66vw);aspect-ratio:1290/2796;margin:34px auto 0;padding:2.8%;border-radius:42px;background:linear-gradient(150deg,#3A3F35,#151713 60%,#2A2E26);box-shadow:0 30px 60px -26px rgba(20,22,16,.55)}
  .chapter__phone img{inline-size:100%;block-size:100%;border-radius:35px;object-fit:cover;object-position:top}
}

/* ── Quick Add ──────────────────────────────────────────────────────────────────────────────── */
.try-band{position:relative;isolation:isolate;color:#F6F4EF;background:radial-gradient(80% 70% at 85% 0%,rgba(188,205,142,.22),transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(197,99,71,.18),transparent 65%),linear-gradient(180deg,#3B4529,#262E1C)}
.try-band .lede{color:rgba(246,244,239,.82)}
.try-band .fine{color:rgba(246,244,239,.62)}
.try-band .eyebrow{color:#BCCD8E}
.try-band h2 em{color:#FFE2B8}
.try-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.composer{padding:18px;border-radius:var(--r-2xl);background:var(--surface);color:var(--ink);box-shadow:0 40px 80px -36px rgba(0,0,0,.6)}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--surface-3)}
.seg button{position:relative;z-index:1;min-block-size:40px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--ink-2);transition:color 250ms ease}
.seg button:is([aria-checked='true'],[aria-selected='true']){color:var(--ink)}
.seg__pill{position:absolute;inset-block:4px;inset-inline-start:4px;inline-size:calc(50% - 4px);border-radius:999px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:translate 450ms var(--spring)}
.seg[data-at='1'] .seg__pill{translate:100% 0}
[dir='rtl'] .seg[data-at='1'] .seg__pill{translate:-100% 0}
.composer__field{display:block;margin-block-start:14px}
.composer__field textarea{display:block;inline-size:100%;min-block-size:96px;padding:16px 18px;border:0;border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink);font:600 19px/1.5 var(--font);resize:none;unicode-bidi:plaintext;box-shadow:inset 0 0 0 1px var(--line)}
.composer__field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 60%,transparent)}
.composer__examples{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.composer__examples button{padding:8px 13px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:14px;font-weight:600;transition:background 200ms ease,color 200ms ease}
.composer__examples button[aria-pressed='true']{background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent)}
.composer__result{margin-block-start:14px;min-block-size:150px}
.try-empty{color:var(--ink-3);font-size:15px;padding:14px 4px}
.try-card{padding:16px;border-radius:var(--r-lg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);animation:rise 500ms var(--spring) both}
.try-card__head{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:13.5px;font-weight:650}
.try-kind{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;background:var(--c-tasks);color:#FFF;font-size:13px;font-weight:750}
.try-kind:is([data-kind='shopping'],[data-kind='procurement']){background:var(--c-shop)}
.try-kind[data-kind='calendar_event']{background:var(--c-cal)}
.try-kind:is([data-kind='bill'],[data-kind='expense']){background:var(--c-money)}
.try-kind[data-kind='maintenance']{background:#6F7FA6}
.try-card h3{margin-block:8px 10px;font-size:20px;line-height:1.3}
.try-chips{display:flex;flex-wrap:wrap;gap:6px}
.try-chips li{display:inline-flex;gap:6px;padding:6px 11px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;animation:pop 520ms var(--spring-bounce) calc(var(--i) * 70ms) both}
.try-chips b{color:var(--ink-3);font-weight:650}
.try-confirm{margin-block-start:12px;color:var(--ink-2);font-size:14px}
.try-options{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px}
.try-options li{padding:6px 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:650}
@media (max-width:860px){.try-grid{grid-template-columns:1fr}.composer{padding:14px;border-radius:28px}}

/* ── F · roles ──────────────────────────────────────────────────────────────────────────────── */
.roles__card{margin-block-start:48px;padding:clamp(16px,3vw,32px);border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--e2)}
.roles__card .seg{max-inline-size:420px}
.roles__body{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,64px);align-items:center;margin-block-start:28px}
.roles__copy{transition:opacity 260ms ease}
.roles__copy h3{font-size:clamp(24px,2.6vw,32px)}
.roles__copy > p{margin-block-start:10px;color:var(--ink-2);font-size:17px}
.role-list{display:grid;gap:8px;margin-block-start:22px}
.role-list li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.role-list i{grid-row:span 2;display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,transparent);font-style:normal;font-size:18px}
.role-list b{font-size:16px}
.role-list span{color:var(--ink-2);font-size:14px;line-height:1.45}
.phone--roles{inline-size:min(270px,100%);justify-self:center}
.phone--roles picture{transition:opacity 300ms ease}
.roles.is-swapping :is(.phone--roles picture,.roles__copy){opacity:0}
@media (max-width:860px){.roles__body{grid-template-columns:1fr}.phone--roles{inline-size:min(230px,62vw)}}

/* ── trust ──────────────────────────────────────────────────────────────────────────────────── */
.trust{padding-block-start:0}
.trust__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:44px}
.trust__list li{display:grid;align-content:start;gap:8px;padding:26px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--e2)}
.trust__icon{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:15px;background:var(--brand-soft);color:var(--brand)}
.trust__icon svg{inline-size:22px;block-size:22px}
.trust__list b{margin-block-start:6px;font-family:var(--display);font-size:19px;font-weight:700}
.trust__list span{color:var(--ink-2);font-size:15.5px;line-height:1.55}
@media (max-width:860px){.trust__list{grid-template-columns:1fr}}

/* ── FAQ ────────────────────────────────────────────────────────────────────────────────────── */
.faq{padding-block-start:0}
.faq .head{text-align:center;margin-inline:auto}
.faq__list{display:grid;gap:10px;margin-block-start:40px}
.faq details{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e2);overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:64px;padding:16px 22px;cursor:pointer;list-style:none;font-weight:750;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;inline-size:11px;block-size:11px;border-inline-end:2.4px solid var(--ink-3);border-block-end:2.4px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform 360ms var(--spring)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding:0 22px 20px;color:var(--ink-2);font-size:16px;line-height:1.65}
.faq details a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ── finale: the same house, at night, with the lights on ───────────────────────────────────── */
.finale{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(130px,15vw,190px) clamp(250px,27vw,340px);color:#F6F4EF;text-align:center;background:linear-gradient(180deg,var(--cream),var(--sky-top) 20%,var(--sky-mid) 68%,var(--sky-low))}
.finale__scene{position:absolute;z-index:-1;inset:auto 0 0;inline-size:100%;block-size:clamp(300px,42vw,520px)}
.finale__inner{display:grid;justify-items:center}
.finale h2{font-size:clamp(42px,6vw,78px)}
.finale h2 em{color:#FFE2B8}
.finale .lede{color:rgba(246,244,239,.84);margin-block-end:30px;margin-inline:auto}
.finale .fine{color:rgba(246,244,239,.66)}

/* ── footer ─────────────────────────────────────────────────────────────────────────────────── */
.footer{padding-block:48px calc(36px + env(safe-area-inset-bottom));background:#0E110C;color:rgba(246,244,239,.88)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;align-items:start}
.footer p{margin-block-start:10px;color:rgba(246,244,239,.62);font-size:15px}
.footer__links{display:grid;gap:2px}
.footer__links a,.footer__contact a{display:inline-flex;min-block-size:40px;align-items:center;font-weight:650}
.footer__links a:hover,.footer__contact a:hover{color:#FFF;text-decoration:underline;text-underline-offset:3px}
.footer__fine{margin-block-start:30px;color:rgba(246,244,239,.5);font-size:13.5px}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr}.footer{padding-block-end:calc(110px + env(safe-area-inset-bottom))}}

/* ── download bar on a phone ────────────────────────────────────────────────────────────────── */
.sticky-cta{position:fixed;z-index:90;inset-inline:0;inset-block-end:0;display:none;justify-content:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));pointer-events:none;transform:translateY(130%);transition:transform 500ms var(--spring)}
.sticky-cta .store-badge{pointer-events:auto;box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.sticky-cta.show{transform:none}
@media (max-width:860px){.sticky-cta{display:flex}}

/* ── reveal on scroll ───────────────────────────────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.visible{opacity:1;transform:none;transition:opacity 800ms ease calc(var(--i,0) * 90ms),transform 1000ms var(--spring) calc(var(--i,0) * 90ms)}

/* ── keyframes ──────────────────────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rise-phone{from{opacity:0;transform:translateY(140px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes ping-in{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes twinkle{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}
@keyframes wander{from{transform:translateX(-90px)}to{transform:translateX(90px)}}
@keyframes birds{0%{opacity:0;transform:translate(1500px,200px)}4%{opacity:.7}44%{opacity:.7;transform:translate(-100px,120px)}46%,100%{opacity:0;transform:translate(-100px,120px)}}
@keyframes meteor{0%{opacity:0;transform:translate(1300px,60px)}2%{opacity:.9}7%{opacity:0;transform:translate(1000px,200px)}100%{opacity:0;transform:translate(1000px,200px)}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.55}100%{opacity:0;transform:translate(6px,-26px) scale(2.2)}}
@keyframes glow{0%,100%{opacity:.22;transform:scale(.9)}50%{opacity:.45;transform:scale(1.15)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tick{from{background:transparent;color:transparent}to{background:var(--tone);box-shadow:none;color:#FFF}}
@keyframes done{to{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}}
@keyframes note-in{from{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes paid{to{background:color-mix(in srgb,var(--c-tasks) 18%,transparent);color:var(--c-tasks)}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* ── stillness ──────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js :is(.rise,.reveal,.mini li,.note,.bill),.js .hero .house,.ping{opacity:1 !important;transform:none !important;translate:none !important}
  .mini li:nth-child(-n+2) .mini__tick{background:var(--tone);color:#FFF;box-shadow:none}
  .birds,.meteor{display:none}
  .parallax{transform:none !important}
}

/* ── shared by the 404 page ─────────────────────────────────────────────────────────────────── */
.eyebrow.clay{color:var(--clay)}