@font-face{font-family:Nunito;src:url('/marketing/assets/Nunito-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('/marketing/assets/Nunito-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url('/marketing/assets/Nunito-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* Signs: navy signs on a light navy-grey ground, one gold accent (the hero's
   action), Nunito only, flat fills. The one depth cue is the 2px ledge under
   primary buttons and the hero sign. Values mirror DESIGN.md and src/theme.ts. */
:root{
  --navy:#1b2a4a;--pressed:#15223d;--ledge:#0b1426;--ink:#0f1a2e;--on-navy:#c6d0e2;
  --gold:#d4a843;--gold-pressed:#c49a38;--ground:#f2f4f7;--panel:#fff;--secondary:#56627a;--rule:#d9dee6;
  --quick:140ms;--instant:80ms;--ease:cubic-bezier(.16,1,.3,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:#8e9bb5 var(--ground)}
body{margin:0;color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-weight:600;background:var(--ground);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:900;text-wrap:balance;margin:0}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--ink)}
[id]{scroll-margin-top:88px}
.container{width:min(1180px,calc(100% - 64px));margin:auto}
.narrow{max-width:820px}
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--panel);color:var(--ink);padding:12px 18px;border-radius:10px;font-weight:800}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.button-gold:focus-visible{outline-color:var(--on-navy)}

