/* The public website (cloud/site.py), on top of app.css: its nav, page heads, plan cards and footer. */
.site>header{position:sticky;top:0;z-index:40;background:var(--bg)}
/* The blur only on wider screens: on a phone it would trap the fixed menu sheet inside the header. */
@media (min-width:701px){.site>header{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
html:has(body.site){scroll-padding-top:84px}
.site nav .logo{margin-right:0}
.site nav .links{gap:20px}
.site nav .btn.small{padding:8px 14px}
.site nav .btn.primary,.site nav .btn.primary:hover{color:var(--on-mint)}
@media (min-width:701px) and (max-width:1000px){.site nav .links{gap:13px}.site nav a.link{font-size:14px}.site nav .links .theme-toggle{display:none}}
@media (max-width:700px){.site nav .links .btn.primary{margin-top:24px;justify-content:center;min-height:48px;font-size:16px}}

.page-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:64px 0 40px!important;border-top:0!important}
.page-head .page-img{width:180px;height:auto}
.page-head .lede{max-width:40em;color:var(--muted)}
.landing section.lp-hero.single{grid-template-columns:1fr}

.more{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.more-card{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s}
.more-card:hover{border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.more-card img{width:auto;height:64px;align-self:flex-start;margin:-4px 0 4px -4px}  /* same height; wide stickers get more width */
.more-card span{color:var(--muted);font-size:15px;flex:1}
.more-card em{font-style:normal;color:var(--mint);font-size:14.5px;font-weight:600}
.lp-steps.four{grid-template-columns:repeat(4,1fr)}

.beta-note{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 8px;color:var(--muted)}
.landing section.plans-wrap{padding-top:28px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.plan.featured{border-color:color-mix(in srgb,var(--mint) 60%,transparent);box-shadow:0 10px 30px var(--drop)}
.plan h3{margin:0 0 6px;font-size:17px}
.plan .price{font:700 34px/1.1 var(--sans);letter-spacing:-.02em;margin-bottom:8px}
.plan .price small{font:500 14px var(--sans);color:var(--faint);letter-spacing:0}
.plan p{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.plan ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.plan li{position:relative;padding-left:20px;margin:6px 0;font-size:14.5px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--mint)}
.plan .btn{justify-content:center}
.plans-fine{margin:18px 0 0;max-width:60em}
.plans.two{grid-template-columns:repeat(2,1fr);max-width:880px;margin-top:18px}
.landing section.plans-wrap+section.plans-wrap{padding-top:40px}
.ctas.center{margin-top:22px}
.pricing-detail table{width:100%;border-collapse:collapse;margin:8px 0 18px}
.pricing-detail td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.pricing-detail td.num{text-align:right;white-space:nowrap;padding-left:16px}
.pricing-detail h1{font-size:30px}

.os-start{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:start}
.os-start>*,.first-wrap>*{min-width:0}  /* a long code line scrolls in its box instead of widening the page */
.os-start .fine code{overflow-wrap:anywhere}
.os-steps{margin:0;padding-left:22px}.os-steps li{margin:0 0 10px;color:var(--muted)}.os-steps b{color:var(--text)}
pre.code{margin:0 0 12px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);overflow-x:auto;font:13.5px/1.6 var(--mono)}
.catch code{font-size:13.5px}
.legal-page{padding-top:40px!important;border-top:0!important;max-width:820px}

.site footer{padding:40px 0 28px}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;margin-bottom:22px}
.foot-cols b{display:block;color:var(--text);margin-bottom:8px;font-size:14px}
.foot-cols a{display:block;margin:0 0 6px}
.foot-cols .logo{color:var(--cream);margin-bottom:10px}.foot-cols .logo svg{height:20px;width:auto;display:block}
.foot-cols p{margin:0 0 6px;max-width:26em}
.foot-cols p a{display:inline;margin:0}

@media (max-width:1000px){.plans,.more{grid-template-columns:1fr 1fr}.lp-steps.four{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
.plans.two{grid-template-columns:1fr}
.page-head{grid-template-columns:1fr;padding:36px 0 20px!important}.page-head .page-img{display:none}
.plans,.more,.lp-steps.four{grid-template-columns:1fr}
.plan{padding:18px}.plan .price{font-size:28px}.plan ul{margin-bottom:14px}.plan li{margin:4px 0}
.os-start{grid-template-columns:1fr}
.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>div:first-child{grid-column:1/-1}}
.pricing-detail h2:not(#network){font-size:22px;margin:30px 0 8px}

/* Design system layer (app.css has the rest): plan and link cards as hairline surfaces with a large radius; the
   featured plan marked by a mint line, not a shadow. */
.more-card,.plan,pre.code{border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.more-card:hover{border-color:var(--c-line-strong)}
.more-card b{font-weight:var(--fw-strong)}
.more-card em{color:var(--text);font-weight:var(--fw-medium)}
.plan.featured{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.plan h3{font:var(--fw-heading) var(--fs-xl)/var(--lh-tight) var(--serif)}
.plan .price{font:var(--fw-strong) 30px/1.1 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.page-head h1{font-size:clamp(36px,4.6vw,50px);font-weight:var(--fw-display)}
.foot-cols b{font:var(--fw-medium) var(--fs-sm) var(--sans);color:var(--text)}
.foot-cols a{text-decoration:none}.foot-cols a:hover{color:var(--text)}
pre.code{background:var(--c-sunken)}

/* Security: the home page strip and the /security page */
.safe{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:28px}
.safe-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.safe-list li{display:flex;gap:12px;align-items:flex-start}
.safe-list .ic,.check-links svg{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint)}
.safe-list .ic svg{width:19px;height:19px}
.safe-list b{display:block;font-size:15.5px;line-height:1.3;margin-bottom:2px}
.safe-list li>span:last-child{color:var(--muted);font-size:14.5px;line-height:1.45}
.safe-more{display:inline-block;margin-top:20px;color:var(--mint);font-weight:600;text-decoration:none}
.safe-more:hover{text-decoration:underline}
.sec-cards.three{grid-template-columns:repeat(3,1fr)}
.limits{max-width:44em}
.landing section.sec-promise{border-top:0;padding-top:0}
.sec-promise .safe-list{margin-top:0}
.tech{margin-top:22px;max-width:780px}
.tech dl{margin:14px 0 0;display:grid;gap:12px}
.tech dt{font-weight:600;font-size:15px}
.tech dd{margin:2px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.tech>p{color:var(--muted);font-size:14.5px;margin:14px 0 0}
.check-links{display:flex;flex-wrap:wrap;gap:10px}
.check-links a{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;font-size:15px}
.check-links a:hover{border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.check-links svg{width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:999px}
@media (max-width:1000px){.safe-list,.sec-cards.three{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.safe{padding:20px}.safe-list,.sec-cards.three{grid-template-columns:1fr}.sec-cards.three{grid-auto-rows:auto}}
.aikido-badge{display:inline-flex;margin-top:18px;line-height:0}
.aikido-badge img{height:24px;width:auto}
.safe-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.safe-foot .aikido-badge{margin-top:0}
.safe-foot .aikido-badge img{height:20px}
.safe-foot{margin-top:20px}.safe-foot .safe-more{margin-top:0}
#scanned .aikido-badge{margin-top:0}
.safe-scan{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
/* Five scan tiles: 5 across, then 3+2 centered, then the usual one-column rows on phones. */
.sec-cards.five{grid-template-columns:repeat(5,1fr);margin-top:22px}
.sec-cards.five .scard{padding:18px 16px 20px}
@media (max-width:1000px) and (min-width:561px){.sec-cards.five{grid-template-columns:repeat(6,1fr)}
.sec-cards.five .scard{grid-column:span 2}.sec-cards.five .scard:nth-child(4){grid-column:2/span 2}}
@media (max-width:560px){.sec-cards.five{grid-template-columns:1fr}}

/* Small demo cards (site.py minis(), played by demo.js) and the first-day steps with what trying costs. */
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;align-items:start}
.mini{position:relative;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.mini .card{max-width:none;padding:16px 16px 14px;box-shadow:var(--shadow-sm);border-radius:var(--r-lg)}
.mini .card .from{margin-bottom:8px;font-size:13px}.mini .card .from img{width:24px;height:24px}
.mini .card .from .chip{margin-left:auto;font-size:11.5px}
.mini .card b.t{font-size:16px}
.mini .card p,.mini .card .draft{font-size:14.5px}
.mini .card .src{margin-bottom:10px}
.mini .card .b.go[data-mini-go]{width:100%}
.mini .card .badges{margin:0 0 8px}
.mini .card .note{font-size:13.5px;color:var(--faint)}
.note.status-line,.mini .card .note.status-line{font-weight:600;color:var(--muted)}
.mini .m-acts{display:flex;gap:6px;margin-top:10px}.mini .m-acts .b{flex:1 1 0;font-size:13.5px}
/* One state at a time, each at its own height; demo.js eases the card's height from one to the next. */
.mini .m-s{display:none;min-width:0}
.mini[data-state=a] .m-a,.mini[data-state=p] .m-p,.mini[data-state=b] .m-b,.mini[data-state=c] .m-c,.mini[data-state=x] .m-x{display:block;animation:mini-fade .25s ease}
.mini .m-stack.sizing{overflow:hidden;transition:height .3s ease}
@keyframes mini-fade{from{opacity:0}to{opacity:1}}
.minis-more{white-space:nowrap;font-weight:600}
.mini .m-l{display:block;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--text)}
.mini textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans)}
.mini textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.mini .m-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mini .m-presets .b{font-size:13px;padding-left:6px;padding-right:6px}
.mini .m-c .m-was{opacity:.55;margin-top:6px}
/* The button to tap pulses like the front page card's Do it. */
.mini[data-state=a] [data-mini-go],.mini[data-state=b] [data-mini-fin]{animation:nudge 2.2s ease-in-out infinite}
.mini.pre .card{opacity:0}.mini.arrive .card{animation:mini-in .45s ease}
.mini .kv{list-style:none;margin:6px 0 8px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:14px}
.mini .kv li{display:flex;gap:10px;padding:2px 0}.mini .kv span{color:var(--faint);min-width:6.5em}
.mini figcaption{display:flex;align-items:baseline;gap:10px;padding:0 4px}
.mini figcaption b{font-weight:var(--fw-strong);color:var(--text)}
.mini .again{margin-left:auto;background:none;border:0;padding:0;color:var(--faint);font:13px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mini .card .b:focus-visible,.mini .again:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@keyframes mini-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.minis-fine{margin:12px 0 0}.minis-fine+.catches{margin-top:22px}
.minis.few{grid-template-columns:repeat(2,1fr);max-width:880px}.os-start .minis.few{grid-template-columns:1fr}.minis-fine .swipe{display:none}
.landing .also{margin:18px 0 0;color:var(--muted)}
.first-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start;margin:22px 0 22px}
.firstday{list-style:none;margin:0;padding:0;counter-reset:fd}
.firstday li{position:relative;display:grid;gap:2px;padding:0 0 18px 34px;counter-increment:fd}
.firstday li::before{content:counter(fd);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--sans);background:color-mix(in srgb,var(--mint) 18%,transparent);color:var(--mint)}
.firstday li:not(:last-child)::after{content:"";position:absolute;left:10.5px;top:28px;bottom:4px;border-left:1px solid var(--line)}
.firstday b{font-weight:var(--fw-strong)}.firstday span{color:var(--muted)}
.try-box{display:grid;gap:14px;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.try-box div{display:grid;gap:2px}.try-box span{color:var(--muted);font-size:15px}
.try-sec{grid-column:1/-1;margin:0;color:var(--muted)}
.first-wrap .try-sec{margin-top:-14px}
pre.code.term{font-size:12.5px;white-space:pre}
.os-start .minis{grid-template-columns:1fr;margin-top:0}
@media (max-width:1000px){.minis{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
.minis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:18px -22px 0;padding:4px 22px 8px;scroll-padding:0 22px;scrollbar-width:none}
.minis::-webkit-scrollbar{display:none}
.minis>.mini{flex:0 0 84%;scroll-snap-align:center;align-self:flex-start}.minis>.mini:only-child{flex-basis:100%}.minis-fine .swipe{display:inline}
.os-start .minis{display:flex}
.first-wrap{grid-template-columns:1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.mini .m-s{animation:none!important}.mini .m-stack.sizing{transition:none}.mini.arrive .card{animation:none}.minis{scroll-behavior:auto}
.mini[data-state=a] [data-mini-go],.mini[data-state=b] [data-mini-fin]{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 35%,transparent)}}

/* Comparisons (/compare): a table of rows, our column first, a mark per cell; on a phone the label sits above the two cells. */
.landing section.vs-wrap{padding-top:8px;border-top:0}
.vs{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.vs-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:18px;padding:14px 22px;border-top:1px solid var(--line);align-items:start}
.vs-row:first-child{border-top:0}
.vs-head{background:var(--c-sunken);font:var(--fw-strong) var(--fs-sm) var(--sans);color:var(--muted);padding-top:12px;padding-bottom:12px}
.vs-head .us{color:var(--text)}
.vs-l{font-weight:var(--fw-strong);line-height:1.4}
.vs-c{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px;line-height:1.45;min-width:0}
.vs-c>span:last-child{min-width:0;overflow-wrap:anywhere}
.vs-who{display:none}
.mk{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12.5px/1 var(--sans);margin-top:0}
.mk.y{background:color-mix(in srgb,var(--mint) 20%,transparent);color:var(--mint)}
.mk.n,.mk.m{background:var(--c-sunken);color:var(--faint);border:1px solid var(--line)}
.vs-row>.vs-c:nth-child(2){color:var(--text)}
.vs-note{display:block;margin-top:3px;font-size:13px;color:var(--faint)}.vs-note a{color:inherit}
.vs-after{margin:16px 0 0;font-size:16px}.vs-after b{font-weight:var(--fw-strong)}
.vs-fine{margin:14px 0 0;max-width:60em}.vs-fine a{color:inherit}
.vs-end{display:grid;grid-template-columns:1fr minmax(0,380px);gap:36px;align-items:center}
.vs-end>*{min-width:0}
.vs-end .minis.few{grid-template-columns:1fr;margin-top:0}
.vs-end .minis-fine{margin-top:10px}
.vs-more{margin:16px 0 0;color:var(--muted);font-size:14.5px}
.landing section.lp-hero.vs-try{border-top:1px solid var(--line);margin-top:24px}
.landing section.vs-list{padding-top:8px;border-top:0}
.vs-list .more{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.foot-cols{grid-template-columns:repeat(3,1fr)}.foot-cols>div:first-child{grid-column:1/-1}}
@media (max-width:700px){
.vs-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;padding:12px 14px}
.vs-row>.vs-l{grid-column:1/-1}
.vs-head>:first-child{display:none}
.vs-c{font-size:14px;gap:8px}
.vs-end{grid-template-columns:1fr;gap:20px}
.vs-end .minis{display:grid;margin:0;padding:0}
.vs-list .more{grid-template-columns:1fr}
.foot-cols{grid-template-columns:1fr 1fr}}
#see>.ctas{margin-top:18px}
.lp-hero .lede .punch{color:var(--text);font-weight:600}

/* /network: the demo card on the left, what you get as a 2×2 grid on the right; stacked on a phone. */
.net-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:24px;align-items:start;margin-top:22px}
.net-split .minis{grid-template-columns:1fr;max-width:none;margin-top:0}
.net-split .catches.two{grid-template-columns:1fr 1fr}
@media (max-width:900px){.net-split{grid-template-columns:1fr;gap:18px}}
@media (max-width:700px){.net-split .catches.two{grid-template-columns:1fr}.net-split .minis{margin:0 -22px}}

/* Social proof on the homepage: one quote card with a local avatar, linking to the original post. */
.landing section.heard{padding:44px 0}
.quote{margin:14px 0 0;max-width:520px;padding:24px 26px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.quote blockquote{margin:0 0 18px}
.quote blockquote p{margin:0;font:400 22px/1.45 var(--serif);color:var(--text)}
.quote blockquote p::before{content:"“"}.quote blockquote p::after{content:"”"}
.quote figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.quote figcaption img{width:44px;height:44px;border-radius:50%;flex:none}
.quote .quote-who{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.quote .quote-who b{font-weight:var(--fw-strong)}.quote .quote-who span{color:var(--faint);font-size:14px}
.quote figcaption a{color:var(--muted);font-size:14px;text-decoration:none}
.quote figcaption a:hover{color:var(--text)}
@media (max-width:700px){.landing section.heard{padding:32px 0}.quote{padding:20px}.quote blockquote p{font-size:19px}}
.catches.four{grid-template-columns:repeat(2,1fr)}
.catches.four+.ctas{margin-top:20px}
@media (max-width:700px){.catches.four{grid-template-columns:1fr}}
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.scene{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.scene b{display:block;margin-bottom:10px}
.scene p{margin:0;font-size:15px}.scene .them{color:var(--muted);margin-bottom:8px}
.scenes-why{margin:14px 0 0}
.landing section.scenes-wrap{padding:8px 0 24px;border-top:0}
@media (max-width:900px){.scenes{grid-template-columns:1fr}}
/* Homepage: what comes ready (under the demo cards), coverage with its Connections panel, proof links */
.ready{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px}
.ready li{display:grid;gap:2px;padding-left:28px;position:relative}
.ready li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--mint);background:color-mix(in srgb,var(--mint) 16%,transparent)}
.ready span{color:var(--muted);font-size:14.5px}
.cover-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;margin-top:22px}
.catches.one{grid-template-columns:1fr;margin-top:0}
.cover-split .fine a{color:var(--mint)}
.cover-shot .who{grid-template-columns:1fr auto}
.cover-shot .rev{display:grid;gap:6px;padding:12px;border-radius:12px;border:1px dashed var(--line);font-size:14px}
.cover-shot .rev span{color:var(--muted)}
.rev-bar{display:block;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.rev-bar i{display:block;width:70%;height:100%;background:var(--amber);border-radius:999px}
.rev-now{font:600 12.5px var(--mono)}
.check-head{margin:22px 0 10px;font-weight:600}
@media (max-width:1000px){.ready{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.cover-split{grid-template-columns:1fr;gap:18px}}
@media (max-width:700px){.ready{grid-template-columns:1fr}}
.landing #people .catches+.ctas,.landing #diy .catches+.ctas{margin-top:20px}
.price-box{border:1px solid color-mix(in srgb,var(--mint) 40%,var(--line));border-radius:var(--r-lg);background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.price-box .big{font:400 52px/1 var(--serif);letter-spacing:-.02em}
.price-box .big small{font:500 16px var(--sans);color:var(--muted);letter-spacing:0}
.price-box p{margin:0}
.price-box ul{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--muted);font-size:15px}.price-box ul b{color:var(--text);font-weight:600}
.catches.four-row{grid-template-columns:repeat(4,1fr)}
.safe-own{margin:22px 0 0;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px}
.safe-own a{color:var(--mint);white-space:nowrap}
@media (max-width:1000px){.catches.four-row{grid-template-columns:1fr 1fr}}
.lede .nowrap{white-space:nowrap}
@media (max-width:700px){
.ready{grid-template-columns:1fr 1fr;gap:12px 14px}.ready li{padding-left:24px}.ready span{font-size:13.5px}
.cover-shot .who:nth-child(3){display:none}
#coverage .catch,#people .catch{padding:14px 16px}
#coverage .catch span,#people .catch span{font-size:15px}
.safe .check-links{gap:8px}.safe .check-links a{font-size:14px;padding:5px 12px 5px 5px;gap:8px}
.price-box .big{font-size:44px}}
/* Compare pages: what comes on top of reading everything, as cards. A card is the link. */
.vs-beyond-wrap .sec-cards{margin-top:22px}
.sec-cards.n4{grid-template-columns:repeat(4,1fr)}.sec-cards.n3{grid-template-columns:repeat(3,1fr)}
a.scard{display:flex;flex-direction:column;color:var(--text);text-decoration:none}
a.scard .scard-more{margin-top:auto;padding-top:12px;font:normal 600 14px var(--sans);color:var(--mint)}
@media (max-width:1000px){.sec-cards.n4{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.sec-cards.n4,.sec-cards.n3{grid-template-columns:1fr}a.scard{display:grid}a.scard .scard-more{grid-column:2;padding-top:6px}}
/* Every page head starts its text at the same height, whatever its sticker: the text keeps to the top of the row. */
.page-head>div{align-self:start}
/* The wordmark's face blinks with the mascots (blink.js). */
.blinking .wm-open{visibility:hidden}.blinking .wm-shut{visibility:visible}

/* Help (/help, /help/<slug>): the app's own articles, a search over them, and the support page */
.help-top{margin:-8px 0 28px}
.help-search{position:relative;max-width:560px}
.help-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.help-search input{width:100%;box-sizing:border-box;min-width:0;font:16px var(--sans);padding:12px 14px 12px 42px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--line)}
.help-search input:focus{outline:2px solid var(--mint);outline-offset:1px}
.help-results{max-width:720px;margin:14px 0 8px}
.help-results ul{list-style:none;margin:0;padding:0}
.help-results li a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.help-results li a:hover,.help-results li a:focus-visible{border-color:var(--mint)}
.help-results small{color:var(--faint);font-size:13px;text-align:right}
.help-results span{grid-column:1/-1;color:var(--muted);font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.help-results mark{background:none;color:var(--text);font-weight:600}
.help-results .none{color:var(--muted)}
.help-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:12px;align-items:start;grid-auto-flow:row dense}
.landing .help-areas section.help-area.wide{grid-column:1/-1}
.help-area.wide ul{columns:3;column-gap:28px}.help-area.wide li{break-inside:avoid}.help-area.wide li:nth-child(n) a{border-top:0;border-bottom:1px solid var(--line)}
.landing .help-areas section.help-area{padding:18px 20px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.help-area h2{font-size:18px;margin:0 0 8px}
.help-area ul{list-style:none;margin:0;padding:0}
.help-area li a{display:block;padding:7px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}
.help-area li:first-child a{border-top:0}
.help-area li a b{display:block;font-weight:600;font-size:15px}
.help-area li a span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}
.help-area li a:hover b{color:var(--mint)}
.help-more{color:var(--muted);margin:28px 0 8px}
.help-crumbs{display:flex;gap:8px;align-items:center;padding-top:36px;font-size:14px;color:var(--faint)}
.help-crumbs a{color:var(--muted)}
.help-page{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start;padding:8px 0 24px}
.help-article{max-width:700px;min-width:0}
.help-article h1{font-size:clamp(32px,4vw,42px);margin:6px 0 6px;font-weight:var(--fw-display)}
.help-article .lede{margin:0 0 22px}
.help-article h2{font-size:22px;margin:32px 0 8px;scroll-margin-top:16px}
.help-article h3{font-size:17px;margin:22px 0 6px}
.help-article p,.help-article li{color:var(--muted);overflow-wrap:anywhere}
.help-article b{color:var(--text);font-weight:600}
.help-article code{font:13.5px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:6px;color:var(--text)}
.help-article ol:not(.help-toc),.help-article ul{padding-left:22px}
.help-article li{margin:4px 0}
.help-toc{list-style:none;padding:12px 16px!important;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px}
.help-toc li{margin:0}
.help-page aside{position:sticky;top:20px;display:grid;gap:18px}
.help-page aside .help-search input{padding-top:10px;padding-bottom:10px;font-size:15px}
.help-page aside .help-results{margin:0}
.help-page aside .help-results li a{padding:10px 12px}
.help-side{display:grid;gap:2px;font-size:14.5px}
.help-side b{color:var(--text);margin-bottom:4px}
.help-side a{color:var(--muted);text-decoration:none;padding:3px 0}
.help-side a:hover{color:var(--mint)}
.help-side a.all{margin-top:8px;color:var(--mint)}
.support-ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin-bottom:32px}
.support-way{display:grid;gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.support-way span{color:var(--muted);font-size:15px}
.support-way:hover{border-color:var(--mint)}
@media (max-width:1000px){.help-areas{grid-template-columns:1fr 1fr}.help-area.wide ul{columns:2}.help-page{grid-template-columns:minmax(0,1fr) 220px;gap:32px}}
@media (max-width:700px){.help-areas,.support-ways{grid-template-columns:1fr}.help-area.wide ul{columns:1}.help-page{grid-template-columns:minmax(0,1fr);gap:28px}
.help-page aside{position:static;order:-1}.help-page aside .help-side{display:none}.help-crumbs{padding-top:24px}}
.help-areas[hidden],.help-results[hidden]{display:none}