:root {
  --ink: #173d32;
  --ink-deep: #102b24;
  --paper: #f7f4ec;
  --paper-deep: #eee9dd;
  --cream: #fffdf7;
  --sage: #c8d8c6;
  --coral: #d98471;
  --line: rgba(23, 61, 50, .16);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
/* width/height attributes on the screenshots exist for layout stability;
   auto here keeps the rendered size proportional (max-height alone would
   otherwise fight the 720px attribute width and stretch on wide screens). */
img { display: block; max-width: 100%; width: auto; height: auto; }
.skip-link { background: var(--cream); color: var(--ink); left: 1rem; padding: .65rem 1rem; position: fixed; top: -5rem; z-index: 100; }
.skip-link:focus { top: 1rem; }

.site-header { align-items: center; background: rgba(247, 244, 236, .88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(23, 61, 50, .07); display: flex; height: 76px; justify-content: space-between; left: 0; padding: 0 max(5vw, 2rem); position: absolute; right: 0; top: 0; z-index: 10; }
.brand { align-items: center; display: inline-flex; font-size: 1.28rem; font-weight: 750; gap: .6rem; letter-spacing: -.04em; }
.brand img { height: 34px; width: 34px; }
nav { display: flex; gap: 2rem; margin-left: auto; margin-right: 2.5rem; }
nav a { color: rgba(23, 61, 50, .76); font-size: .9rem; font-weight: 650; }
nav a:hover, footer a:hover { color: #4f846f; }

.button { align-items: center; border-radius: 999px; display: inline-flex; font-size: .96rem; font-weight: 750; gap: .5rem; justify-content: center; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { border: 1px solid var(--ink); padding: .55rem 1rem; }
.button-play { background: var(--cream); box-shadow: 0 8px 22px rgba(0, 0, 0, .1); color: var(--ink-deep); padding: .85rem 1.25rem; }
.button-play svg { height: 1.45rem; width: 1.3rem; }

.hero { background: var(--ink-deep); color: var(--cream); display: grid; grid-template-columns: 1fr 1fr; min-height: min(780px, 96vh); overflow: hidden; padding: 158px max(8vw, 3rem) 74px; position: relative; }
.hero-copy { align-self: center; max-width: 620px; position: relative; z-index: 2; }
.eyebrow { font-size: .71rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 1.25rem; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.68); }
.eyebrow span { color: #96b4a9; padding: 0 .35rem; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: .98; margin: 0; }
h1 { font-size: clamp(3.7rem, 6.4vw, 6.2rem); max-width: 650px; }
h1 em, h2 em { color: #93b7a5; font-style: normal; }
.hero-intro { color: rgba(255,255,255,.76); font-size: 1.12rem; line-height: 1.65; margin: 1.8rem 0; max-width: 520px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; }
.install-note { color: rgba(255,255,255,.6); font-size: .8rem; }
.hero-reassurance { display: flex; flex-wrap: wrap; font-size: .78rem; gap: .9rem 1.4rem; margin-top: 1.9rem; }
.hero-reassurance b { color: #a7d2bd; font-size: 1rem; margin-right: .25rem; }
.hero-visual { align-self: end; height: 570px; justify-self: center; margin-left: 1rem; position: relative; width: min(100%, 510px); }
.hero-visual > img { bottom: -40px; filter: drop-shadow(0 28px 34px rgba(0,0,0,.25)); left: 50%; max-height: 600px; position: absolute; transform: translateX(-50%); z-index: 2; }
/* One ornament everywhere: the icon's nest continued outward. Six rounded
   squares, the innermost just outside the phone, each gap a little wider
   than the last. Strokes inherit the section's text color and fade out. */
.nest-rings { height: 1250px; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1250px; }
.nest-rings rect { stroke: currentColor; stroke-width: 1.5; }
.nest-rings rect:nth-child(1) { opacity: .20; }
.nest-rings rect:nth-child(2) { opacity: .16; }
.nest-rings rect:nth-child(3) { opacity: .13; }
.nest-rings rect:nth-child(4) { opacity: .10; }
.nest-rings rect:nth-child(5) { opacity: .07; }
.nest-rings rect:nth-child(6) { opacity: .05; }
.hero-label { backdrop-filter: blur(10px); background: rgba(247,244,236,.13); border: 1px solid rgba(255,255,255,.22); border-radius: .65rem; color: var(--cream); font-size: .76rem; line-height: 1.25; padding: .65rem .75rem; position: absolute; z-index: 3; }
.hero-label strong { display: block; font-size: .9rem; }
.label-one { left: 0; top: 190px; }.label-two { bottom: 155px; right: 0; }
.label-two span { color: #eab99d; }
.hero-glow { background: #43806b; border-radius: 50%; filter: blur(120px); height: 300px; opacity: .2; position: absolute; width: 300px; }
.hero-glow-one { left: 35%; top: 15%; }.hero-glow-two { bottom: -10%; right: 3%; }

.trust-strip { background: var(--cream); border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); padding: 2.1rem max(8vw, 3rem); }
.trust-strip > div { align-items: center; border-left: 1px solid var(--line); display: flex; gap: .85rem; padding-left: 1.3rem; }
.trust-strip > div:first-child { border: 0; padding-left: 0; }
.trust-icon { align-items: center; background: #e7eee5; border-radius: 50%; display: inline-flex; font-size: 1.1rem; height: 2.15rem; justify-content: center; width: 2.15rem; }
.trust-strip p { line-height: 1.25; margin: 0; }.trust-strip strong, .trust-strip small { display: block; }.trust-strip strong { font-size: .84rem; }.trust-strip small { color: rgba(23,61,50,.62); font-size: .72rem; margin-top: .18rem; }

.section { align-items: center; display: grid; gap: clamp(3rem, 9vw, 11rem); grid-template-columns: 1fr 1fr; min-height: 690px; overflow: hidden; padding: 100px max(10vw, 4rem); position: relative; }
.section-copy { max-width: 530px; }.section-copy h2, .features-heading h2, .privacy-heading h2, .final-cta h2 { font-size: clamp(2.75rem, 4.4vw, 4.6rem); }
.section-copy > p:not(.eyebrow) { color: rgba(23,61,50,.72); font-size: 1.04rem; margin: 1.55rem 0 1.65rem; }
.check-list { list-style: none; margin: 0; padding: 0; }.check-list li { align-items: center; display: flex; font-size: .92rem; font-weight: 650; gap: .7rem; margin: .85rem 0; }.check-list li::before { align-items: center; background: var(--ink); border-radius: 5px; color: var(--cream); content: '✓'; display: inline-flex; font-size: .72rem; height: 1.18rem; justify-content: center; width: 1.18rem; }
.device-stage { align-items: center; display: flex; justify-content: center; min-height: 485px; position: relative; }.device-stage img { border-radius: 1.1rem; filter: drop-shadow(0 26px 32px rgba(16,43,36,.22)); max-height: 560px; position: relative; z-index: 2; }
.device-stage-light { padding-bottom: 4rem; }
/* Centered below the phone, in space the stage reserves via padding, so it
   never lands on the screenshot's tab bar at any viewport width. */
.stage-caption { background: var(--cream); border-radius: 2rem; bottom: 1.1rem; box-shadow: 0 6px 18px rgba(23,61,50,.12); font-size: .72rem; font-weight: 700; left: 50%; padding: .5rem .8rem; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 3; }
.reminders-section { background: var(--ink); color: var(--cream); }.reminders-section .section-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); }.device-stage-forest { min-height: 540px; }.device-stage-forest img { filter: drop-shadow(0 26px 32px rgba(0,0,0,.35)); }.reminder-points { border-top: 1px solid rgba(255,255,255,.2); margin-top: 2rem; }.reminder-points > div { align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); display: flex; gap: 1rem; padding: .95rem 0; }.reminder-points b { color: #99c0ad; font-size: .7rem; letter-spacing: .08em; }.reminder-points strong, .reminder-points small { display: block; }.reminder-points strong { font-size: .88rem; }.reminder-points small { color: rgba(255,255,255,.62); font-size: .75rem; }
.emergency-section { min-height: 630px; }.text-link { border-bottom: 1px solid currentColor; display: inline-flex; font-size: .88rem; font-weight: 750; gap: .6rem; padding-bottom: .3rem; }.card-stage { min-height: 460px; }.card-stage { color: #b06a54; }

.features-section { background: var(--ink-deep); color: var(--cream); padding: 104px max(8vw, 3rem); }.features-heading { max-width: 850px; }.features-heading h2 { max-width: 780px; }.feature-grid { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; }.feature-grid article { border-left: 1px solid rgba(255,255,255,.16); border-top: 1px solid rgba(255,255,255,.16); min-height: 210px; padding: 1.6rem 1.8rem; }.feature-grid article:nth-child(3n+1) { border-left: 0; }.feature-number { color: #96c3ac; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }.feature-grid h3 { font-size: 1.02rem; letter-spacing: -.02em; margin: 2.7rem 0 .45rem; }.feature-grid p { color: rgba(255,255,255,.62); font-size: .86rem; line-height: 1.55; margin: 0; max-width: 280px; }

.suggest-strip { background: var(--paper-deep); border-top: 1px solid var(--line); padding: 88px max(10vw, 4rem); text-align: center; }.suggest-strip h2 { font-size: clamp(2.1rem, 3.4vw, 3.15rem); margin: 0 auto; max-width: 640px; }.suggest-strip > p:not(.eyebrow) { color: rgba(23,61,50,.72); font-size: 1.02rem; margin: 1.3rem auto 1.7rem; max-width: 520px; }.suggest-strip .text-link { color: var(--ink); }

.privacy-section { display: grid; gap: 5rem; grid-template-columns: .75fr 1.25fr; padding: 120px max(10vw, 4rem); }.privacy-heading p:not(.eyebrow) { color: rgba(23,61,50,.7); font-size: 1rem; margin: 1.35rem 0; }.privacy-card { background: var(--cream); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 24px 40px rgba(23,61,50,.08); padding: .25rem 1.65rem; }.privacy-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; padding: 1.45rem 0; }.privacy-row:last-child { border-bottom: 0; }.privacy-mark { align-items: center; background: #dbe9db; border-radius: 50%; color: #1e5a43; display: inline-flex; font-weight: 800; height: 1.8rem; justify-content: center; width: 1.8rem; }.privacy-row p { margin: 0; }.privacy-row strong, .privacy-row small { display: block; }.privacy-row strong { font-size: .9rem; }.privacy-row small { color: rgba(23,61,50,.68); font-size: .76rem; margin-top: .2rem; }.privacy-state { background: #e5eee4; border-radius: 999px; color: #306348; font-size: .68rem; font-weight: 800; padding: .35rem .55rem; white-space: nowrap; }

.final-cta { background: #285846; color: var(--cream); overflow: hidden; padding: 115px 2rem 105px; position: relative; text-align: center; }.final-cta > *:not(.nest-rings) { position: relative; z-index: 1; }.final-cta .eyebrow { margin-bottom: 1.1rem; }.final-cta h2 { margin: auto; max-width: 800px; }.final-cta > p:not(.eyebrow) { color: rgba(255,255,255,.73); font-size: 1rem; margin: 1.5rem auto 1.8rem; max-width: 500px; }.final-cta .button { margin-bottom: 1rem; }.final-cta small { color: rgba(255,255,255,.62); display: block; font-size: .75rem; }
footer { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 1rem 2rem; grid-template-columns: auto 1fr auto; padding: 1.6rem max(5vw, 2rem); }.brand + p { color: rgba(23,61,50,.6); font-size: .75rem; margin: 0; }footer > div { display: flex; gap: 1rem; }footer a { font-size: .75rem; font-weight: 650; }

@media (max-width: 900px) {
  .site-header { height: 64px; padding: 0 1.25rem; }.site-header nav { display: none; }.site-header .button-small { font-size: .78rem; padding: .45rem .75rem; }.brand { font-size: 1.1rem; }.brand img { height: 29px; width: 29px; }
  .hero { grid-template-columns: 1fr; padding: 118px 1.5rem 0; }.hero-copy { max-width: 620px; }.hero-visual { height: 410px; margin: 2rem auto 0; width: 420px; }.hero-visual > img { bottom: -65px; max-height: 470px; }.hero-label { font-size: .65rem; }.label-one { left: -25px; top: 135px; }.label-two { bottom: 65px; right: -20px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }.trust-strip > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .section { gap: 3rem; grid-template-columns: 1fr; min-height: auto; padding: 76px 1.5rem; }.family-section .section-copy, .emergency-section .section-copy { order: 0; }.device-stage { min-height: 410px; }.device-stage img { max-height: 450px; }.reminders-section .device-stage { order: 2; }.emergency-section .device-stage { min-height: 380px; }.emergency-section .section-copy { order: 0; }
  .features-section, .privacy-section, .suggest-strip { padding: 78px 1.5rem; }.feature-grid { grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }.feature-grid article:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,.16); }.feature-grid article:nth-child(2n+1) { border-left: 0; }.privacy-section { gap: 2.7rem; grid-template-columns: 1fr; }.privacy-card { padding: .25rem 1rem; }footer { grid-template-columns: 1fr; }.brand + p { max-width: none; }
}

@media (max-width: 560px) {
  h1 { font-size: clamp(3.15rem, 14vw, 4.1rem); }.hero-intro { font-size: 1rem; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-reassurance { display: none; }.hero-visual { height: 360px; width: 330px; }.hero-visual > img { max-height: 415px; }.label-one { display: none; }.label-two { bottom: 40px; right: -8px; }
  .trust-strip { grid-template-columns: 1fr; }.trust-strip > div, .trust-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); padding: .75rem 0 0; }.trust-strip > div:first-child { border-top: 0; padding-top: 0; }.device-stage { min-height: 355px; }.device-stage img { max-height: 390px; }.nest-rings { height: 700px; width: 700px; }.device-stage-forest img { max-height: 440px; }.feature-grid { grid-template-columns: 1fr; }.feature-grid article, .feature-grid article:nth-child(3n+1) { border-left: 0; min-height: 175px; }.feature-grid h3 { margin-top: 1.4rem; }.privacy-row { align-items: start; grid-template-columns: auto 1fr; }.privacy-state { grid-column: 2; justify-self: start; }.final-cta { padding: 80px 1.5rem; }.final-cta h2 { font-size: 2.85rem; }footer > div { flex-wrap: wrap; }
}