/* A quiet, centered opening: one message, one action, then the product. */
.hero-compact{width:min(1160px,calc(100% - 64px));padding:30px 0 28px}
.hero-compact h1{font-size:clamp(48px,5.2vw,70px);line-height:1;margin:0;letter-spacing:-.065em}
.hero-compact h1 .hero-second-line{font-size:clamp(38px,4.65vw,64px);line-height:1.12;letter-spacing:-.055em}
.hero-body{display:block;margin-top:16px}
.hero-copy{text-align:center}
.hero-lead{font-size:18px;font-weight:400;letter-spacing:-.25px;line-height:1.5;margin:0 auto 20px;color:var(--muted)}
.hero-compact .hero-actions{display:flex;justify-content:center;align-items:center;gap:20px}
.hero-compact .hero-actions>.button{padding:14px 22px;font-size:14px;gap:24px}
.hero-platforms{font-size:12px;color:var(--muted)}
.hero-plan{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.hero-plan a{color:var(--red);font-weight:700;text-decoration:underline;text-decoration-color:#c6a397;text-underline-offset:3px}
.hero-plan a:hover{text-decoration-color:currentColor}
.store-badges{display:flex;align-items:center;justify-content:center;gap:14px}
.store-badge{display:inline-flex;flex-shrink:0;appearance:none;padding:0;border:0;background:transparent;line-height:0;cursor:default;opacity:1}
.store-badge img{height:44px;width:auto;max-width:none}
.nav-store-badges{gap:12px}
.nav-store-badges .store-badge img{height:40px}
.hero-compact .hero-actions.store-badges{gap:14px}
.download-grid .store-badge{margin-inline:auto}
.hero-stage{width:100%;max-width:840px;margin:30px auto 0;padding-left:90px}
.hero-compact .hero-product{width:100%;max-width:700px;padding:0 80px 0 0;margin-inline:auto}
.hero-compact .phone-shot{width:24%;right:0;bottom:-14px;border-width:5px;border-radius:29px}
.hero-compact .hero-sentry{left:-115px;bottom:-16px;width:210px}
.hero-compact .shot-caption{margin:31px 0 0;font-size:10px;line-height:1.5;text-align:center}
.hero-compact .shot-caption span{margin-left:5px}

/* Scale the composition to laptop height without competing side columns. */
@media(min-width:861px) and (max-height:800px){
  .hero-compact{padding-top:20px;padding-bottom:22px}
  .hero-compact h1{font-size:54px}
  .hero-compact h1 .hero-second-line{font-size:50px}
  .hero-body{margin-top:10px}
  .hero-lead{font-size:16px;margin-bottom:14px}
  .hero-plan{margin-top:9px;font-size:13px}
  .hero-stage{max-width:690px;margin-top:20px;padding-left:80px}
  .hero-compact .hero-product{max-width:570px;padding-right:70px}
  .hero-compact .hero-sentry{width:190px;left:-105px}
  .hero-compact .phone-shot{border-width:4px;border-radius:24px}
  .hero-compact .shot-caption{margin-top:27px}
}
@media(min-width:861px) and (max-height:680px){
  .hero-compact{padding-top:16px}
  .hero-compact h1{font-size:50px}
  .hero-compact h1 .hero-second-line{font-size:44px}
  .hero-body{margin-top:10px}
  .hero-lead{font-size:15px;margin-bottom:12px}
  .hero-compact .hero-actions>.button{padding:12px 20px}
  .hero-plan{margin-top:7px}
  .hero-stage{max-width:600px;margin-top:20px}
  .hero-compact .hero-product{max-width:480px;padding-right:60px}
  .hero-compact .hero-sentry{width:180px;left:-100px}
  .hero-compact .phone-shot{border-radius:21px}
}

/* Free is a complete starting point; Pro is a clearly optional iOS upgrade. */
.plans-section{padding-block:90px 80px;max-width:980px}
.plans-heading{text-align:center;margin-bottom:35px}
.plans-heading h2{font-size:clamp(36px,4vw,52px);letter-spacing:-2px;line-height:1.06;margin-bottom:18px}
.plans-heading h2 span{color:var(--red)}
.plans-heading>p:last-child{font-size:16px;color:var(--muted);line-height:1.6;margin:0}
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan-card{display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:16px;background:#fffdfa}
.plan-card.plan-pro{background:#f6eee5;border-color:#dec8b9}
.plan-platform{font-size:9px;letter-spacing:1.3px;font-weight:700;color:var(--muted);margin:0 0 14px}
.plan-card h3{font-size:28px;line-height:1.2;letter-spacing:-1px;margin:0 0 10px}
.plan-card h3>span{display:inline-block;vertical-align:middle;margin:0 0 4px 8px;font-size:9px;letter-spacing:1px;padding:5px 7px;border-radius:5px;color:#fff8ee;background:var(--red)}
.plan-summary{font-size:14px;color:var(--muted);margin:0 0 23px}
.plan-price{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-1.6px;margin:8px 0 12px}
.plan-price .price-currency{font-size:16px;letter-spacing:-.3px;vertical-align:baseline;margin-right:3px}
.plan-price .price-period{font-size:16px;font-weight:500;letter-spacing:-.3px;color:var(--muted);margin-left:5px}
.plan-offer{display:flex;align-items:center;min-height:30px;margin:0 0 18px;font-size:12px;color:var(--muted)}
.trial-pill{display:inline-flex;align-items:center;padding:4px 10px;background:#fff9ef;border:1px solid #d6b8a3;border-radius:20px;color:var(--red);font-weight:700;line-height:1.5}
.plan-card ul{list-style:none;margin:0 0 28px;padding:0;font-size:14px;line-height:1.65}
.plan-card li{position:relative;padding-left:22px;margin-bottom:11px}
.plan-card li:before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:700}
.plan-card .plan-bottom{font-size:12px;color:var(--muted);margin:auto 0 0;padding-top:18px;border-top:1px solid #dfd5ca}
.plans-note{max-width:730px;text-align:center;font-size:12px;line-height:1.7;color:var(--muted);margin:24px auto 0}
.plans-note>span{display:block;font-size:11px;margin-top:4px}

@media(max-width:1000px){.nav-store-badges{display:none}}
@media(max-width:700px){
  .nav .nav-links{display:flex;font-size:12px}
  .nav .nav-links a:not([href="#foyer-pro"]){display:none}
}
@media(min-width:861px) and (max-height:800px){.hero-actions .store-badge img{height:40px}}

@media(max-width:860px){
  .hero-compact{width:calc(100% - 40px);padding-top:27px;padding-bottom:25px}
  .hero-compact h1{font-size:clamp(36px,9.8vw,58px)}
  .hero-compact h1 .hero-second-line{font-size:clamp(20px,6.3vw,42px);line-height:1.2}
  .hero-body{margin-top:16px}
  .hero-lead{max-width:370px;font-size:15px;line-height:1.5;margin-bottom:18px;padding-inline:6px}
  .hero-compact .hero-actions{gap:15px}
  .hero-compact .hero-actions>.button{font-size:13px;padding:13px 16px;gap:15px}
  .hero-platforms{font-size:10px}
  .hero-plan{font-size:12px;margin-top:12px}
  .hero-stage{max-width:650px;margin-top:28px;padding-left:0}
  .hero-compact .hero-product{padding-right:42px}
  .hero-compact .phone-shot{width:26%;bottom:-20px;border-width:4px;border-radius:24px}
  .hero-compact .hero-sentry{left:-9px;width:clamp(110px,28vw,170px);bottom:-18px}
  .hero-compact .shot-caption{font-size:9px;margin-top:44px}
  .hero-compact .shot-caption span{display:none}
  .plans-section{padding-block:55px}
  .plans-heading{margin-bottom:26px}
  .plans-heading .eyebrow{font-size:9px}
  .plans-heading>p:last-child{font-size:14px}
  .plans-grid{gap:16px}
  .plan-card{padding:24px}
  .plan-card h3{font-size:25px}
}
@media(max-width:600px){
  .plans-grid{grid-template-columns:1fr}
  .plan-card ul{margin-bottom:20px}
  .plan-card .plan-bottom{font-size:11px}
}
@media(max-width:480px){
  .hero-compact .hero-actions.store-badges{gap:12px}
  .hero-actions .store-badge img{height:40px}
  .hero-compact .hero-product{padding-right:32px}
  .hero-compact .phone-shot{width:29%;border-width:3px;border-radius:16px}
}
@media(max-width:360px){
  .hero-compact{width:calc(100% - 30px);padding-top:23px}
  .hero-lead{font-size:14px}
  .hero-compact .hero-actions{gap:12px}
  .hero-compact .hero-actions>.button{font-size:12px;padding:12px 13px;gap:10px}
  .hero-platforms{font-size:9px}
  .hero-plan{font-size:11px}
}