:root{
      --stone:#EEEAE5; --stone-2:#E7E2DB; --card:#FFFFFF;
      --ink:#231C15; --ink-70:rgba(35,28,21,.70); --ink-50:rgba(35,28,21,.50); --ink-30:rgba(35,28,21,.30); --ink-14:rgba(35,28,21,.14);
      --sage:#4E7A6E; --sienna:#9B7350; --lav:#6B5F8A;
      --midnight:#231C15; --midnight-2:#2C241C;
      --maxw:1120px;
      --serif:"Cormorant Garamond",Georgia,serif;
      --sans:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
      --mono:"IBM Plex Mono",ui-monospace,monospace;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      background:var(--stone); color:var(--ink);
      font-family:var(--sans); font-weight:300; line-height:1.6;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:28px}
    section{padding-block:clamp(72px,11vw,150px)}
    a{color:inherit}

    /* data voice */
    .mono{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:.02em}
    .folio{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-50)}
    .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--sage)}

    /* display voice */
    h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:1.04; letter-spacing:-.01em}
    h1{font-size:clamp(52px,10vw,116px)}
    h2{font-size:clamp(34px,5.4vw,64px)}
    h3{font-size:clamp(22px,3vw,30px)}
    .lead{font-size:clamp(18px,2.1vw,22px); color:var(--ink-70); max-width:34ch; font-weight:300}
    .num{font-family:var(--serif); font-feature-settings:"lnum" 1}
    em,.it{font-style:italic}

    a.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--stone);padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
    a.skip:focus{left:0}

    /* header */
    header.site{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--stone) 86%, transparent); backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--ink-14)}
    header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:16px}
    .brand{display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:23px; letter-spacing:.02em; text-decoration:none}
    .brand .glyph{width:22px;height:22px;flex:0 0 auto}
    nav.primary{display:flex; gap:30px; align-items:center}
    nav.primary a:not(.btn){font-size:14px; color:var(--ink-70); text-decoration:none; transition:color .2s}
    nav.primary a:not(.btn):hover{color:var(--ink)}
    .btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:400; font-size:15px; text-decoration:none; cursor:pointer; border:none}
    .btn-ink{background:var(--ink); color:var(--stone); padding:13px 22px; border-radius:100px; transition:transform .2s, background .2s}
    .btn-ink:hover{transform:translateY(-1px); background:#180f09}
    .btn-ghost{color:var(--ink); border:1px solid var(--ink-30); padding:12px 21px; border-radius:100px; background:transparent; transition:border-color .2s}
    .btn-ghost:hover{border-color:var(--ink)}
    @media(max-width:760px){ nav.primary a:not(.btn){display:none} nav.primary{gap:0} }

    /* hero */
    .hero{position:relative; padding-block:clamp(56px,9vw,110px) clamp(80px,12vw,150px)}
    .hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
    .hero h1 .drift{display:inline-block; color:var(--sage); font-style:italic}
    .hero .lead{margin-top:28px; font-size:clamp(19px,2.3vw,24px); max-width:40ch}
    .hero .cta-row{margin-top:38px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
    .hero .fine{margin-top:16px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-50)}
    @media(max-width:860px){ .hero .wrap{grid-template-columns:1fr; gap:44px} }

    /* orb */
    .orb-stage{aspect-ratio:1; display:grid; place-items:center; position:relative}
    .orb-rings{position:absolute; inset:0; display:grid; place-items:center}
    .orb-rings span{position:absolute; border:1px solid var(--ink-14); border-radius:50%}
    .r1{width:78%;height:78%} .r2{width:56%;height:56%} .r3{width:36%;height:36%; border-color:color-mix(in srgb,var(--sage) 45%, transparent)!important}
    .orb{width:64%; aspect-ratio:1; border-radius:50%;
      background:radial-gradient(circle at 50% 47%, rgba(122,166,151,.55) 0%, rgba(78,122,110,.40) 22%, rgba(78,122,110,.16) 52%, rgba(78,122,110,0) 82%);
      filter:blur(1px);
      animation:breathe 12s ease-in-out infinite;
    }
    @keyframes breathe{
      0%,100%{transform:scale(.46); opacity:.55}   /* rest / empty */
      38%{transform:scale(1); opacity:1}           /* inhale, shade grows */
      52%{transform:scale(1); opacity:1}           /* hold, full */
      92%{transform:scale(.46); opacity:.55}        /* exhale, shade recedes */
    }
    @media(prefers-reduced-motion:reduce){ .orb{animation:none; transform:scale(.82); opacity:.9} }

    /* positioning line */
    .position{background:var(--stone-2)}
    .position .wrap{max-width:900px}
    .position p{font-family:var(--serif); font-size:clamp(23px,3.2vw,38px); line-height:1.32; color:var(--ink); font-weight:300}
    .position .kw{color:var(--sage)}

    /* premise steps */
    .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:64px}
    .step .n{font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--sage)}
    .step h3{margin-top:16px; font-size:clamp(21px,2.4vw,27px)}
    .step p{margin-top:12px; color:var(--ink-70); font-size:15.5px; max-width:32ch}
    @media(max-width:760px){ .steps{grid-template-columns:1fr; gap:34px} }

    .shift-card{margin-top:60px; background:var(--card); border-radius:22px; padding:clamp(32px,4vw,44px) clamp(28px,4vw,52px); display:flex; flex-direction:column; align-items:center; gap:24px; box-shadow:0 30px 60px -34px rgba(35,28,21,.35)}
    .shift-row{display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,46px); flex-wrap:wrap}
    .shift-card .cell{text-align:center}
    .shift-card .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-50)}
    .shift-card .val{font-family:var(--serif); font-size:clamp(46px,7vw,68px); line-height:1; margin-top:8px; font-feature-settings:"lnum" 1}
    .shift-card .arrow{font-family:var(--serif); font-size:clamp(28px,4vw,40px); color:var(--ink-30)}
    .shift-card .divider{width:1px; align-self:stretch; margin:8px 2px; background:var(--ink-14)}
    .shift-card .delta .val{color:var(--sage)}
    .shift-card .say{text-align:center; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink-70)}
    @media(max-width:560px){ .shift-card .divider{display:none} }

    /* library */
    .library{background:var(--stone-2)}
    .tracks{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); margin-top:56px}
    .track h3{font-size:clamp(24px,3vw,32px)}
    .track .kicker{margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sienna)}
    .track.prana .kicker{color:var(--sage)}
    .sess{margin-top:26px; display:flex; flex-direction:column}
    .sess li{list-style:none; display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:16px; padding:18px 0; border-top:1px solid var(--ink-14)}
    .sess li:last-child{border-bottom:1px solid var(--ink-14)}
    .sess .no{font-family:var(--mono); font-size:12px; color:var(--ink-30)}
    .sess .name{font-family:var(--serif); font-size:clamp(21px,2.4vw,26px)}
    .sess .name small{display:block; font-family:var(--sans); font-size:13px; color:var(--ink-50); letter-spacing:0; margin-top:2px}
    .sess .dur{font-family:var(--mono); font-size:13px; color:var(--ink-50)}
    .free-note{margin-top:40px; color:var(--ink-70); max-width:60ch; font-size:16px}
    @media(max-width:760px){ .tracks{grid-template-columns:1fr; gap:40px} }

    /* use-cases (search layer) */
    .uses .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px}
    .use{background:var(--card); border-radius:18px; padding:26px 24px; box-shadow:0 22px 44px -34px rgba(35,28,21,.3)}
    .use .t{font-family:var(--serif); font-size:24px}
    .use .term{margin-top:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sage)}
    .use p{margin-top:14px; font-size:14.5px; color:var(--ink-70)}
    @media(max-width:900px){ .uses .grid{grid-template-columns:1fr 1fr} }
    @media(max-width:520px){ .uses .grid{grid-template-columns:1fr} }

    /* inside the app */
    .inside .wrap{max-width:var(--maxw)}
    .phones{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:56px}
    .phone{background:var(--card); border-radius:30px; padding:22px; box-shadow:0 40px 70px -40px rgba(35,28,21,.45); border:1px solid var(--ink-14); min-height:340px; display:flex; flex-direction:column}
    .phone .top{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-50); letter-spacing:.1em}
    .phone .cap{margin-top:auto; font-size:14px; color:var(--ink-70)}
    .phone .cap b{font-weight:500}
    .mini-orb{width:112px;aspect-ratio:1;border-radius:50%;margin:20px auto 8px;background:radial-gradient(circle at 50% 47%, rgba(122,166,151,.5) 0%, rgba(78,122,110,.34) 26%, rgba(78,122,110,.12) 54%, rgba(78,122,110,0) 80%)}
    .phone .begin{text-align:center; font-family:var(--serif); font-size:24px; letter-spacing:.04em}
    .phone .greet{text-align:center; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-50)}
    .phone .pinned{margin-top:18px; border-top:1px solid var(--ink-14); padding-top:12px; display:flex; justify-content:space-between; font-size:13px; color:var(--ink-50)}
    .phone .pinned .mono{font-size:12px}
    .reveal{display:flex; align-items:center; justify-content:center; gap:14px; margin:30px 0 6px}
    .reveal .b{font-family:var(--serif); font-size:34px; color:var(--ink-30)}
    .reveal .a{font-family:var(--serif); font-size:34px}
    .reveal .d{font-family:var(--serif); font-size:52px; color:var(--sage); font-feature-settings:"lnum" 1}
    .tide{height:70px;margin:26px 0 8px}
    @media(max-width:820px){ .phones{grid-template-columns:1fr; max-width:380px; margin-inline:auto} }

    /* the light */
    .light .panels{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px}
    .panel{border-radius:24px; padding:clamp(28px,4vw,48px); min-height:260px; display:flex; flex-direction:column; justify-content:space-between}
    .panel.morning{background:linear-gradient(160deg,#F3EFE9,#E6DFD5); color:var(--ink)}
    .panel.midnight{background:linear-gradient(160deg,#2C241C,#1C1610); color:#E7E0D6}
    .panel .lbl{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.7}
    .panel .porb{width:84px;aspect-ratio:1;border-radius:50%}
    .panel.morning .porb{background:radial-gradient(38% 34% at 40% 34%,#6d9c8f,#4E7A6E 60%,#3c625711); box-shadow:0 16px 30px -14px rgba(35,28,21,.4)}
    .panel.midnight .porb{background:radial-gradient(38% 34% at 40% 34%,#8579a6,#6B5F8A 60%,#4a406622); box-shadow:0 16px 34px -12px rgba(0,0,0,.6)}
    .panel h3{font-family:var(--serif); font-size:26px}
    @media(max-width:640px){ .light .panels{grid-template-columns:1fr} }

    /* pricing clarity */
    .pricing .wrap{max-width:880px; text-align:center}
    .pricing .rows{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left}
    .price-card{background:var(--card); border-radius:20px; padding:30px 28px; box-shadow:0 26px 50px -38px rgba(35,28,21,.35)}
    .price-card.pro{background:var(--midnight); color:#E7E0D6}
    .price-card .tag{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
    .price-card h3{margin-top:8px; font-size:28px}
    .price-card .p{margin-top:12px; font-size:15px; opacity:.85}
    .price-card .amt{margin-top:18px; font-family:var(--serif); font-size:34px; font-feature-settings:"lnum" 1}
    .price-card .amt small{font-family:var(--mono); font-size:13px; opacity:.7}
    @media(max-width:640px){ .pricing .rows{grid-template-columns:1fr} }

    /* faq */
    .faq .wrap{max-width:820px}
    details{border-top:1px solid var(--ink-14); padding:22px 0}
    details:last-of-type{border-bottom:1px solid var(--ink-14)}
    summary{font-family:var(--serif); font-size:clamp(20px,2.4vw,25px); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px}
    summary::-webkit-details-marker{display:none}
    summary::after{content:"+"; font-family:var(--mono); color:var(--sage); font-size:22px; transition:transform .2s}
    details[open] summary::after{transform:rotate(45deg)}
    details p{margin-top:14px; color:var(--ink-70); font-size:16px; max-width:64ch}

    /* waitlist / final cta */
    .final{background:var(--midnight); color:#E7E0D6}
    .final .wrap{max-width:760px; text-align:center}
    .final h2{color:#F1EBE1}
    .final .lead{color:rgba(231,224,214,.72); margin:22px auto 0; max-width:42ch}
    .final .fine{margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(231,224,214,.5)}

    footer.site{background:var(--midnight); color:rgba(231,224,214,.6); border-top:1px solid rgba(231,224,214,.12)}
    footer.site .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:30px; flex-wrap:wrap; gap:16px}
    footer.site a{color:rgba(231,224,214,.8); text-decoration:none; margin-left:22px; font-size:14px}
    footer.site .brand{color:#E7E0D6}

    :focus-visible{outline:2px solid var(--sage); outline-offset:3px; border-radius:4px}

.appstore-badge{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:14px;line-height:1;user-select:none}
.appstore-badge .asb-text{display:flex;flex-direction:column;gap:3px;text-align:left}
.appstore-badge .asb-top{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.appstore-badge .asb-store{font-family:var(--serif);font-size:23px;line-height:1;letter-spacing:.01em}
.appstore-badge.dark{background:var(--ink);color:var(--stone)}
.appstore-badge.light{background:#F1EBE1;color:var(--midnight)}
.final .badge-wrap{margin-top:34px;display:flex;justify-content:center}