/* 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 only, after style.css.
 *
 * The mock's CSS, with three changes on the way in:
 *   - scoped under .home (the <main>), 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: six cards ---------- */
/* 120 px (72 on a phone) after the calendars card before Daili Plus (round 3). */
.home .day{padding:130px 0 120px}
.home .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.home .fcard{position:relative;border-radius:30px;overflow:hidden;height:640px;padding:36px 34px 0;display:flex;flex-direction:column}
.home .fcard h3{font-size:34px;font-weight:700;letter-spacing:-.035em}
.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 </main> 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))}
  .home .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@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 .cols{grid-template-columns:1fr}
  .home .fcard{height:600px}
  .home .dv,.home .dv .phone{width:250px}
  .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)}
}