/* 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}}
/* "Free for businesses" right above the headline, and Sign up beside Sign in (James 2026-10-28). */
.free{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.8rem;padding:.3rem .8rem .3rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-t);font-weight:700;font-size:.95rem}
.free .ic{width:1.1rem;height:1.1rem;stroke-width:2.4}
.nav{gap:1.6rem}.nav .btn+.btn{margin-left:-.85rem}
@media (max-width:860px){.nav{gap:.6rem}.nav .btn+.btn{margin-left:0}}
.nav .btn{white-space:nowrap}
@media (max-width:400px){.top .wrap{gap:.5rem}.brand{font-size:1rem;gap:.45rem}.brand .mark{width:1.85rem;height:1.85rem}.nav{gap:.4rem}.nav .btn{padding:0 .65rem;font-size:.85rem}}
/* 320px phones: the header (logo, Sign in, Sign up) fits without sideways scroll (QA 2026-10-28). */
@media (max-width:340px){.top .wrap{padding:0 12px;gap:.3rem}.brand{font-size:.92rem;gap:.35rem}.brand .mark{width:1.6rem;height:1.6rem}.nav{gap:.3rem}.nav .btn{padding:0 .55rem}}
/* Sign up = Request access (James 2026-10-28): one BIG green button on the first screen, and the request form panel. */
button.btn{font-family:inherit;cursor:pointer}
.btn-big{display:flex;width:100%;max-width:36rem;min-height:max(4rem,56px);margin-bottom:.75rem;background:var(--accent);color:#fff;font-size:clamp(1.15rem,.5vw + 1rem,1.45rem);font-weight:700;border-radius:.75rem;box-shadow:0 .6rem 1.4rem -.6rem rgb(46 94 78/.55)}
.btn-big:hover{background:var(--accent-h);color:#fff}
.btn-big .ic{width:1.5rem;height:1.5rem;stroke-width:2.2}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-t);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.linkish:hover{color:var(--ink)}
#request-form{display:grid;gap:1rem}
#request-form[hidden]{display:none}
#request-form .lead{color:var(--ink2)}
#request-form label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
#request-form label small{font-weight:400;color:var(--muted)}
#request-form input:not([type=radio]),#request-form textarea{font:inherit;font-size:max(1rem,16px);padding:.7rem .8rem;border:1.5px solid var(--line2);border-radius:.55rem;background:var(--card);color:var(--ink);width:100%}
#request-form textarea{resize:vertical;min-height:5rem}
#request-form .kind{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
#request-form .kind legend{font-weight:600;font-size:.95rem;margin-bottom:.4rem;padding:0}
#request-form .kind label{display:flex;align-items:center;gap:.5rem;font-weight:500;min-height:44px}
#request-form .kind input{width:1.2rem;height:1.2rem;accent-color:var(--accent)}
#request-form label[hidden]{display:none}
#request-form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#request-form .form-error{color:#9d2934;font-weight:600}
#request-form .form-error:empty{display:none}
#request-form button[type=submit]{min-height:max(3.25rem,48px)}
#request .sent{display:grid;gap:1rem}
#request .sent[hidden]{display:none}
#request .sent h3{font:600 1.4rem/1.25 var(--f-display)}
/* Phones and narrow windows, up to 800px (James 2026-10-28, full phone spec): top to bottom only the header
   (logo, Sign in, Sign up), the Free line, headline and intro, the four cards and the small legal links.
   Hidden: the sample card and caption, the big Sign up button, the two green buttons and the note line.
   Sign up in the header opens the request form. Desktop is unchanged. */
@media (max-width:800px){
 /* 2026-10-30: phones show the big Sign up, both buttons and the sample card again (James: "looks incomplete"). */
 main{padding:.75rem 0 1rem;gap:1.25rem;justify-content:flex-start}
 .hero{row-gap:0}
 .free{margin-bottom:.5rem;font-size:.88rem}
 .hero h1{margin:.2rem 0 .6rem;font-size:clamp(1.9rem,8.4vw,2.6rem)}
 .lede{font-size:.98rem;line-height:1.5}
 .nav .btn{min-height:44px}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
 .tile{padding:.75rem;min-height:44px}
 .tile{grid-template-columns:minmax(0,1fr);gap:.4rem;padding:.9rem .85rem}
 .tile .ico{grid-row:auto;width:3rem;height:3rem}
 .tile .ico .ic{width:1.7rem;height:1.7rem}
 .tile small{grid-column:1;font-size:.8rem}
 .tile .go{display:none}
 .tile b{font-size:.95rem}
 .legal{padding:.6rem 0}
}

/* Anything marked hidden stays hidden, even where a class sets display (QA of #109). */
[hidden]{display:none !important}

/* Big icons and real sections below the tiles (James 2026-10-30: "it had icons and make the icons bigger.
   This looks incomplete."). The tiles show a large icon, a title and one line at every width, and the page
   continues with How it works, What it keeps track of, For insurance agents and a closing Sign up. */
.tile .ico{width:3.25rem;height:3.25rem;border-radius:.8rem}
.tile .ico .ic{width:1.8rem;height:1.8rem}
.big-ico{width:3.5rem;height:3.5rem;flex:none;border-radius:.9rem;background:var(--accent-soft);color:var(--accent-t);display:grid;place-items:center}
.big-ico .ic{width:1.9rem;height:1.9rem;stroke-width:1.6}
.big-ico.solid{background:var(--accent);color:#fff;margin-bottom:1rem}
.sec{padding:clamp(3rem,8vw,6rem) 0}
.sec h2{font-size:clamp(1.85rem,2.2vw + 1rem,3rem);margin:.6rem 0 .9rem;max-width:20ch}
.sec-h p:not(.eyebrow){color:var(--ink2);max-width:34rem}
.sec h3{font-size:1.08rem;line-height:1.3;margin-bottom:.3rem}
.sec li p{color:var(--ink2);font-size:.97rem}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.flow{display:grid;gap:2rem}
.flow li{display:flex;gap:1.25rem;align-items:flex-start}
.flow .n{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.82rem;font-weight:700;margin-right:.6rem;vertical-align:.1em}
.band{background:var(--card);border-block:1px solid var(--line)}
.sec-h.wide{margin-bottom:clamp(2rem,4vw,3rem)}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 3rem}
.track .big-ico{margin-bottom:1rem}
.agents{align-items:center}
.agent-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2.25rem)}
.agent-card .ticks{margin:0 0 1.5rem}
.end{background:var(--accent-soft);text-align:center}
.end h2{margin:0 auto .8rem}
.end p{color:var(--ink2)}
.end .cta-row{justify-content:center;margin-top:1.5rem}
.end .btn-big{width:auto;padding:0 2.25rem;margin:0}
main{gap:0;padding-bottom:0}
main>.wrap:has(.tiles){padding-bottom:clamp(2rem,5vw,3.5rem)}
@media (max-width:980px){.track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:800px){main{gap:0;padding-bottom:0}.hero.hero{margin-bottom:1.25rem}.sec{padding:2.75rem 0}.flow{gap:1.5rem}.big-ico{width:3rem;height:3rem}.big-ico .ic{width:1.65rem;height:1.65rem}}
@media (max-width:520px){.track{grid-template-columns:minmax(0,1fr);gap:1.75rem}.track li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem}.track .big-ico{grid-row:1/3;margin:0}.end .btn-big{width:100%}}
.hero{margin-bottom:clamp(1.5rem,4vh,2.75rem)}

