/* THE FRAME (2026-10-10, docs/opus_decor_build.md part 0): what every public page shares, the head bar, the foot, the type and the motion. Built on the product's own tokens, buttons and fields (app.css). Start and end, never left and right, so the same sheet serves a language written from the right. Motion is an addition: every page is whole without it, and none of it runs for someone who asks for less motion. */
html{scroll-padding-block-start:88px}
body.public{min-block-size:100dvh;display:flex;flex-direction:column;margin:0;background:var(--ground);color:var(--text);font-size:16px;-webkit-text-size-adjust:100%}
.site-top{position:sticky;inset-block-start:0;z-index:20;background:var(--ground);border-block-end:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.site-top{background:color-mix(in srgb,var(--ground) 80%,transparent);backdrop-filter:saturate(1.6) blur(16px)}}
.site-bar{inline-size:min(1232px,100%);margin-inline:auto;box-sizing:border-box;padding-block:8px;padding-inline:16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand cta menu";align-items:center;column-gap:12px}
.site-brand{grid-area:brand;justify-self:start;display:inline-flex;align-items:center;gap:9px;padding-block:8px;color:var(--text);text-decoration:none}
.brand-mark{display:block;flex:none;block-size:19px;inline-size:auto;margin-block-start:-2px}
.brand-mark .mark-t,.brand-mark .mark-a{fill:url(#ta-blue)}.brand-mark .mark-a{fill-opacity:.58}
.site-name{font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.site-nav{grid-area:nav;display:flex;flex-wrap:wrap;column-gap:20px}
.site-link{display:inline-flex;align-items:center;min-block-size:40px;color:var(--muted);font-size:15px;font-weight:500;text-decoration:none}
.site-link:hover,.site-link[aria-current=page]{color:var(--text)}
@media (pointer:coarse){.site-link,.site-foot ul a,.site-brand{min-block-size:44px}}
.site-login{grid-area:login;justify-self:end}
.site-cta{grid-area:cta;justify-self:end}.site-bar .btn.site-cta{box-shadow:none}
/* On a phone the bar is one row: the name, Start free trial and a menu. The menu is a details element, so it opens
   without the script; public.js closes it on Escape, a click outside it or a link. Under 375 pixels the button moves
   into the menu, where the menu ends with it anyway. */
@media (max-width:859px){.site-nav,.site-login{display:none}}
@media (max-width:374px){.site-bar .site-cta{display:none}}
.site-menu{grid-area:menu}
.site-menu-button{list-style:none;display:grid;place-items:center;inline-size:44px;block-size:44px;margin-inline-end:-6px;border-radius:12px;color:var(--text);cursor:pointer}
.site-menu-button::-webkit-details-marker{display:none}
.site-menu-button:hover{background:var(--surface)}.site-menu-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-menu-icon{position:relative;inline-size:20px;block-size:12px}
.site-menu-icon::before,.site-menu-icon::after{content:"";position:absolute;inset-inline:0;block-size:2px;border-radius:1px;background:currentColor;transition:translate .2s,rotate .2s}
.site-menu-icon::before{inset-block-start:0}.site-menu-icon::after{inset-block-end:0}
.site-menu[open] .site-menu-icon::before{translate:0 5px;rotate:45deg}.site-menu[open] .site-menu-icon::after{translate:0 -5px;rotate:-45deg}
.site-menu-panel{position:absolute;inset-inline:0;inset-block-start:100%;display:grid;padding:4px 16px 20px;background:var(--surface);border-block-end:1px solid var(--line);box-shadow:0 16px 32px rgba(21,23,28,.10)}
.site-menu-link{display:flex;align-items:center;min-block-size:52px;border-block-end:1px solid var(--line);color:var(--text);font-size:17px;font-weight:500;text-decoration:none}
.site-menu-link:hover,.site-menu-link[aria-current=page]{color:var(--accent)}
.site-menu-cta{margin-block-start:16px;min-block-size:48px}
@media (prefers-reduced-motion:reduce){.site-menu-icon::before,.site-menu-icon::after{transition:none}}
@media (min-width:860px){.site-bar{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand nav login cta";padding-block:12px;column-gap:32px}.site-nav{justify-content:center;column-gap:28px}.site-menu{display:none}}
.public-main{flex:1;display:grid;justify-items:center;align-content:start;padding-block:24px 56px;padding-inline:16px}
.site-foot{border-block-start:1px solid var(--line);background:var(--surface)}
.site-foot-in{inline-size:min(1232px,100%);margin-inline:auto;box-sizing:border-box;padding-block:40px 36px;padding-inline:16px;display:grid;gap:32px}
.site-foot-name{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.site-entity{margin:0;max-inline-size:36ch;color:var(--muted);font-size:14px;line-height:1.5}
.site-copy{margin:12px 0 0;color:var(--muted);font-size:14px}
.site-foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.site-foot-title{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--text)}
.site-foot ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.site-foot ul a{display:inline-flex;align-items:center;min-block-size:32px;color:var(--muted);font-size:14px;text-decoration:none;overflow-wrap:anywhere}.site-foot ul a:hover{color:var(--text);text-decoration:underline}
@media (min-width:760px){.site-foot-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr);padding-block:56px 48px}.site-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-mark .mark-t,:root:not([data-theme="light"]) .brand-mark .mark-a{fill:#FFFFFF}}
:root[data-theme="dark"] .brand-mark .mark-t,:root[data-theme="dark"] .brand-mark .mark-a{fill:#FFFFFF}
/* Motion, added where the browser has it: one page leads into the next. Nothing waits for a scroll to show: a screenshot taken at once must show the whole page (Paddle's review, docs/paddle.md). */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.signup{inline-size:min(980px,100%);display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.signup.one{inline-size:min(480px,100%)}
.signup-form,.signup-side{padding:28px;border:1px solid var(--line);border-radius:20px;min-inline-size:0}
.signup-form{background:var(--surface);box-shadow:var(--shadow)}.signup-side{background:var(--accent-soft);border-color:transparent}
.signup h1{margin:0 0 8px;font-size:28px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.signup .lead{margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.signup .lead b{color:var(--text)}
.signup .form{max-inline-size:none}.signup .form .btn.primary{inline-size:100%;min-block-size:48px;margin-block-start:4px}
.signup-other{margin:18px 0 0;color:var(--muted);font-size:14px;text-align:center}
.signup-ico{display:grid;place-items:center;inline-size:56px;block-size:56px;margin-block-end:16px;border-radius:16px;background:var(--accent-soft);color:var(--accent)}.signup-ico.ok{background:var(--online-soft);color:var(--online)}
.signup-again{display:grid;justify-items:start;gap:8px;margin-block-start:20px}.signup-again .seen{margin:0}
.signup-again [role=status]{display:block;margin-block-end:2px;color:var(--text)}.signup-again b{font-variant-numeric:tabular-nums;color:var(--text)}
.signup-status{margin-block:20px 0;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--text);font-size:14px}
.signup-wrong{margin-block-start:16px;color:var(--muted);font-size:14px}.signup-wrong .quiet-link{font-size:14px}
.signup-side h2{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.signup-side h2:not(:first-child){margin-block-start:28px}
.signup-facts,.signup-steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px;line-height:1.45}
.signup-facts li{display:flex;gap:10px;align-items:flex-start}.signup-facts svg{flex:none;margin-block-start:2px;color:var(--accent)}
.signup-steps{counter-reset:step}.signup-steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:step}
.signup-steps li::before{content:counter(step);flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--surface);color:var(--accent);font-size:13px;font-weight:700}
@media (min-width:900px){.public-main{align-content:center;padding-block:32px 72px}.signup:not(.one){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.signup:not(.one) .signup-form,.signup:not(.one) .signup-side{border:0;border-radius:0;box-shadow:none;padding:44px}}
/* THE PUBLIC PAGES (2026-10-03, docs/paddle.md part 0): the pricing and the three policies, until their own parts of docs/opus_decor_build.md replace them. The practice searched first: the price the loudest thing on a card, consistent cards, one highlighted, up to four across; a policy as a readable document, short sections, a contents list that jumps, the date it took effect. */
.pricing{inline-size:min(1100px,100%);display:grid;gap:28px;justify-items:center}
.pricing-head{text-align:center}.pricing-head h1{margin:0 0 10px;font-size:34px;line-height:1.15;letter-spacing:-.015em}.pricing-head .lead{margin:0 auto;max-inline-size:62ch;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:pretty}
.price-cards{inline-size:100%;margin:0;padding:0;list-style:none;display:grid;gap:16px;align-items:start}
.price-card{position:relative;display:grid;gap:14px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);min-inline-size:0}
.price-card.featured{border-color:var(--accent);box-shadow:var(--shadow)}
.price-badge{position:absolute;inset-block-start:-12px;inset-inline-start:24px;padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;letter-spacing:.02em}
.price-card h2{margin:0;font-size:18px;line-height:1.3}
.price-main{margin:0;display:flex;align-items:baseline;gap:6px}.price-amount{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.price-per{color:var(--muted);font-size:15px}
.price-year{margin:-6px 0 0;color:var(--muted);font-size:14px}.price-save{margin-inline-start:8px;padding:2px 8px;border-radius:999px;background:var(--ok-soft,var(--accent-soft));color:var(--ok,var(--accent));font-size:12px;font-weight:700}
.price-facts{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.45}.price-facts li{display:flex;gap:10px;align-items:flex-start}.price-facts svg{flex:none;margin-block-start:2px;color:var(--accent)}
.price-card .btn{inline-size:100%;min-block-size:46px;margin-block-start:6px}
.pricing-empty,.pricing-foot{margin:0;color:var(--muted);font-size:15px;text-align:center;max-inline-size:72ch}.pricing-foot a{white-space:nowrap}
.legal{inline-size:min(720px,100%);display:grid;gap:28px}
.legal-head h1{margin:0 0 6px;font-size:34px;line-height:1.15;letter-spacing:-.015em}.legal-date{margin:0 0 14px;color:var(--muted);font-size:14px}
.legal-head .lead{margin:0;color:var(--muted);font-size:17px;line-height:1.5;text-wrap:pretty}
.legal-contents{padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.legal-contents h2{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legal-contents ol{margin:0;padding-inline-start:20px;display:grid;gap:4px;font-size:15px}.legal-contents a{color:var(--text)}
.legal-body{display:grid;gap:24px}.legal-section{scroll-margin-block-start:84px}.legal-section h2{margin:0 0 8px;font-size:20px;line-height:1.3}
.legal-section p,.legal-section li{font-size:16px;line-height:1.6;color:var(--text)}.legal-section p{margin:0 0 10px}.legal-section p:last-child{margin-block-end:0}
.legal-section ul{margin:0 0 10px;padding-inline-start:22px;display:grid;gap:6px}.legal-address{color:var(--muted)}
@media (min-width:700px){.price-cards:not(.one){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.price-cards.one{inline-size:min(420px,100%)}}
/* The period switch and the comparison table (2026-10-03, his asks after seeing the page). The switch is the practice's pill: two buttons, the pressed one filled, yearly first with its saving. The cards hold both prices and show one. The table reads every limit side by side; on a phone it scrolls sideways with the first column held. */
.period{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.period button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.period button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.period button[aria-pressed=true] .price-save{background:rgba(255,255,255,.22);color:var(--on-accent)}
.price-cards[data-period=year] .for-month,.price-cards[data-period=month] .for-year{display:none}
.price-note{margin:-6px 0 0;color:var(--muted);font-size:14px}
.compare{inline-size:100%;display:grid;gap:14px}.compare h2{margin:0;font-size:20px;line-height:1.3;text-align:center}
.compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.compare-table{inline-size:100%;min-inline-size:560px;border-collapse:collapse;font-size:15px}
.compare-table th,.compare-table td{padding:12px 16px;text-align:start;border-block-start:1px solid var(--line);vertical-align:top}
.compare-table thead th{border-block-start:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.compare-table tbody th{font-weight:500;color:var(--muted);inline-size:34%}.compare-table td{font-variant-numeric:tabular-nums}
.compare-table th:first-child,.compare-table td:first-child{position:sticky;inset-inline-start:0;background:var(--surface)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* THE FRONT PAGE AND THE PAGES ABOUT THE PRODUCT (2026-10-10, docs/opus_decor_build.md parts 1 and on). Direction A, the product live (docs/opus_decor_look.md): large plain statements, the app's own pieces as the pictures, one dark band for the record. Nothing on these pages moves by itself. */
.home,.page{inline-size:min(1200px,100%);display:grid;gap:clamp(72px,10vw,136px);padding-block:clamp(8px,3vw,40px) clamp(16px,4vw,48px)}
.home h2,.page h2{margin:0;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
.kicker{margin:0 0 16px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px}.hero-acts .btn,.last .btn{min-block-size:48px;padding-inline:24px}
@media (max-width:420px){.hero-acts .btn{flex:1 1 100%}}
/* The app's pieces, drawn for the pictures: an avatar, a state dot, a tick, a switch, a flag. */
.ui-avatar{inline-size:32px;block-size:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}
.ui-dot{inline-size:8px;block-size:8px;flex:none;border-radius:50%;background:var(--online)}.ui-dot.off{background:var(--warn)}
.ui-tick{position:relative;inline-size:20px;block-size:20px;flex:none;border-radius:50%;background:var(--online)}
.ui-tick::after{content:"";position:absolute;inset-inline-start:7px;inset-block-start:4px;inline-size:5px;block-size:9px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
.ui-switch{position:relative;inline-size:40px;block-size:24px;flex:none;border-radius:12px;background:var(--line)}.ui-switch.on{background:var(--online)}
.ui-switch::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:18px;block-size:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}.ui-switch.on::after{inset-inline-start:19px}
.ui-flag{inline-size:16px;block-size:12px;border-radius:2px;box-shadow:0 0 0 1px var(--line);vertical-align:-1px;margin-inline:6px 4px}
.ui-card{margin:0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
/* The proof, in short */
.proof{margin:calc(clamp(72px,10vw,136px) * -.55) 0 0;padding:20px 0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;border-block:1px solid var(--line);color:var(--muted);font-size:15px}
.proof li{display:inline-flex;align-items:center;gap:10px}
@media (max-width:640px){.proof{justify-content:start;gap:10px 22px}}.proof li::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent)}
/* Sections */
.band{display:grid;gap:36px}
.asks{margin:0;display:grid;gap:32px 48px}
.asks div{padding-block-start:20px;border-block-start:1px solid var(--line)}
.asks dt{margin:0 0 8px;font-size:18px;font-weight:650;letter-spacing:-.01em}
.asks dd{margin:0;color:var(--muted);font-size:16px;line-height:1.6}
@media (min-width:760px){.asks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;gap:40px;align-items:center}
.split-text h2{margin-block-end:24px}
@media (min-width:980px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}.split.flip .split-text{order:2}}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:14px;font-size:16px;line-height:1.55}
.ticks li{position:relative;padding-inline-start:30px}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:5px;inline-size:6px;block-size:11px;border:solid var(--accent);border-width:0 2px 2px 0;rotate:45deg}
.pic{display:grid;gap:4px;font-size:15px}
.pic-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-block-end:12px}.pic-sub{display:block;color:var(--muted);font-size:13px;font-weight:400}
.pic-head .pic-sub{display:inline;font-family:var(--mono);font-size:12px}
.pic-master{margin-block-start:12px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:space-between;gap:16px}
/* The record, in the one dark band */
.split.flip{padding-block:clamp(48px,7vw,96px);background:#0F1115;box-shadow:0 0 0 100vmax #0F1115;clip-path:inset(0 -100vmax);color:#EDEFF3;--surface:#171A20;--ground:#0F1115;--line:#262A33;--text:#EDEFF3;--muted:#9AA0AB;--accent:#38BDF8;--accent-soft:#102A36;--online:#3CCB6E;--warn:#F59E5B;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
.log-line{display:flex;align-items:center;gap:12px;padding-block:13px;border-block-start:1px solid var(--line);font-size:14px}
.log-line:first-child{border-block-start:0;padding-block-start:0}
.log-words{flex:1;min-inline-size:0;line-height:1.4}.log-words b{white-space:nowrap}.log-meta{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.log-story{margin:0 0 6px;padding:2px 0 12px;padding-inline-start:20px;list-style:none;display:grid;gap:8px;border-inline-start:2px solid var(--line);margin-inline-start:3px;color:var(--muted);font-size:13px}
.log-story li{position:relative}.log-story li::before{content:"";position:absolute;inset-inline-start:-25px;inset-block-start:6px;inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent)}
@media (max-width:520px){.log-line{flex-wrap:wrap}.log-meta{inline-size:100%;padding-inline-start:20px}}
.faq{display:grid;border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-block-size:44px;padding-block:18px;font-size:18px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;inline-size:9px;block-size:9px;border:solid var(--muted);border-width:0 2px 2px 0;rotate:45deg;translate:0 -3px;transition:rotate .2s}
.faq details[open] summary::after{rotate:225deg;translate:0 2px}
.faq details p{margin:0 0 20px;max-inline-size:68ch;color:var(--muted);font-size:16px;line-height:1.6}
.last{display:grid;gap:14px;justify-items:center;text-align:center;padding:clamp(44px,7vw,88px) 24px;border-radius:28px;background:linear-gradient(135deg,#155E75,#1A7A95);color:#fff}
.last p{margin:0;color:rgba(255,255,255,.85);font-size:17px}
.last .btn.primary{margin-block-start:10px;background:#fff;border-color:#fff;color:#155E75;box-shadow:none}
/* THE FRONT PAGE, third version (docs/opus_decor_home_v3.md): his words. A centred statement with the app itself
   under it, How it works in three steps, the four things a buyer gets most beside their pictures of the app (taken on
   a sample company, docs/opus_decor_appshots/, never drawn), six more in a grid, the plans, the questions, the last call. */
.home-hero{display:grid;justify-items:center;text-align:center}
.home-hero h1{margin:0 0 20px;max-inline-size:24ch;font-size:clamp(36px,4.8vw,60px);line-height:1.06;letter-spacing:-.035em;font-weight:650;text-wrap:balance}
.home-hero .lead{margin:0 0 28px;max-inline-size:46ch;color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.55;text-wrap:pretty}
.home-hero .hero-acts{justify-content:center}
/* The hero's film (his ask 2026-10-12, docs/opus_decor_home_v3.md, Round three): line drawings in the manner of
   simonian.technology (hand drawn paths set to a length of 1 and drawn in by their dash), then one story on one
   timeline of 7.4 seconds, so Pause and Replay hold every part in step: 11:48 PM refused at the working hours, the
   hands sweep, the moon sets and the sun rises, 9:14 AM through, ACCOUNTS-2 on, both lines in the record. What the
   styles say is the finished picture; the motion only leads to it, once, and only where motion is welcome. The
   wire meets the clock at 39% of its length and leaves it at 62% (measured in the browser). */
.hero-art{inline-size:min(820px,100%);margin-block-start:clamp(40px,6vw,64px);display:grid;gap:12px;justify-items:end;--sky-day:#E3F1F7;--sky-night:#D6DCE8;--sun:#B86E00}
.hero-art-film{box-sizing:border-box;inline-size:100%;margin:0;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;text-align:start}
.hero-art-stage{position:relative;margin:24px 24px 0;aspect-ratio:2/1;color:var(--text)}
.hero-art-svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.hero-sky{fill:var(--sky-day)}.hero-moon{opacity:0;stroke:var(--muted)}.hero-sun{stroke:var(--sun)}
.hero-glow{fill:var(--accent-soft)}.hero-screen{fill:var(--accent-soft)}
.hero-draw{stroke-dasharray:1 2;stroke-dashoffset:0}
.hero-wire{stroke:var(--line);stroke-dasharray:3 7}
.hero-trail{stroke:var(--accent);stroke-width:3;stroke-dasharray:1 2;stroke-dashoffset:0}
.hero-pulse{stroke:var(--accent);stroke-width:8;stroke-dasharray:.012 3;opacity:0;filter:drop-shadow(0 0 5px var(--accent))}
.hero-face-ground{fill:var(--surface)}
.hero-hand{transform-box:view-box;transform-origin:320px 132px}.hero-hour{stroke-width:3.2;transform:rotate(277deg)}.hero-minute{transform:rotate(84deg)}
.hero-pin{fill:currentColor}
.hero-badge{transform-box:fill-box;transform-origin:center;stroke:#fff;stroke-width:2.6}.hero-badge-no{opacity:0}.hero-badge-no circle{fill:var(--danger)}.hero-badge-yes circle{fill:var(--online)}
.hero-lines{stroke:var(--accent);stroke-dasharray:1 2;stroke-dashoffset:0}
.hero-ripple{stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hero-art-time{position:absolute;inset-block-start:2%;inset-inline-start:50%;translate:-50% 0;margin:0;display:grid;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap}
.hero-art-time span{grid-area:1/1;text-align:center}.hero-time-night{opacity:0}
.hero-art-label{position:absolute;inset-block-start:84%;translate:-50% 0;margin:0;display:grid;gap:2px;max-inline-size:32%;text-align:center;font-size:14px;line-height:1.3}
.hero-at-laptop{inset-inline-start:18.6%}.hero-at-office{inset-inline-start:82.8%}.hero-at-clock{inset-inline-start:50%;inset-block-start:55.5%}
.hero-art-label b{font-weight:600}.hero-art-label bdi,.hero-log-words bdi{white-space:nowrap}.hero-art-kind{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-log{margin:8px 24px 0;padding-block-end:10px}
.hero-log-head{margin:0;padding-block:10px 4px;border-block-start:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-log-new{display:grid;grid-template-rows:1fr}.hero-log-new>*{min-block-size:0;overflow:hidden}
.hero-log-row{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding-block:10px;font-size:14px;line-height:1.4}
.hero-log-old{border-block-start:1px solid var(--line)}
.hero-log-words b{font-weight:600}.hero-log-time{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.hero-dot{inline-size:9px;block-size:9px;border-radius:50%}.hero-dot.live{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.hero-dot.refused{background:var(--danger)}
.hero-art-control{display:inline-flex;align-items:center;gap:8px;min-block-size:36px;padding-inline:12px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hero-art-control[hidden]{display:none}
@media (hover:hover){.hero-art-control:hover{color:var(--text);border-color:var(--muted)}}
.hero-art-control:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.hero-art-control{min-block-size:44px}}
.hero-art-control svg{display:none}
.hero-art[data-state=playing] .hero-icon-pause,.hero-art[data-state=paused] .hero-icon-play,.hero-art[data-state=ended] .hero-icon-replay{display:block}
@media (max-width:640px){.hero-art-stage{margin:16px 12px 0}.hero-log{margin-inline:16px}.hero-art-label{font-size:12px;max-inline-size:34%}.hero-art-kind{font-size:10px}.hero-art-time{font-size:12px;padding:2px 10px}
  .hero-log-row{grid-template-columns:auto minmax(0,1fr);font-size:13px}.hero-log-time{grid-column:2}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-art{--sky-day:#123540;--sky-night:#0B0E15;--sun:#F2B544}}
:root[data-theme="dark"] .hero-art{--sky-day:#123540;--sky-night:#0B0E15;--sun:#F2B544}
@media (prefers-reduced-motion:no-preference){
  .hero-draw{animation:hero-draw .7s ease-out both}.hero-draw.d1{animation-delay:.15s}.hero-draw.d2{animation-delay:.35s}.hero-draw.d3{animation-delay:.55s}.hero-draw.d4{animation-delay:.75s}.hero-draw.d5{animation-delay:.95s}
  .hero-art .hero-face{animation:hero-draw .7s ease-out .35s both,hero-face 7.4s linear both}
  .hero-wire{animation:hero-fade 7.4s linear both}
  .hero-sky{animation:hero-sky 7.4s linear both}.hero-moon{animation:hero-moon 7.4s linear both}.hero-sun{animation:hero-sun 7.4s linear both}
  .hero-glow,.hero-pin{animation:hero-show 7.4s linear both}.hero-pulse-night{animation:hero-pulse-night 7.4s linear both}.hero-pulse-day{animation:hero-pulse-day 7.4s linear both}.hero-trail{animation:hero-trail 7.4s linear both}
  .hero-hour{animation:hero-hour 7.4s linear both}.hero-minute{animation:hero-minute 7.4s linear both}
  .hero-badge-no{animation:hero-no 7.4s linear both}.hero-badge-yes{animation:hero-yes 7.4s linear both}
  .hero-screen{animation:hero-screen 7.4s linear both}.hero-lines{animation:hero-lines 7.4s linear both}.hero-ripple{animation:hero-ripple 7.4s linear both}
  .hero-time-night{animation:hero-night 7.4s linear both}.hero-time-day{animation:hero-day 7.4s linear both}.hero-art-label,.hero-art-time{animation:hero-fade 7.4s linear both}
  .hero-log-old{animation:hero-old 7.4s linear both}.hero-log-new{animation:hero-new 7.4s linear both}
  .hero-art.is-paused *{animation-play-state:paused!important}
  .hero-art.is-reset *{animation:none!important}}
@keyframes hero-draw{from{stroke-dashoffset:1.05}}
@keyframes hero-fade{0%,12%{opacity:0}18%,100%{opacity:1}}
@keyframes hero-show{0%,5%{opacity:0}11%,100%{opacity:1}}
@keyframes hero-sky{0%,3%{opacity:0;fill:var(--sky-night)}9%{opacity:1;fill:var(--sky-night)}44.6%{opacity:1;fill:var(--sky-night);animation-timing-function:ease-in-out}62.2%,100%{opacity:1;fill:var(--sky-day)}}
@keyframes hero-moon{0%,9%{opacity:0;transform:translateY(6px)}14%{opacity:1;transform:none}44.6%{opacity:1;transform:none;animation-timing-function:ease-in}54%,100%{opacity:0;transform:translateY(34px)}}
@keyframes hero-sun{0%,50%{opacity:0;transform:translateY(36px);animation-timing-function:ease-out}62.2%,100%{opacity:1;transform:none}}
@keyframes hero-pulse-night{0%,21.5%{opacity:0;stroke-dashoffset:.012}21.6%{opacity:1;stroke-dashoffset:.012;stroke:var(--accent)}33.8%{opacity:1;stroke-dashoffset:-.373;stroke:var(--accent)}34.8%{opacity:1;stroke-dashoffset:-.373;stroke:var(--danger)}41%,100%{opacity:0;stroke-dashoffset:-.373;stroke:var(--danger)}}
@keyframes hero-pulse-day{0%,64.8%{opacity:0;stroke-dashoffset:.012}64.9%{opacity:1;stroke-dashoffset:.012}82.4%{opacity:1;stroke-dashoffset:-.978}84%,100%{opacity:0;stroke-dashoffset:-.978}}
@keyframes hero-trail{0%,64.9%{stroke-dashoffset:1}82.4%{stroke-dashoffset:.012}84%,100%{stroke-dashoffset:0}}
@keyframes hero-face{0%,33.8%{stroke:currentColor}34.8%,42%{stroke:var(--danger)}44.6%,73.4%{stroke:currentColor}74.4%,79%{stroke:var(--online)}82%,100%{stroke:currentColor}}
@keyframes hero-hour{0%,6%{opacity:0;transform:rotate(-6deg)}11%{opacity:1;transform:rotate(-6deg)}44.6%{opacity:1;transform:rotate(-6deg);animation-timing-function:cubic-bezier(.6,0,.3,1)}62.2%,100%{opacity:1;transform:rotate(277deg)}}
@keyframes hero-minute{0%,6%{opacity:0;transform:rotate(288deg)}11%{opacity:1;transform:rotate(288deg)}44.6%{opacity:1;transform:rotate(288deg);animation-timing-function:cubic-bezier(.6,0,.3,1)}62.2%,100%{opacity:1;transform:rotate(804deg)}}
@keyframes hero-no{0%,34.4%{opacity:0;transform:scale(.2)}36%{opacity:1;transform:scale(1.15)}37.5%,42.5%{opacity:1;transform:scale(1)}44.6%,100%{opacity:0;transform:scale(.6)}}
@keyframes hero-yes{0%,73.4%{opacity:0;transform:scale(.2)}75%{opacity:1;transform:scale(1.15)}76.5%,100%{opacity:1;transform:scale(1)}}
@keyframes hero-screen{0%,82.4%{opacity:0}87%,100%{opacity:1}}
@keyframes hero-lines{0%,83%{stroke-dashoffset:1.05}90%,100%{stroke-dashoffset:0}}
@keyframes hero-ripple{0%,82.4%{opacity:0;transform:scale(.7)}83.5%{opacity:.6;transform:scale(.75)}95%,100%{opacity:0;transform:scale(1.35)}}
@keyframes hero-night{0%,10%{opacity:0}15%,50%{opacity:1}53%,100%{opacity:0}}
@keyframes hero-day{0%,52%{opacity:0}56%,100%{opacity:1}}
@keyframes hero-old{0%,37.8%{opacity:0;transform:translateY(-6px)}42%,100%{opacity:1;transform:none}}
@keyframes hero-new{0%,90.5%{grid-template-rows:0fr;opacity:0}97.3%,100%{grid-template-rows:1fr;opacity:1}}
/* The pictures of the app, framed like a window, light or dark as the page is (public_shot.html, public.js). */
.shot{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 2px 4px rgba(21,23,28,.05),0 24px 48px rgba(21,23,28,.10)}
.shot img{display:block;inline-size:100%;block-size:auto}
/* On a phone a picture full of words keeps a size they can be read at and runs off the end, fading out, instead of
   shrinking until nothing in it can be read (the practice of the product sites on a phone). */
@media (max-width:640px){.shot-bleed picture{display:block;overflow:hidden;mask-image:linear-gradient(to left,transparent 0,#000 48px)}[dir=rtl] .shot-bleed picture{mask-image:linear-gradient(to right,transparent 0,#000 48px)}.shot-bleed img{inline-size:760px;max-inline-size:none}}
/* How it works: three numbered steps, side by side on a computer. */
.how{display:grid;gap:32px}.how > h2{text-align:center}
.how-steps{margin:0;padding:0;list-style:none;display:grid;gap:28px 40px;counter-reset:step}
.how-steps li{counter-increment:step;padding-block-start:24px;border-block-start:1px solid var(--line);color:var(--muted);font-size:17px;line-height:1.55;text-wrap:pretty}
.how-steps li::before{content:counter(step);display:grid;place-items:center;inline-size:36px;block-size:36px;margin-block-end:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:600}
.how-steps b{display:block;margin-block-end:4px;color:var(--text);font-size:19px;font-weight:650;letter-spacing:-.01em}
@media (min-width:860px){.how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* What a buyer gets: the heading over all of it, then one part per thing, the words beside their picture, the side
   changing from part to part (pictures that carry information scan as well in turns, Nielsen Norman Group). */
.home-features{display:grid;gap:clamp(64px,8vw,112px)}
.home-head{display:grid;justify-items:center;text-align:center}
.home-head .lead{margin:16px 0 0;max-inline-size:56ch;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.55;text-wrap:pretty}
.feature{display:grid;gap:32px;align-items:center}
.feature-text h3{margin:0 0 16px;font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-.025em;font-weight:650;text-wrap:balance}
.feature-text p{margin:0;max-inline-size:46ch;color:var(--muted);font-size:clamp(16px,1.4vw,18px);line-height:1.6;text-wrap:pretty}
.feature .shot-portrait{justify-self:center;inline-size:min(400px,100%)}
@media (min-width:980px){.feature:not(.feature-wide){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}.feature.flip .feature-text{order:2}}
.feature-wide .feature-text{max-inline-size:760px}.feature-wide .feature-text p{max-inline-size:62ch}
/* The record on a ground of its own (his go 2026-10-12): the one dark band in the light theme, a step lighter than
   the page in the dark one, so it reads as its own part in both. */
.home-dark{padding-block:clamp(56px,7vw,96px);background:#0F1115;box-shadow:0 0 0 100vmax #0F1115;clip-path:inset(0 -100vmax);color:#EDEFF3;--surface:#171A20;--ground:#0F1115;--line:#262A33;--text:#EDEFF3;--muted:#9AA0AB;--accent:#38BDF8;--accent-soft:#102A36}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home-dark{background:#171A20;box-shadow:0 0 0 100vmax #171A20}}
:root[data-theme="dark"] .home-dark{background:#171A20;box-shadow:0 0 0 100vmax #171A20}
/* Six more, each a line icon in the app's style and its words, two or three across. */
.reasons-all{display:grid;gap:32px}
.reasons{margin:0;padding:0;list-style:none;display:grid;gap:36px 40px}
.reasons li{display:grid;align-content:start;gap:8px}
.reason-icon{display:grid;place-items:center;inline-size:44px;block-size:44px;margin-block-end:8px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.reasons h3{margin:0;font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.reasons p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;text-wrap:pretty}
@media (min-width:700px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.reasons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-more{display:flex;justify-content:center}
/* The plans, read from the packages: the price the loudest thing on each, the trial and the billing under them. */
.home-plans{display:grid;gap:32px;justify-items:center;text-align:center}
.home-plan-list{inline-size:100%;margin:0;padding:0;list-style:none;display:grid;gap:16px}
.home-plan{display:grid;gap:12px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);text-align:start;min-inline-size:0}
.home-plan h3{margin:0;font-size:18px;line-height:1.3}
.home-plan-size{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.home-plan-notes{display:grid;gap:6px;color:var(--muted);font-size:15px;line-height:1.5}.home-plan-notes p{margin:0}.home-plan-notes a{white-space:nowrap}
@media (min-width:760px){.home-plan-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
/* The questions, then the last call. */
.home-faq{justify-self:center;inline-size:min(860px,100%)}.home-faq > h2{text-align:center}

/* The pages about the product (part 2 on): a head, groups that open with what they give, more pieces for the pictures. */
.page-head{max-inline-size:860px}.page-head h1{margin:0 0 18px;font-size:clamp(36px,4.8vw,60px);line-height:1.05;letter-spacing:-.035em;font-weight:650;text-wrap:balance}
.page-head .lead{margin:0;max-inline-size:60ch;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.55;text-wrap:pretty}
.benefit{margin:-12px 0 22px;color:var(--muted);font-size:17px;line-height:1.5}
.ui-btn{display:inline-flex;align-items:center;min-block-size:32px;padding-inline:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap}
.ui-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.ui-btn.danger{color:var(--danger)}
.pic-label{margin:0;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pic-hours{margin:0;padding:12px 14px;border-radius:12px;background:var(--ground);display:grid;gap:4px;font-size:14px}
.pic-rows{margin:8px 0 0;padding:0;list-style:none}.pic-rows li{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-block:12px;border-block-end:1px solid var(--line)}
.pic-rows .pic-sub{display:inline;margin-inline-start:auto}
.pic-ask,.pic-live{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-block-start:12px;padding:12px 14px;border-radius:12px;background:var(--ground);font-size:14px}
.pic-acts{display:flex;gap:8px}
.pic-gap{margin-block-start:18px}.pic-live{margin-block-start:8px}.pic-live-words{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;flex:1;min-inline-size:0}.pic-live-words .pic-sub{display:inline;font-family:var(--mono);font-size:12px}
.cards{display:grid;gap:20px;align-items:stretch}
.card-group{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.card-group h2{font-size:clamp(22px,2.2vw,26px);margin-block-end:14px}.card-group .benefit{margin:-6px 0 18px;font-size:16px}
.card-words{margin:0;color:var(--text);font-size:16px;line-height:1.6}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards:not(.two) .card-group:last-child:nth-child(3n+1){grid-column:1/-1}.cards:not(.two) .card-group:last-child:nth-child(3n+1) .ticks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}}
.last-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:10px}.last-acts .btn.primary{margin:0}
.last .btn.ghost{min-block-size:48px;padding-inline:24px;background:transparent;border-color:rgba(255,255,255,.6);color:#fff;box-shadow:none}

/* The trust page (part 3): plain prose, a two column set of cards, the list of who else handles data, a drawing of what travels and what our servers keep. */
.prose{margin:0 0 22px;max-inline-size:68ch;color:var(--text);font-size:17px;line-height:1.65}
.band.narrow{max-inline-size:860px}.band.narrow .prose{margin:0}
@media (min-width:760px){.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.handlers{margin:0;display:grid}.handlers div{display:grid;gap:2px;padding-block:12px;border-block-end:1px solid var(--line)}.handlers div:first-child{padding-block-start:0}
.handlers dt{font-weight:650}.handlers dd{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.card-words.muted{margin-block-start:16px;color:var(--muted);font-size:14px}
.card-link{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:15px;font-weight:600}.card-link a{color:var(--accent)}
.more{margin:0}.more-link{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;color:var(--accent);font-weight:600;text-decoration:none}.more-link::after{content:"";inline-size:7px;block-size:7px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg}.more-link:hover{text-decoration:underline}
[dir=rtl] .more-link::after{rotate:-135deg}
.route{display:grid;gap:16px}
.route-ends{display:grid;grid-template-columns:auto minmax(32px,1fr) auto;align-items:center;gap:12px}
.route-end{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--ground);font-size:14px}
.route-wire{block-size:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px)}
.route-note{margin:0;color:var(--accent);font-size:14px;font-weight:600;text-align:center}
.route-server{display:grid;gap:4px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);font-size:14px}.route-server span{color:var(--muted)}

/* Work from home and small business (part 4): numbered steps, the pains, two offices priced. */
.steps-list{margin:0;padding:0;list-style:none;display:grid;gap:22px;counter-reset:step}
.steps-list li{counter-increment:step;position:relative;padding-inline-start:52px;color:var(--muted);font-size:16px;line-height:1.6}
.steps-list li::before{content:counter(step);position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:34px;block-size:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:600}
.steps-list b{display:block;color:var(--text);font-size:17px;font-weight:650}
.card-words.gap{margin-block-start:14px}
.pains{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pains li{padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:16px;line-height:1.5}
.pains-answer{margin:0;font-size:clamp(22px,2.6vw,32px);font-weight:650;letter-spacing:-.02em;line-height:1.2;color:var(--accent)}
.cases{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.cases li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 20px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.case-who{font-size:16px}.case-plan{color:var(--muted);font-size:14px}.case-price{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:520px){.cases li{grid-template-columns:minmax(0,1fr) auto}.case-plan{grid-row:2}}

/* The pricing page (part 5): the facts under the cards, the comparison's features, the hint that it scrolls sideways on a phone. */
.pricing{gap:clamp(28px,4vw,44px)}
.pricing-proof{margin:0;border:0;padding:0}
.compare-hint{display:none;margin:0;color:var(--muted);font-size:14px;text-align:center}
@media (max-width:700px){.compare-hint{display:block}.compare-table td.included,.compare-all td{text-align:start}.compare-scroll{position:relative;mask-image:linear-gradient(to left,transparent 0,#000 40px)}[dir=rtl] .compare-scroll{mask-image:linear-gradient(to right,transparent 0,#000 40px)}}
.compare-all td{padding:16px;border-block-start:1px solid var(--line);background:var(--accent-soft);color:var(--text);font-weight:600;text-align:center}
.compare-group-name{padding:22px 16px 8px;border-block-start:0;color:var(--text);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:start}
.compare-table td.included{color:var(--muted);font-size:14px;text-align:center}.compare-table td.included .ui-tick{display:inline-block;vertical-align:-5px;margin-inline-end:8px;inline-size:18px;block-size:18px}
.compare-table td.included .ui-tick::after{inset-inline-start:6px;inset-block-start:3px;inline-size:4px;block-size:8px}
.compare-more{margin:0;color:var(--muted);font-size:15px;text-align:center}.compare-more a{color:var(--accent);font-weight:600}
.pricing-faq{inline-size:100%;max-inline-size:880px}.pricing-faq h2{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:650}

/* The two forms (part 6): Contact with its side, the report of misuse, the answer in place of the form. */
.contact{display:grid;gap:24px;align-items:start}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}}
.contact-form h2,.misuse-form h2{margin-block-end:18px;font-size:clamp(22px,2.2vw,26px)}
.contact-form .form,.misuse-form .form{max-inline-size:none}
.misuse-form{max-inline-size:760px}
.form-acts{display:flex;justify-content:flex-end}.form-acts .btn{min-block-size:48px;padding-inline:24px}
.form textarea{inline-size:100%;box-sizing:border-box;min-block-size:140px;resize:vertical;font:inherit;font-size:16px}
.form select{font-size:16px}
.optional{color:var(--muted);font-weight:400}
.leave-empty{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sent{display:flex;gap:14px;align-items:flex-start}.sent .ui-tick{margin-block-start:6px;inline-size:24px;block-size:24px}.sent .ui-tick::after{inset-inline-start:8px;inset-block-start:4px;inline-size:6px;block-size:11px}
.sent h2{margin:0 0 6px}.sent p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.contact-side{display:grid;gap:28px}.contact-side h2{margin:0 0 10px;font-size:18px;letter-spacing:-.01em}.contact-side p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.contact-side .ticks{font-size:15px}.muted-small{margin-block-start:8px;font-size:13px}

/* The visitors' error pages (part 8): one calm statement and the way on. */
.oops{inline-size:min(680px,100%);padding-block:clamp(48px,10vw,120px);text-align:center;display:grid;justify-items:center}
.oops h1{margin:0 0 16px;font-size:clamp(34px,4.6vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:650;text-wrap:balance}
.oops .lead{margin:0 0 28px;max-inline-size:48ch;color:var(--muted);font-size:18px;line-height:1.55}
.oops .hero-acts{justify-content:center}
.oops-more{margin:24px 0 0;color:var(--muted);font-size:15px}.oops-more a{color:var(--accent);font-weight:600}

/* Text on the light blue panels and the green of a state, at the contrast the guidelines ask for (part 10, the
   accessibility audit): the muted grey and the dot's green are too light for words on those grounds in the light
   theme; the dark theme's own values already pass. */
:root{--muted-on-soft:#4B5059;--online-text:#15803D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted-on-soft:#9AA0AB;--online-text:#3CCB6E}}
:root[data-theme="dark"]{--muted-on-soft:#9AA0AB;--online-text:#3CCB6E}
.split.flip{--online-text:#3CCB6E;--muted-on-soft:#9AA0AB}
.pic-master .pic-sub,.route-server span,.signup-side h2{color:var(--muted-on-soft)}