/* Landing page (public/index.html). Its own file so the app's style.css stays separate.
   Calm Studio palette. Sizes are in rem and the root size grows with the screen,
   so the whole page scales up on big monitors and fits one screen on laptops. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans.woff2) format("woff2")}
:root{
 --f-display:"Newsreader",Georgia,"Times New Roman",serif;
 --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --page:#F7F4EE;--card:#FFFFFF;--soft:#EFEAE0;
 --ink:#1E2421;--ink2:#45504A;--muted:#5C665F;--line:#E2DBCF;--line2:#D6CDBE;
 --accent:#2E5E4E;--accent-h:#234A3D;--accent-soft:#E6EFEA;--accent-t:#24503F;
 --meets:#2C6A4F;--meets-bg:#E4EFE8;--soon:#875611;--soon-bg:#F5EBD9;--none:#59625C;--none-bg:#EEEBE4;
 --shadow:0 1px 2px rgb(60 45 20/.05),0 .75rem 2rem -1.25rem rgb(60 45 20/.28);
 --shadow-pop:0 2rem 5rem -1.5rem rgb(40 30 15/.34);
 --r:.75rem;--gutter:clamp(16px,4vw,4rem)
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(15px,min(.5vw + 9.5px,1.5vh + 2.5px),21px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1rem/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--accent-t);text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:min(88rem,100%);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:16px;top:-80px;background:var(--card);padding:12px 16px;border-radius:8px;font-weight:700;z-index:50}
.skip:focus{top:16px}
.ic{width:1.35rem;height:1.35rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.display{font-family:var(--f-display);font-weight:500;letter-spacing:-.015em;line-height:1.06}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-t)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:max(2.9rem,44px);padding:0 1.35rem;border-radius:.6rem;font-weight:650;font-size:1rem;text-decoration:none;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h);color:#fff}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* one screen: header / main / legal line */
.screen{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.25rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.3rem;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand .mark{width:2.1rem;height:2.1rem;border-radius:.55rem;background:var(--accent);color:#fff;display:grid;place-items:center}
.brand .mark .ic{width:1.2rem;height:1.2rem}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav .link{color:var(--ink2);text-decoration:none;font-weight:550;font-size:.92rem;background:none;border:0;padding:.5rem 0;cursor:pointer;font-family:inherit}
.nav .link:hover{color:var(--ink)}
.nav .btn{min-height:max(2.5rem,44px);padding:0 1rem;font-size:.92rem}

main{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,5vh,3.5rem);padding:clamp(1rem,3vh,2.5rem) 0}
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy art" "cta art";column-gap:clamp(2rem,5vw,5rem);align-items:center}
.copy{grid-area:copy;align-self:end}
.cta{grid-area:cta;align-self:start;margin-top:1.75rem}
.art{grid-area:art}
.hero h1{margin:.9rem 0 1.1rem;font-size:clamp(2.35rem,min(3.1vw + 1.1rem,7.4vh),4.6rem);max-width:16ch}
.lede{font-size:clamp(1.05rem,.4vw + .95rem,1.25rem);color:var(--ink2);max-width:38rem}
.note{margin-top:.9rem;font-size:.9rem;color:var(--muted)}

/* sample "Your insurance" card */
.board{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-pop);overflow:hidden}
.board-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.board-h b{font-family:var(--f-display);font-weight:600;font-size:1.2rem}
.board-h span{font-size:.82rem;color:var(--muted)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--line);align-items:center}
.row:last-child{border-bottom:0}
.row b{font-weight:650;font-size:.97rem}
.row small{grid-column:1;color:var(--muted);font-size:.84rem}
.row .pill{grid-row:1/3;grid-column:2}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:650;padding:.25rem .65rem;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.p-meets{color:var(--meets);background:var(--meets-bg)}
.p-soon{color:var(--soon);background:var(--soon-bg)}
.p-none{color:var(--none);background:var(--none-bg)}
.sample{font-size:.8rem;color:var(--muted);margin-top:.6rem}

/* the four tiles that open more */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.1rem .85rem;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.tile .ico{grid-row:1/3;width:2.5rem;height:2.5rem;border-radius:.6rem;background:var(--accent-soft);color:var(--accent-t);display:grid;place-items:center}
.tile b{font-size:1rem;line-height:1.25}
.tile small{grid-column:2;color:var(--muted);font-size:.84rem;line-height:1.35}
.tile .go{grid-row:1/3;grid-column:3;color:var(--accent-t)}

