@font-face{font-family:Caslon;src:url('/assets/Libre-Caslon-Display.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#f1f0e4;--muted:#c1cdc4;--green:#c7dfbd;--page:#101d1d;--panel:#192b29;--line:#3c5149}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:1rem/1.65 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
img{display:block;max-width:100%}
.wrap{width:min(71rem,calc(100% - 3rem));margin-inline:auto}
.skip{position:absolute;z-index:2;left:1rem;top:1rem;padding:.5rem 1rem;background:var(--page);transform:translateY(-200%)}
.skip:focus{transform:none}
.nav,.footer,.nav nav,.footer nav,.brand{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.nav,.footer{justify-content:space-between;padding-block:1.15rem}
.nav a,.footer a{text-decoration:none}
.nav nav,.footer{font-size:.9rem}
.nav nav a:hover,.footer a:hover,[aria-current=page]{text-decoration:underline}
.brand{gap:.55rem;font-size:1.25rem;font-weight:600}
.hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(32rem,65vw,43rem);background:#203834}
.hero-image,.hero::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-image{object-fit:cover;object-position:center 56%}
.hero::after{content:'';background:linear-gradient(90deg,#0c1819eb,#101d1d26),linear-gradient(0deg,#101d1d 1%,transparent 70%)}
.hero-content{padding-block:4rem 4.7rem}
.eyebrow{color:var(--green);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700}
h1,h2,h3,p{margin:0 0 1rem}
h1,h2{font-family:Caslon,Georgia,serif;font-weight:400;line-height:1}
h1{font-size:clamp(4rem,10vw,8rem)}
h2{font-size:clamp(2.9rem,6vw,5rem)}
h3{font-size:1.17rem}
.hero-content>p:not(.eyebrow){max-width:36ch;font-size:1.14rem}
.button{display:inline-block;background:var(--green);color:#10231c;border-radius:100px;padding:.7rem 1.25rem;font-weight:650;text-decoration:none}
.button:hover{background:#e4f2de}
.text-link{display:inline-block;margin:.7rem 0 .7rem 1rem}
.section{padding-block:clamp(3rem,8vw,6.4rem)}
.cards,.plans,.split{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.75rem}
.cards img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:.7rem;margin-bottom:1rem}
.cards p,.plans p:not(.price),.split p:not(.eyebrow),.fine,.footer{color:var(--muted)}
.band{background:var(--panel);border-block:1px solid var(--line)}
.plans article{padding:1.35rem;border:1px solid var(--line);border-radius:.7rem}
.plans .featured{border-color:var(--green)}
.price{font-size:clamp(1.75rem,3.6vw,2.65rem);line-height:1.2}
.price small,.fine{font-size:.86rem}
.fine{margin-top:1rem}
.split{grid-template-columns:1fr 1fr;align-items:center;margin-top:0;gap:clamp(1rem,6vw,4rem)}
.benefits{margin:0;padding-left:1.2rem}
.benefits li+li{margin-top:.55rem}
.footer{border-top:1px solid var(--line)}
@media(max-width:44rem){.cards,.plans,.split{grid-template-columns:1fr}.nav,.nav nav{gap:.75rem}.wrap{width:calc(100% - 2rem)}.hero-image{object-position:62% center}}

html{scroll-padding-top:9rem;scrollbar-gutter:stable}
.nav.wrap{position:sticky;top:0;z-index:3;width:100%;padding:.75rem clamp(1rem,4vw,3rem);background:var(--page);gap:.6rem 1.25rem}
.nav nav{gap:.45rem 1rem}
.nav nav a{white-space:nowrap}
.footer{border-top:0}
.band{border-bottom:0}
.app-cta{display:flex;align-items:center;gap:1rem;margin-block:1rem}
.app-cta img{flex:none;border-radius:.35rem}
.app-cta .fine{margin:.45rem 0 0}
.calculator{padding:1.25rem;border:1px solid var(--line);border-radius:.7rem;background:var(--page)}
.calculator label,.calculator output{display:block;font-weight:650}
.calculator input{width:9rem;margin:.5rem 0 1rem;padding:.55rem;font:inherit}
.calculator output{margin-bottom:1rem;color:var(--green)}
.calculator a:not([href]){opacity:.55}
@media(max-width:44rem){html{scroll-padding-top:12rem}.nav nav{column-gap:.75rem;font-size:.82rem}.hero-content{padding-block:3rem}.app-cta img{width:80px;height:80px}}
.public-note{width:min(48rem,calc(100% - 2rem));margin:3rem auto;padding-bottom:2rem}
.public-note h1{font-size:clamp(3rem,7vw,5rem)}
.public-note h2{font-size:clamp(1.85rem,4vw,2.7rem);margin-top:2rem}
.public-note p{overflow-wrap:anywhere}

.app-preview{--sidebar-width:15rem;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh}
.app-preview main{grid-column:2}
.app-preview .footer{grid-column:2;align-self:end}
.app-preview [hidden]{display:none}
.preview-sidebar{grid-column:1;grid-row:1/span 2;position:sticky;top:0;height:100dvh;overflow:auto;padding:1.4rem 1rem;background:#101d1d;border-right:1px solid var(--line)}
.preview-sidebar .brand{margin:0 .5rem 2rem;text-decoration:none}
.preview-sidebar .eyebrow{margin-inline:.65rem}
.preview-sidebar nav{display:grid;gap:.3rem}
.preview-sidebar nav a{display:flex;align-items:center;gap:.8rem;padding:.7rem;border-radius:.6rem;text-decoration:none;color:var(--muted)}
.preview-sidebar nav a:hover,.preview-sidebar nav a[aria-current]{background:var(--panel);color:var(--green)}
.preview-sidebar .nav-icon{width:1.25rem;height:1.25rem;flex:none}
.preview-sidebar .preview-links{margin-top:1.2rem;padding-top:.65rem;border-top:1px solid var(--line);font-size:.9rem}
.preview-category{margin:2rem 0 .75rem}
.preview-cards{list-style:none;padding:0;margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.preview-cards li{min-width:0}
.preview-cards img{margin-bottom:.5rem}
@media(max-width:62rem){.preview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:44rem){
  .app-preview{display:block}
  .preview-sidebar{z-index:3;height:auto;padding:.55rem 1rem;border-right:0;border-bottom:1px solid var(--line)}
  .preview-sidebar .brand{margin:0 0 .35rem}
  .preview-sidebar .brand img{width:28px;height:28px}
  .preview-sidebar .eyebrow{display:none}
  .preview-sidebar nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:.15rem .35rem}
  .preview-sidebar nav a{gap:.3rem;min-height:2.25rem;padding:.25rem;font-size:.78rem;line-height:1.2}
  .preview-sidebar .nav-icon{width:.85rem;height:.85rem}
  .preview-sidebar .preview-links{margin-top:.2rem;padding-top:.25rem}
  .preview-cards{gap:1.15rem .75rem}
  .preview-cards img{height:auto;aspect-ratio:16/10;object-fit:cover}
  .preview-cards strong{display:block;line-height:1.35}
}
.app-preview>.public-note{grid-column:2}

@media(max-width:22rem){.preview-cards{grid-template-columns:minmax(0,1fr)}}

.preview-top .brand{margin:0}
.preview-sidebar .preview-top .preview-links{margin:0;padding:0;border:0}
.sample-panel{grid-column:1/-1;padding:clamp(1rem,4vw,2rem);border:1px solid var(--line);border-radius:.85rem;background:var(--panel)}
.sample-panel .sample-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:32rem}
.sample-panel dl{margin:0 0 1rem}
.sample-panel dl div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.sample-panel dd{margin:0;color:var(--green)}
.sample-panel .sample-time{font:clamp(3rem,10vw,5rem)/1 Caslon,Georgia,serif;color:var(--ink)}
.sample-time small{font:1rem system-ui,sans-serif}
.sample-moods{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}
.sample-moods li,.sample-note{padding:.5rem .8rem;border:1px solid var(--line);border-radius:.6rem}
@media(min-width:44.01rem){
  .app-preview{grid-template-rows:auto 1fr auto}
  .preview-sidebar{display:contents}
  .preview-top{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 1.35rem;background:var(--page);border-bottom:1px solid var(--line)}
  .preview-sidebar .preview-top .preview-links{display:flex;flex-wrap:wrap}
  .preview-sidebar>.eyebrow{display:none}
  .preview-sidebar>nav{grid-column:1;grid-row:2/span 2;align-self:start;position:sticky;top:4.4rem;padding:1.1rem .8rem;border-right:1px solid var(--line)}
  .app-preview>main{grid-row:2}
  .app-preview>.footer{grid-row:3}
}
@media(max-width:44rem){
  .preview-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
  .preview-sidebar .preview-top .brand{margin:0;flex-wrap:nowrap;gap:.4rem;font-size:clamp(1.6rem,7vw,2.25rem)}
  .preview-sidebar .preview-top .preview-links{display:flex;align-items:center;gap:clamp(.2rem,2vw,.75rem);white-space:nowrap}
  .preview-sidebar>nav{padding-top:.35rem}
  .footer-credit{text-align:center}
}

.preview-top .brand{font:400 2.25rem/1 Caslon,Georgia,serif;letter-spacing:-.04em;white-space:nowrap}
.preview-top .brand img{border-radius:23%;flex:none}
.preview-top .brand{flex:none}
.coming-soon{display:inline-block;padding:.55rem 1rem;border:1px solid var(--line);border-radius:100px;color:var(--green);font-weight:650}
.site-footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:1.5rem;padding-block:2rem;border-top:1px solid var(--line)}
.site-footer a{display:block;margin:.25rem 0}
.site-footer .footer-social{display:flex;align-items:center;gap:.4rem;width:fit-content}
.footer-social svg{width:1rem;height:1rem;flex:none}
.footer-heading{color:var(--ink);font-weight:650;margin-bottom:.5rem}
.footer-credit{grid-column:1/-1;margin:0;padding-top:1rem;border-top:1px solid var(--line)}
.app-preview main{--page-top-space:clamp(1.25rem,3vw,2rem)}
.tonight-intro{padding-block:var(--page-top-space) 1rem}
.app-preview main > .section,.app-preview main > .band > .section{padding-block-start:var(--page-top-space)}
.app-preview main > .feature{align-items:start;row-gap:1.5rem}
.app-preview main > .business-hero{align-items:start}
.business-hero .hero-content{padding-block-start:var(--page-top-space)}
.tonight-intro h1{font-size:clamp(3rem,7vw,5rem)}
.tonight-hero{overflow:hidden;border-radius:.85rem}
.tonight-nudge{padding:1.4rem;margin-block:1.5rem;border:1px solid var(--line);border-radius:.85rem;background:var(--panel)}
.tonight-nudge h2{font-size:clamp(2rem,5vw,3rem)}
.tonight-nudge .text-link{margin:0}
.sample-stages{display:grid;gap:.55rem}
.sample-stages div{display:flex;justify-content:space-between;gap:1rem;border-left:.25rem solid #80b6bd;padding:.35rem .7rem;background:var(--page)}
.sample-stages div:nth-child(2){border-color:#ad92c5}
.sample-stages div:nth-child(3){border-color:#829cdb}
@media(max-width:35rem){.site-footer{grid-template-columns:repeat(2,minmax(0,1fr))}}

.app-preview main > #plans{border-top:0}