/* Phones (design pass 2026-10-30): the hero keeps everything the laptop has, sized for a phone, and each tile
   shows its arrow in the corner. Each side panel ends with a Sign up block pinned to the bottom, so none is half empty. */
@media (max-width:800px){
 .hero{row-gap:1.25rem}.cta{margin-top:.25rem}.btn-big{max-width:none}.two-btn{max-width:none}
 .note{font-size:.88rem}.board{box-shadow:var(--shadow)}
 .tile{position:relative}.tile .go{display:block;position:absolute;top:.8rem;right:.75rem;width:1.15rem;height:1.15rem}
}
dialog.drawer[open]{display:flex;flex-direction:column}
dialog.drawer .db{flex:1 0 auto;display:flex;flex-direction:column}
.sheet-cta{margin-top:auto;padding-top:2rem}
.sheet-cta>div{background:var(--accent-soft);border-radius:var(--r);padding:1.25rem;display:grid;gap:.75rem;text-align:center}
.sheet-cta b{font:600 1.3rem/1.25 var(--f-display)}
.sheet-cta p{color:var(--ink2);font-size:.92rem}
.sheet-cta .btn{width:100%}
.steps li::before{width:2.75rem;height:2.75rem;font-size:1.1rem}
/* Live re-check 2026-10-30: the agent buttons are one line each, the same size and aligned (side by side, or
   stacked full width on phones), and the legal links are 44px tap targets on phones. */
.cta-row.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:100%}
.cta-row.pair .btn{white-space:nowrap;padding:0 .9rem;min-height:max(2.9rem,48px)}
.sheet-cta .cta-row.pair{margin-top:.25rem}
@media (max-width:520px){.cta-row.pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:800px){.legal nav{gap:0 1rem}.legal nav a{display:inline-flex;align-items:center;min-height:44px}}
.db h3.sub{font:600 1.2rem/1.3 var(--f-display);margin:.5rem 0 1rem}

/* Phones, one screen, no scroll (James 2026-10-30: "so much going on ... you have to scroll all the way down").
   Only: header, headline, one short line, the big Sign up button, the four tiles as big icon buttons (2 by 2,
   each opens its panel, where the steps, the list, the agents info and the questions live), a Sign in line and
   the legal links. Everything else stays on laptops only. Sized with svh so it fits 390x844 and 375x667. */
