/* elodie.day homepage, v6 (6 Oct 2026). Design: docs/design-notes/website-v6. Tokens: the Elodie design system.
   Light only, as the app opens in light. Motion runs only under .motion, which home.js sets when Reduce Motion is off. */
:root{
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --paper:#FAF7F2;--surface:#FFFDFA;--sand:#F0EAE0;--ink:#1F1B17;--ink2:#5B5750;--line:rgba(47,61,49,.14);
  --sage100:#DCE3D8;--sage200:#C9D3C4;--sage400:#8FA68F;--moss600:#4F6F52;--moss800:#2F3D31;
  --night:#26302A;--night2:#1E2621;--nightInk:#E4EAE0;--nightInk2:#AEBBAB;
  --gut:20px;--max:1200px;--barh:64px;
  --shadow:0 0 0 1px rgba(58,46,34,.06),0 24px 48px -28px rgba(58,46,34,.45);
  --phone-shadow:0 40px 80px -40px rgba(31,43,33,.6),0 16px 32px -20px rgba(31,43,33,.35);
  --grain:url(/img/grain.svg);
}
/* Warm accents for the day, taken from the app's own log and avatar tints and deepened. */
:root{
  --heroBg:#EDE6DA;--heroEdge:rgba(90,63,51,.22);
  --a1:#EAD9B5;--a1d:#6E5322;--a1m:#C29A50;   /* ochre: the week */
  --a2:#CFD9E0;--a2d:#34505F;--a2m:#7E9BAD;   /* dusk blue: the morning */
  --a3:#DCE3D8;--a3d:#2F3D31;--a3m:#8FA68F;   /* sage: from anywhere */
  --a4:#E8CDBF;--a4d:#7A3F2D;--a4m:#C27C62;   /* clay: cover */
  --a5:#DDD6E8;--a5d:#4E4068;--a5m:#9585B3;   /* plum: the evening */
  --ribbon:#3A2F28;--ribbonInk:#EAD9B5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
em{font-style:italic}
a{color:var(--moss600)}

/* Drawings: one symbol per object. --ln is the line, --sc the scenery, --f the blob. */
svg.dr{display:block;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--sw,1.6)}
svg.dr{--fx:var(--f,var(--sage100))}

/* Bar */
.bar{position:fixed;inset:12px var(--gut) auto;z-index:40;display:flex;justify-content:center;pointer-events:none}
.bar-in{pointer-events:auto;display:flex;align-items:center;gap:6px;width:min(100%,var(--max));height:56px;padding:0 8px 0 16px;border-radius:999px;background:rgba(250,247,242,.78);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(31,43,33,.5);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.brand svg{width:28px;height:28px}
.brand b{font:500 21px/1 var(--serif)}
.brand .tag{font:400 21px/1 var(--serif);font-style:italic;color:var(--moss600);margin-left:2px;white-space:nowrap}
@media(max-width:420px){.brand .tag{display:none}}
.bar nav{display:none;margin-left:auto;gap:2px}
.bar nav a{padding:8px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.bar nav a:hover{background:var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--moss800);color:#FAF7F2;font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .2s,background-color .2s}
.btn:hover{background:var(--moss600)}
.btn.s{min-height:40px;padding:0 16px;font-size:15px;margin-left:auto}
.btn.ghost{background:transparent;color:var(--moss800);box-shadow:inset 0 0 0 1.5px var(--moss800)}
.btn.ghost:hover{background:rgba(47,61,49,.06)}
@media(min-width:860px){.bar nav{display:flex}.btn.s{margin-left:10px}}

/* Hero: sticky. The sheet that follows slides over it. */
.hero{position:sticky;top:0;z-index:1;height:100svh;min-height:720px;overflow:hidden;background:var(--heroBg);--p:0}
.hero::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:1;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 45%,var(--heroEdge) 100%);pointer-events:none}
.hero.gone{visibility:hidden}
.hero-copy{will-change:transform,filter,opacity;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--barh) + 52px) var(--gut) 0;
  transform:translateY(calc(var(--p) * -70px));filter:blur(calc(var(--p) * 12px));opacity:calc(1 - var(--p) * 1.3)}
