:root { --ink:#203e45; --teal:#0b5665; --muted:#52666a; --pale:#eff6f5; --accent:#a7e8ec; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; line-height:1.65; background:#fff; }
a { color:#086579; text-underline-offset:4px; }
a:hover { color:#003d4b; }
a:focus-visible, summary:focus-visible { outline:3px solid #13859a; outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,.brand { font-family:Catamaran,Arial,sans-serif; line-height:1.15; }
h1,h2,h3,p { margin-top:0; }
h2 { font-size:clamp(32px,3.4vw,44px); font-weight:600; letter-spacing:-.5px; margin-bottom:20px; }
h3 { font-size:25px; font-weight:600; margin-bottom:16px; }
p { font-size:18px; margin-bottom:20px; }
.container { width:min(1120px,calc(100% - 48px)); margin:auto; }
section { padding:85px 0; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px; background:#fff; z-index:20; }
.skip-link:focus { top:10px; }
.site-nav { position:sticky; top:0; background:#0b505e; color:#fff; z-index:10; box-shadow:0 1px 0 #ffffff20; }
.nav-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:88px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:28px; font-weight:600; }
.brand:hover { color:var(--accent); }
.brand img { width:40px; height:40px; object-fit:contain; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { font-size:14px; color:#fff; text-decoration:none; font-weight:600; }
.nav-links a:hover { text-decoration:underline; }
.nav-links .sign-in { padding:9px 18px; border:1px solid #8ed0db; border-radius:30px; }
.hero { padding:85px 0 90px; color:#fff; background:linear-gradient(90deg,rgba(5,30,36,.94),rgba(5,30,36,.65)),url('../img/bg-cta2.jpg') center/cover no-repeat; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:36px; }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#0b6877; margin-bottom:20px; }
.hero .eyebrow { color:var(--accent); }
.hero h1 { font-size:clamp(48px,5.5vw,72px); font-weight:600; letter-spacing:-1px; margin-bottom:24px; }
.hero p { color:#e0ecee; }
.hero .hero-intro { font-size:23px; line-height:1.45; color:#fff; }
.device-frame { position:relative; padding:7px; border:1px solid #778186; border-radius:30px; background:linear-gradient(135deg,#465158,#11191d 45%,#344148); box-shadow:0 18px 32px #102f3630, inset 0 0 0 2px #ffffff12; }
.device-frame img { width:100%; height:auto; border-radius:22px; }
.device-frame::after { content:""; position:absolute; top:15%; right:-3px; width:3px; height:9%; border-radius:0 2px 2px 0; background:#69777d; }
.hero-screens { position:relative; width:calc(100% - 32px); max-width:530px; aspect-ratio:.92; margin:auto; filter:drop-shadow(0 18px 24px #0005); }
.hero-screens .device-frame { position:absolute; width:43%; }
.device-plan { left:0; top:9%; transform:rotate(-8deg); }
.device-session { right:0; top:9%; transform:rotate(8deg); }
.device-progress { left:28.5%; top:0; z-index:1; }
.button { display:inline-block; padding:16px 25px; border-radius:32px; background:var(--accent); color:#073c45; font-weight:700; font-size:15px; text-decoration:none; margin:8px 0 20px; }
.button:hover { background:#fff; }
.hero .hero-note { font-size:14px; line-height:1.8; }
.hero-note a { color:#fff; }
.hero a:focus-visible,.site-nav a:focus-visible { outline-color:#fff; }
.section-intro { max-width:670px; margin-bottom:45px; }
.section-intro p:not(.eyebrow) { color:var(--muted); }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.step-number { display:block; font-family:Catamaran,Arial,sans-serif; font-weight:600; font-size:38px; color:#137b8e; border-top:2px solid #b7d8db; padding-top:15px; margin-bottom:20px; }
.steps p { color:var(--muted); font-size:17px; }
.feature-section { background:var(--pale); }
.feature-story { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; margin:55px 0; }
.screenshot-panel { background:#dcebec; border-radius:16px; padding:30px; display:flex; justify-content:center; align-items:center; }
.screenshot-panel .device-frame { width:244px; max-width:100%; }
.story-copy h3 { font-size:34px; }
.story-copy p,.story-copy li { color:var(--muted); }
.story-copy ul { padding-left:22px; margin-bottom:25px; }
.story-copy li { margin-bottom:10px; }
.reverse .screenshot-panel { order:2; }
.text-link { font-weight:600; }
.feature-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; border-top:1px solid #c6dcdc; padding-top:40px; margin-top:65px; }
.feature-notes p { font-size:17px; color:var(--muted); }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.quotes figure { margin:0; padding:28px; border:1px solid #dce7e6; border-radius:10px; display:flex; flex-direction:column; }
blockquote { font-size:18px; margin:0 0 25px; }
figcaption { color:#47727b; font-size:15px; font-weight:700; margin-top:auto; }
.get-started { background:#123f4a; color:#fff; }
.download-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:75px; align-items:center; }
.get-started .eyebrow { color:var(--accent); }
.get-started a { color:var(--accent); }
.store-badges { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:28px 0; }
.store-badges img { height:48px; width:auto; }
.subscription { border:1px solid #5b8b94; border-radius:14px; padding:32px; }
.subscription h3 { font-size:32px; }
.subscription p { font-size:16px; color:#e0ecee; }
.subscription p:last-child { margin-bottom:0; }
.get-started a:focus-visible { outline-color:#fff; }
.faq-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:75px; }
.questions details { border-bottom:1px solid #d6e3e4; }
.questions details:first-child { border-top:1px solid #d6e3e4; }
.questions summary { padding:22px 0; cursor:pointer; font-size:18px; font-weight:600; }
.questions p { font-size:17px; color:var(--muted); padding-right:12px; }
.site-footer { background:#f0f5f5; padding:55px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; }
.site-footer .brand { color:var(--teal); margin-bottom:20px; }
.site-footer p { font-size:16px; color:var(--muted); }
.site-footer h2 { font-family:Arial,Helvetica,sans-serif; font-size:15px; font-weight:700; letter-spacing:0; margin:10px 0 22px; }
.footer-grid>div>a:not(.brand) { display:block; font-size:15px; margin-bottom:10px; }
.footer-bottom { margin-top:30px; padding:22px 0; border-top:1px solid #d4e1e1; display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:30px; }
  .hero-copy { max-width:650px; }
  .hero-screens { max-width:530px; margin:auto; }
  .hero { padding:60px 0; }
  .feature-story,.download-grid,.faq-grid { gap:35px; }
  .quotes { gap:15px; }
  .quotes figure { padding:20px; }
}
@media (max-width:650px) {
  html { scroll-padding-top:135px; }
  .container { width:calc(100% - 36px); }
  section { padding:55px 0; }
  .nav-inner { flex-direction:column; align-items:flex-start; gap:10px; padding:14px 0; }
  .brand { font-size:25px; }
  .brand img { width:32px; height:32px; }
  .nav-links { width:100%; justify-content:space-between; gap:8px; }
  .nav-links a { font-size:13px; }
  .nav-links .sign-in { padding:5px 12px; }
  .hero { padding:45px 0 50px; }
  .hero h1 { font-size:50px; }
  .hero .hero-intro { font-size:21px; }
  .hero-screens { width:calc(100% - 32px); }
  .button { padding:14px 20px; font-size:14px; }
  .steps,.feature-story,.feature-notes,.quotes,.download-grid,.faq-grid,.footer-grid { grid-template-columns:1fr; }
  .steps { gap:20px; }
  .step-number { margin-bottom:12px; }
  .feature-story { gap:28px; margin:40px 0 55px; }
  .reverse .screenshot-panel { order:0; }
  .screenshot-panel { padding:25px; }
  .screenshot-panel .device-frame { width:220px; }
  .feature-notes { margin-top:20px; gap:15px; }
  .subscription { padding:25px; }
  .footer-grid { gap:22px; }
  .site-footer { padding-top:40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }