/* Harborline homepage layout (V349 Grand Opening). Loaded after the brand
   layer. External file: the CSP allows style-src 'self' plus the page's one
   hashed inline block, which this file leaves untouched. */

/* Wider, calmer page: the old 780px column read like a legal notice. */
main .wrap{max-width:1120px}
section{padding:clamp(64px,9vw,112px) 0}
section + section{border-top:0}
.hl-band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hl-head{max-width:640px}
.hl-head h2,.hl-close h2{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:750;line-height:1.12}
.hl-head .lede{font-size:1.0625rem;line-height:1.65}
.hl-head .actions{margin-top:24px}

/* Hero */
.hero{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(56px,8vw,104px);border-bottom:1px solid var(--line)}
.hero h1{max-width:16ch}
.hero .account-note{margin-top:26px;background:rgba(255,255,255,.7)}
.hero .account-note strong{display:inline;margin-right:4px}
@media(min-width:960px){
  .hero>.wrap{max-width:1160px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,72px);align-items:center}
  .hero-copy{padding-top:0}
  .hero-demo{margin-top:0;padding-top:0}
}

/* How it works: a numbered flow, connected on wide screens. */
.hl-flow{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px;counter-reset:none}
.hl-flow li{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px}
.hl-flow h3{margin-top:18px;font-size:1.125rem;font-weight:700}
.hl-flow p{margin-top:8px;color:var(--ink-70);font-size:1rem}
.hl-num{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font-weight:750;font-size:1rem}
.hl-flow li:last-child .hl-num{background:var(--sea)}
@media(min-width:860px){
  .hl-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .hl-flow li:not(:last-child)::after{content:"";position:absolute;top:45px;right:-21px;width:22px;height:2px;background:var(--mint-line)}
}

/* Setup: heading on the left, steps on the right. */
.hl-split{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.hl-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px)}}
#setup .steps{margin-top:0}
#setup .lede a{display:inline-block;min-height:24px;font-weight:600}

/* Screens */
.shots{margin-top:40px}
@media(min-width:900px){.shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.shots figure{background:var(--paper)}

/* Calculator sits on the page background, so give it a little lift. */
#worth .worth-calc{max-width:880px;margin-top:36px;box-shadow:0 12px 32px rgba(18,35,43,.06)}

/* Pricing: one card and the fine print beside it. */
.hl-price{display:grid;gap:24px;margin-top:36px;align-items:start}
@media(min-width:900px){.hl-price{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px}}
.hl-price-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,40px)}
.hl-price-card .bigprice{margin-top:0}
.hl-price-card .lede{margin-top:10px}
.hl-checks{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.hl-checks li{position:relative;padding-left:30px;color:var(--ink);font-size:1rem}
.hl-checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--mint);box-shadow:inset 0 0 0 1px var(--mint-line)}
.hl-checks li::after{content:"";position:absolute;left:7px;top:7px;width:4px;height:8px;border:solid var(--sea);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hl-price .pricing-terms{margin-top:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}

/* Rollout map */
#rollout .rollout-map{margin-top:0}

/* FAQ */
.hl-faq{max-width:760px;margin-top:28px}
.hl-faq details:last-child{border-bottom:1px solid var(--line)}
.hl-faq p a{display:inline-block;min-height:24px}

/* Closing call to action */
.hl-close{background:var(--ink);color:#fff;text-align:center}
.hl-close h2{max-width:24ch;margin:0 auto;color:#fff}
.hl-close p{margin:16px auto 0;max-width:52ch;color:#C9D6DA;font-size:1.0625rem}
.hl-close .actions{justify-content:center}
.hl-close .btn{background:#5FCBAE;border-color:#5FCBAE;color:var(--ink)}
.hl-close .btn:hover{background:#7AD6BD;border-color:#7AD6BD}
.hl-close .btn:focus-visible{outline-color:#fff}

@media(max-width:520px){
  .hl-flow li{padding:22px 20px}
  .hl-price .pricing-terms{padding:20px}
}

/* Keyboard focus and small-label contrast on the dark surfaces (pre-upload
   review, 2026-10-03). The inline rule's green ring is under 3:1 on the
   footer; the demo's "Example" label was 4.25:1 at 12px. */
footer a:focus-visible{outline-color:#fff}
.demo-head small{color:#A9BDC2}