.eyebrow{font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.hero h1{margin-top:0;font-size:clamp(44px,4vw + 20px,84px);line-height:.98;letter-spacing:-.035em;color:var(--moss800);max-width:13em}
.hero h1 em{display:block;font-weight:400;color:var(--moss600)}
.hero .lede{margin-top:22px;max-width:31em;font-size:clamp(17px,.4vw + 15px,20px);line-height:1.55;color:#4A5249}
.ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
/* The phone rises from the bottom edge */
.hero-phone{will-change:transform;position:relative;z-index:2;width:fit-content;margin:52px auto 0}
.hero-phone .phone{--w:min(300px,64vw)}
.hero-phone{transform:translateY(calc(var(--p) * 90px)) scale(calc(1 - var(--p) * .06))}
.phone{--w:300px;position:relative;width:var(--w);padding:calc(var(--w)*.03);border-radius:calc(var(--w)*.165);background:#161816;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.25),var(--phone-shadow)}
.phone img{width:100%;height:auto;border-radius:calc(var(--w)*.135);background:#FAF7F2}
.phone::after{content:"";position:absolute;top:calc(var(--w)*.06);left:50%;width:calc(var(--w)*.28);height:calc(var(--w)*.082);transform:translateX(-50%);border-radius:999px;background:#050605}
/* Who has: two cards beside the phone */
.who{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:left;white-space:nowrap;
  transform:translate(calc(var(--dx,0) * var(--p) * 1px),calc(var(--p) * 40px));opacity:calc(1 - var(--p) * 1.6)}
.who i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:600 16px/1 var(--sans);font-style:normal;flex:none}
.who small{display:block;font:600 11px/14px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.who b{display:block;font:600 16px/21px var(--sans)}
.who span{display:block;font-size:14px;line-height:19px;color:var(--ink2)}
.who.one{left:calc(50% - var(--w2) - 250px);bottom:23%;--dx:-160}
.who.two{left:calc(50% + var(--w2) - 10px);bottom:12%;--dx:160}
.hero{--w2:150px}
.who.one i{background:var(--sage200);color:var(--moss800)}
.who.two i{background:#D9C2B2;color:#5A3F33}
/* Scattered objects: larger ones low, smaller ones high, always clear of the words */
.obj{will-change:transform;position:absolute;z-index:1;transform:translate(calc(var(--dx) * var(--p) * 1px),calc(var(--dy) * var(--p) * 1px)) rotate(var(--r))}
.obj.o1{left:3%;bottom:4%;width:clamp(150px,19vw,300px);--r:-6deg;--dx:-220;--dy:120;--f:var(--a1);--sw:.62}
.obj.o2{right:3%;bottom:8%;width:clamp(130px,16vw,250px);--r:7deg;--dx:220;--dy:120;--f:var(--a4);--sw:.72}
.obj.o3{left:12%;top:47%;width:clamp(90px,11vw,170px);--r:-5deg;--dx:-200;--dy:20;--f:var(--a2);--sw:1}
.obj.o4{right:14%;top:44%;width:clamp(70px,8vw,120px);--r:12deg;--dx:200;--dy:20;--f:var(--a5);--sw:1.3}
.obj.o5{left:7%;top:17%;width:clamp(64px,7vw,108px);--r:-14deg;--dx:-160;--dy:-120;--f:var(--a3);--sw:1.5}
.obj.o6{right:8%;top:15%;width:clamp(70px,8vw,120px);--r:18deg;--dx:160;--dy:-120;--f:var(--a1);--sw:1.3}
@media(max-width:859px){
  .obj.o3,.obj.o4,.who.two{display:none}
  .obj.o5{top:auto;bottom:34%;left:2%}.obj.o6{top:auto;bottom:38%;right:2%}
  .who.one{left:50%;bottom:6%;transform:translate(-50%,calc(var(--p) * 40px))}
  .hero-copy{padding-top:calc(var(--barh) + 40px)}
}
@media(max-height:820px) and (min-width:860px){.hero-copy{padding-top:calc(var(--barh) + 36px)}.hero-phone{margin-top:40px}}

/* The sheet slides over the hero */
.sheet{position:relative;z-index:5;background:var(--paper);border-radius:32px 32px 0 0;box-shadow:0 -30px 60px -30px rgba(31,43,33,.35)}

/* Ribbon: the day, scrolling past where a logo strip would be */
.ribbon{overflow:hidden;background:var(--ribbon);color:var(--ribbonInk);border-radius:32px 32px 0 0;padding:22px 0}
.track{display:flex;gap:44px;width:max-content;animation:slide 60s linear infinite}
.track span{display:flex;align-items:center;gap:12px;font:400 19px/1 var(--serif);white-space:nowrap}
.track b{font:600 13px/1 var(--sans);letter-spacing:.06em;opacity:.7;font-variant-numeric:tabular-nums}
.track span::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;margin-left:32px}
@keyframes slide{to{transform:translateX(-50%)}}

/* Section heads */
.wrap{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.sec{padding-top:88px}
@media(max-width:859px){.sec{padding-top:48px}}
.head{max-width:40rem}
.head.c{margin:0 auto;text-align:center}
.head h2{font-size:clamp(36px,2.8vw + 22px,66px);line-height:1.03;color:var(--moss800)}
.head h2 em{font-weight:400;color:var(--moss600)}
.head p{margin-top:16px;font-size:19px;line-height:1.55;color:var(--ink2)}

/* Three people, three tall cards (the video's photo cards, in drawings) */
.three{display:grid;gap:16px;margin-top:40px}
@media(min-width:860px){.three,.day{margin-top:48px!important}}
@media(min-width:860px){.three{grid-template-columns:repeat(3,1fr)}}
.card3{position:relative;overflow:hidden;height:clamp(440px,60vw,560px);border-radius:28px;background:var(--c);isolation:isolate}
.card3::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.35;z-index:-1}
.card3 h3{position:relative;z-index:2;padding:30px 30px 0;font-size:clamp(28px,1.2vw + 18px,36px);line-height:1.08;color:var(--cd)}
.card3 .dr{position:absolute;right:22px;top:118px;width:46%;--ln:var(--cd);--sc:var(--cm);--f:rgba(255,255,255,.5);--sw:1.3}
.card3 .crop{position:absolute;left:30px;right:30px;bottom:-1px;height:300px;overflow:hidden;border-radius:22px 22px 0 0;box-shadow:var(--shadow);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card3 .crop img{width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card3:hover .crop{transform:translateY(-12px)}
.card3:hover .crop img{transform:scale(1.04)}
/* Mum's card: show the Live Activity, which sits low on the Lock Screen */
.card3 .crop.la img{translate:0 -41%}
/* A phone's status bar over the crop, so the Lock Screen reads as a phone */
.card3 .sbar{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 20px 0 26px;color:#1F2A21;background:linear-gradient(#E4EAE2 60%,rgba(228,234,226,0))}
.card3 .sbar b{font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.card3 .crop{container-type:inline-size}
/* The Dynamic Island, sized to the screen width as on an iPhone, over every card's screen */
.card3 .crop.mid::after{display:none}
.card3 .crop::after{content:"";position:absolute;z-index:3;left:50%;top:2.9cqi;width:31cqi;height:8.4cqi;translate:-50% 0;border-radius:99px;background:#050605}
.card3 .sbar i{display:none}
.card3 .sbar{height:14cqi}
.card3 .sbar svg{width:62px;height:auto}
@media(max-width:859px){.card3 .crop{height:250px!important}.card3 .dr{top:96px}}

/* The day: a sticky time rail and five chapters */
.day{position:relative;display:grid;gap:0;margin-top:40px}
@media(min-width:1040px){.day{grid-template-columns:150px 1fr;gap:40px}}
.rail{display:none}
@media(min-width:1040px){
  .rail{display:block;position:sticky;top:120px;align-self:start;height:fit-content}
  .rail ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:1.5px solid var(--line)}
  .rail li{position:relative;padding:10px 0;font:500 15px/1.2 var(--sans);color:var(--ink2);transition:color .3s}
  .rail li::before{content:"";position:absolute;left:-24.5px;top:13px;width:11px;height:11px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--sage400);transition:background .3s,box-shadow .3s,transform .3s}
  .rail li.on{color:var(--ink);font-weight:600}
  .rail li.on::before{background:var(--k,var(--moss600));box-shadow:none;transform:scale(1.25)}
  .rail .big{margin:0 0 18px;font:400 52px/1 var(--serif);letter-spacing:-.03em;color:var(--moss800);font-variant-numeric:tabular-nums}
}
.chapters{display:grid;gap:28px}
.ch{display:grid;gap:28px;align-items:center;padding:28px;border-radius:32px;background:var(--c);position:relative;overflow:hidden;isolation:isolate}
/* Diary ruling: faint lines and a margin rule, as on a page of the diary */
.ch::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,transparent 47px,color-mix(in srgb,var(--cm) 45%,transparent) 47px 48.5px,transparent 48.5px),
  repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--cd) 9%,transparent) 31px 32px);opacity:.9}
.ch::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.3}
@media(min-width:860px){.ch{grid-template-columns:1fr 1.1fr;gap:48px;padding:56px 56px 56px 80px;min-height:640px}}
.ch .when{font:400 clamp(48px,3vw + 26px,80px)/1 var(--serif);letter-spacing:-.03em;color:var(--cd);font-style:italic}
.ch .when small{display:block;margin-bottom:8px;font:600 12px/16px var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.ch h3{margin-top:20px;font-size:clamp(32px,1.8vw + 22px,52px);line-height:1.06;color:var(--cd)}
.ch .txt p:not(.when){margin-top:16px;font-size:18px;line-height:1.6;color:var(--cd);max-width:28em}
.ch .stage{position:relative;height:520px;container-type:inline-size}
.ch .stage .phone{position:absolute}
.stage .back{--w:min(230px,44cqi);left:4cqi;top:70px}
.stage .front{--w:min(280px,54cqi);right:4cqi;top:0;z-index:2}
.ch .cdr{margin-top:36px;width:150px;--ln:var(--cd);--sc:var(--cm);--f:rgba(255,255,255,.55);--sw:1.5}
.ch .cdr[viewBox="0 0 120 72"]{width:230px;--sw:1.3}
.stage .eve-dr{position:absolute;--ln:var(--cd);--sc:var(--cm);--f:rgba(255,255,255,.08);--sw:1.4}
.stage .front .swap{position:absolute;left:calc(var(--w)*.03);top:calc(var(--w)*.03);width:calc(var(--w)*.94);opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
.stage .front.covered .swap{opacity:1}
.ch .stage .phone{will-change:transform}
@media(max-width:859px){.ch .stage{height:440px}.ch::before{background:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--cd) 9%,transparent) 31px 32px)}.ch .cdr{width:96px}.ch .cdr[viewBox="0 0 120 72"]{width:150px}}

/* Evening: the postcard, on a night band when the switch is on */
.ch.eve{--c:var(--a5);--cd:var(--a5d);--cm:var(--a5m)}
.draft{position:absolute;z-index:3;right:0;bottom:24px;width:min(320px,62cqi);padding:20px;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.draft small{display:block;font:600 11px/14px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.draft .said{margin-top:8px;font:400 18px/1.35 var(--serif)}
.draft hr{border:0;border-top:1px solid var(--line);margin:14px 0 12px}
.draft .en{margin-top:6px;font-size:15px;line-height:1.45}
.draft .ev{margin-top:6px;font-weight:600;color:var(--moss600)}
.stage .pc{--w:min(270px,52cqi);left:2cqi;top:0}
.stage .eve-dr{left:auto;right:-2cqi;top:-10px;bottom:auto;width:min(170px,32cqi)}


/* AI: a full-width warm band. The chat plays out, then the result lands in Elodie. Two scenes rotate. */
.ai{margin-top:88px;padding:96px 0;background:#E6ECEF;position:relative;isolation:isolate;overflow:hidden}

.ai .head h2{color:var(--moss800)}
.ai .who-ai{display:flex;gap:8px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.ai .who-ai span{padding:7px 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font:600 14px/1 var(--sans);color:var(--ink)}
.scenes{display:flex;gap:8px;justify-content:center;margin-top:40px}
.scenes button{all:unset;cursor:pointer;position:relative;overflow:hidden;padding:12px 20px;border-radius:999px;font:600 15px/1 var(--sans);color:var(--a2d);background:rgba(255,255,255,.6)}
.scenes button.on{background:var(--a2)}
.scenes button i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--a2d)}
.aiflow{display:grid;justify-items:center;gap:32px;margin-top:40px}
@media(min-width:860px){.aiflow{grid-template-columns:auto auto;justify-content:center;align-items:start;gap:72px}}
.aiflow figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.aiflow figcaption{font-size:16px;color:var(--ink2)}
.aiflow .arrow{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--a2d);box-shadow:var(--shadow);rotate:90deg}
@media(min-width:860px){.aiflow .arrow{rotate:none}}
.aiflow .phone{--w:min(300px,74vw)}
.aiflow .cut{height:calc(min(300px,74vw)*1.62);overflow:hidden;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}
.chat{aspect-ratio:660/1429;border-radius:calc(var(--w)*.135);background:#F7F7F6;color:#1F1F1F;padding:0 calc(var(--w)*.06);font:400 calc(var(--w)*.047)/1.42 var(--sans);overflow:hidden;display:flex;flex-direction:column}
.chat .sb{display:flex;justify-content:space-between;height:calc(var(--w)*.14);align-items:center;padding:0 calc(var(--w)*.04);font-weight:600;font-size:calc(var(--w)*.05)}
.chat .you{margin:calc(var(--w)*.2) 0 0 auto;max-width:84%;padding:calc(var(--w)*.03) calc(var(--w)*.045);border-radius:calc(var(--w)*.06);background:#E6E6E3;min-height:1.42em}
.chat .tool{display:flex;align-items:center;gap:calc(var(--w)*.025);width:fit-content;margin-top:calc(var(--w)*.08);padding:calc(var(--w)*.02) calc(var(--w)*.04) calc(var(--w)*.02) calc(var(--w)*.025);border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);font-size:calc(var(--w)*.041);color:#4A4A48}
.chat .tool svg{width:calc(var(--w)*.055);height:calc(var(--w)*.055)}
.chat .tool b{font-weight:600}
.chat .bot{margin-top:calc(var(--w)*.05)}
.chat .compose{margin-top:auto;margin-bottom:calc(var(--w)*.08);height:calc(var(--w)*.125);border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.chat .tool,.chat .bot{opacity:0;translate:0 8px;transition:opacity .5s,translate .5s cubic-bezier(.2,.7,.3,1)}
.chat.t1 .tool,.chat.t2 .bot,.chat.t2 .tool{opacity:1;translate:0 0}
.result{position:relative}
.result img{transition:opacity .6s}
.result .land{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.result.done .land{opacity:1}
.ai .small{margin-top:36px;text-align:center;font-size:15px;color:var(--ink2)}

/* Also in Elodie: full-width tabs that rotate on a timer, the colour following the tab */
.tabs{margin-top:0;padding:96px 0;background:var(--c);transition:background-color .6s;position:relative;isolation:isolate}
.tabs::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(color-mix(in srgb,var(--cd) 7%,transparent) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,color-mix(in srgb,var(--cd) 7%,transparent) 1px,transparent 1px) 0 0/28px 28px}
.tabs .head h2{color:var(--cd);transition:color .6s}
.tabgrid{display:grid;gap:32px;margin-top:44px;align-items:center}
@media(min-width:860px){.tabgrid{grid-template-columns:1fr 1.2fr;gap:64px}}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tl button{all:unset;box-sizing:border-box;display:block;width:100%;padding:18px 20px;border-radius:18px;cursor:pointer;color:var(--cd);transition:background .3s}
.tl button:hover{background:rgba(255,255,255,.3)}
.tl button b{display:flex;align-items:center;gap:12px;font:500 24px/1.2 var(--serif)}
.tl button b .dr{width:44px;--sw:2.6;--ln:var(--cd);--f:rgba(255,255,255,.6)}
.tl button span{display:block;margin:8px 0 0 56px;font-size:16px;line-height:1.5}
.motion .tl button span{display:none}
.tl button .bar2{display:none;height:3px;margin:14px 0 0 56px;border-radius:9px;background:rgba(0,0,0,.08);overflow:hidden}
.tl button .bar2 i{display:block;height:100%;width:0;background:var(--cd)}
.tl .on button{background:rgba(255,255,255,.55)}
.motion .tl .on button span,.motion .tl .on button .bar2{display:block}
.shot{position:relative;height:620px;border-radius:32px;overflow:hidden;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.shot .phone{position:absolute;left:50%;top:48px;--w:min(330px,70%);translate:-50% 0;opacity:0;scale:.97;transition:opacity .5s,scale .7s cubic-bezier(.2,.7,.2,1)}
.shot .phone.on{opacity:1;scale:1}
.shot:hover .phone.on{scale:1.03}

/* Pricing and questions side by side */
.pq{display:grid;gap:56px}
.pq>*,.tabgrid>*,.ch>*,.aiflow>*{min-width:0}
@media(min-width:960px){.pq{grid-template-columns:1fr 1.2fr;gap:96px}}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.plan{padding:28px 22px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.plan b{display:block;font:500 40px/1.1 var(--serif);letter-spacing:-.02em;color:var(--moss800)}
.plan span{color:var(--ink2)}
.plan.main{box-shadow:inset 0 0 0 1.5px var(--moss800),var(--shadow)}
.note{margin-top:16px;color:var(--ink2)}
.qs{border-bottom:1px solid var(--line)}
.qs details{border-top:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;padding:20px 32px 20px 0;font-weight:600;position:relative}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg);opacity:.6;transition:transform .25s}
.qs details[open] summary::after{transform:translateY(4px) rotate(-135deg)}
.qs details p{padding:0 32px 20px 0;color:var(--ink2)}

/* Close: big type, left aligned, on the evening scene. It sharpens as it arrives. */
.close{margin-top:88px;position:relative;overflow:hidden;background:var(--night);color:var(--nightInk);isolation:isolate}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.6}
.close{background:var(--sage100);color:var(--moss800)}
.close-in{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:96px var(--gut) 0;position:relative}
.close h2{font-size:clamp(52px,6vw + 18px,132px);line-height:.94;letter-spacing:-.04em;max-width:9em}
.close h2 em{font-weight:400;display:block;opacity:.75}
.close .row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:36px}
.close .btn{background:var(--nightInk);color:var(--night)!important}
.close .btn{background:var(--moss800);color:#FAF7F2!important}
.close .nanny{color:inherit;opacity:.8}
.close .scene{position:relative;margin-top:40px;height:clamp(180px,24vw,340px)}
.close .scene .dr{position:absolute;bottom:0;--ln:var(--nightInk);--sc:#71826F;--f:rgba(255,255,255,.07);--fs:rgba(255,255,255,.07);--sw:.9}
.close .scene .dr{--ln:var(--moss600);--sc:var(--sage400);--f:rgba(255,255,255,.5);--fs:rgba(255,255,255,.5)}
.close .scene .s1{right:0;width:min(560px,60vw)}
.close .scene .s2{right:min(520px,56vw);width:min(240px,28vw);--sw:1.4}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:18px 0 30px;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);font-size:14px;opacity:.85}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a{color:inherit;text-decoration:none}

/* Reveal and draw on scroll */
.motion .rv{opacity:0;translate:0 28px;filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.motion .rv.in{opacity:1;translate:0 0;filter:none}
.motion svg.dr{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) var(--dl,0s)}
.motion svg.dr.in{stroke-dashoffset:0}
@property --bo{syntax:"<number>";inherits:true;initial-value:1}
.motion svg.dr{--bo:0;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) var(--dl,0s),--bo 1s calc(var(--dl,0s) + .9s)}
.motion svg.dr.in{--bo:1}
@media(prefers-reduced-motion:reduce){.track{animation:none}}
.ribbon:hover .track,.ribbon:focus-within .track{animation-play-state:paused}
.track .dup{display:contents}

/* Max, 6 Oct 2026: the hero, the ribbon, Also in Elodie and the close stay sage and cream. Warm accents carry the three cards and the day. */
.hero{--heroBg:#DCE3D8;--heroEdge:rgba(47,61,49,.22)}
.ribbon{--ribbon:#C9D3C4;--ribbonInk:#2F3D31}
.tabs{--a1:#E4EAE0;--a1d:#2F3D31;--a2:#DCE3D8;--a2d:#2F3D31;--a3:#E4EAE0;--a3d:#2F3D31;--a4:#DCE3D8;--a4d:#2F3D31;--a5:#E4EAE0;--a5d:#2F3D31}
.tabs .dr{--fx:rgba(143,166,143,.28)}


/* Keyboard focus */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moss800);outline-offset:3px;border-radius:12px}
.btn:focus-visible{border-radius:999px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* The footer sits outside main, on the closing band's sage */
footer.foot{display:block;position:relative;z-index:5;padding:0;border:0;opacity:1;background:var(--grain),var(--sage100);color:var(--moss800)}
footer.foot .close-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:18px 30px;font-size:14px}
footer.foot .close-in::before{content:"";flex-basis:100%;height:0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);margin-bottom:6px}

/* Phones: one rhythm, 48 px between sections and 64 px inside a full-width band. Last, so it wins over the band rules. */
@media(max-width:859px){.ai,.close{margin-top:48px}.ai,.tabs{padding:64px 0}.close-in{padding-top:64px}}
/* Phones: the postcard's words sit under the postcard, not over the chapter text; the tab screenshot box fits its phone */
@media(max-width:859px){.ch.eve .stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:20px}.ch.eve .stage .pc{position:relative;left:auto;top:auto;--w:min(250px,64cqi);height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}.ch.eve .draft{position:relative;right:auto;bottom:auto;width:100%}.ch.eve .eve-dr{display:none}.shot{height:500px}.shot .phone{top:28px}}