@layer reset,tokens,base,layout,components,pages,utilities; @layer reset{*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body,h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0} img,picture{display:block; max-inline-size:100%} button,input,textarea,select{font:inherit}} @layer tokens{:root{color-scheme:dark; --canvas:#14191b; --canvas-deep:#0e1214; --surface:#1a2023; --surface-raised:#20272a; --text:#f3f5f4; --text-soft:#bcc3c1; --text-faint:#8d9794; --line:rgb(243 245 244 / 12%); --line-strong:rgb(243 245 244 / 24%); --accent:#78b595; --accent-bright:#91c9ac; --accent-ink:#0a100d; --warm:#ffffff; --warm-ink:#171b1c; --focus:#f0bb5b; --danger:#d68780; --page-gutter:clamp(1.25rem,4vw,4.5rem); --content:76rem; --measure:43rem; --radius-sm:0.45rem; --radius-md:0.85rem; --radius-lg:1.45rem; --shadow:0 2rem 5rem rgb(0 0 0 / 28%); --step--1:clamp(0.8rem,0.78rem + 0.08vw,0.86rem); --step-0:clamp(0.98rem,0.96rem + 0.1vw,1.05rem); --step-1:clamp(1.1rem,1.06rem + 0.2vw,1.24rem); --step-2:clamp(1.35rem,1.25rem + 0.42vw,1.65rem); --step-3:clamp(1.7rem,1.52rem + 0.74vw,2.2rem); --step-4:clamp(2.2rem,1.9rem + 1.18vw,3.05rem); --step-5:clamp(2.85rem,2.3rem + 2.12vw,4.45rem); --space-1:clamp(0.5rem,0.45rem + 0.2vw,0.7rem); --space-2:clamp(0.8rem,0.7rem + 0.35vw,1.1rem); --space-3:clamp(1.2rem,1rem + 0.7vw,1.7rem); --space-4:clamp(1.8rem,1.35rem + 1.6vw,3rem); --space-5:clamp(3rem,2.1rem + 3vw,5.5rem); --space-6:clamp(4.5rem,3.4rem + 4.5vw,8rem); --ease:cubic-bezier(0.2,0.7,0.2,1)}} @layer base{body{min-block-size:100vh; overflow-x:hidden; background:var(--canvas); color:var(--text); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:var(--step-0); line-height:1.6; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}::selection{background:var(--accent); color:var(--accent-ink)} h1,h2,h3{max-inline-size:18ch; font-weight:780; letter-spacing:-0.045em; line-height:1.02; text-wrap:balance} h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2); letter-spacing:-0.025em; line-height:1.12} p,li,dd{text-wrap:pretty} a{color:inherit; text-decoration-thickness:0.08em; text-underline-offset:0.22em} a:hover{text-decoration-color:var(--accent)}:focus-visible{outline:3px solid var(--focus); outline-offset:4px} [id]{scroll-margin-block-start:6.5rem}} @layer layout{.shell{inline-size:min(100% - (2 * var(--page-gutter)),var(--content)); margin-inline:auto} .section{padding-block:var(--space-6)} .section--tight{padding-block:var(--space-5)} .stack{display:grid; gap:var(--space-3)} .stack--small{gap:var(--space-2)} .split{display:grid; align-items:center; gap:var(--space-5)} .section-header{display:grid; gap:var(--space-3); margin-block-end:var(--space-4)} .section-header>p:last-child{max-inline-size:var(--measure); color:var(--text-soft); font-size:var(--step-0)}} @layer components{.skip-link{position:fixed; z-index:100; inset-block-start:0.75rem; inset-inline-start:0.75rem; translate:0 -180%; padding:0.7rem 1rem; border-radius:var(--radius-sm); background:var(--text); color:var(--canvas); font-weight:800} .skip-link:focus{translate:0} .site-header{position:sticky; z-index:40; inset-block-start:0; border-block-end:1px solid var(--line); background:rgb(14 18 20 / 95%); backdrop-filter:blur(18px)} .nav{min-block-size:4.7rem; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3)} .wordmark{display:inline-flex; align-items:baseline; color:var(--text); font-size:1.25rem; font-weight:900; letter-spacing:0.11em; line-height:1; text-decoration:none} .wordmark span{color:var(--accent)} .nav__links{display:flex; align-items:center; gap:clamp(1rem,2vw,2rem)} .nav__links>a:not(.button){color:var(--text-soft); font-size:var(--step--1); font-weight:720; text-decoration:none} .nav__links>a:hover{color:var(--text)} .nav__toggle{display:none; inline-size:2.75rem; block-size:2.75rem; place-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); background:transparent; color:var(--text)} .nav__toggle svg{inline-size:1.35rem} .button{min-block-size:3rem; display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; padding:0.75rem 1.1rem; border:1px solid transparent; border-radius:0.72rem; font-size:var(--step--1); font-weight:800; line-height:1.2; text-align:center; text-decoration:none; transition:translate 180ms var(--ease),background-color 180ms ease,border-color 180ms ease} a.button:hover{translate:0 -2px} .button--large{min-block-size:3.35rem; padding-inline:1.35rem; font-size:var(--step-0)} .button--primary{background:var(--accent); color:var(--accent-ink)} a.button--primary:hover{background:var(--accent-bright)} .button--secondary{border-color:var(--line-strong); background:rgb(255 255 255 / 3%); color:var(--text)} a.button--secondary:hover{border-color:var(--accent); background:rgb(120 181 149 / 8%)} .button--store-preview{cursor:default; user-select:none} .app-store-badge{display:inline-block; inline-size:fit-content; border:1px solid rgb(255 255 255 / 35%); border-radius:0.5rem; background:#050606; box-shadow:0 0.75rem 2rem rgb(0 0 0 / 22%); user-select:none} .app-store-badge img{inline-size:7.875rem; block-size:auto} .eyebrow{color:var(--accent-bright); font-size:var(--step--1); font-weight:820; letter-spacing:0.13em; line-height:1.2; text-transform:uppercase} .text-link{min-block-size:3rem; display:inline-flex; align-items:center; gap:0.5rem; color:var(--text); font-weight:760; text-decoration:none} .text-link svg{inline-size:1rem; transition:translate 180ms var(--ease)} .text-link:hover svg{translate:0.25rem 0} .phone{position:relative; inline-size:min(21rem,72vw); overflow:hidden; border:1px solid var(--line-strong); border-radius:2.8rem; background:var(--canvas-deep); box-shadow:var(--shadow)} .phone::after{position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 0.42rem rgb(14 18 20 / 75%); content:""; pointer-events:none} .phone img,.product-frame img{inline-size:100%; block-size:auto} .faq{display:grid; border-block-start:1px solid var(--line)} .faq details{border-block-end:1px solid var(--line)} .faq summary{min-block-size:4.6rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-2); cursor:pointer; font-size:var(--step-1); font-weight:760; list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{inline-size:1.8rem; block-size:1.8rem; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; color:var(--accent); content:"+"} .faq details[open] summary::after{content:"−"} .faq details p{max-inline-size:var(--measure); padding-block:0 var(--space-3); color:var(--text-soft)} .site-footer{padding-block:var(--space-5) var(--space-3); border-block-start:1px solid var(--line); background:var(--canvas-deep)} .footer-grid{display:grid; gap:var(--space-4)} .footer-intro{display:grid; align-content:start; gap:var(--space-2)} .footer-intro p{max-inline-size:30rem; color:var(--text-soft)} .footer-links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3)} .footer-links h2{margin-block-end:var(--space-1); font-size:var(--step--1); letter-spacing:0.08em; text-transform:uppercase} .footer-links ul{display:grid; gap:0.45rem; padding:0; list-style:none} .footer-links a{color:var(--text-soft); text-decoration:none} .footer-meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-1); margin-block-start:var(--space-4); padding-block-start:var(--space-3); border-block-start:1px solid var(--line); color:var(--text-faint); font-size:var(--step--1)}} @layer pages{.hero{display:grid; min-block-size:calc(100svh - 4.7rem); align-items:center; overflow:clip; padding-block:var(--space-5)} .hero__grid{display:grid; align-items:start; gap:var(--space-5)} .hero__copy{display:grid; gap:var(--space-3)} .hero h1{max-inline-size:9.5ch} .hero__lead{max-inline-size:37rem; color:var(--text-soft); font-size:var(--step-0); line-height:1.65} .hero__actions{display:flex; flex-wrap:wrap; align-items:center; gap:0.8rem 1.4rem; padding-block-start:var(--space-1)} .hero__note{color:var(--text-faint); font-size:var(--step--1)} .hero__visual{position:relative; display:grid; grid-template-rows:auto auto; min-block-size:38rem; align-content:start; justify-items:center; gap:1.5rem} .hero__measure{position:relative; inline-size:108%; display:grid; grid-template-columns:repeat(3,1fr); padding-block-end:2.25rem; color:var(--text-faint); font-size:0.65rem; font-weight:800; letter-spacing:0.12em; line-height:1.2} .hero__measure::before{position:absolute; inset:1.6rem 0 auto; block-size:1px; background:var(--line-strong); content:""} .hero__measure span{position:relative; text-align:center} .hero__measure span::after{position:absolute; inset:1.36rem 50% auto auto; inline-size:0.55rem; block-size:0.55rem; translate:50% 0; border:1px solid var(--accent); border-radius:50%; background:var(--canvas); content:""} .hero__visual .phone{block-size:clamp(30rem,60svh,38rem); margin-block-start:0; border-block-end-color:transparent; border-end-start-radius:0; border-end-end-radius:0; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 5.5rem),transparent 100% ); mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 5.5rem),transparent 100% )} .doctrine{--doctrine-forest:#2b4039; padding-block:var(--space-6); background:var(--warm); color:var(--warm-ink)} .doctrine .eyebrow{color:#b0cebf} .doctrine__intro{display:grid; gap:var(--space-4)} .doctrine__intro>div{display:grid; align-content:start; gap:var(--space-2); padding:var(--space-4); border:1px solid rgb(120 181 149 / 18%); background:var(--doctrine-forest); color:#f3f5f1} .doctrine__intro>p{max-inline-size:34rem; align-self:center; justify-self:center; color:#202522; font-size:var(--step-0); text-align:center} .phase-line{position:relative; display:grid; gap:var(--space-3); margin-block-start:var(--space-5); padding:0; list-style:none} .phase-line li{position:relative; display:grid; align-content:start; gap:0.35rem; padding-inline-start:2.2rem} .phase-line li::before{position:absolute; inset:0.45rem auto auto 0; inline-size:0.75rem; block-size:0.75rem; border:2px solid #356b51; border-radius:50%; background:var(--warm); content:""} .phase-line li:not(:last-child)::after{position:absolute; inset:1.2rem auto -1.1rem 0.34rem; inline-size:1px; background:rgb(23 27 28 / 28%); content:""} .phase-line__number{color:#58625e; font-size:0.72rem; font-weight:850; letter-spacing:0.12em} .phase-line strong{font-size:var(--step-1); line-height:1.2} .phase-line li>span:last-child{color:#356b51; font-size:var(--step--1); font-weight:500} .phase-line__rest::before{background:#356b51 !important} .product-section{padding-block:var(--space-6)} .product-story{display:grid; align-items:center; gap:var(--space-5)} .product-story + .product-story{margin-block-start:var(--space-6); padding-block-start:var(--space-6); border-block-start:2px solid var(--line)} .product-story__copy{display:grid; gap:var(--space-3)} .product-story__copy>p:not(.eyebrow,.quiet-proof){max-inline-size:var(--measure); color:var(--text-soft); font-size:var(--step-0)} .signal-list{display:grid; margin-block-start:var(--space-2); border-block-start:1px solid var(--line)} .signal-list div{display:grid; grid-template-columns:minmax(5.5rem,0.35fr) minmax(0,1fr); gap:var(--space-2); padding-block:var(--space-2); border-block-end:1px solid var(--line)} .signal-list dt{color:var(--accent-bright); font-weight:780} .signal-list dd{color:var(--text-soft)} .quiet-proof{max-inline-size:35rem; padding-inline-start:var(--space-2); border-inline-start:2px solid var(--accent); color:var(--text-soft)} .product-frame{inline-size:min(19rem,72vw); justify-self:center; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow)} .product-media{position:relative; justify-self:center} .product-media .product-frame{justify-self:auto} .product-media--today{inline-size:min(100%,28rem); min-block-size:min(36.4rem,111vw)} .product-frame--today{position:absolute; z-index:1; inset-block-start:min(3.75rem,10vw); inset-inline-start:0; inline-size:min(13rem,38vw)} .product-frame--detail{position:absolute; z-index:2; inset-block-start:0; inset-inline-end:0; inline-size:min(18rem,55vw); box-shadow:0 2.5rem 6rem rgb(0 0 0 / 42%)} .product-media--plan{display:grid; grid-template-columns:repeat(3,minmax(0,10rem)); align-items:start; justify-content:center; gap:clamp(0.35rem,1.5vw,1rem); inline-size:min(100%,34rem)} .product-media--plan .product-frame{position:static; inline-size:100%; transform:none} .principles{padding-block:var(--space-6); border-block:1px solid var(--line); background:var(--canvas-deep)} .principles__header{display:grid; gap:var(--space-2); margin-block-end:var(--space-4)} .principle-rows{border-block-start:1px solid var(--line)} .principle-rows article{display:grid; gap:var(--space-2); padding-block:var(--space-3); border-block-end:1px solid var(--line)} .principle-rows article>span{color:var(--accent); font-size:var(--step--1); font-weight:800} .principle-rows h3{font-size:var(--step-1); font-weight:720; letter-spacing:-0.02em} .principle-rows p{max-inline-size:33rem; color:var(--text-soft)} .cta-band{padding-block:var(--space-6)} .cta-band__inner{display:grid; align-items:end; gap:var(--space-4)} .cta-band__inner>div:first-child{display:grid; gap:var(--space-2)} .cta-band__action{display:grid; justify-items:start; gap:var(--space-1)} .cta-band__action p{color:var(--text-faint); font-size:var(--step--1)} .nav .button--store-preview{border-color:var(--line-strong); background:transparent; color:var(--text-soft)} .page-hero{padding-block:var(--space-6) var(--space-5); border-block-end:1px solid var(--line); background:var(--canvas-deep)} .page-hero__inner{display:grid; gap:var(--space-3)} .page-hero__inner h1{max-inline-size:13ch; font-size:var(--step-4)} .page-hero__inner>p:last-child{max-inline-size:var(--measure); color:var(--text-soft); font-size:var(--step-0)} .support-grid{display:grid; gap:1px; border:1px solid var(--line); background:var(--line)} .support-item{display:grid; align-content:start; gap:var(--space-2); padding:var(--space-3); background:var(--canvas)} .support-item h2{font-size:var(--step-1); letter-spacing:-0.02em} .support-item p{color:var(--text-soft)} .contact-panel{display:grid; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface)} .contact-panel h2{font-size:var(--step-3)} .contact-panel p{max-inline-size:var(--measure); color:var(--text-soft)} .contact-address{display:grid; align-content:start; gap:0.35rem; font-style:normal} .contact-address span{color:var(--text-faint); font-size:var(--step--1)} .legal-layout{display:grid; align-items:start; gap:var(--space-5)} .legal-nav{display:none; position:sticky; inset-block-start:6.5rem} .legal-nav ul{display:grid; gap:0.45rem; padding:0; list-style:none} .legal-nav a{color:var(--text-faint); font-size:var(--step--1); text-decoration:none} .legal-nav a:hover{color:var(--text)} .legal-content{display:grid; gap:var(--space-5); min-inline-size:0} .legal-section{display:grid; gap:var(--space-2)} .legal-section h2{max-inline-size:28ch; font-size:var(--step-2); letter-spacing:-0.025em} .legal-section p,.legal-section li{max-inline-size:48rem; color:var(--text-soft)} .legal-section ul,.legal-section ol{display:grid; gap:0.6rem; padding-inline-start:1.3rem} .notice{max-inline-size:48rem; padding:var(--space-3); border-inline-start:3px solid var(--danger); background:rgb(214 135 128 / 8%); color:var(--text-soft)} .steps{display:grid; gap:var(--space-2); padding:var(--space-3) var(--space-3) var(--space-3) 3.2rem; border:1px solid var(--line); background:var(--surface)} .steps li{padding-inline-start:0.4rem; color:var(--text-soft)} .error-page{min-block-size:min(42rem,65svh); display:grid; align-content:center; justify-items:start; gap:var(--space-3); inline-size:min(100% - (2 * var(--page-gutter)),50rem); margin-inline:auto; padding-block:var(--space-6)} .error-page p:not(.eyebrow){color:var(--text-soft); font-size:var(--step-0)} .error-page h1{font-size:var(--step-4)} @media (min-width:48rem){.split{grid-template-columns:minmax(0,0.9fr) minmax(20rem,1.1fr)} .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(23rem,0.8fr)} .hero__copy{padding-block-start:0.5rem} .doctrine__intro,.cta-band__inner{grid-template-columns:minmax(0,1fr) minmax(20rem,0.7fr)} .phase-line{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0} .phase-line::before{position:absolute; inset:1.16rem 0 auto; block-size:1px; background:rgb(23 27 28 / 28%); content:""} .phase-line li{padding:2.5rem var(--space-2) 0 0} .phase-line li::before{inset:0.8rem auto auto 0} .phase-line li:not(:last-child)::after{display:none} .product-story{grid-template-columns:minmax(0,1fr) minmax(18rem,0.72fr)} .product-story--today{grid-template-columns:minmax(0,1fr)} .product-story--plan{grid-template-columns:minmax(0,1fr)} .product-story--reverse>:first-child{order:2} .principle-rows article{grid-template-columns:3rem minmax(12rem,0.75fr) minmax(18rem,1fr); align-items:baseline} .support-grid{grid-template-columns:repeat(2,1fr)} .contact-panel{grid-template-columns:minmax(0,1.2fr) minmax(14rem,0.6fr)} .legal-layout{grid-template-columns:15rem minmax(0,1fr)} .legal-nav{display:block} .footer-grid{grid-template-columns:minmax(18rem,1.2fr) minmax(20rem,1fr)}} @media (min-width:64rem){.product-story--today{grid-template-columns:minmax(0,1fr) minmax(28rem,0.85fr)} .product-story--plan{grid-template-columns:minmax(32rem,0.95fr) minmax(0,1fr)}} @media (max-width:47.99rem){.nav__toggle{display:grid} .nav__links{position:absolute; inset:calc(100% + 1px) var(--page-gutter) auto; display:none; align-items:stretch; padding:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--canvas-deep); box-shadow:var(--shadow)} .nav__links[data-open="true"]{display:grid} .nav__links>a:not(.button){min-block-size:2.75rem; display:flex; align-items:center; padding-inline:0.5rem} .nav__links .button{margin-block-start:0.35rem} .hero{min-block-size:auto; padding-block-start:var(--space-5)} .hero__visual{min-block-size:34rem} .hero__measure{inline-size:100%}}} @layer utilities{.muted{color:var(--text-soft)} .visually-hidden{position:absolute !important; inline-size:1px !important; block-size:1px !important; overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important; white-space:nowrap !important}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important}} @media (forced-colors:active){.button,.phone,.product-frame,.support-grid,.contact-panel,.steps{border:1px solid CanvasText} .eyebrow,.phase-line__number,.wordmark span{color:LinkText} .hero__visual .phone{border-block-end-color:CanvasText; -webkit-mask-image:none; mask-image:none}}