/* /lp/wearable-users — the standalone Lucie_LifeOS_wearables design's <style>
   block, verbatim. Unlayered on purpose: any rule here out-ranks the site's
   layered shared.css / Tailwind rules (cascade-layers spec). This page does NOT
   load /css/lp.css: both stylesheets define the same v7 class names with
   different values, so they must never meet. The two blocks appended at the end
   are carried over from lp.css because this page needs them too. */

:root{
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --ink:#1d1d1f;--muted:#61656e;--blue:#006eff;--blue-deep:#0058cc;
  --surface:#f5f6f8;--line:#e4e6eb;--white:#fff;
  --section-space:clamp(112px,12svh,176px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--white);scroll-behavior:auto;scroll-padding-top:24px}
body{font-family:var(--sans);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,summary{font:inherit}
img{display:block;max-width:100%;object-fit:contain}
svg{display:block;max-width:100%}
::selection{background:#dce9ff;color:var(--ink)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:5px}
.container{width:min(1160px,calc(100% - 80px));margin-inline:auto}
.skip-link{position:absolute;top:8px;left:12px;z-index:3;transform:translateY(-160%);padding:10px 16px;background:white;border:2px solid var(--blue)}
.skip-link:focus{transform:none}
.wordmark{display:block;flex:none;color:var(--ink);width:105px}
.wordmark svg{width:100%;height:auto}

/* Original Lucie button family; only size variants are added. */
.btn-glass{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.5;padding:14px 30px;border-radius:999px;cursor:pointer;color:#fff;background:var(--blue);border:1px solid transparent;box-shadow:0 10px 28px rgba(0,110,255,.3);transition:transform .18s ease,background .18s ease,box-shadow .18s ease;position:relative;white-space:nowrap}
.btn-glass:hover{transform:translateY(-1px);background:var(--blue-deep);box-shadow:0 14px 34px rgba(0,110,255,.4)}
.btn-glass:active{transform:scale(.98)}
.btn-glass svg{width:18px;height:18px;flex:none}
.btn-glass-light{color:var(--ink);background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);box-shadow:0 12px 32px -8px rgba(20,40,80,.16),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,30,80,.07)}
.btn-glass-light:hover{background:#f5f7fa;box-shadow:0 16px 38px -8px rgba(20,40,80,.2),inset 0 1px 1px rgba(255,255,255,.95)}
.text-link{display:inline-flex;gap:12px;align-items:center;font-size:17px;font-weight:600;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(60px,calc((100vw - 72px)/16.5),88px);line-height:1.06}
h2{font-size:clamp(44px,4.5vw,64px)}
h3{font-size:clamp(34px,3.2vw,44px);letter-spacing:-.025em;line-height:1.18}
p{text-wrap:pretty}

.lucie-ray{width:100%;height:100%;color:currentColor}

.help-section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.section-heading{text-align:center;max-width:800px;margin:0 auto 76px}
.section-heading p{font-size:23px;color:var(--muted);margin-top:26px}
.benefit-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px}
.benefit{border-radius:28px;padding:42px;display:flex;flex-direction:column;min-width:0;min-height:600px;overflow:hidden}
.benefit-memory,.benefit-tasks{grid-column:span 7}
.benefit-body,.benefit-attention{grid-column:span 5}
.benefit-memory{background:#f5f4f7}
.benefit-body{background:#eef4f8}
.benefit-attention{background:var(--ink);color:#fff}
.benefit-tasks{background:#f3f6fc}
.benefit h3{margin:0 0 20px;line-height:1.08;text-wrap:initial}
.benefit-copy>p{font-size:19px;line-height:1.5;color:var(--muted);max-width:430px}
.benefit-attention .benefit-copy>p{color:#c3c7cf}
.example{display:flex;flex-direction:column;justify-content:center;flex:1;gap:26px;padding-top:42px;min-width:0}
.memory-entry{padding-inline:12px}
.memory-entry>span{display:block;color:#6e6877;font-size:15px;margin-bottom:10px}
.memory-entry p{font-size:27px;line-height:1.3;letter-spacing:-.02em;max-width:350px}
.example-note{display:flex;align-items:flex-start;gap:13px;padding:23px;background:white;border-radius:18px;box-shadow:0 12px 25px -16px rgba(30,42,70,.18)}
.note-avatar{display:block;flex:0 0 30px;width:30px;height:30px;margin-top:1px}
.example-note p{font-size:18px;line-height:1.45}
.example-memory .example-note{margin-left:20px}
.body-signals{display:flex;align-items:center;justify-content:center;gap:18px}
.body-signals>div{display:flex;flex-direction:column;align-items:center;gap:13px;flex:1}
.body-signals img{height:52px;width:46px;object-fit:contain}
.body-signals .wearable{width:44px;height:56px}
.body-signals span{font-size:14px;color:#526075;white-space:nowrap}
.example-body .example-note{padding:21px;gap:12px}
.example-body .example-note p{font-size:17px}
.example-attention{align-items:center;text-align:center;gap:22px;padding-top:36px}
.focus-state{display:flex;flex-direction:column;gap:9px}
.focus-time{font-size:68px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-weight:500}
.focus-state strong{font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.015em;color:#e1e4ea}
.quiet-apps{display:flex;align-items:center;gap:16px}
.quiet-apps img{filter:grayscale(1);opacity:.65;border-radius:12px}
.focus-caption{font-size:14px;color:#bdc3ce}
.example-tasks{justify-content:flex-end}
.email-preview{background:white;border-radius:18px;padding:0 28px 28px;box-shadow:0 20px 32px -24px rgba(30,42,70,.24)}
.email-toolbar{display:flex;align-items:center;gap:6px;height:43px;margin-bottom:22px;border-bottom:1px solid #edf0f4}
.email-toolbar i{width:7px;height:7px;border-radius:50%;background:#d9dce2}
.email-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.email-header strong{font-size:18px;line-height:1.3;font-weight:600}
.email-to{font-size:14px;color:#61656e;margin-bottom:12px}
.email-preview>p:not(.email-to){font-size:18px;line-height:1.5}
.draft-caption{display:block;margin-top:20px;font-size:13px;color:#61656e}
.examples-caption{text-align:center;margin-top:36px;font-size:14px;color:#666b75}

.faq-section{display:flex;flex-direction:column;justify-content:center;padding-block:var(--section-space);min-height:90svh;border-top:1px solid var(--line)}
.faq-section h2{font-size:clamp(44px,4.5vw,64px);line-height:1.12;text-align:center;max-width:850px;margin:0 auto 60px}
.faq-list{width:100%;max-width:800px;margin-inline:auto}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;position:relative}
summary::-webkit-details-marker{display:none}
.faq-list summary{padding:26px 33px 26px 0;font-size:20px;font-weight:500;line-height:1.4}
.faq-list summary::after{content:"+";position:absolute;right:3px;top:25px;font-size:23px;line-height:1.2;font-weight:400;color:#69727e}
.faq-list details[open] summary::after{content:"−"}
.faq-list details>p{font-size:18px;line-height:1.6;color:var(--muted);padding:0 28px 26px 0}
.start-section{padding:var(--section-space) 32px;background:#fff;text-align:center;min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.closing-ray{display:block;width:64px;height:64px;margin:0 auto 36px}
.download-actions{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:42px;flex-wrap:wrap}
.install-help{font-size:15px;color:#616b7e;max-width:440px;margin:32px auto 0}
.install-help summary{text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:5px 0}
.install-help>div{text-align:left;padding:17px 20px 0}
.install-help ol{padding-left:20px;line-height:1.8}
.install-help p{margin-top:14px;font-size:14px}
.site-footer{padding-top:64px;overflow:hidden;background:#fff}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;max-width:920px;margin:0 auto}
.foot-cols h3{font-size:14px;color:#757b85;font-weight:500;letter-spacing:0;line-height:1.4;margin-bottom:18px;text-wrap:initial}
.foot-cols a{display:block;font-size:15px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.foot-cols a:hover{color:var(--blue)}
.foot-meta{font-size:12px;color:#727780;padding:42px 0 10px;max-width:920px;margin:0 auto}
.giant{display:flex;align-items:flex-end;justify-content:center;height:210px;overflow:hidden;mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 92%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35),transparent 92%)}
.giant svg{height:280px;width:auto;max-width:none;flex:none;transform:translateY(75px);color:#b9b9c0}

@media(max-width:1000px){
  .container{width:calc(100% - 64px)}
  .benefit-grid{gap:24px}
  .benefit{padding:32px;min-height:600px}
  .benefit-memory,.benefit-body,.benefit-attention,.benefit-tasks{grid-column:span 6}
  .benefit h3{font-size:36px}
  .benefit-copy>p{font-size:18px}
  .example-note,.example-body .example-note{padding:18px;gap:10px}
  .example-note p{font-size:17px}
  .example-memory .example-note{margin-left:0}
  .body-signals{gap:12px}
  .body-signals span{font-size:13px}
  .email-preview{padding:0 22px 24px}
  .foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media(max-width:760px){
  :root{--section-space:clamp(88px,12svh,120px)}
  .container{width:calc(100% - 40px)}
  h1{font-size:clamp(44px,8.7vw,64px);letter-spacing:-.035em;line-height:1.08}
  h2{font-size:clamp(36px,6.8vw,48px);line-height:1.12}
  .section-heading{margin-bottom:48px}
  .section-heading p{font-size:20px;margin-top:23px}
  .benefit-grid{grid-template-columns:1fr;gap:24px}
  .benefit-memory,.benefit-body,.benefit-attention,.benefit-tasks{grid-column:auto}
  .benefit{padding:34px 28px;border-radius:24px;min-height:0;gap:0}
  .benefit h3{font-size:36px;margin-bottom:19px}
  .benefit-copy>p{font-size:18px;max-width:100%;line-height:1.5}
  .example{padding-top:36px;gap:24px}
  .memory-entry{padding-inline:0}
  .memory-entry p{font-size:24px;max-width:290px}
  .memory-entry>span{font-size:14px}
  .example-note,.example-body .example-note{padding:18px;gap:10px;border-radius:16px}
  .example-note p,.example-body .example-note p{font-size:16px}
  .note-avatar{width:26px;height:26px;flex-basis:26px}
  .body-signals{gap:16px}
  .body-signals span{font-size:14px}
  .body-signals img{height:48px;width:40px}
  .body-signals .wearable{height:52px;width:40px}
  .example-attention{padding-block:42px 10px;gap:23px}
  .focus-time{font-size:66px}
  .email-preview{padding:0 20px 22px}
  .email-header strong{font-size:17px}
  .email-preview>p:not(.email-to){font-size:16px}
  .examples-caption{font-size:12px;margin-top:30px}
  .faq-section{min-height:80svh}
  .faq-section h2{font-size:36px;margin-bottom:48px}
  .faq-list summary{font-size:19px;padding-block:24px}
  .faq-list details>p{font-size:18px;padding-right:12px}
  .start-section{min-height:82svh;padding-inline:20px}
  .start-section h2{font-size:36px}
  .closing-ray{width:56px;height:56px;margin-bottom:32px}
  .download-actions{flex-direction:column;align-items:stretch;margin:34px auto 0;gap:15px;width:100%;max-width:300px}
  .download-actions .btn-glass{padding:14px 18px;font-size:16px}
  .install-help{font-size:14px;margin-top:25px}
  .site-footer{padding-top:48px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .foot-meta{font-size:11px;max-width:280px;margin-left:0;padding-top:30px}
  .giant{height:145px}
  .giant svg{height:170px;transform:translateY(45px)}
}
@media(max-width:360px){
  .container{width:calc(100% - 32px)}
  h1{font-size:39px}
  h2{font-size:34px}
  .benefit{padding:30px 22px}
  .benefit h3{font-size:31px}
  .benefit-copy>p{font-size:17px}
  .example-note,.example-body .example-note{padding:15px;gap:9px}
  .example-note .note-avatar{width:23px;height:23px;flex-basis:23px}
  .body-signals{gap:10px}
  .body-signals span{font-size:12px}
  .focus-caption{font-size:12px}
  .email-preview{padding-inline:17px}
  .start-section h2{font-size:31px}
  .download-actions .btn-glass{font-size:14px;padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){.btn-glass{transition:none}.btn-glass:hover,.btn-glass:active{transform:none}}

/* Opening restored from V3. Everything after the phone keeps simple.css. */
.site-header{position:sticky;top:12px;z-index:50;background:transparent;pointer-events:none;height:0;overflow:visible}
.nav-inner{pointer-events:auto;height:auto;width:max-content;max-width:calc(100% - 32px);margin:0 auto;display:flex;align-items:center;gap:0;padding:6px 6px 6px 18px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.26));border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 1px rgba(0,0,0,.04),0 16px 40px -14px rgba(20,40,80,.26),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,30,80,.06);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%)}
.nav-logo{padding-right:16px;display:flex;color:var(--ink)}
.nav-logo svg{height:22px;width:auto;display:block}
.nav-cta{display:flex;align-items:center}
.nav-cta .btn-glass,.btn-glass-sm{padding:10px 18px;font-size:13.5px}
.hero{min-height:94svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:120px 110px;text-align:center}
.hero-logo{width:44px;height:44px;margin-bottom:20px}
.hero-kicker{font-size:23px;line-height:1.4;font-weight:400;color:var(--muted);margin-bottom:30px}
.rotating-title{display:grid;width:100%;margin:0}
.headline-slide{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transition:opacity .5s ease,transform .5s ease;transform:translateY(9px);pointer-events:none}
.headline-slide.is-active{opacity:1;visibility:visible;transform:none}
.headline-slide.is-out{opacity:0;visibility:visible;transform:translateY(-9px)}
.headline-lead,.headline-ending{display:block;text-wrap:balance}
.headline-ending{color:#6e6e73}
/* The hero alone gets a wider measure, and the headline size tracks the viewport so the
   shorter endings stay on one line; the longest ending is allowed to wrap. */
@media(min-width:761px){.hero{width:min(1500px,calc(100% - 48px))}}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;scroll-margin-top:92px}

/* Only the device shell borrows from the reference. The conversation is Lucie's
   original V2/V3 UI; the page and screen stay white. The shell grows with text. */
.conversation-section{min-height:96svh;display:grid;place-items:center;padding:78px 0 112px;background:#fff}
.hero-example{width:min(500px,calc(100% - 24px));margin:0;text-align:left}
.phone-crop{--phone-tail:80px;--phone-fade:76px;container-type:inline-size;width:100%;overflow:hidden;mask-image:linear-gradient(#000,#000 calc(100% - var(--phone-fade)),transparent);-webkit-mask-image:linear-gradient(#000,#000 calc(100% - var(--phone-fade)),transparent)}
.reference-phone{position:relative;isolation:isolate;padding:20cqw 9% var(--phone-tail);background:#fff}
/* Preserve the entire curved bezel at native proportions. The opening below
   the status bar stays inside the screen; the side rails join below the curve. */
.phone-shell-top{position:absolute;inset:0 0 auto;height:26cqw;overflow:hidden;pointer-events:none;z-index:2;clip-path:polygon(0 0,100% 0,100% 100%,92% 100%,92% 16.5cqw,8% 16.5cqw,8% 100%,0 100%)}
/* The reference raster's screen is off-white (RGB 246–254). Match its white
   point to the HTML canvas, including every retained strip next to the bezel. */
.phone-shell-top img,.phone-shell-sides img{filter:brightness(1.06)}
.phone-shell-top img{width:100%;height:auto}
.phone-shell-sides{position:absolute;inset:25.9cqw 0 0;overflow:hidden;pointer-events:none;z-index:1}
.phone-shell-sides img{position:absolute;top:-17.52%;width:100%;height:138.25%;max-width:none;object-fit:fill;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,6% 0,6% 100%,94% 100%,94% 0,6% 0)}
.lucie-phone-content{position:relative;z-index:0}
.lc-chat{display:flex;flex-direction:column;align-items:flex-start;gap:17px;text-align:left}
.lc-msg{font-size:16px;line-height:1.5}
.lc-lm{max-width:100%;color:#74747b}
.lc-lm b{font-weight:600;color:var(--ink)}
.lc-um{position:relative;align-self:flex-end;max-width:90%;padding:10px 15px;background:var(--blue);color:#fff;border-radius:20px 20px 5px 20px;font-size:15.5px;line-height:1.4}
.lc-react{position:absolute;bottom:-10px;right:-7px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid #ececf0;font-size:16px;line-height:1;color:#ef4f6c}
.lc-mail{margin-top:12px;border-radius:14px;padding:13px 16px;background:#fff;box-shadow:0 3px 20px -7px rgba(0,0,0,.19),0 0 0 1px #ececf0;font-size:14px;color:var(--ink)}
.lm-row{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px solid #f1f1f4}
.lm-row span{width:52px;flex:none;color:#777780;font-size:12px}
.lm-body{padding:11px 0 12px;line-height:1.5;color:#66666e}
.lm-send{display:block;border-radius:999px;background:#e7f5eb;color:#297740;font-size:13px;font-weight:600;text-align:center;padding:7px}
.lc-sent{display:flex;align-items:center;gap:5px}
.lc-sent svg{width:16px;height:16px;color:#297740}
.hero-example figcaption{text-align:center;font-size:13px;line-height:1.4;color:#61656e;margin-top:12px}
@media(max-width:820px){.nav-logo{padding-right:14px}.nav-inner{padding:6px 6px 6px 16px}}
@media(max-width:760px){
  .hero{padding-block:100px 96px;min-height:94svh}
  .hero-kicker{font-size:20px;margin-bottom:26px}
  .hero-logo{width:40px;height:40px;margin-bottom:16px}
  .hero-ctas{gap:13px;margin-top:30px;width:100%;max-width:320px;flex-direction:column}
  .hero-ctas .btn-glass{font-size:16px;padding:14px 18px}
  .conversation-section{min-height:94svh;padding-block:70px 100px}
  .hero-example{width:min(410px,calc(100% - 20px))}
  .phone-crop{--phone-tail:72px;--phone-fade:68px}
  .reference-phone{padding-top:21cqw}
  .lc-chat{gap:15px}
  .lc-msg{font-size:14.5px}
  .lc-um{font-size:14px;padding:9px 13px}
  .lc-mail{font-size:13px;padding:11px 13px}
  .lm-row{padding-block:3px}
  .lm-row span{font-size:11px;width:46px}
  .lm-body{padding-block:9px}
  .hero-example figcaption{font-size:12px;margin-top:12px}
}
@media(max-width:360px){.hero-ctas .btn-glass{font-size:14px}}
@media(prefers-reduced-motion:reduce){.headline-slide{transition:none;transform:none}.headline-slide.is-out{transform:none}}

/* Familiar V3 stories, kept static and given the simplified page's spacing. */
.day-section{padding-block:var(--section-space);min-height:96svh}
.day-section .section-heading{max-width:850px;margin-bottom:66px}
.day-timeline{list-style:none;max-width:680px;margin:0 auto;text-align:left}
.day-moment{display:grid;grid-template-columns:68px minmax(0,1fr);gap:30px;position:relative;padding-bottom:30px}
.day-moment:last-child{padding-bottom:0}
.day-moment time{font-size:14px;line-height:20px;color:#737b86;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.day-card{position:relative;padding-left:27px;min-width:0}
.day-card::before{content:"";position:absolute;left:-4px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #fff;z-index:1}
.day-card::after{content:"";position:absolute;left:0;top:14px;bottom:-36px;width:1px;background:#dce3ed}
.day-moment:last-child .day-card::after{display:none}
.day-tag{display:block;font-size:13px;line-height:20px;font-weight:500;color:#737b86;margin-bottom:10px;letter-spacing:.07em;text-transform:uppercase}
.day-message{display:inline-block;max-width:100%;padding:10px 14px;border-radius:14px;background:#f5f6f8;color:#626873;font-size:15px;line-height:1.5}
.day-message-user{background:#f2f5fa;color:#626873}
.day-state{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.4;margin-top:14px}
.day-state svg{width:22px;height:22px;flex:none;color:var(--blue)}
.day-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:19px;line-height:1.4}
.day-actions span{padding:9px 15px;border-radius:999px;background:#f4f5f7;color:#626873;font-size:14px}
.day-actions span:first-child{background:var(--blue);color:#fff;font-size:inherit;font-weight:600}
.mac-section{padding-block:var(--section-space);text-align:center;min-height:94svh}
.mac-section .section-heading{max-width:960px;margin-bottom:54px}
.mac-section .section-heading p{max-width:650px;margin-inline:auto;font-size:21px}
.mac-window{container-type:inline-size;width:min(800px,100%);margin-inline:auto;text-align:left;--grey-soft:#6e6e73;--grey-text:#86868b}
.mac-screen{position:relative;width:100%;aspect-ratio:1.47;border-radius:14px;background:#f5f5f7;border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 60px -24px rgba(20,40,80,.22);overflow:hidden}
.mac-home{position:absolute;inset:0;display:flex;background:#f5f5f7;font-size:1.5cqw;line-height:1.3;text-align:left}
.mac-section>.btn-glass{margin-top:42px}
/* V3's app-window component uses proportional units so its original layout
   remains intact at every device size. */
.mh-side{width:22%;min-width:10.909em;background:transparent;padding:0.90909em 0.81818em 0.90909em;display:flex;flex-direction:column;gap:0.18182em}
.mh-lights{display:flex;gap:0.45455em;padding:0.18182em 0.36364em 0.72727em}.mh-lights i{width:0.72727em;height:0.72727em;border-radius:50%;background:#ff5f57}.mh-lights i:nth-child(2){background:#febc2e}.mh-lights i:nth-child(3){background:#28c840}
.mh-logo{display:flex;align-items:center;gap:0.54545em;font-weight:600;font-size:1em;padding:0.18182em 0.54545em 0.72727em}.mh-logo svg{width:1.3636em;height:1.3636em;color:var(--ink)}
.mh-ask{display:flex;align-items:center;gap:0.63636em;background:#fff;border-radius:0.90909em;padding:0.63636em 0.81818em;box-shadow:0 0.090909em 0.090909em rgba(0,0,0,.04),0 0.36364em 1.2727em -0.54545em rgba(20,40,80,.16);margin-bottom:0.54545em}
.mh-ask svg{width:1.2727em;height:1.2727em;color:var(--blue)}.mh-ask b{font-weight:600}.mh-ask span{margin-left:auto;font-size:0.77273em;color:var(--grey-text)}
.mh-side small{font-size:0.77273em;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-text);padding:0.72727em 0.54545em 0.27273em}
.mh-side a{display:flex;align-items:center;gap:0.63636em;padding:0.45455em 0.63636em;border-radius:0.72727em;color:var(--grey-soft);font-weight:500}
.mh-side a svg{width:1.0909em;height:1.0909em;color:var(--grey-soft)}
.mh-user{margin-top:auto;display:flex;align-items:center;gap:0.63636em;padding:0.36364em 0.54545em}
.mh-user i{width:1.8182em;height:1.8182em;border-radius:50%;background:#fff;border:0.090909em solid rgba(0,0,0,.08);font:600 0.81818em/1.8182em var(--sans);text-align:center;font-style:normal}
.mh-user i,.mm-user i{overflow:hidden}.mh-user i img,.mm-user i img{width:100%;height:100%;object-fit:cover;display:block}
.mh-user b{display:block;font-size:0.90909em}.mh-user span{font-size:0.77273em;color:var(--grey-text)}
.mh-main{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0.72727em 0.72727em 0.72727em 0.18182em;background:#fff;border-radius:0.81818em;box-shadow:0 0.090909em 0.18182em rgba(0,0,0,.04),0 0.90909em 2.5455em -1.6364em rgba(20,40,80,.2)}
.mh-logo .mh-collapse{margin-left:auto;width:1.0909em;height:1.0909em;color:var(--grey-text)}
.mh-search{position:absolute;top:0.90909em;right:1.0909em;display:inline-flex;align-items:center;gap:0.45455em;font-size:0.77273em;font-weight:500;color:#8a8a8e;background:#f5f5f7;border-radius:0.72727em;padding:0.36364em 0.72727em}
.mh-search svg{width:0.90909em;height:0.90909em}
.mh-search b{font-weight:500;color:#b0b0b6;margin-left:0.18182em}
.mh-hello{display:flex;flex-direction:column;align-items:center;gap:1.0909em;margin-top:-2.7273em}
.mh-ray{width:3.0909em;height:3.0909em;color:var(--ink);display:inline-flex}.mh-ray svg{width:100%;height:100%}
.mh-hello h4{font-size:2.3636em;font-weight:600;letter-spacing:-.025em;margin:0;color:var(--ink)}
.mh-chips{position:absolute;right:1.4545em;bottom:5.2727em;display:flex;gap:0.54545em}
.mh-chips span{font-size:0.77273em;font-weight:600;padding:0.45455em 0.72727em;border-radius:90.818em;background:#fff;border:0.090909em solid rgba(0,0,0,.06);box-shadow:0 0.090909em 0.18182em rgba(0,0,0,.05)}
.mh-bar{position:absolute;left:1.2727em;right:1.2727em;bottom:1.0909em;height:3.0909em;display:flex;align-items:center;gap:0.72727em;padding:0 0.54545em 0 0.72727em;background:#fff;border-radius:90.818em;border:0.090909em solid rgba(0,0,0,.06);box-shadow:0 0.54545em 1.6364em rgba(0,0,0,.06)}
.mh-ic{width:1.6364em;height:1.6364em;display:inline-flex;color:var(--ink)}.mh-ic svg{width:100%;height:100%}
.mh-ph{flex:1;color:#b0b0b6;font-size:1em}
.mh-send{width:2.1818em;height:2.1818em;border-radius:50%;background:rgba(0,110,255,.12);color:var(--blue);align-items:center;justify-content:center;padding:0.45455em;box-sizing:border-box}
.mh-mic{width:2.1818em;height:2.1818em;border-radius:50%;background:#f5f5f7;align-items:center;justify-content:center;padding:0.45455em;box-sizing:border-box}
.trust{padding-block:var(--section-space);text-align:center;min-height:88svh}
.trust h2{margin:0}
.trust .sub{font-size:22px;color:var(--muted);margin:24px auto 54px}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1000px;margin:0 auto;text-align:left}
.tr-item{padding:28px;border-radius:22px;min-width:0;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 1px rgba(0,0,0,.04),0 16px 40px -14px rgba(20,40,80,.26),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,30,80,.06);
  backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
}
.tr-ic{width:30px;height:30px;color:var(--blue);margin-bottom:20px}
.tr-ic svg{width:100%;height:100%}
.tr-item b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25;max-width:21ch;margin-bottom:12px}
.tr-item p{font-size:16px;line-height:1.5;color:#626873;max-width:28ch}
/* Original four testimonials, in the original two-column arrangement. */
.community-quotes{padding-block:var(--section-space);min-height:80svh;display:flex;align-items:center;text-align:center}
.community-quotes .container{max-width:1100px}
.community-quotes h2{font-size:clamp(32px,4.6vw,44px);letter-spacing:-.022em;margin-bottom:44px}
.tweets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;text-align:left}
.tweet{background:#f5f5f7;border-radius:22px;padding:32px;font-size:19px;line-height:1.6;color:#61656e}
.tweet b{font-weight:600;color:var(--ink)}
.tweet-head{display:flex;align-items:center;gap:13px;margin-bottom:22px;min-height:44px}
.tweet-head .avatar{display:block;width:44px;height:44px;border-radius:50%;flex:none;margin:0;overflow:hidden}
.tweet .avatar img{width:100%;height:100%;object-fit:cover}
.tweet-head b{display:block;font-size:16px;line-height:1.35}
.tweet-head span{display:block;font-size:14px;color:#6e737c;margin-top:3px;line-height:1.4}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mac-section .section-heading p{font-size:19px}}
@media(max-width:760px){
  .day-section .section-heading{margin-bottom:48px}
  .day-section h2{font-size:36px}
  .day-moment{grid-template-columns:43px minmax(0,1fr);gap:19px;padding-bottom:28px}
  .day-moment time{font-size:12px}
  .day-card{padding-left:18px}
  .day-tag{font-size:11px;margin-bottom:8px}
  .day-message{font-size:14px;padding:10px 12px;border-radius:13px}
  .day-state{font-size:18px}
  .day-actions{gap:8px;font-size:17px}
  .day-actions span{padding:8px 13px;font-size:13px}
  .mac-section{min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .mac-section .section-heading{margin-bottom:38px}
  .mac-section h2{font-size:36px}
  .mac-window{width:100%}
  .mac-screen{border-radius:8px}
  .mac-section>.btn-glass{margin-top:34px}
  .trust .sub{font-size:19px;margin:24px auto 40px;max-width:27ch}
  .trust-grid{gap:14px}
  .tr-item{padding:24px;border-radius:20px}
  .tr-item b{font-size:21px}
  .community-quotes{min-height:88svh}
  .community-quotes h2{font-size:36px}
  .tweets{grid-template-columns:1fr}
  .tweet{padding:26px;font-size:18px}
}
@media(max-width:560px){.trust-grid{grid-template-columns:1fr}.tr-item{position:relative;padding-left:74px}.tr-ic{position:absolute;top:26px;left:24px;width:28px;height:28px}.tr-item p{max-width:none}.tr-item b{max-width:none}}
@media(max-width:360px){.day-section h2,.mac-section h2,.trust h2{font-size:32px}.day-moment{gap:14px}.day-card{padding-left:14px}.day-message{font-size:14px}.day-actions{font-size:16px}.day-state{font-size:17px}.tr-item{padding-left:67px;padding-right:20px}.tr-ic{left:20px}.tr-item b{font-size:20px}}

/* Scroll cue: a quiet marker at the foot of every full-height moment. */
.hero,.conversation-section,.help-section,.day-section,.mac-section,.trust,.community-quotes,.faq-section{position:relative}
.scroll-cue{position:absolute;left:0;right:0;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;line-height:1;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8b919b;pointer-events:none;user-select:none}
.scroll-cue svg{width:14px;height:14px;animation:scroll-cue-bob 2.4s ease-in-out infinite}
@keyframes scroll-cue-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@media(max-width:760px){.scroll-cue{bottom:22px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none;opacity:.8}}

/* Keep the download actions in the hero as the only opening call to action. */
.site-header{opacity:0;visibility:hidden;transition:opacity .18s ease}
.site-header.is-visible{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* Keep each existing marker in place, with a usable pointer and keyboard target. */
a.scroll-cue{left:50%;right:auto;transform:translateX(-50%);pointer-events:auto;cursor:pointer;min-width:76px;min-height:44px;padding:7px 12px;margin-bottom:-7px;justify-content:center;border-radius:8px}
a.scroll-cue:hover{color:var(--blue)}

/* Wearable edition. Content-level additions only; every value reuses the existing tokens. */
.lc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lc-actions span{padding:8px 14px;border-radius:999px;background:#f4f5f7;color:#626873;font-size:14px;font-weight:600;line-height:1.3}
.lc-actions span:first-child{background:var(--blue);color:#fff}
.works-with{display:flex;flex-direction:column;align-items:center;gap:16px;margin:-24px auto 60px;text-align:center}
.works-with>span{font-size:15px;color:#666b75}
.works-with ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.works-with li{display:inline-flex;align-items:center;gap:8px;padding:6px 15px 6px 7px;border-radius:999px;background:#f4f5f7;color:#626873;font-size:14px;font-weight:500;line-height:1.3}
.works-with li img,.works-with li svg{width:22px;height:22px;flex:none;border-radius:6px;object-fit:cover}
.benefit-attention .memory-entry>span{color:#9aa0ab}
.benefit-attention .memory-entry p{color:#fff;font-size:24px;max-width:none}
.benefit-attention .example-note{color:var(--ink);text-align:left;align-self:stretch}
.insight-card .day-message{display:block;width:fit-content;margin:18px 0 16px;font-size:14px}
.insight-card .day-actions{margin-top:16px}
.day-card .day-message+.day-message{display:block;width:fit-content;margin-top:8px}
.mh-side a.is-active{background:#fff;color:var(--ink);box-shadow:0 0.090909em 0.090909em rgba(0,0,0,.04),0 0.36364em 1.2727em -0.54545em rgba(20,40,80,.16)}
.mh-side a.is-active svg{color:var(--ink)}
.mh-result{width:min(31em,86%);margin-top:-2.6em;display:flex;flex-direction:column;gap:0.8em;text-align:left}
.mr-head{display:flex;align-items:center;gap:0.6em;margin-bottom:0.2em}
.mr-head .mh-ray{width:1.8em;height:1.8em}
.mr-head b{font-size:1.4em;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mr-signals{display:flex;flex-wrap:wrap;gap:0.4em;margin-bottom:0.3em}
.mr-signals span{font-size:0.77273em;font-weight:500;color:#6e6e73;background:#f5f5f7;border-radius:0.72727em;padding:0.36364em 0.72727em}
.mh-result p{font-size:1em;line-height:1.45;color:#6e6e73}
.mh-result p b{font-weight:600;color:var(--ink)}
.mr-actions{display:flex;flex-wrap:wrap;gap:0.5em;margin-top:0.3em}
.mr-actions span{font-size:0.86364em;font-weight:600;padding:0.5em 0.9em;border-radius:90.818em;background:#f5f5f7;color:#6e6e73}
.mr-actions span:first-child{background:var(--blue);color:#fff}
.lc-sleep{margin-top:12px;border-radius:14px;padding:14px 16px 15px;background:#fff;box-shadow:0 3px 20px -7px rgba(0,0,0,.19),0 0 0 1px #ececf0;color:var(--ink)}
.ls-head{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:12px}
.ls-track{display:flex;height:22px;border-radius:7px;background:#eef0f4;overflow:hidden}
.ls-track i{display:block;height:100%;flex:none}
.ls-track .core,.ls-legend .core{background:#8fb4ff}.ls-track .rem,.ls-legend .rem{background:#cfe0ff}.ls-track .deep,.ls-legend .deep{background:#7d6ee3}.ls-track .awake,.ls-legend .awake{background:#eef0f4}
.ls-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11px;color:#8a8a8e}
.ls-legend span{display:inline-flex;align-items:center;gap:5px}
.ls-legend i{width:8px;height:8px;border-radius:50%;display:block}
.ls-legend .awake{box-shadow:inset 0 0 0 1px #d9dce2}
.ls-times{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#8a8a8e;font-variant-numeric:tabular-nums}
.ls-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:13px}
.ls-metrics span{display:block;font-size:11px;color:#777780;margin-bottom:3px}
.ls-metrics b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
.ls-note{margin-top:12px;font-size:13px;line-height:1.45;color:#66666e}
.focus-state .focus-label{font-size:13px;line-height:20px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#9aa0ab}
.insight-event{display:flex;flex-direction:column;gap:1px;width:fit-content;margin:18px 0 16px;padding:10px 16px 11px;border-radius:14px;background:#f5f6f8;font-size:13px;line-height:1.4;color:#626873}
.insight-event b{font-size:15px;font-weight:600;color:var(--ink)}
@media(max-width:760px){.lc-sleep{padding:12px 13px 13px}.ls-head{font-size:13px;margin-bottom:10px}.ls-track{height:20px}.ls-metrics{gap:8px;margin-top:11px}.ls-metrics b{font-size:12px}.ls-note{font-size:12px}.insight-event{font-size:12px;padding:9px 13px 10px}.insight-event b{font-size:14px}}
.tweet .day-tag{margin-bottom:16px}
.tweet .tweet-insight{display:block;margin-top:14px}
.community-quotes .examples-caption{margin-top:32px}
@media(max-width:760px){.works-with{margin:-12px auto 44px;gap:14px}.works-with ul{gap:8px}.works-with li{font-size:13px;padding:5px 12px 5px 6px;gap:7px}.works-with li img,.works-with li svg{width:20px;height:20px;border-radius:5px}.lc-actions span{font-size:13px;padding:7px 12px}.benefit-attention .memory-entry p{font-size:22px}.insight-card .day-message{font-size:13px}}

/* ===== Port notes (site cascade, not design) ===== */
/* Tailwind v4 emits its own on-demand `.container` (width:100% + a max-width
   per breakpoint) because the class appears in app/home-body.ts. It sits in
   the utilities layer, so the design's unlayered width wins, but the design
   never sets max-width and the breakpoint caps would squeeze the page
   between breakpoints (e.g. 768px at a 1000px viewport). Neutralise it. */
.container{max-width:none}
/* shared.css (components layer) styles a global `.sub` — line-height 1.4 and
   letter-spacing -.01em would leak into the privacy subline, whose design
   value is the inherited body rhythm. */
.trust .sub{line-height:inherit;letter-spacing:normal}
/* Tailwind preflight resets `ol,ul{list-style:none}`; the install guide's
   steps rely on the UA's decimal numbering (the day timeline sets its own
   list-style:none, so it is unaffected either way). */
.install-help ol{list-style:decimal}

/* ===== Site addition: Mac install-guide modal (carried over from v6) =====
   Rules verbatim from the v6 home.css; the two v6 tokens this design does
   not define are pinned on the modal root so it renders as before. */
.dlm{--grey-soft:#6e6e73;--line:#d2d2d7}
.dlm{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.dlm.open{display:flex}
.dlm-back{position:absolute;inset:0;background:rgba(20,25,35,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlm-card{position:relative;width:min(880px,100%);background:#fff;border-radius:28px;padding:40px 44px 42px;
  box-shadow:0 40px 90px -20px rgba(10,20,40,.35);text-align:left;
  transform:translateY(14px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.dlm.open .dlm-card{transform:none;opacity:1}
.dlm-x{position:absolute;top:20px;right:20px;width:32px;height:32px;border:none;border-radius:50%;background:#f5f5f7;color:#6e6e73;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dlm-x:hover{background:#ececf0;color:var(--ink)}
.dlm-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue)}
.dlm-eyebrow svg{width:16px;height:16px}
.dlm-card h3{font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.022em;margin:12px 0 54px;color:var(--ink)}
.dlm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dlm-step p{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--grey-soft)}
.dlm-step p b{color:var(--ink);font-weight:600}
.dlm-tile{position:relative;height:170px;border-radius:16px;background:#f5f5f7;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dlm-win{position:absolute;left:14%;top:16%;right:-6%;bottom:-8%;background:#fff;border-radius:10px;box-shadow:0 10px 30px -12px rgba(20,40,80,.25);display:flex;flex-direction:column;overflow:hidden}
.dlm-tb{flex:none;height:22px;display:flex;align-items:center;gap:4px;padding:0 9px;background:#f0f0f3;border-bottom:1px solid rgba(0,0,0,.05)}
.dlm-tb i{width:6px;height:6px;border-radius:50%;background:#ff5f57}
.dlm-tb i:nth-child(2){background:#febc2e}.dlm-tb i:nth-child(3){background:#28c840}
.dlm-tb span{margin-left:8px;font-size:8.5px;font-weight:600;color:var(--grey-soft)}
.dlm-body{flex:1;display:flex;min-height:0}
.dlm-sb{flex:none;width:34%;background:#f7f7f9;border-right:1px solid rgba(0,0,0,.05);padding:7px 8px;display:flex;flex-direction:column;gap:6px}
.dlm-sb i{display:block;height:5px;border-radius:3px;background:#e3e3e8;width:85%}
.dlm-sb i.on{background:rgba(0,110,255,.35);width:70%}
.dlm-main{flex:1;padding:8px 10px}
.dlm-file{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;background:rgba(0,110,255,.09)}
.dlm-file svg{width:13px;height:13px;flex:none;color:var(--grey-soft)}
.dlm-file span{font-size:8.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.dlm-cursor{position:absolute;width:16px;height:16px;z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.dlm-appicon{width:84px;height:84px;border-radius:21px;border:1px solid rgba(0,0,0,.07);box-shadow:0 10px 24px -8px rgba(20,40,80,.22);display:block}
.dlm-appicon.sm{width:38px;height:38px;border-radius:9.5px;box-shadow:0 4px 10px -3px rgba(20,40,80,.2)}
.dlm-drag{display:flex;align-items:center;gap:22px}
.dlm-folder{width:92px;height:auto}
.dlm-apps{display:flex;gap:14px;align-items:flex-start;padding:10px 12px}
.dlm-app{display:flex;flex-direction:column;align-items:center;gap:4px}
.dlm-app em{font-style:normal;font-size:8px;font-weight:600;color:var(--ink)}
.dlm-app i{width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,#e8e8ee,#d6d6db)}
.dlm-foot{margin-top:58px;text-align:center;font-size:14.5px;color:var(--grey-soft)}
.dlm-foot a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dlm-req{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.45;color:var(--grey-soft)}
.dlm-req b{font-weight:600;color:var(--ink)}
.dlm-req span{white-space:nowrap}
.dlm-req span::before{content:"\00B7";content:"\00B7"/"";margin:0 7px;color:var(--line)}
.dlm-appicon.xs{width:14px;height:14px;border-radius:3.5px;box-shadow:none;flex:none}
@media(max-width:760px){.dlm-steps{grid-template-columns:1fr}.dlm-tile{height:150px}.dlm-card{padding:26px 22px 22px;max-height:90svh;overflow:auto}.dlm-req b{display:block}.dlm-req b+span::before{content:none;margin:0}}
@media(max-width:400px){.dlm-req span{display:block}.dlm-req span::before{content:none;margin:0}}

/* ===== Site addition: footer "Product" column (owner, 2026-09-10) =====
   The footer links the designer site pages (/integrations, /features,
   /community — app/content/defaults/footer.ts) in a fourth column, as their
   own footers do. The design's three-column grid becomes the four-column
   grid of its earlier draft (Lucie_LifeOS_simple.html: repeat(4), same
   850px width). Scoped above the 760px breakpoint so the design's
   two-column mobile rule keeps winning there. */
@media(min-width:761px){.foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Standards grid — the ten marks the /trust design lists, in place of the
   three-badge `.trust-badges` strip (owner, 2026-09-16). Markup:
   app/components/lp/trust-standards.ts. Behaviour: public/js/lp.js.
   The rules are the design's own, copied verbatim; only `.std-intro p`
   is renamed `.std-lead`, because the design's <h2> above it is not ported
   (the section this lands in already has a heading) and the margin that
   used to come from `.std-intro` has to come from the paragraph itself.
   The design's tokens are this stylesheet's tokens — --muted, --line —
   so nothing needed translating. */
.std-lead{text-align:center;max-width:760px;margin:44px auto 0;font-size:22px;line-height:1.45;color:var(--muted)}
.std-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;max-width:1100px;margin:36px auto 0;padding:0}
.std-grid li{display:flex;width:calc((100% - 56px) / 5)}
.std{width:100%;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 10px 18px;text-align:center;cursor:pointer;color:inherit;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease,opacity .7s ease}
.std-grid[data-reveal] .std{opacity:0;transform:translateY(10px)}
.std-grid.is-in .std{opacity:1;transform:none}
.std-grid.is-in li:nth-child(2) .std{transition-delay:.06s}
.std-grid.is-in li:nth-child(3) .std{transition-delay:.12s}
.std-grid.is-in li:nth-child(4) .std{transition-delay:.18s}
.std-grid.is-in li:nth-child(5) .std{transition-delay:.24s}
.std-grid.is-in li:nth-child(6) .std{transition-delay:.3s}
.std-grid.is-in li:nth-child(7) .std{transition-delay:.36s}
.std-grid.is-in li:nth-child(8) .std{transition-delay:.42s}
.std-grid.is-in li:nth-child(9) .std{transition-delay:.48s}
.std-grid.is-in li:nth-child(10) .std{transition-delay:.54s}
.std:hover,.std.is-open{box-shadow:0 1px 1px rgba(0,0,0,.03),0 22px 46px -22px rgba(20,40,80,.3);border-color:#d6dbe4}
.std img{width:100%;max-width:180px;height:92px;margin:0 auto;object-fit:contain}
.std-name{display:block;margin-top:16px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.std-holder{display:block;margin-top:3px;font-size:12px;color:#8b919b}
.std-caption{text-align:center;max-width:620px;margin:28px auto 0;min-height:52px;font-size:16px;line-height:1.5;color:var(--muted);transition:opacity .25s ease}
.std-caption.is-fading{opacity:0}
@media(max-width:1000px){
  .std-grid{gap:10px}
  .std-grid li{width:calc((100% - 40px) / 5)}
  .std{padding:18px 8px 16px;border-radius:18px}
  .std img{max-width:140px;height:72px}
  .std-name{font-size:13px}
}
@media(max-width:760px){
  .std-lead{font-size:19px;margin-top:38px}
  .std-grid{gap:12px}
  .std-grid li{width:calc((100% - 12px) / 2)}
  .std img{max-width:150px;height:80px}
  .std-caption{font-size:15px;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .std,.std-caption{transition:none}
  .std-grid[data-reveal] .std{opacity:1;transform:none}
}