/* Header: a solid navy bar, no transparency or blur. */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);color:#fff}
.nav-wrap{height:72px;width:min(1260px,calc(100% - 48px));margin:auto;display:flex;align-items:center;gap:36px}
.brand{margin-right:auto}
.brand img{object-fit:contain}
.site-nav{display:flex;gap:28px}
.site-nav a,.signin{text-decoration:none;font-size:16px;font-weight:800;color:var(--on-navy);min-height:44px;display:inline-flex;align-items:center;transition:color var(--quick) var(--ease)}
.site-nav a:hover,.signin:hover{color:#fff}
.signin{color:#fff;padding:0 18px;border:2px solid #8e9bb5;border-radius:10px}
.signin:hover{border-color:var(--on-navy)}

/* Buttons: navy on a 2px ledge; the face drops onto it when pressed. */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:10px;background:var(--navy);color:#fff;font-size:18px;font-weight:900;text-decoration:none;box-shadow:0 2px 0 var(--ledge);transition:transform var(--quick) var(--ease),box-shadow var(--quick) var(--ease),background-color var(--quick) var(--ease)}
.button:hover{background:var(--pressed)}
.button:active{transform:translateY(2px);box-shadow:0 0 0 var(--ledge);transition-duration:var(--instant)}
.button-gold{background:var(--gold);color:var(--ink);box-shadow:0 2px 0 #8a6a1f}
.button-gold:hover{background:var(--gold-pressed)}
.button-gold:active{box-shadow:0 0 0 #8a6a1f}

/* Hero: the house photo with one navy sign on it holding the sentence and the action. */
.hero{position:relative;display:flex;align-items:flex-end;min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);background:var(--navy)}
.hero-photo,.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo img{object-position:center 40%}
.hero-inner{position:relative;padding:120px 0 56px}
.hero-sign{max-width:620px;padding:40px 44px 36px;border-radius:12px;background:var(--navy);color:#fff;box-shadow:0 2px 0 var(--ledge)}
.hero h1{font-size:clamp(38px,4.4vw,58px);line-height:1.06;letter-spacing:-.025em;margin-bottom:28px}
.hero h1+.hero-lede{margin-top:-12px}
.hero-lede{margin:0 0 28px;font-size:19px;line-height:1.5;color:var(--on-navy)}
.hero-note{margin:16px 0 0;font-size:16px;color:var(--on-navy)}

/* The three moments: one plain sentence, one uncropped screenshot. */
.moments{padding:112px 0 40px}
.moments-head{max-width:760px;margin-bottom:24px}
.moments-head h2,.privacy h2,.pricing h2,.faq h2,.final-cta h2{font-size:clamp(32px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em}
.moments-head p{margin:16px 0 0;color:var(--secondary);font-size:17px}
.moment{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:64px;align-items:start;padding:56px 0;border-top:1px solid var(--rule)}
.moment:first-of-type{border-top:0}
.moment-copy{position:sticky;top:120px}
.moment h3{font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.moment p{margin:0;color:var(--secondary)}
.shot{margin:0;min-width:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--panel)}
.shot img{width:100%}

.privacy{padding:112px 0;background:var(--navy);color:#fff}
.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.privacy-lede{color:var(--on-navy);margin:20px 0 0}
.privacy-lede a{color:#fff;text-underline-offset:4px}
.privacy-points>div{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid rgba(198,208,226,.2)}
.privacy-points>div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.privacy-points h3{font-size:20px}
.privacy-points p{color:var(--on-navy);margin:6px 0 0;font-size:17px}

.pricing{padding:112px 0}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.pricing-lede{margin:20px 0 0;color:var(--secondary);max-width:480px}
.plan{padding:36px;border-radius:12px;background:var(--panel);border:1px solid var(--rule)}
.plan-price{display:flex;align-items:baseline;gap:12px;margin:0}
.plan-price strong{font-size:68px;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan-price span{font-size:18px;color:var(--secondary)}
.plan-now{margin:10px 0 24px;font-weight:800}
.plan-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--rule)}
.plan-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--rule);font-size:17px}
.plan-list li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:7px;border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(-45deg)}
.plan-button{width:100%}

.faq{padding:24px 0 112px}
.faq h2{margin-bottom:28px}
.faq-list{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:16px 0;font-size:19px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform var(--quick) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{margin:0 0 24px;color:var(--secondary);max-width:68ch}

.final-cta{padding:104px 0;text-align:center;background:var(--panel);border-top:1px solid var(--rule)}
.final-cta h2{max-width:760px;margin:0 auto 32px}
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-note{margin:0;font-size:16px;color:var(--secondary)}
.text-link{font-weight:800;font-size:16px;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}

.site-footer{padding:56px 0 28px;background:var(--navy);color:var(--on-navy)}
.footer-main{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.6fr);gap:64px;padding-bottom:40px}
.footer-brand p{margin:16px 0 0;font-size:16px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 32px;align-content:start}
.footer-links a{font-size:16px;font-weight:800;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{color:#fff}
.footer-bottom{margin:0;padding-top:24px;border-top:1px solid rgba(198,208,226,.2);font-size:14px}

@media(max-width:900px){
  .container{width:calc(100% - 32px)}
  .nav-wrap{height:64px;width:calc(100% - 32px);gap:16px}
  [id]{scroll-margin-top:76px}
  .site-nav{display:none}
  .brand img{width:88px;height:auto}
  .hero{display:block;min-height:0}
  .hero-photo{position:relative;display:block;height:min(56vw,360px)}
  .hero-inner{width:100%;padding:0}
  .hero-sign{max-width:none;border-radius:0;padding:28px 16px 36px;box-shadow:none}
  .hero h1{font-size:34px;margin-bottom:24px}
  .button{width:100%}
  .hero-lede{font-size:17px;margin-bottom:24px}
  .hero-note{font-size:15px}
  .moments{padding:64px 0 16px}
  .moment{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .moment-copy{position:static}
  .moment h3{font-size:24px}
  .shot{width:min(100%,340px);justify-self:center}
  .privacy,.pricing{padding:72px 0}
  .privacy-grid,.pricing-grid{grid-template-columns:1fr;gap:40px}
  .plan{padding:28px 20px}
  .plan-price strong{font-size:56px}
  .faq{padding:8px 0 72px}
  .faq summary{font-size:17px}
  .final-cta{padding:72px 0}
  .footer-main{grid-template-columns:1fr;gap:32px}
  .footer-links{grid-template-columns:1fr 1fr}
  body{font-size:17px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .button:active{transform:none}
}