.legal{font-size:.8rem;color:var(--muted);padding:.9rem 0;border-top:1px solid var(--line)}
.legal .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;justify-content:space-between}
.legal nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.legal a{color:var(--ink2)}

/* side panels */
dialog.drawer{margin:0 0 0 auto;height:100vh;height:100dvh;max-height:none;width:min(36rem,100vw);max-width:100vw;border:0;padding:0;background:var(--page);color:var(--ink);box-shadow:var(--shadow-pop)}
dialog.drawer::backdrop{background:rgb(30 36 33/.42)}
dialog.drawer[open]{animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(2.5rem);opacity:0}}
@media (prefers-reduced-motion:reduce){dialog.drawer[open]{animation:none}.btn,.tile{transition:none}}
.dh{position:sticky;top:0;background:var(--page);display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.6rem;border-bottom:1px solid var(--line);z-index:1}
.dh h2{font:600 1.6rem/1.2 var(--f-display)}
.x{width:44px;height:44px;flex:none;border-radius:.6rem;border:0;background:var(--soft);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.x:hover{background:var(--line)}
.db{padding:1.5rem 1.6rem 2.5rem}
.db>p{color:var(--ink2)}
.steps{display:grid;gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.25rem .9rem}
.steps li::before{content:counter(s);grid-row:1/3;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}
.feats{display:grid;gap:1.25rem}
.feats li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.1rem .9rem}
.feats .ico{grid-row:1/3;width:2.5rem;height:2.5rem;border-radius:.6rem;background:var(--accent-soft);color:var(--accent-t);display:grid;place-items:center}
.feats .ico .ic{width:1.25rem;height:1.25rem}
.steps h3,.feats h3{font-size:1.05rem;line-height:1.3}
.steps p,.feats p{color:var(--ink2);font-size:.97rem}
.reqs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.reqs span{font-size:.82rem;font-weight:600;background:var(--soft);padding:.25rem .55rem;border-radius:.4rem}
.ticks{display:grid;gap:.75rem;margin:1.25rem 0}
.ticks li{display:flex;gap:.75rem}
.ticks .ic{color:var(--accent-t);margin-top:.15rem}
.fine{font-size:.84rem;color:var(--muted);margin-top:1rem}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;font-weight:650;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--f-display);color:var(--accent-t)}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 1.2rem;color:var(--ink2)}
.faq details>div .btn{margin-top:.9rem}

/* tablets and small laptops: the tiles go 2 by 2 */
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones and narrow windows: one column. Order: headline, card, buttons, tiles. */
@media (max-width:860px){
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "cta" "art";row-gap:1.75rem}
 .cta{margin-top:0}
 .hero h1{max-width:none}
 .nav .link{display:none}
 main{justify-content:flex-start;padding:1.25rem 0 2rem;gap:2rem}
}
@media (max-width:520px){
 .top .wrap{height:3.75rem}
 .brand{font-size:1.15rem}
 .row{padding:.75rem 1rem}
 .board-h{padding:.85rem 1rem}
 .board-h span{display:none}
 .cta-row .btn{flex:1 1 9rem}
 .tile{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.9rem}
 .tile .ico{grid-row:auto;width:2.25rem;height:2.25rem}
 .tile small{grid-column:1}
 .tile .go{display:none}
 .legal .wrap{flex-direction:column;align-items:flex-start}
 .dh{padding:.9rem 1.1rem}.db{padding:1.25rem 1.1rem 2rem}
}
@media (max-width:340px){.tiles{grid-template-columns:minmax(0,1fr)}.row{grid-template-columns:minmax(0,1fr)}.row .pill{grid-row:auto;grid-column:1;justify-self:start;margin-top:.3rem}}
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* the two main actions: equal size, side by side; stacked on small phones */
.two-btn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:36rem}
.two-btn .btn{min-height:max(3.25rem,48px);padding:0 1rem;text-align:center;line-height:1.2}
@media (max-width:480px){.two-btn{grid-template-columns:minmax(0,1fr)}}
/* short laptop and tablet-landscape screens: tighter spacing so it all still fits */
@media (min-width:861px) and (max-height:800px){main{gap:1.25rem;padding:.75rem 0}.cta{margin-top:1.25rem}.hero h1{margin:.6rem 0 .8rem}}