/* The home page (claude-prompts/2026-09-28/bevel-mock/index.html, approved
* 2026-09-28; round 2: claude-prompts/2026-09-28/007-bevel-round2-page.md).
* Loaded on the landing page and the feature pages (2026-10-16/006), after
* style.css.
*
* The mock's CSS, with three changes on the way in:
* - scoped under .home (the ), so nothing here can reach the header,
* the footer or another page; the mock's page root was class="dl", which
* is the site's download menu and is not reused;
* - left/right became logical properties wherever they lay things out, so
* /ar/ mirrors. Things drawn ON a screenshot keep physical left: the
* screenshot itself does not mirror;
* - no text-transform:uppercase anywhere (Turkish and Greek casing).
*
* Nothing here hides content: every reveal starts in JavaScript (home.js), so
* a reader without it gets the finished page. The one exception is decoration
* that only exists to be animated: the hero's scenes 2–7 (their screenshots
* and cards) stay hidden until home.js plays them.
*/
html.landing{scroll-behavior:auto;scroll-padding-top:90px}
html.landing body{background:#FBFAF6}
/* Lenis's own stylesheet, the parts that apply to a window scroller. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
.home{--paper:#FBFAF6;--card:#ffffff;--ink:#15271F;--ink2:#4D685B;--ink3:#7C9186;--line:rgba(21,39,31,.08);--forest:#04613C;--leaf:#18A06A;--mint:#CFEFC6;--mintT:#E8F6E2;--lake:#4F86B0;--lakeT:#E4EEF6;--honey:#E0A032;--honeyT:#FAEFD6;--clay:#D9714A;--clayT:#FBE6DC;--berry:#A9628F;--berryT:#F4E5EE;--night:#0D1B15;
display:block;position:relative;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:normal;-webkit-font-smoothing:antialiased}
.home img{display:block;max-width:100%}
.home a{color:inherit;text-decoration:none}
.home :is(h1,h2,h3){font-family:var(--sans);font-weight:700;margin:0;text-wrap:wrap}
.home p{color:inherit}
.home .wrap{width:min(1240px,calc(100% - 48px));max-width:none;margin:0 auto;padding-inline:0}
.home .h2{font-size:clamp(34px,4.6vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-align:center}
.home .sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink2);text-align:center;max-width:36ch;margin:18px auto 0}
.home .eyebrow{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;padding:6px 12px;border-radius:999px;background:var(--mintT);color:var(--forest)}
.home .eyebrow::before{content:none}
.home .eyebrow svg{width:14px;height:14px}
/* The web-app button (style.css) keeps its own ink: .home a would make it inherit. */
.home .web-btn,.home .web-btn:hover{color:#15271F}
/* On the home page (hero and final) it is a full pill, like the header's
"Download app"; the rows stretch it to the badges' height. */
.home .web-btn{border-radius:999px;padding-inline:18px 22px}
/* QR — fixed bottom corner, desktop only; home.js fades it out at the members */
.qr{position:fixed;inset-inline-end:22px;bottom:22px;z-index:25;display:flex;align-items:center;gap:14px;padding:12px;padding-inline-end:18px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(21,39,31,.08);border-radius:20px;box-shadow:0 18px 40px -16px rgba(21,39,31,.35);color:#15271F;font-family:var(--sans)}
.qr img{width:74px;height:74px;border-radius:10px}
.qr b{display:block;font-size:15px;letter-spacing:-.01em;line-height:normal}
.qr span{display:block;font-size:12.5px;color:#4D685B;line-height:1.35;margin-top:3px;max-width:150px}
/* ---------- device frames (007 D2: CSS, no Apple bezels) ----------
* The phone: outer radius 16 % of its width, an 11 px frame at 300 px that
* scales with it (3.667 %, as container units, because a padding % would be
* the parent's width), a 1 px darker outer line, a black bezel inside the
* metal, and the screen radius = outer − frame (12.33 % of the width). */
.home .phone{position:relative;width:300px;aspect-ratio:640/1390;container-type:inline-size;border-radius:16%/7.367%;background:linear-gradient(145deg,#f4f5f7,#c9ccd2 40%,#eef0f2 60%,#aeb2b9);box-shadow:0 0 0 1px rgba(62,66,72,.55),0 50px 90px -30px rgba(21,39,31,.45),0 24px 40px -24px rgba(21,39,31,.3)}
.home .phone .scr{position:absolute;inset:3.667cqw;border-radius:12.33cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 2.2cqw #0c0e0d}
.home .phone .scr img{width:100%;height:100%;object-fit:cover}
/* The watch (round 3): a neutral premium smartwatch, not a copy of anyone's.
A rounded-square metal case lit from the top left, a thin dark bezel ring
round the black screen, one small round side button, and a matte band in
the brand's dark green-grey that flares into the case at the lugs, with
stitching down both edges. Same size (158 px, 0.83 : 1), tilt and place. */
.home .watch{position:absolute;width:158px;inset-inline-start:calc(50% + 70px);top:290px;z-index:4;filter:drop-shadow(0 22px 20px rgba(21,39,31,.26)) drop-shadow(0 5px 6px rgba(21,39,31,.18))}
.home .watch .band{position:absolute;left:15%;right:15%;height:64%;background:linear-gradient(90deg,#26332e,#34443d 30%,#3a4a43 50%,#34443d 70%,#26332e)}
.home .watch .band.t{top:-50%;border-radius:18% 18% 0 0/12% 12% 0 0}
.home .watch .band.b{bottom:-50%;border-radius:0 0 18% 18%/0 0 12% 12%}
/* stitching: two fine dashed lines inside the band's edges */
.home .watch .band::before{content:"";position:absolute;inset:7% 9%;border-inline:1px dashed rgba(233,240,236,.2)}
.home .watch .band.t::before{bottom:24%;border-radius:14% 14% 0 0/10% 10% 0 0}
.home .watch .band.b::before{top:24%;border-radius:0 0 14% 14%/0 0 10% 10%}
/* the lugs: the band widens into the case */
.home .watch .band::after{content:"";position:absolute;left:-12%;right:-12%;height:26%;background:inherit}
.home .watch .band.t::after{bottom:0;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.home .watch .band.b::after{top:0;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
.home .watch .case{position:relative;aspect-ratio:.83;display:flex;border-radius:27%/22.4%;padding:6.5%;background:radial-gradient(130% 110% at 18% 8%,#fdfdfe 0%,#dfe2e6 26%,#b5bac1 58%,#8a9098 100%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.9),inset -2px -3px 5px rgba(60,66,74,.35),0 0 0 1px rgba(62,66,72,.4)}
.home .watch .crown{position:absolute;right:-5%;top:28%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4f5f7,#aab0b7 60%,#7d838b);box-shadow:0 0 0 .5px rgba(62,66,72,.5)}
.home .watch .face{flex:1;min-width:0;border-radius:22%/18%;background:#000;box-shadow:0 0 0 3px #23272b,0 0 0 4px rgba(255,255,255,.35);color:#fff;padding:16px 13px 12px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.home .watch .face .t1{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#9FD9B8}
.home .watch .face .t1 span:last-child{color:#fff}
.home .watch .face .ev{background:#15271F;border-radius:14px;padding:9px 10px;border-inline-start:4px solid #4F86B0}
.home .watch .face .ev b{display:block;font-size:14px;letter-spacing:-.01em}
.home .watch .face .ev span{font-size:11.5px;color:#B8C7BF}
.home .watch .face .ev2{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#B8C7BF;padding:0 2px}
.home .watch .face .ev2 i{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none}
/* ---------- hero ---------- */
.home .hero{position:relative;padding-top:56px;overflow:hidden}
.home .aurora{position:absolute;inset:0;pointer-events:none;z-index:0}
.home .aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.home .aurora .a1{width:46vw;height:30vw;left:-8vw;top:34%;background:#BfE6C8;animation-duration:19s}
.home .aurora .a2{width:40vw;height:26vw;right:-6vw;top:30%;background:#CFE0F1;animation-duration:23s}
.home .aurora .a3{width:30vw;height:18vw;left:30%;top:58%;background:#F9E2B6;animation-duration:17s}
.home .aurora .a4{width:26vw;height:18vw;left:8%;top:62%;background:#F3D5E6;animation-duration:21s}
.home .aurora .a5{width:24vw;height:16vw;right:12%;top:60%;background:#F7D4C4;animation-duration:25s}
.home .aurora .band{position:absolute;left:-10%;right:-10%;top:52%;height:34%;border-radius:50%;background:linear-gradient(90deg,rgba(24,160,106,.28),rgba(79,134,176,.3),rgba(224,160,50,.28),rgba(169,98,143,.26),rgba(217,113,74,.26),rgba(24,160,106,.28));filter:blur(40px);opacity:.75;animation:bandmove 14s linear infinite;background-size:200% 100%}
.home .aurora .fade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to bottom,rgba(251,250,246,0),var(--paper))}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,-3vw,0) scale(1.12)}}
@keyframes bandmove{from{background-position:0% 0}to{background-position:200% 0}}
.home .hero-copy{position:relative;z-index:2;text-align:center}
.home .hero h1{font-size:clamp(46px,6.2vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.96}
.home .hero h1 .w{display:inline-block}
.home .hero .lead{font-size:clamp(17px,1.55vw,21px);line-height:1.5;color:var(--ink2);max-width:40ch;margin:22px auto 0}
/* The three notes sit above the headline again (round 4). */
.home .pills{display:flex;justify-content:center;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.home .pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.home .pill svg{width:14px;height:14px;color:var(--leaf)}
/* The three buttons, one height: the badges set it, the web button follows. */
.home .hero-cta{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.home .hero-cta .web-btn{background:transparent}
.home .hero-cta .web-btn:hover{background:rgba(255,255,255,.55)}
.home .hero-cta .store-soon{text-align:center}
/* The rating row: five stars, the last filled by the fraction, then the line. */
.home .rating{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.home .rating:hover .rt{color:var(--ink)}
.home .stars{display:inline-flex;gap:2px}
.home .star{position:relative;width:18px;height:18px;color:#D5DBD3}
.home .star svg{display:block;width:18px;height:18px}
.home .star .sf{position:absolute;inset-block:0;inset-inline-start:0;overflow:hidden;color:#E0A032}
/* The stage holds the phone and the watch whole, at every width, so the
"Works with" row always starts below them. */
.home .stage{position:relative;z-index:3;height:656px;width:min(1180px,100%);margin:40px auto 0}
.home .stage .phone{position:absolute;left:50%;top:0;margin-left:-150px}
.home .hphone .scr .hs{position:absolute;inset:0}
.home .hphone .scr .hs:not([data-scene="0"]){visibility:hidden}
.home .hwatch{--tilt:8deg;transform:rotate(var(--tilt))}
[dir="rtl"] .home .hwatch{--tilt:-8deg}
/* the floating Daili card */
.home .fc{position:absolute;z-index:5;will-change:transform}
.home .fc-in{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:11px;padding-inline-end:14px;box-shadow:0 18px 38px -14px rgba(21,39,31,.28),0 2px 6px rgba(21,39,31,.06);min-width:212px}
.home .ico{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.home .ico svg{width:19px;height:19px}
.home .fc-tx{flex:1;min-width:0}
.home .fc-tx b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;position:relative;width:max-content;max-width:100%}
.home .fc-tx b::after{content:"";position:absolute;inset-inline-start:0;top:55%;height:1.5px;width:0;background:var(--ink3);transition:width .45s cubic-bezier(.6,0,.2,1)}
.home .fc-tx span{display:block;font-size:12.5px;color:var(--ink2);white-space:nowrap;margin-top:1px}
.home .ck{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #9DB5A7;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,transform .3s}
.home .ck svg{width:13px;height:13px;color:#fff;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s .1s}
.home .fc.done .ck{background:var(--forest);border-color:var(--forest);transform:scale(1.08)}
.home .fc.done .ck svg{stroke-dashoffset:0}
.home .fc.done .fc-tx b{color:var(--ink3)}
.home .fc.done .fc-tx b::after{width:100%}
.home .c-lake{background:var(--lakeT);color:var(--lake)}
.home .c-leaf{background:var(--mintT);color:var(--forest)}
.home .c-honey{background:var(--honeyT);color:#B07512}
.home .c-clay{background:var(--clayT);color:#B8532C}
.home .c-berry{background:var(--berryT);color:var(--berry)}
/* The hero's scene cards, each overlapping the phone's edge by 24 px: card 1
top inline-start, card 2 middle inline-end, card 3 lower inline-start. */
.home .hcard[data-k="0"]{inset-inline-end:calc(50% + 126px);top:80px}
.home .hcard[data-k="1"]{inset-inline-start:calc(50% + 126px);top:150px}
.home .hcard[data-k="2"]{inset-inline-end:calc(50% + 126px);top:420px}
.home .hcard:not([data-scene="0"]){visibility:hidden}
/* works with */
.home .works{position:relative;z-index:3;padding:48px 0 20px;text-align:center}
.home .works p{font-size:14px;color:var(--ink3);font-weight:600}
/* One flowing row (round 4): the items sit inline and centred in 90 % of the
section, and whatever does not fit wraps to the next row by itself. */
.home .works-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px;max-width:90%;margin:16px auto 0}
.home .wk{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.01em;color:#5f6f67}
.home .wk svg{width:22px;height:22px;flex:none}
/* ---------- members ---------- */
.home .members{padding:120px 0 40px}
.home .mbadges{display:flex;justify-content:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.home .badge{display:flex;align-items:center;gap:10px;padding:8px;padding-inline-end:14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.home .badge .ico{width:32px;height:32px;border-radius:9px}
.home .badge b{display:block;font-size:13.5px}
.home .badge span{display:block;font-size:12px;color:var(--ink3)}
.home .marq{position:relative;overflow:hidden;margin-top:54px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* Two identical sets, each carrying the gap after itself, so moving the
track by exactly half is one set and the loop has no seam. */
.home .marq-track{display:flex;width:max-content;animation:marq 70s linear infinite}
.home .marq-set{display:flex;gap:18px;padding-inline-end:18px}
.home .marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marq-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir="rtl"] .home .marq-track{animation-name:marq-rtl}
.home .mcard{position:relative;width:250px;height:410px;border-radius:24px;overflow:hidden;flex:none;background:#ddd}
.home .mcard img.ph{width:100%;height:100%;object-fit:cover}
/* A soft shade at the top so the white caption reads on every photo (round
3); positioned before .cap and .ov, so it paints under both. The prompt's
.38 → 0 at 40 % left the caption at 2.1:1 on p_balcony/p_cake; this is the
lightest profile measured to reach 4.5:1 (worst photo 5.2:1, 95th-percentile
pixel behind the caption, 250 and 200 px cards). */
.home .mcard:not(.tile)::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.55) 16%,rgba(0,0,0,0) 45%);pointer-events:none}
.home .mcard .ov{position:absolute;left:12px;right:12px;bottom:12px}
.home .mcard .fc{position:relative}
.home .mcard .ov .fc-in{min-width:0;width:100%;padding:10px;padding-inline-end:12px}
.home .mcard .cap{position:absolute;left:14px;top:14px;right:14px;font-size:15px;font-weight:700;line-height:1.2;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45);letter-spacing:-.01em}
.home .mcard.tile{display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.home .mcard.tile b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.home .mcard.tile .big{font-size:68px;font-weight:700;letter-spacing:-.05em;line-height:1}
.home .mcard.tile img{width:120px}
/* ---------- start the day: every feature in one row (2026-10-16/005) ---------- */
/* 120 px (72 on a phone) after the calendars card before Daili Plus (round 3). */
.home .day{padding:130px 0 120px}
/* The row runs edge to edge; its first card lines up with .wrap (the track's
padding is .wrap's margin). Without JavaScript, on a phone, on a touch
screen or with reduced motion it is a native swipe row that snaps to each
card. home.js turns it to .pin on a computer: the viewport clips, the track
moves by transform while the page scrolls. The counter, arrows and progress
bar are invisible until home.js drives them (.on) but keep their place, so
nothing shifts. */
.home .frow{margin-top:56px}
.home .frow-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.home .frow-count{margin:0;font-size:15px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.home .frow-nav{display:flex;gap:10px}
.home .frow-btn{width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px -10px rgba(21,39,31,.35);transition:background .2s,opacity .2s}
.home .frow-btn:hover{background:var(--mintT)}
.home .frow-btn:disabled{opacity:.35;cursor:default;background:#fff}
.home .frow-btn svg{width:20px;height:20px}
/* One arrow glyph pointing to the inline end; "previous" turns it round. */
.home .frow-btn.prev svg{transform:scaleX(-1)}
[dir="rtl"] .home .frow-btn svg{transform:scaleX(-1)}
[dir="rtl"] .home .frow-btn.prev svg{transform:none}
.home .frow:not(.on) :is(.frow-head,.frow-prog){visibility:hidden}
.home .frow-vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100% - 1240px)/2));scrollbar-width:none;overscroll-behavior-x:contain}
.home .frow-vp::-webkit-scrollbar{display:none}
.home .frow-track{display:flex;gap:20px;width:max-content;padding-inline:max(24px,calc((100% - 1240px)/2))}
.home .frow.pin .frow-vp{overflow:clip;scroll-snap-type:none}
.home .frow.pin .frow-track{will-change:transform}
.home .frow-prog{margin-top:26px;height:3px;border-radius:3px;background:rgba(21,39,31,.1);overflow:hidden}
.home .frow-prog i{display:block;height:100%;background:var(--forest);border-radius:3px;transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .home .frow-prog i{transform-origin:100% 50%}
.home .fcard{position:relative;flex:none;width:400px;scroll-snap-align:start;border-radius:30px;overflow:hidden;height:640px;padding:36px 34px 0;display:flex;flex-direction:column}
.home .fcard:focus-visible{outline:3px solid var(--forest);outline-offset:-3px}
.home .fcard h3{font-size:34px;font-weight:700;letter-spacing:-.035em}
/* The "New" badge, after the feature name while HOME_FEATURES.newUntil lasts. */
.home .fnew{display:inline-block;vertical-align:middle;margin-inline-start:6px;padding:4px 10px;border-radius:999px;background:var(--forest);color:#fff;font-size:13px;font-weight:700;letter-spacing:0;line-height:1.2;transform:translateY(-3px)}
.home .fcard p{font-size:16.5px;line-height:1.5;color:var(--ink2);margin-top:10px;max-width:30ch}
/* The phone starts 32 px under the paragraph; its widget is the phone's width
plus 28 px on each side, centred on it, so it overhangs both edges. */
.home .dv{position:relative;flex:none;width:270px;margin:32px auto 0}
.home .dv .phone{width:270px}
.home .dv .fc{left:-28px;right:-28px;top:36%}
.home .dv .fc-in{min-width:0;padding:14px;padding-inline-end:16px;gap:13px;border-radius:20px;box-shadow:0 30px 60px -18px rgba(21,39,31,.45),0 4px 10px rgba(21,39,31,.08)}
.home .dv .fc-tx b{font-size:16px;white-space:normal;line-height:1.25}
.home .dv .fc-tx span{font-size:13.5px;white-space:normal;line-height:1.3;margin-top:2px}
.home .dv .ico{width:40px;height:40px;border-radius:12px}
.home .dv .ico svg{width:21px;height:21px}
.home .dv .ck{width:26px;height:26px}
/* The habits widget: centred on the screenshot's own energy card (the inline
top is computed in build.mjs from HABITS_ENERGY), and covering it whole. */
.home .dv .energy-w{transform:translateY(-50%)}
.home .energy{flex-direction:column;align-items:stretch;gap:10px}
.home .energy .en-top{display:flex;align-items:center;gap:12px}
.home .energy .en-top img{width:40px;height:40px;flex:none}
.home .energy .en-bar{height:9px;border-radius:9px;background:#EDE7D6;overflow:hidden}
.home .energy .bar{height:100%;width:85%;border-radius:9px;background:linear-gradient(90deg,#E0A032,#18A06A)}
.home .g-lake{background:linear-gradient(180deg,#E3EEF7 0%,#F2F7FB 100%)}
.home .g-leaf{background:linear-gradient(180deg,#E3F4DE 0%,#F3FAF0 100%)}
.home .g-honey{background:linear-gradient(180deg,#FAEDCF 0%,#FDF7EA 100%)}
.home .g-clay{background:linear-gradient(135deg,#FBE3D7 0%,#FDF3EE 100%)}
.home .g-berry{background:linear-gradient(180deg,#F3E2EC 0%,#FBF4F8 100%)}
.home .wide{position:relative;margin-top:20px;border-radius:30px;overflow:hidden;height:640px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
/* The text column fades the turning orbit out, so no tile ever crosses a word. */
.home .wide .tx-end{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-inline:40px 72px;position:relative;z-index:7;background:linear-gradient(to right,rgba(236,243,249,0),rgba(236,243,249,.94) 16%)}
[dir="rtl"] .home .wide .tx-end{background:linear-gradient(to left,rgba(236,243,249,0),rgba(236,243,249,.94) 16%)}
.home .wide h3{max-width:12ch;font-size:clamp(38px,4vw,58px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.home .wide p{font-size:18px;line-height:1.5;color:var(--ink2);margin-top:16px;max-width:34ch}
.home .wide .vis{position:relative;height:100%}
.home .wide .cal-phone{position:absolute;inset-inline-start:50%;margin-inline-start:-140px;width:280px;top:70px;z-index:3}
/* the calendars orbit: three rings at equal steps, turning by itself once in
90 s; the tiles turn back, so they stay upright. No scroll effect. */
.home #calendars .vis::before{content:"";position:absolute;left:50%;top:50%;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.home .orbit{position:absolute;left:50%;top:50%;animation:orbit 90s linear infinite}
.home .orbit .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid rgba(79,134,176,.18)}
.home .orbit .tile{position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:20px;background:#fff;box-shadow:0 14px 30px -12px rgba(21,39,31,.3);display:flex;align-items:center;justify-content:center;animation:orbit 90s linear infinite reverse}
.home .orbit .tile svg{width:36px;height:36px}
.home .tile-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:rotate(var(--r))}
@keyframes orbit{to{transform:rotate(360deg)}}
.home .cal-cards{position:absolute;z-index:6;inset-inline-start:5%;top:380px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.home .cal-cards .fc{position:relative}
.home .ico-acal{background:none}
.home .ico-acal svg{width:34px;height:34px}
/* ---------- Daili Plus (dark) ---------- */
/* 120 px (72 on a phone) of night after the Gemini line (round 3). */
.home .intel{position:relative;background:var(--night);color:#fff;padding:120px 0 120px;overflow:hidden}
.home .spot{position:absolute;left:50%;top:-80px;width:900px;height:600px;margin-left:-450px;background:radial-gradient(ellipse at 50% 30%,rgba(207,239,198,.28),rgba(24,160,106,.08) 40%,transparent 70%);pointer-events:none}
.home .avs{position:relative;height:210px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.home .avs-track{display:flex;gap:44px;width:max-content;position:absolute;left:0;top:20px;direction:ltr}
.home .av{display:flex;flex-direction:column;align-items:center;gap:12px;width:112px;will-change:transform,opacity}
.home .av .ring-av{width:100px;height:100px;border-radius:50%;padding:4px;background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.04));box-shadow:0 20px 40px -18px rgba(0,0,0,.8)}
.home .av .ring-av img{width:100%;height:100%;border-radius:50%;background:#1d3128}
.home .av .nm{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);white-space:nowrap}
.home .av.on .nm{background:#fff;color:var(--ink)}
.home .intel-head{text-align:center}
.home .intel-head .h2{margin-top:18px}
.home .intel .h2 .mute{color:rgba(255,255,255,.45)}
.home .intel .sub{color:rgba(255,255,255,.62)}
.home .intel .eyebrow{background:rgba(207,239,198,.12);color:var(--mint)}
.home .stack{margin-top:70px;position:relative}
/* Three cards that scroll up one after the other, 40 px of night between. */
.home .icard{position:relative;height:min(760px,88vh);min-height:620px;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:40px;border:1px solid rgba(255,255,255,.14)}
.home .icard .tx{padding-inline:70px 40px;color:var(--ink);position:relative;z-index:7}
.home .icard h3{max-width:11ch;font-size:clamp(36px,3.8vw,54px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.home .icard p{font-size:18px;line-height:1.5;color:var(--ink2);margin-top:14px;max-width:32ch}
.home .icard .vis{position:relative;height:100%}
.home .ifix{position:absolute;width:300px;top:60px;inset-inline-start:50%;margin-inline-start:-130px}
.home .ifix .phone{width:300px}
/* bevel.health's trick (home.js adds .fx on a wide screen without reduced
motion): every card's phone is fixed at one spot in the viewport, and each
card clips its own, so the phone looks still while the cards pass behind
it. .fx-on only while the section is on screen, so a fixed phone can never
show over another section. */
.home .intel.fx .icard{clip-path:inset(0 round 34px);overflow:clip}
.home .intel.fx .ifix{position:fixed;top:50%;left:calc(50vw + min(1240px,100vw - 48px) / 4);margin:0;transform:translate(-50%,-50%);visibility:hidden}
[dir="rtl"] .home .intel.fx .ifix{left:calc(50vw - min(1240px,100vw - 48px) / 4)}
.home .intel.fx.fx-on .ifix{visibility:visible}
.home .i-berry{background:linear-gradient(135deg,#F1DDEA,#E9D6F0 60%,#F6EAF2)}
.home .i-clay{background:linear-gradient(135deg,#FBDCCB,#F7E5DA 60%,#FCEFE8)}
.home .i-leaf{background:linear-gradient(135deg,#D8EFD2,#E2F3EA 60%,#F0F8EC)}
/* All three cards: one width, one inline-start offset from the phone (round
3); only their top differs (build.mjs). */
.home .ai-card{position:absolute;z-index:6;width:300px;inset-inline-start:-40%;box-sizing:border-box;background:#fff;border-radius:22px;padding:14px;box-shadow:0 28px 60px -20px rgba(21,39,31,.4);color:var(--ink)}
.home .ai-card .hd{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.home .ai-card .hd svg{width:16px;height:16px;color:var(--leaf)}
.home .ai-card .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EEF1EA}
.home .ai-card .hd+.row{border-top:0}
.home .ai-card .row b{font-size:14px;display:block}
.home .ai-card .row span{font-size:12px;color:var(--ink2)}
.home .ai-card .ttl{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:8px 0 6px}
.home .ai-card .add{display:flex;justify-content:center;margin-top:8px;background:var(--forest);color:#fff;border-radius:12px;font-size:13px;font-weight:600;padding:10px}
.home .ai-card .vid{height:120px;border-radius:14px;margin:8px 0 10px;background:linear-gradient(135deg,#3b2a1f,#8b4a2b 50%,#e0a032);display:flex;align-items:center;justify-content:center}
.home .ai-card .vid span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center}
.home .ai-card .vid svg{width:18px;height:18px;color:var(--ink);margin-left:3px}
.home .fine{font-size:13.5px;color:rgba(255,255,255,.5);text-align:center;margin-top:10px}
/* ---------- workflows ---------- */
.home .flow{padding:150px 0 40px}
.home .flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.home .flow .h2{text-align:start}
.home .flow .sub{text-align:start;margin-inline-start:0}
.home .fl-list{display:flex;flex-direction:column;gap:12px;margin-top:40px;max-width:520px}
.home .fl{display:block;width:100%;text-align:start;border:0;border-radius:22px;padding:18px 20px;background:#F1F3EE;font:inherit;color:inherit;cursor:pointer;transition:background .35s,box-shadow .35s}
.home .fl .tp{display:flex;align-items:center;gap:14px}
.home .fl .ico{width:40px;height:40px}
.home .fl b{flex:1;font-size:18px;font-weight:600;letter-spacing:-.015em}
.home .fl .desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.6,0,.2,1)}
.home .fl .desc span{overflow:hidden;font-size:15.5px;line-height:1.5;color:var(--ink2);padding-inline-start:54px}
.home .fl .prog{width:26px;height:26px;flex:none}
.home .fl .prog circle{fill:none;stroke-width:3}
.home .fl .prog .bg{stroke:rgba(21,39,31,.12)}
.home .fl .prog .fg{stroke:var(--forest);stroke-dasharray:69.1;stroke-dashoffset:69.1;transform:rotate(-90deg);transform-origin:50% 50%}
.home .fl.on{background:#fff;box-shadow:0 18px 40px -20px rgba(21,39,31,.3)}
.home .fl.on .desc{grid-template-rows:1fr}
.home .fl.on .desc span{padding-top:8px}
.home .fl.on .prog .fg{animation:ring 6s linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.home .flow-vis{position:relative;height:720px}
/* The tint is 70 % of the phone's height, centred on it: the phone (top 40,
652 tall) sticks out above and below. */
.home .flow-vis .bgc{position:absolute;inset-inline:0;top:138px;height:456px;border-radius:40px;transition:background .6s}
.home .flow-vis .phone{position:absolute;left:50%;top:40px;width:300px;margin-left:-150px}
.home .flow-vis .scr .sx{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.home .flow-vis .scr .sx.on{opacity:1}
/* A clip fills the screen like a screenshot (590 × 1278, their shape; its status bar rows are blanked). */
.home .flow-vis .scr video.sx{width:100%;height:100%;object-fit:cover;object-position:50% 0;background:#F9F6F3}
/* A clip step (home.js): the ring waits while the clip loads or stalls and
runs for the clip's own length; the toast comes the moment the clip ends. */
.home .fl.on.wait .prog .fg{animation-play-state:paused}
.home .toast.go.now,.home .jump.go.now{animation-delay:0s}
.home .tap{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--forest);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3)}
.home .tap svg{width:15px;height:15px;color:#fff}
.home .tap::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(4,97,60,.4);opacity:0}
.home .tap.go{animation:tapin .5s 1.2s cubic-bezier(.3,1.6,.5,1) forwards}
.home .tap.go::before{animation:ripple 1s 1.1s ease-out}
@keyframes tapin{to{opacity:1;transform:scale(1)}}
@keyframes ripple{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.home .pillev{position:absolute;height:5.2%;border-radius:4px;background:#4F86B0;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;padding:0 5px;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(-30px)}
.home .pillev.go{animation:drop .6s 1.1s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes drop{to{opacity:1;transform:none}}
.home .toast{position:absolute;z-index:8;left:50%;top:560px;opacity:0;transform:translate(-10%,30px)}
.home .toast.go{animation:toast .7s 2.1s cubic-bezier(.2,1.2,.4,1) forwards}
@keyframes toast{to{opacity:1;transform:translate(-10%,0)}}
.home .jump{position:absolute;width:120px;inset-inline-end:-30px;top:120px;opacity:0;transform:translateY(40px) scale(.8);z-index:7}
.home .jump.go{animation:jump 1s 2.2s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes jump{to{opacity:1;transform:none}}
/* ---------- on every screen ---------- */
/* Row 1: watch · widgets · browser (2); row 2: tablet (2) · phones (2). */
.home .screens{padding:130px 0 20px}
.home .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
.home .bx{position:relative;border-radius:28px;overflow:hidden;height:470px;padding:30px 28px}
.home .bx h3{font-size:24px;font-weight:700;letter-spacing:-.025em}
.home .bx p{font-size:15px;line-height:1.45;color:var(--ink2);margin-top:8px}
.home .bx.span2{grid-column:span 2}
.home .bx-low{height:460px}
.home .bx-watch{inset-inline-start:50%;margin-inline-start:-79px;top:230px;transform:scale(.95)}
/* The home-screen widgets, after the app's light variants (Swift colours:
ink #1C3B2F, muted #4D685B, faint #5A7568, leaf #18A06A, forest #04613C,
box border #9DB5A7, mint #E6F7E0, energy track #C9E8BF, weekday #C64B33). */
.home .wgrid{position:absolute;left:18px;right:18px;bottom:22px;max-width:280px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
.home .wgt{background:#fff;border-radius:22px;box-shadow:0 16px 32px -16px rgba(21,39,31,.38),0 1px 3px rgba(21,39,31,.06);padding:12px;color:#1C3B2F;overflow:hidden;line-height:1.2;min-width:0}
.home .wgt-s{aspect-ratio:1;display:flex;flex-direction:column}
.home .wgt-m{grid-column:span 2;display:flex;gap:10px;padding:10px}
.home .wn-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4px}
.home .wn-day{display:block;font-size:10.5px;font-weight:600;color:#C64B33;white-space:nowrap}
.home .wn-num{display:block;font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.home .wn-add{flex:none;width:22px;height:22px;border-radius:50%;background:#04613C;color:#fff;display:flex;align-items:center;justify-content:center}
.home .wn-add svg{width:13px;height:13px}
.home .wn-ev{display:flex;gap:6px;margin-top:auto;min-width:0}
.home .wn-ev+.wn-ev{margin-top:5px}
.home .wn-ev i{flex:none;width:3px;border-radius:2px}
.home .wn-ev div{min-width:0}
.home .wn-ev b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .wn-ev span{display:block;font-size:10px;color:#5A7568;margin-top:1px}
.home .ws-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;max-width:100%;font-size:10.5px;font-weight:600;color:#04613C;background:rgba(4,97,60,.14);border-radius:999px;padding:3px 8px;white-space:nowrap;overflow:hidden}
.home .ws-chip svg{width:11px;height:11px;flex:none}
.home .ws-n{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .ws-row{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:6px;min-width:0}
.home .ws-n+.ws-row{margin-top:auto}
.home .ws-row i{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid #9DB5A7}
.home .ws-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .wh-minzi{flex:none;width:34%;background:#E6F7E0;border-radius:14px;padding:8px 7px;display:flex;flex-direction:column;align-items:center;gap:4px}
.home .wh-minzi img{width:62%;margin:auto 0}
.home .wh-bar{display:block;width:100%;height:4px;border-radius:9px;background:#C9E8BF;overflow:hidden}
.home .wh-bar i{display:block;height:100%;border-radius:9px;background:#18A06A}
.home .wh-en{font-size:9px;font-weight:600;color:#4D685B;white-space:nowrap}
.home .wh-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.home .wh-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.home .wh-head b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .wh-head span{font-size:10.5px;font-weight:600;color:#4D685B}
.home .wh-row{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0}
.home .wh-ring{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #9DB5A7;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:600;color:#4D685B;letter-spacing:-.02em}
.home .wh-ring.done{background:#18A06A;border-color:#18A06A;color:#fff}
.home .wh-ring svg{width:11px;height:11px}
.home .wh-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .wh-ring.done+.wh-name{color:#4D685B}
.home .wh-av{flex:none;width:16px;height:16px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.home .browser{position:absolute;inset-inline:28px -60px;bottom:-10px;height:300px;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 30px 60px -20px rgba(21,39,31,.4);overflow:hidden}
.home .browser .bar{height:30px;background:#F1F3EE;display:flex;align-items:center;gap:6px;padding:0 12px;direction:ltr}
.home .browser .bar i{width:10px;height:10px;border-radius:50%;background:#D9DED6}
.home .browser .bar span{margin-left:16px;font-size:11.5px;color:var(--ink3);background:#fff;padding:3px 14px;border-radius:6px}
.home .browser img{width:100%;height:auto}
/* Our own landscape tablet (round 4): a thin, even 8 px bezel, 22 px outside
and 14 px screen corners, a 1 px lighter outer edge, a camera dot in the top
bezel and a soft floor shadow. It sits in the flow under the text, 24 px
from the box's sides, and runs past the box's bottom, which clips it. The
screenshot fills the screen from its top, no letterbox. */
.home .tablet{position:relative;margin:26px -4px 0;box-sizing:border-box;background:#1b1e1d;border-radius:22px;padding:8px;box-shadow:0 0 0 1px #4a514d,0 40px 60px -30px rgba(21,39,31,.5),0 12px 22px -12px rgba(21,39,31,.3)}
.home .tablet::before{content:"";position:absolute;left:50%;top:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#56625e,#0d0f0e 70%)}
.home .tab-scr{border-radius:14px;overflow:hidden;aspect-ratio:3/2;background:#fff}
.home .tab-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* On a narrow desktop (1101-1250 px) the device would end inside its box: a
minimum screen height keeps it running past the bottom edge. */
@media (min-width:1101px){.home .tab-scr{min-height:360px}}
.home .phones{position:absolute;inset-inline-end:30px;bottom:-120px;display:flex;gap:16px}
.home .phones .phone{width:190px}
.home .phones .tilt-a{transform:rotate(-6deg)}
.home .phones .tilt-b{transform:rotate(5deg) translateY(-30px)}
/* ---------- privacy ---------- */
.home .priv{padding:130px 0 20px}
.home .vault{position:relative;border-radius:36px;overflow:hidden;height:680px;background:radial-gradient(120% 90% at 50% 45%,#16261F 0%,#0D1B15 55%,#0A1510 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.home .vault::before,.home .vault::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.55}
.home .vault::before{left:-220px;bottom:-260px;background:#18A06A}
.home .vault::after{right:-240px;top:-280px;background:#4F86B0;opacity:.35}
/* The glass lock stays in the background: never above .18 (round 3). */
.home .lock{position:absolute;left:50%;top:50%;width:440px;margin:-300px 0 0 -220px;opacity:.18}
.home .vault .h2{position:relative;z-index:2}
.home .vault .sub{position:relative;z-index:2;color:rgba(255,255,255,.7)}
.home .glass{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px;max-width:760px}
.home .glass span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.home .glass svg{width:16px;height:16px;color:var(--mint);flex:none}
/* ---------- care ---------- */
.home .care{padding:140px 0 0;overflow:hidden}
.home .mosaic{display:flex;justify-content:center;gap:14px;height:560px;align-items:flex-start}
.home .mcol{display:flex;flex-direction:column;gap:14px;width:150px;flex:none}
.home .mcol div{border-radius:22px;overflow:hidden;background:#e5e1d8}
.home .mcol img{width:100%;height:100%;object-fit:cover}
.home .care-head{margin-top:30px}
/* ---------- reviews (only with 3+ real ones) ---------- */
.home .revs{padding:30px 0 40px}
.home .revs .marq{margin-top:0}
.home .marq-slow{animation-duration:80s}
.home .rv{flex:none;width:340px;background:#F3F4EF;border-radius:22px;padding:22px 22px 24px;position:relative}
.home .rv .st{display:flex;gap:2px;color:#E0A032}
.home .rv .st .off{color:#D5DBD3}
.home .rv .st span{display:flex}
.home .rv .st svg{width:16px;height:16px}
.home .rv b{display:block;font-size:16px;margin-top:12px;letter-spacing:-.01em}
.home .rv .who{font-size:12.5px;color:var(--ink3);margin-top:3px}
.home .rv p{font-size:14.5px;line-height:1.5;color:var(--ink2);margin-top:12px}
/* ---------- final ---------- */
.home .final{padding:150px 0 0;overflow:hidden}
.home .final .ctas{justify-content:center;align-items:stretch;margin-top:28px}
/* The badges keep their own white text: .home a would make it inherit the ink. */
.home .store-badge,.home .store-badge:hover{color:#fff}
/* 120 px under the phone (top 60, 652 tall), so its whole shadow shows. */
.home .flat{position:relative;height:840px;margin-top:40px}
.home .flat .phone{position:absolute;left:50%;top:60px;margin-left:-150px;z-index:3}
.home .obj{position:absolute;z-index:2;filter:drop-shadow(0 18px 18px rgba(21,39,31,.18)) drop-shadow(0 3px 4px rgba(21,39,31,.12))}
.home .obj img{width:100%;height:auto}
/* ---------- FAQ: the mock has none; it stays for search and support ---------- */
.home .faq-sec{padding:120px 0 40px;text-align:center}
.home .faq-sec .wrap{width:min(820px,calc(100% - 48px))}
.home .faq-sec .h2{margin-top:16px;font-size:clamp(30px,3.6vw,48px)}
.home .faq{text-align:start;margin-top:36px;display:flex;flex-direction:column;gap:10px}
.home .faq details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 22px;transition:box-shadow .3s}
.home .faq details[open]{box-shadow:0 18px 40px -24px rgba(21,39,31,.3)}
.home .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font-weight:600;font-size:17px;line-height:1.4;letter-spacing:-.01em}
.home .faq summary::-webkit-details-marker{display:none}
.home .faq summary::after{content:"+";font-size:24px;font-weight:500;line-height:1;flex:none;color:var(--forest);transition:transform .25s}
.home .faq details[open] summary::after{transform:rotate(45deg)}
.home .faq details p{padding-block-end:18px;color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:62ch}
.home .faq details a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
/* The footer follows on the same ground. */
html.landing footer{margin-top:40px}
/* ---------- scripts that need their own leading or spacing ---------- */
:is([lang="ja"],[lang="ko"],[lang^="zh"]) .home :is(h1,h2,h3,.h2){letter-spacing:0}
:is([lang="ar"],[lang="th"],[lang="hi"]) .home .hero h1{line-height:1.25}
:is([lang="ar"],[lang="th"],[lang="hi"]) .home :is(.h2,h3){line-height:1.3}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.home .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A short computer screen: the pinned row (head + card + bar) still fits
between the header and the bottom edge. */
@media (min-width:861px) and (max-height:820px){
.home .fcard{height:540px;padding-top:30px}
.home .fcard h3{font-size:30px}
.home .dv,.home .dv .phone{width:236px}
.home .dv{margin-top:24px}
}
@media (max-width:860px){
.qr{display:none}
.home .hero{padding-top:44px}
.home .stage{height:504px;margin-top:30px}
.home .stage .phone{width:230px;margin-left:-115px}
.home .hwatch{width:118px;inset-inline-start:calc(50% + 50px);top:250px}
.home .watch .face{padding:11px 9px 9px;gap:4px}
.home .watch .face .t1{font-size:10px}
.home .watch .face .ev{padding:6px 7px;border-radius:10px}
.home .watch .face .ev b{font-size:11.5px}
.home .watch .face .ev span,.home .watch .face .ev2{font-size:10px}
.home .fc-in{min-width:0;padding:8px;padding-inline-end:10px;gap:8px}
.home .fc-tx b{font-size:12.5px}.home .fc-tx span{font-size:11px}
.home .ico{width:28px;height:28px;border-radius:9px}.home .ico svg{width:15px;height:15px}
.home .ck{width:20px;height:20px}
/* Smaller cards, two of the three, from the screen's edges over the phone. */
.home .hcard[data-k="0"]{inset-inline-end:auto;inset-inline-start:8px;top:40px}
.home .hcard[data-k="1"]{inset-inline-start:auto;inset-inline-end:8px;top:118px}
.home .hcard[data-k="2"]{display:none}
.home .works-row{column-gap:22px}
.home .wk{font-size:14px}
.home .members{padding-top:80px}
.home .mcard{width:200px;height:330px}
.home .frow{margin-top:40px}
.home .frow-nav{display:none}
.home .frow-track{gap:14px}
.home .fcard{width:min(84vw,360px);height:600px;padding:30px 26px 0}
.home .fcard h3{font-size:30px}
.home .dv,.home .dv .phone{width:230px}
.home .dv .fc{left:-20px;right:-20px}
.home .dv .fc-in{padding:12px;gap:11px}
.home .dv .ico{width:36px;height:36px}
.home .dv .fc-tx b{font-size:15px}.home .dv .fc-tx span{font-size:12.5px}
.home .wide,.home .icard{grid-template-columns:1fr;height:auto;min-height:0}
.home .icard .tx,.home .wide .tx-end{padding:40px 28px 0}
.home .wide .vis,.home .icard .vis{height:520px}
.home .wide .cal-phone{width:250px;margin-inline-start:-125px;top:40px}
.home #calendars .vis{height:610px}
.home .wide .tx-end,[dir="rtl"] .home .wide .tx-end{background:none;padding:10px 28px 44px}
.home .ifix{width:250px;margin-inline-start:-125px;top:40px}
.home .ifix .phone{width:250px}
.home .orbit{scale:.6}
.home .cal-cards{inset-inline-start:4%;top:330px}
.home .icard{margin-bottom:18px}
.home .avs{height:180px}
.home .flow-grid{grid-template-columns:1fr}
.home .flow-vis{height:720px}
.home .bento{grid-template-columns:1fr}
.home .bx.span2{grid-column:auto}
/* the box takes its content's height, less the tablet's clipped foot */
.home .bx-tab{height:auto;padding-bottom:0}
.home .bx-tab .tablet{margin-bottom:-64px}
.home .vault{height:620px;padding:0 20px}
.home .lock{width:320px;margin:-240px 0 0 -160px}
.home .mosaic{height:460px;justify-content:flex-start}
.home .mcol{width:110px}
.home .flat{transform:scale(.72);transform-origin:50% 0;margin-bottom:-235px}
.home .ai-card{inset-inline-start:11%;width:78%;top:300px!important}
.home .faq-sec{padding-top:90px}
.home .day{padding-bottom:72px}
.home .intel{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){
.home .marq-track,.home .aurora i,.home .aurora .band,.home .orbit,.home .orbit .tile{animation:none}
/* style.css stops every animation here, so the step on show in "See it in
action" is finished by these instead of by its keyframes. */
.home .go{opacity:1;transform:none}
.home .toast.go{transform:translate(-10%,0)}
}
/* ---------- feature pages and the home sheet (2026-10-16/006) ----------
One fragment, [data-feature-sheet] (templates/_featuresheet.html), in two
places: the page /features// (main.fpage: the tinted picture on top,
the words under it) and the sheet home.js opens from a home card (.fsd:
picture and words side by side on a computer, a bottom sheet on a phone).
Logical properties throughout, so /ar/ mirrors; the widget over a
screenshot keeps its physical place, like on the card. */
.home .fsheet{background:var(--paper)}
.home .fs-vis{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:56px 24px}
.home .fs-stage{position:relative;display:flex;align-items:flex-start;justify-content:center}
.home .fs-stage .dv{position:relative;z-index:2;margin:0;width:280px}
.home .fs-stage .dv .phone{width:280px}
/* The second phone (Budget: the split screen) sits behind, lower, on the
inline-end side. */
.home .fs-stage .p2{z-index:1;flex:none;width:236px;margin-top:84px;margin-inline-start:-56px}
.home .fs-tx{width:min(720px,calc(100% - 48px));margin:0 auto;padding:44px 0 64px}
.home .fs-tx h1{font-size:clamp(40px,5vw,62px);font-weight:700;letter-spacing:-.04em;line-height:1}
.home .fs-lead{margin:16px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:42ch}
.home .fs-ben{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:20px}
.home .fs-ben li{display:flex;align-items:flex-start;gap:14px}
.home .fs-ben b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;padding-top:2px}
.home .fs-ben p{margin:3px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.home .fs-faq{margin-top:42px}
.home .fs-faq h2{font-size:26px;font-weight:700;letter-spacing:-.025em}
.home .fs-faq .faq{margin-top:16px}
.home .fs-get{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:38px}
.home .fs-back{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:600;font-size:16px;color:var(--forest)}
.home .fs-back::before{content:"\2190"}
[dir="rtl"] .home .fs-back::before{content:"\2192"}
.home .fs-back:hover{text-decoration:underline;text-underline-offset:3px}
/* The page: the picture as a rounded tinted block under the header. */
.home.fpage{padding-top:22px}
.home.fpage .fs-vis{width:min(1240px,calc(100% - 48px));margin:0 auto;border-radius:32px;padding-block:40px}
/* Small enough that the title shows on the first screen of a laptop. */
@media (min-width:861px){
.home.fpage .fs-stage .dv,.home.fpage .fs-stage .dv .phone{width:250px}
.home.fpage .fs-stage .p2{width:210px;margin-top:74px;margin-inline-start:-50px}
}
:is([lang="ja"],[lang="ko"],[lang^="zh"]) .home .fs-tx h1{letter-spacing:0}
:is([lang="ar"],[lang="th"],[lang="hi"]) .home .fs-tx h1{line-height:1.25}
/* A card that opens a page is a link: it keeps the card's look. */
.home a.fcard{color:inherit;cursor:pointer}
.home a.fcard:focus-visible{outline:3px solid var(--forest);outline-offset:-3px}
/* The sheet. The