.lede-short,.phone-signin{display:none}
@media (max-width:800px){
 .screen{min-height:100svh;height:100svh;grid-template-rows:auto minmax(0,1fr) auto}
 .eyebrow,.lede,.two-btn,.note,.art,main>.sec,.legal .wrap>span{display:none}
 .lede-short{display:block;color:var(--ink2);font-size:1rem;line-height:1.4;margin:0}
 main{display:flex;flex-direction:column;justify-content:space-evenly;gap:0;padding:min(1.5svh,12px) 0;min-height:0}
 .hero{margin:0!important;row-gap:min(2svh,16px)}
 .free{margin-bottom:min(1svh,8px);font-size:.85rem}
 .hero h1{font-size:clamp(1.7rem,min(8vw,5svh),2.4rem);margin:0 0 min(1svh,8px)}
 .cta{margin:0}.btn-big{margin:0;min-height:max(52px,min(7svh,60px))}
 main>.wrap:has(.tiles){padding-bottom:0}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tile{min-height:min(17svh,140px);padding:12px;align-content:center;justify-items:start;gap:6px}
 .tile .ico{width:52px;height:52px;border-radius:14px}.tile .ico .ic{width:30px;height:30px}
 .tile b{font-size:1rem;line-height:1.2}.tile small{display:none}
 .phone-signin{display:block;text-align:center;font-size:.95rem;color:var(--ink2);margin:0}
 .phone-signin a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}
 .legal{padding:0}.legal .wrap{flex-direction:row;justify-content:center}
}
@media (max-width:800px) and (max-height:600px){.tile{min-height:0;padding:10px}.hero h1{font-size:1.55rem}.free{display:none}}

/* Sign up asks first: business owner or insurance professional (James 2026-10-30). Two big cards with icons;
   each opens the same request form as before. Fits one phone screen. */
.choice .choice-lead{color:var(--ink2);margin:0 0 1rem}
.choice .pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:1.1rem;margin:0 0 .85rem;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.choice .pick:hover,.choice .pick:focus-visible{border-color:var(--accent);box-shadow:var(--shadow)}
.choice .pick .ico{grid-row:1/3;width:3.25rem;height:3.25rem;border-radius:.8rem;background:var(--accent-soft);color:var(--accent-t);display:grid;place-items:center}
.choice .pick .ico .ic{width:1.8rem;height:1.8rem}
.choice .pick b{font:600 1.2rem/1.25 var(--f-display)}
.choice .pick small{grid-column:2;color:var(--ink2);font-size:.92rem;line-height:1.4}
.choice .pick .go{grid-row:1/3;grid-column:3;color:var(--accent-t)}
.choice .choice-back{margin-top:.5rem}.choice .choice-back .linkish{min-height:44px}
.choice .choice-back a{display:inline-flex;align-items:center;min-height:44px}
/* The phone intro: who we are and what it does (James 2026-10-30). The second sentence drops on screens under 600px tall. */
@media (max-width:800px){.lede-short{font-size:.95rem;line-height:1.45}}
@media (max-width:800px) and (max-height:600px){.lede-short .more{display:none}}
/* Phones: the four tiles take only the height that is left, so the Sign in line and the legal links never
   overlap and the page never scrolls (Quality 2026-10-30: at 320x568 Sign in was drawn 40px over Terms/Privacy,
   at 360x640 the page scrolled 3px). The tiles keep their size where there is room and shrink, never below
   44px a row, where there is not; the header, headline, Sign up and Sign in keep their own height. */
@media (max-width:800px){
 main>*{flex-shrink:0}
 main>.wrap:has(.tiles){flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
 .tiles{flex:0 1 calc(2 * min(17svh,140px) + 10px);min-height:98px;grid-template-rows:repeat(2,minmax(44px,1fr))}
 .tile{min-height:0;overflow:hidden}
}
@media (max-width:800px) and (max-height:700px){.tile{padding:6px 10px;gap:2px}.tile .ico{width:36px;height:36px;border-radius:10px}.tile .ico .ic{width:22px;height:22px}.tile b{line-height:1.15}}
/* Phones show the one short "software, not an insurance agency" line above the legal links (Quality 2026-10-30:
   #148 hid it at 800px and below). It sits on its own line at 13px; the tiles above give up the height. */
@media (max-width:800px){.legal .wrap{row-gap:0}.legal .wrap>span{display:block;flex:1 0 100%;text-align:center;font-size:max(13px,.8125rem);line-height:1.35;color:var(--muted);padding-top:6px}}
@media (max-width:800px) and (max-height:700px){main{padding:4px 0}.legal .wrap>span{padding-top:2px;line-height:1.25}}
@media (max-width:800px) and (max-height:700px){.tile .ico{width:30px;height:30px;border-radius:9px}.tile .ico .ic{width:18px;height:18px}.tile b{font-size:.95rem}}
/* The Sign up choice on phones (Mobile Web Reviewer 2026-10-30): a sheet from the bottom as tall as its two cards,
   not a full screen with an empty bottom half; its Back and Sign in links at 14px or more. */
.choice .choice-back{font-size:max(14px,.9rem)}
@media (max-width:800px){dialog.drawer.choice{top:auto;bottom:0;height:auto;max-height:100dvh;margin:auto 0 0;width:100vw;border-radius:16px 16px 0 0}dialog.drawer.choice .db{flex:0 1 auto;overflow:auto}.choice .choice-back{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem}.choice .choice-back .sep{display:none}.choice .have{white-space:nowrap}}