/* 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}
/* THE TYPE (his word 2026-10-25, docs/opus_decor_fonts.md): Inter, served from our own server, its optical size axis on
   so large text takes the cut drawn for display; body at 17 px on a 1.47 line; headings at 600 with almost normal
   spacing (-.012em); nothing heavier than 600 but the name, which keeps the logo's weight. The app keeps its own face
   (the token --font) until it moves too. Latin Extended loads only for a page that shows one of its letters. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/inter-latin.4b73e2ff3024.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/inter-latin-ext.084b211fc382.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
body.public{--font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;min-block-size:100dvh;display:flex;flex-direction:column;margin:0;background:var(--ground);color:var(--text);font-family:var(--font);font-optical-sizing:auto;font-size:17px;-webkit-text-size-adjust:100%}
.public :is(h1,h2,h3){font-weight:600;letter-spacing:-.012em}
.public-main :is(p,li){line-height:1.47}
/* THE GLASS (his word 2026-10-25, docs/opus_decor_glass.md): one material for the controls that float above the
   content, never for the content itself: the head bar, the buttons, a floating control, and `.glass` for any new one.
   Frosted, a light rim along its top edge, a darker hairline, a soft shadow; solid wherever the browser can't blur or
   the reader asks for less transparency or more contrast. The main action stays solid in the accent, with the rim. */
:root{--glass-bar:color-mix(in srgb,var(--surface) 80%,transparent);--glass-fill:color-mix(in srgb,var(--surface) 62%,transparent);--glass-hover:color-mix(in srgb,var(--surface) 64%,var(--text) 6%);--glass-edge:rgba(21,23,28,.10);--glass-rim:rgba(255,255,255,.75);--glass-shadow:0 10px 30px rgba(21,23,28,.10),0 1px 3px rgba(21,23,28,.06);--glass-blur:blur(20px) saturate(1.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass-edge:rgba(255,255,255,.10);--glass-rim:rgba(255,255,255,.14);--glass-shadow:0 10px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.40)}}
:root[data-theme="dark"]{--glass-edge:rgba(255,255,255,.10);--glass-rim:rgba(255,255,255,.14);--glass-shadow:0 10px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.40)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-bar:var(--surface);--glass-fill:var(--surface);--glass-hover:color-mix(in srgb,var(--surface),var(--text) 6%)}}
@media (prefers-reduced-transparency:reduce){:root{--glass-bar:var(--surface);--glass-fill:var(--surface);--glass-hover:color-mix(in srgb,var(--surface),var(--text) 6%);--glass-blur:none}}
@media (prefers-contrast:more){:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--glass-bar:var(--surface);--glass-fill:var(--surface);--glass-hover:color-mix(in srgb,var(--surface),var(--text) 6%);--glass-blur:none;--glass-edge:var(--muted)}}
.glass{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),var(--glass-shadow)}
.public .btn{border-radius:999px;transition:scale .15s ease,background-color .15s ease}
.public .btn:active:not(:disabled){scale:.97}
.public .btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(21,94,117,.22)}
.public .btn:not(.primary):not(.ghost){background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-rim),0 1px 3px rgba(21,23,28,.06)}
@media (hover:hover){.public .btn:not(.primary):not(.ghost):hover:not(:disabled){background:var(--glass-hover)}}
@media (prefers-reduced-motion:reduce){.public .btn{transition:none}.public .btn:active:not(:disabled){scale:none}}
/* The head bar runs edge to edge (his call 2026-10-25, docs/opus_decor_glass.md, the three questions): the glass at
   80% so its words stay legible over whatever scrolls under it, a hairline under it, no shadow. */
.site-top{position:sticky;inset-block-start:0;z-index:20;background:var(--glass-bar);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-block-end:1px solid var(--glass-edge)}
.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 login 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[aria-current=page]{color:var(--text)}@media (hover:hover){.site-link:hover{color:var(--text)}}
@media (pointer:coarse){.site-link,.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:inset 0 1px 0 rgba(255,255,255,.28)}
/* On a phone the bar is one row: the name, Log in as a button, and a menu (his word 2026-10-25: Start free trial
   stands right under it in the hero, so the bar holds the way in for someone who has an account; the menu ends
   with the trial for the pages that have none). Under 375 pixels it is the word alone, so "Open app" still fits
   beside the name. 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. */
@media (max-width:859px){.site-nav,.site-cta{display:none}.site-login{min-block-size:40px;padding-inline:16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600}}
@media (max-width:859px){.site-login{transition:scale .15s ease,background-color .15s ease}.site-login:active{scale:.97}}
@media (max-width:859px) and (hover:hover){.site-login:hover{background:color-mix(in oklab,var(--surface),var(--text) 8%);border-color:color-mix(in oklab,var(--line),var(--text) 18%)}}
@media (max-width:859px) and (prefers-reduced-motion:reduce){.site-login{transition:none}.site-login:active{scale:none}}
@media (max-width:374px){.site-login{padding-inline:6px;border-color:transparent;background: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}
@media (hover:hover){.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}
/* The menu drops from the bar edge to edge and stays solid: words over a see through panel read as text over text. */
.site-menu-panel{position:absolute;inset-inline:0;inset-block-start:100%;display:grid;padding:4px 16px 20px;border-block-end:1px solid var(--glass-edge);border-radius:0 0 20px 20px;background:var(--surface);box-shadow:var(--glass-shadow)}
.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[aria-current=page]{color:var(--accent)}@media (hover:hover){.site-menu-link:hover{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}.site-bar .btn.site-cta{block-size:36px;padding-inline:16px;font-size:15px}}
.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(--ground)}
.site-foot-in{inline-size:min(1232px,100%);margin-inline:auto;box-sizing:border-box;padding-block:48px 32px;padding-inline:16px;display:grid;gap:40px}

.site-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-block-start:24px;border-block-start:1px solid var(--line)}.site-copy{margin:0;color:var(--muted);font-size:13px}
.site-foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.site-foot-title{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--text)}
.site-foot ul{margin:0;padding:0;list-style:none;display:grid}
.site-foot ul a{display:inline-flex;align-items:center;min-block-size:30px;color:var(--muted);font-size:14px;text-decoration:none;overflow-wrap:anywhere}@media (hover:hover){.site-foot ul a:hover{color:var(--text)}}@media (pointer:coarse){.site-foot ul a{min-block-size:44px}.site-foot .seg button{inline-size:44px}}
@media (min-width:760px){.site-foot-in{padding-block:64px 40px}.site-foot-cols{grid-template-columns:repeat(4,auto);justify-content:space-between}}
@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:-.012em;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}
/* The agreement under the button (2026-10-28): one small muted sentence, its two documents underlined, as the leaders set theirs. */
.signup-legal{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.5;text-align:center;text-wrap:pretty}.signup-legal .underline{color:var(--muted)}
.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:600;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:600}
@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(1200px,100%);display:grid;gap:28px;justify-items:center}
.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:24px;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-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:600;line-height:1;letter-spacing:-.012em;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:600}
.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:48px;margin-block-start:6px}
.pricing-empty{margin:0;color:var(--muted);font-size:15px;text-align:center;max-inline-size:72ch}
/* The legal pages (his "b 2arfo ... do a proper research for the design pioneers", 2026-10-26; docs/opus_decor_inner_pages.md,
   the legal pages again): every document and this one's contents in a column that stays in view, the current document
   marked; the title and its date over one readable column; the intro as the short version in a pale panel; the sections
   numbered as the contents number them, a hairline between; the contact a card at the end. On a phone the documents a
   row of pills and the contents behind a tap (closed by public.js there). */
.legal{inline-size:min(1100px,100%);display:grid;gap:28px;padding-block:clamp(8px,2vw,24px) 0}
.legal-nav{display:grid;gap:16px;align-content:start}
.legal-nav-title{margin:0 0 10px;color:var(--muted);font-size:14px;font-weight:600}
.legal-docs ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.legal-docs a{display:inline-flex;align-items:center;min-block-size:40px;padding-inline:14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:15px;text-decoration:none}
.legal-docs a[aria-current]{border-color:transparent;background:var(--accent-soft);color:var(--accent);font-weight:600}
.legal-toc{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.legal-toc summary{display:flex;align-items:center;justify-content:space-between;min-block-size:48px;padding-inline:16px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc summary::after{content:"";inline-size:8px;block-size:8px;border:solid var(--muted);border-width:0 2px 2px 0;rotate:45deg;translate:0 -2px}
.legal-toc[open] summary::after{rotate:-135deg;translate:0 2px}
.legal-toc ol{margin:0;padding:0 16px 16px 36px;display:grid;gap:8px;font-size:15px;line-height:1.4}
.legal-toc ol::marker,.legal-toc li::marker{color:var(--muted)}
.legal-toc a{color:var(--text);text-decoration:none;transition:color .15s}
.legal-toc a[aria-current]{color:var(--accent)}.legal-toc li:has(> a[aria-current])::marker{color:var(--accent)}
@media (hover:hover){.legal-docs a:not([aria-current]):hover,.legal-toc a:hover{color:var(--accent)}}
@media (min-width:1000px){
  .legal{grid-template-columns:240px minmax(0,1fr);column-gap:clamp(56px,7vw,104px);align-items:start}
  .legal-nav{position:sticky;inset-block-start:96px;max-block-size:calc(100dvh - 120px);overflow-y:auto;gap:28px;padding-block-end:8px}
  .legal-docs ul{display:grid;gap:2px}
  .legal-docs a{inline-size:100%;box-sizing:border-box;min-block-size:38px;border:0;background:none;border-radius:10px;padding-inline:12px}
  .legal-toc{border:0;background:none}
  .legal-toc summary{min-block-size:0;padding:0 12px 10px;color:var(--muted);font-size:14px}
  .legal-toc summary::after{display:none}
  .legal-toc ol{padding:0 12px 0 32px;gap:9px;font-size:14px}
}
.legal-doc{min-inline-size:0;max-inline-size:720px}
.legal-head h1{margin:0 0 12px;font-size:clamp(36px,4.4vw,54px);line-height:1.08;letter-spacing:-.014em;font-weight:600;text-wrap:balance}
.legal-date{margin:0;color:var(--muted);font-size:15px}
.legal-short{margin-block-start:28px;padding:20px 24px;border-radius:16px;background:var(--accent-soft)}
.legal-short h2{margin:0 0 6px;color:var(--accent);font-size:15px;font-weight:600}
.legal-short p{margin:0;font-size:18px;line-height:1.6;color:var(--text);text-wrap:pretty}
.legal-body{counter-reset:legal;display:grid}
.legal-section{counter-increment:legal;margin-block-start:36px;padding-block-start:36px;border-block-start:1px solid var(--line)}
.legal-section h2{margin:0 0 14px;font-size:24px;line-height:1.3;letter-spacing:-.01em}
.legal-section h2::before{content:counter(legal) ".";margin-inline-end:.45em;color:var(--accent)}
.legal-section p,.legal-section li{font-size:17px;line-height:1.7;color:var(--text);text-wrap:pretty}
.legal-section p{margin:0 0 12px}.legal-section p:last-child{margin-block-end:0}
.legal-section ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px}
.legal-section ul li{position:relative;padding-inline-start:22px}
.legal-section ul li::before{content:"";position:absolute;inset-inline-start:4px;inset-block-start:.72em;inline-size:6px;block-size:6px;border-radius:50%;background:var(--accent)}
.legal-section a{color:var(--accent)}
.legal-contact{margin-block-start:48px;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.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 (2026-10-03, his asks after seeing the page): the practice's pill, two buttons, the pressed one filled, yearly with its saving. The cards and the comparison's head hold both prices and show one (`data-period` on their wrappers). */
.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:var(--on-accent);color:var(--accent)}
.pricing[data-period=year] .for-month,.pricing[data-period=month] .for-year,.plans-compare[data-period=year] .for-month,.plans-compare[data-period=month] .for-year{display:none}
.price-note{margin:-6px 0 0;color:var(--muted);font-size:14px}
.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:-.012em;font-weight:600;text-wrap:balance}
/* Home's section titles at 48 on a wide screen and 30 on a phone, in the medium weight, under the hero's title at 74
   (his catch 2026-10-25: at 56 and bold, a title on one long line outweighed "Trusty Remote Access"); measured as
   rendered, not as written, side by side. One colour. */
.home h2,.inner h2{font-size:clamp(30px,3.35vw,48px);font-weight:500}
.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 tick, drawn for the comparison and the sent notes. */
.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}
/* 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:600;letter-spacing:-.012em}
.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))}}
.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:16px;justify-items:center;text-align:center;padding:clamp(56px,7vw,96px) 24px;border-radius:20px;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:8px;background:#fff;border-color:#fff;color:#155E75;box-shadow:none}
/* THE FRONT PAGE, third version (docs/opus_decor_home_v3.md): his words. The picture and the words side by side (his
   layout of 2026-10-25), 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. */
/* The hero's haze (his word 2026-10-25, the glass's hue): a soft glow of the pale blue behind the words and a
   wider one behind the picture, so the devices sit on light and the glass bar takes colour as they pass under
   it. Each is a soft oval on its own block, wider than the block, so it follows the block in every layout and in
   right to left and fades out before the next band; Home's main area clips what passes the window's sides, so a
   glow never makes the page scroll sideways (every page's main area, since the inner pages' glows reach past the window too;
   the page grids hold a zero floor, at the end of this sheet, so a long word wraps instead of being cut here).
   The hero has room above it as below it, so it sits in the middle of its band. */
.home-hero{--lead:#5E636E;display:grid;justify-items:center;text-align:center;padding-block-start:clamp(16px,4vw,64px)}
/* The sentence under the title in a grey a step darker than the muted one in light: on the glow the muted grey
   fell to 4.3 to 1, under the 4.5 the guidelines ask of text this size; this one keeps 5.3 there and stays well
   under the title. In dark the muted grey already keeps 6.5. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .home-hero{--lead:var(--muted)}}
:root[data-theme="dark"] .home-hero{--lead:var(--muted)}
.hero-words{position:relative;isolation:isolate;display:grid;justify-items:center}
.public-main{overflow-x:clip}
.hero-words::before,.hero-art::before{content:"";position:absolute;z-index:-1;pointer-events:none}
.hero-words::before{inset:-40% -30%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft) 100%,transparent) 0%,color-mix(in srgb,var(--accent-soft) 62%,transparent) 30%,color-mix(in srgb,var(--accent-soft) 30%,transparent) 56%,color-mix(in srgb,var(--accent-soft) 10%,transparent) 78%,transparent 100%)}
.hero-art::before{inset:-42% -34%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft) 85%,transparent) 0%,color-mix(in srgb,var(--accent-soft) 59%,transparent) 30%,color-mix(in srgb,var(--accent-soft) 29%,transparent) 56%,color-mix(in srgb,var(--accent-soft) 8%,transparent) 78%,transparent 100%)}
.home-hero h1{margin:0 0 20px;font-size:clamp(44px,5.1vw,74px);line-height:1.02;letter-spacing:-.012em}
.hero-name,.hero-kind{display:block}
.hero-name{font-weight:600;color:var(--accent)}
.hero-kind{font-weight:400}
.home-hero .lead{margin:0 0 10px;max-inline-size:40ch;color:var(--lead);font-size:clamp(17px,1.4vw,20px);line-height:1.55;text-wrap:balance}
/* The edge under his sentence (2026-10-28): one factual line, a step smaller, the same grey that keeps 4.5 to 1 on the glow. */
.home-hero .hero-proof{margin:0 0 28px;max-inline-size:44ch;color:var(--lead);font-size:clamp(15px,1.15vw,17px);line-height:1.5;text-wrap:balance}
.home-hero .hero-acts{justify-content:center}
/* From 1180px the picture takes the first column and the words the second; a right to left page mirrors the two.
   The words stay first in the page's order, so a phone and a screen reader meet them before the picture. */
@media (min-width:1180px){
  .home-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"art words";align-items:center;justify-items:stretch;column-gap:clamp(40px,5vw,72px);text-align:start}
  .hero-words{grid-area:words;justify-items:start}
  .home-hero .hero-art{grid-area:art;margin-block-start:0}
  .home-hero .hero-acts{justify-content:flex-start}
}
/* The hero's picture (his words 2026-10-25, docs/opus_decor_home_v3.md, Round seven): a laptop and over its corner
   a phone, drawn here so they follow the theme and carry no brand's shape. The laptop holds a placeholder until the
   controller's picture is taken; the phone holds the app's Overview. The phone stands at the end of the line, so a
   right to left page mirrors it. Still: nothing here moves. */
.hero-art{--bezel:#1B1E24;--alloy-hi:#E3E6EB;--alloy-lo:#B5BAC3;--device-shadow:rgba(21,23,28,.16);position:relative;isolation:isolate;box-sizing:border-box;inline-size:min(640px,100%);margin-block-start:clamp(40px,6vw,64px);padding-block-end:5%}
.hero-laptop{inline-size:82%;margin-inline-start:5%}
.hero-laptop-screen{box-sizing:border-box;aspect-ratio:16/10;display:grid;place-items:center;border:clamp(6px,1.1vw,10px) solid var(--bezel);border-block-end-width:clamp(9px,1.7vw,15px);border-radius:clamp(10px,1.8vw,16px) clamp(10px,1.8vw,16px) 3px 3px;background:var(--surface);box-shadow:0 24px 48px var(--device-shadow)}
.hero-placeholder{inline-size:13%;block-size:auto;border-radius:22%}
.hero-laptop-base{position:relative;block-size:clamp(8px,1.5vw,14px);margin-inline:-6%;border-radius:0 0 12px 12px/0 0 9px 9px;background:linear-gradient(var(--alloy-hi),var(--alloy-lo))}
.hero-laptop-base::before{content:"";position:absolute;inset-block-start:0;inset-inline:43%;block-size:38%;border-radius:0 0 6px 6px;background:var(--alloy-lo)}
.hero-art{--art-w:min(640px,100vw - 32px)}
@media (min-width:1180px){.hero-art{--art-w:min(640px,(min(1200px,100vw - 32px) - clamp(40px,5vw,72px)) * 6 / 11)}}
.hero-phone{--screen-w:calc(var(--art-w) * .24 - 2 * clamp(3px,.7vw,6px));position:absolute;inset-inline-end:0;inset-block-end:0;inline-size:24%;padding:clamp(3px,.7vw,6px);border-radius:clamp(16px,3.2vw,30px);background:var(--bezel);box-shadow:0 2px 4px var(--device-shadow),0 24px 48px var(--device-shadow)}
/* The phone's screen: the app's Overview on a phone, redrawn (his word 2026-10-25) in the site's own guideline
   (docs/design_guideline.md) at a phone's 390 pixel width: the site's 17 pixel body is 4.36 parts of the screen's
   width, its 30 pixel page title, its 22 pixel card titles, capsule buttons and pills, 20 pixel card corners, 16
   inside; everything scales with the frame (its width worked out from the window's, never a container's own units,
   which settled late in a drag), and what runs past the screen's foot is cut by it as a phone does. */
.phone-screen{aspect-ratio:390/844;overflow:hidden;border-radius:clamp(13px,2.6vw,24px);background:var(--ground)}
.ps{display:grid;align-content:start;gap:.94em;padding:0 .94em;font-size:calc(var(--screen-w) * .0436);line-height:1.4;text-align:start;color:var(--text)}
.ps b{font-weight:600}.ps-muted{color:var(--muted)}.ps-small{font-size:.88em}
.ps-words{display:grid;gap:.12em;min-width:0}
.ps-top{display:flex;align-items:center;justify-content:space-between;block-size:3.76em}
.ps-menu{inline-size:2.59em;block-size:2.59em;border:1px solid var(--line);border-radius:999px;background:linear-gradient(var(--text),var(--text)) center calc(50% - .35em)/1.06em .12em no-repeat,linear-gradient(var(--text),var(--text)) center/1.06em .12em no-repeat,linear-gradient(var(--text),var(--text)) center calc(50% + .35em)/1.06em .12em no-repeat,var(--surface)}
.ps-icons{display:flex;gap:.47em}
.ps-icon{position:relative;display:grid;place-items:center;inline-size:2.35em;block-size:2.35em;border-radius:50%}
.ps-doc{background:var(--online-soft)}.ps-doc::after{content:"";inline-size:.65em;block-size:.82em;border:.12em solid var(--online);border-radius:.15em}
.ps-theme{background:var(--accent-soft)}.ps-theme::after{content:"";inline-size:.82em;block-size:.82em;border:.12em solid var(--accent);border-radius:50%;background:linear-gradient(to right,var(--accent) 50%,transparent 50%)}
.ps-bell{border:1px solid var(--line);background:var(--surface)}.ps-bell::after{content:"";inline-size:.8em;block-size:.8em;border:.12em solid var(--text);border-radius:.45em .45em .15em .15em}
.ps-bell b{position:absolute;inset-block-start:-.15em;inset-inline-end:-.15em;display:grid;place-items:center;min-inline-size:1.15em;block-size:1.15em;border-radius:999px;background:var(--accent);color:var(--surface);font-size:.7em}
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:.94em}
.ps-company{font-size:1.76em;font-weight:600;letter-spacing:-.012em;line-height:1.15}
.ps-btn{display:inline-flex;align-items:center;flex:none;block-size:2.12em;padding:0 .94em;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.88em;font-weight:600;white-space:nowrap}
.ps-btn-tall{block-size:2.35em}
.ps-card{display:grid;gap:.94em;padding:1.18em;border:1px solid var(--line);border-radius:1.18em;background:var(--surface)}
.ps-ok{display:flex;align-items:center;gap:.6em;padding-block:.94em;color:var(--online);font-weight:600}
.ps-check{inline-size:.42em;block-size:.75em;margin-inline:.2em .1em;border:solid var(--online);border-width:0 .14em .14em 0;rotate:45deg;translate:0 -.1em}
.ps-lock{border:2px solid var(--online);box-shadow:0 0 0 .24em var(--online-soft)}
.ps-row{display:flex;align-items:center;gap:.47em}.ps-row > :last-child{margin-inline-start:auto}
.ps-title{font-size:1.29em;letter-spacing:-.012em}
.ps-pill{padding:.12em .65em;border-radius:999px;background:var(--online-soft);color:var(--online);font-size:.76em;font-weight:600}
.ps-switch{position:relative;flex:none;inline-size:2.35em;block-size:1.41em;border-radius:999px;background:var(--online)}
.ps-switch::after{content:"";position:absolute;inset-block-start:.18em;inset-inline-start:.18em;inline-size:1.06em;block-size:1.06em;border-radius:50%;background:#fff}
.ps-text{display:block}
.ps-inset{display:flex;align-items:center;justify-content:space-between;gap:.94em;padding:.94em;border:1px solid var(--line);border-radius:.94em;background:var(--ground)}
.ps-link{color:var(--accent);font-size:.88em;font-weight:600}
.ps-count{display:flex;align-items:baseline;gap:.35em}.ps-count b{font-size:2.12em;font-weight:600;letter-spacing:-.012em}
.ps-meter{display:block;block-size:.47em;border-radius:999px;background:linear-gradient(to right,var(--online) 66.7%,var(--line) 66.7%)}
.ps-legend{display:flex;gap:1.18em;color:var(--muted);font-size:.88em}.ps-legend span{display:flex;align-items:center;gap:.35em}.ps-legend b{color:var(--text)}
.ps-legend i{inline-size:.47em;block-size:.47em;border-radius:50%;background:var(--line)}.ps-legend i.on{background:var(--online)}
@media (max-width:699px){.hero-laptop{inline-size:82%;margin-inline-start:3%}.hero-phone{inline-size:26%;--screen-w:calc(var(--art-w) * .26 - 2 * clamp(3px,.7vw,6px))}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-art{--bezel:#2C3038;--alloy-hi:#4B515C;--alloy-lo:#2D323A;--device-shadow:rgba(0,0,0,.5)}}
:root[data-theme="dark"] .hero-art{--bezel:#2C3038;--alloy-hi:#4B515C;--alloy-lo:#2D323A;--device-shadow:rgba(0,0,0,.5)}
/* Who it's for (2026-10-26, docs/opus_decor_home_v3.md, What else belongs on Home; his "let try 3" after "tfeh" on a
   large type index): three stops on a track, each drawing and each stop bigger than the last, on a band of the brand's
   pale blue edge to edge (his question on the edge with the hero: on the hero's grey a panel of the glow's own colour
   read as one block with it). The band meets You decide's band edge to edge: the sections' gap between two bands
   showed as a stripe of the ground (his word the same day). A column's
   width is worked out from the window's, never a container's own units (they settled late in a drag), and the drawn
   cards are measured in parts of it, so they scale as a picture does. The columns share their rows, so the drawings
   stand on one line and the stops sit on the track whatever each drawing's height. The track runs from each stop to
   the next, behind them; on a phone the stops stand one under the other with no track. Faces wear the app's own face
   classes; a stack shows its first face whole. */
.audience{display:grid;gap:clamp(40px,5vw,64px);padding-block:clamp(56px,7vw,96px);background:var(--accent-soft);box-shadow:0 0 0 100vmax var(--accent-soft);clip-path:inset(0 -100vmax)}
.audience > h2{text-align:center}
.audience + .decide{margin-block-start:calc(clamp(72px,10vw,136px) * -1)}
.audience-panel{--gap:clamp(24px,3vw,48px);--col:min(400px,100vw - 32px)}
.audience-track{margin:0;padding:0;list-style:none;display:grid;justify-items:center;gap:48px}
.audience-track li{isolation:isolate;display:grid;justify-items:center;align-content:start;inline-size:min(var(--col),100%);text-align:center}
.audience-scene{display:grid;align-self:end;justify-items:center;inline-size:100%}
.audience-card{box-sizing:border-box;display:grid;gap:.94em;inline-size:88%;padding:1.41em;border-radius:1.41em;background:var(--surface);color:var(--text);text-align:start;font-size:calc(var(--col) * .88 * .043);line-height:1.4;box-shadow:0 1px 2px rgba(21,23,28,.08),0 10px 28px rgba(21,23,28,.08)}
.audience-people{display:flex;align-items:center}
.audience-face{position:relative;display:inline-grid;place-items:center;inline-size:2.35em;block-size:2.35em;border-radius:50%;font-size:.88em;font-weight:700;box-shadow:0 0 0 .18em var(--surface)}
.audience-face + .audience-face{margin-inline-start:-.47em}
.audience-face:nth-child(1){z-index:5}.audience-face:nth-child(2){z-index:4}.audience-face:nth-child(3){z-index:3}.audience-face:nth-child(4){z-index:2}.audience-face:nth-child(5){z-index:1}
.audience-chips{display:flex;flex-wrap:wrap;gap:.65em}
.audience-chip{display:inline-flex;align-items:center;gap:.65em;padding:.47em .82em;border:1px solid var(--line);border-radius:.82em;background:var(--ground);font-weight:600}
.audience-chip i{inline-size:.55em;block-size:.55em;border-radius:50%;background:var(--online);box-shadow:0 0 0 .24em var(--online-soft)}
.audience-books{display:grid;gap:.65em}
.audience-book{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.94em;padding:.65em .82em;border:1px solid var(--line);border-radius:.82em;background:var(--ground)}
.audience-book b{font-weight:600}
.audience-book .audience-face{inline-size:2em;block-size:2em;font-size:.76em}
.audience-count{color:var(--muted);font-weight:600;white-space:nowrap}
.audience-stop{position:relative;margin-block:20px 28px;inline-size:12px;block-size:12px}.audience-stop::before{content:"";position:absolute;z-index:1;inset:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft),0 0 0 7px color-mix(in srgb,var(--accent) 35%,transparent)}
.audience-track li:nth-child(2) .audience-stop{margin-block:18px 26px;inline-size:16px;block-size:16px}
.audience-track li:nth-child(3) .audience-stop{margin-block:16px 24px;inline-size:20px;block-size:20px}
.audience-track h3{margin:0 0 8px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.012em}
.audience-track p{margin:0;max-inline-size:40ch;color:var(--muted);font-size:17px;line-height:1.47;text-wrap:balance}
@media (min-width:1000px){
  .audience-panel{--col:calc((min(1200px,100vw - 32px) - 2 * var(--gap)) / 3)}
  .audience-track{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:0 var(--gap)}
  .audience-track li{grid-row:span 4;grid-template-rows:subgrid;inline-size:100%}
  .audience-track li:not(:last-child) .audience-stop::after{content:"";position:absolute;z-index:-1;inset-block-start:50%;inset-inline-start:50%;inline-size:calc(var(--col) + var(--gap));block-size:2px;translate:0 -50%;background:linear-gradient(to right,var(--accent),color-mix(in srgb,var(--accent) 45%,transparent))}
  [dir="rtl"] .audience-track li:not(:last-child) .audience-stop::after{background:linear-gradient(to left,var(--accent),color-mix(in srgb,var(--accent) 45%,transparent))}
}
/* The section under the hero (his words, locked 2026-10-25, docs/opus_decor_home_v3.md, Round five): four decisions,
   two by two and stacked on a phone, each with one detail of the app itself on its own panel (his word the same
   day); space alone between them, the panels doing what the hairlines did for the drawings. A band of its own, edge
   to edge one step off the page's ground (his question the same day), so it reads apart from the hero and from How it works. */
.decide{display:grid;gap:clamp(40px,5vw,64px);padding-block:clamp(56px,7vw,96px);background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
.decide > h2{text-align:center}
.decide-list{margin:0;padding:0;list-style:none;display:grid;gap:48px}
.decide-item{display:grid;align-content:start;gap:8px}
.decide-item h3{margin:0;font-size:22px;line-height:1.25}
.decide-item p{margin:0;max-inline-size:46ch;color:var(--muted);font-size:17px;line-height:1.47;text-wrap:pretty}
/* Each decision shows one card of the app, redrawn here (his words 2026-10-25, after the screenshots: "redraw them to
   fit ... mhem tousal l fekra, try to be as much accurate to the original as possible", then "draw them 3al guidline
   taba3 hon mich taba3 l app"): the app's words and parts, drawn in the site's own guideline (docs/design_guideline.md):
   its type steps (17 body, 15 small, 22 title), weight 600 for titles and buttons, capsule buttons and pills, 20 pixel
   card corners and 16 inside, its spacing rhythm of 8. On a flat panel of the brand's pale blue (the grey before it
   was the app's own inner grey, so the layers melted). The four are one size with the same room on every side, and
   everything in them is measured from the panel's width, worked out from the window's (a container's own units
   settled late while the window was dragged, his catch), so they scale as a picture does. The tokens are the site's, so light and dark follow by themselves. */
.decide-shot{display:grid;place-items:center;aspect-ratio:11/5;margin-block-end:28px;border-radius:20px;overflow:hidden;background:var(--accent-soft);--shot-shadow:rgba(21,23,28,.08)}
.mock{box-sizing:border-box;inline-size:86%;aspect-ratio:86/31.45;display:grid;align-content:center;gap:.94em;padding:1.41em;overflow:hidden;font-size:calc(var(--panel-w) * .0207);line-height:1.4;text-align:start;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:1.18em;box-shadow:0 1px 2px var(--shot-shadow),0 10px 28px var(--shot-shadow)}
.mock b{font-weight:600}
.mock-muted{color:var(--muted)}
.mock-title{font-size:1.29em;letter-spacing:-.012em}
.mock-head{display:flex;align-items:center;gap:.47em}
.mock-head > :last-child{margin-inline-start:auto}
.mock-words{display:grid;gap:.12em;min-width:0}.mock-words .mock-muted{font-size:.88em}
.mock-text{display:block}
.mock-pill{padding:.12em .65em;border-radius:999px;background:var(--online-soft);color:var(--online);font-size:.76em;font-weight:600}
.mock-switch{position:relative;flex:none;inline-size:2.35em;block-size:1.41em;border-radius:999px;background:var(--line)}
.mock-switch::after{content:"";position:absolute;inset-block-start:.18em;inset-inline-start:.18em;inline-size:1.06em;block-size:1.06em;border-radius:50%;background:#fff}
.mock-switch.on{background:var(--online)}.mock-switch.on::after{inset-inline-start:1.12em}
.mock-btn{display:inline-flex;align-items:center;block-size:2.12em;padding:0 .94em;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.88em;font-weight:600;white-space:nowrap}
.mock-inset{display:flex;align-items:center;justify-content:space-between;gap:.94em;padding:.94em;border:1px solid var(--line);border-radius:.94em;background:var(--ground)}
.mock-lock{border:2px solid var(--online);box-shadow:0 0 0 .24em var(--online-soft),0 1px 2px var(--shot-shadow),0 10px 28px var(--shot-shadow)}
.mock-person{display:flex;align-items:center;gap:.47em}
.mock-face{display:grid;place-items:center;inline-size:1.88em;block-size:1.88em;border-radius:50%;background:#EDE3F7;color:#5B2A86;font-size:.76em;font-weight:700}
.mock-rows{border:1px solid var(--line);border-radius:.94em;background:var(--ground);overflow:hidden}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:.94em;padding:.47em .94em}
.mock-row + .mock-row{border-block-start:1px solid var(--line)}
.mock-hours{justify-content:start}.mock-hours > :first-child{inline-size:7em}
.mock-table{gap:0;padding:0}
.mock-tr{display:grid;grid-template-columns:1.7fr 1fr .8fr;align-items:center;gap:.94em;padding:.47em 1.41em}
.mock-tr + .mock-tr{border-block-start:1px solid var(--line)}
.mock-th{padding-block:1.24em;font-size:.76em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mock-state{display:flex;align-items:center;gap:.47em;color:var(--online);font-weight:600}
.mock-dot{inline-size:.47em;block-size:.47em;border-radius:50%;background:var(--online);box-shadow:0 0 0 .24em var(--online-soft)}
.mock-book{justify-self:start;padding:.12em .65em;border:1px solid var(--line);border-radius:999px;background:var(--ground);color:var(--muted);font-size:.76em;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .decide-shot{--shot-shadow:rgba(0,0,0,.4)}:root:not([data-theme="light"]) .mock-face{background:#2E2140;color:#D9C2F2}}
:root[data-theme="dark"] .decide-shot{--shot-shadow:rgba(0,0,0,.4)}:root[data-theme="dark"] .mock-face{background:#2E2140;color:#D9C2F2}
.decide-list{--panel-w:min(640px,100vw - 32px);justify-self:center;inline-size:min(640px,100%)}
/* Two columns from 1000 pixels, where each panel is wide enough for the app's words in it to stay readable; under
   that one column, no wider than 640, so the pictures don't grow past their own size. */
@media (min-width:1000px){.decide-list{--panel-w:calc((min(1200px,100vw - 32px) - clamp(32px,4vw,56px)) / 2);inline-size:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,80px) clamp(32px,4vw,56px)}}
/* The second section (his words 2026-10-25, docs/opus_decor_home_v3.md, The next section): a leader's pattern, scored
   against the others with him (one wide picture of the product, then a row of short items; not a second two by two,
   not cards that scroll sideways, whose later cards go unseen). The picture is two cards in the app's own pieces (his
   word: "l cut off button w el logs w el flags yalli 3enna ... 2a7la"): who is connected now, the live pill, each
   row's timer and since, its address with its country's flag, the red Cut off; the notifications with their tinted
   badges and icons, in the app's own titles. The section stands on the page's ground with the hero's glow behind the
   cards (his model: the glow for continuity, a band's colour for the split; the band above is the split). Sized from
   the window's width: two cards side by side from 1000 pixels, stacked under. The four items carry the app's icons. */
.see{display:grid;gap:clamp(40px,5vw,64px)}
.see > h2{text-align:center}
.see-shot{--see-w:min(1200px,100vw - 32px);--shot-shadow:rgba(21,23,28,.08);position:relative;isolation:isolate;display:grid;gap:16px;align-items:start;font-size:min(15px,calc(var(--see-w) * .034))}
.see-shot::before{content:"";position:absolute;z-index:-1;inset:-30% -12%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft) 100%,transparent) 0%,color-mix(in srgb,var(--accent-soft) 62%,transparent) 30%,color-mix(in srgb,var(--accent-soft) 30%,transparent) 56%,color-mix(in srgb,var(--accent-soft) 10%,transparent) 78%,transparent 100%)}
.see-card{display:grid;line-height:1.4;text-align:start;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:1.18em;overflow:hidden;box-shadow:0 1px 2px var(--shot-shadow),0 10px 28px var(--shot-shadow)}
.see-card b{font-weight:600}.see-card .nw{white-space:nowrap}
.see-head{display:flex;align-items:center;justify-content:space-between;gap:.94em;padding:.94em 1.18em;border-block-end:1px solid var(--line)}
.see-head > b{font-size:1.18em}
.see-live{display:inline-flex;align-items:center;gap:.5em;padding:.25em .7em;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.8em;font-weight:600}
.see-live i{inline-size:.55em;block-size:.55em;border-radius:50%;background:var(--accent)}
.see-link{color:var(--accent);font-size:.88em;font-weight:600}
.see-row{display:flex;align-items:center;gap:.8em;padding:.8em 1.18em}
.see-row + .see-row{border-block-start:1px solid var(--line)}
.see-dot{flex:none;inline-size:.6em;block-size:.6em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .27em var(--accent-soft)}
.see-words{display:grid;gap:.15em;min-width:0;flex:1}
.see-muted{color:var(--muted);font-size:.88em}
.see-card .flag{inline-size:1.07em;block-size:.8em;border-radius:2px;box-shadow:0 0 0 1px var(--line);vertical-align:-.05em;margin-inline-end:.2em}
.see-timer{display:grid;justify-items:end;flex:none;padding-inline-end:.8em;border-inline-end:1px solid var(--line);line-height:1.25;font-variant-numeric:tabular-nums}
.see-cut{flex:none;display:inline-flex;align-items:center;block-size:2em;padding:0 .9em;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--danger);font-size:.88em;font-weight:600;white-space:nowrap}
.see-badge{flex:none;display:grid;place-items:center;inline-size:2.13em;block-size:2.13em;border-radius:.67em}
.see-badge svg{inline-size:1.2em;block-size:1.2em}
.see-badge.off{background:var(--danger-soft);color:var(--danger)}.see-badge.att{background:var(--warn-soft);color:var(--warn)}.see-badge.rec{background:var(--accent-soft);color:var(--accent)}
.see-items{margin:0;padding:0;list-style:none;display:grid;gap:32px}
.see-icon{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-block-end:16px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.see-icon svg{inline-size:20px;block-size:20px}
.see-items h3{margin:0 0 8px;font-size:22px;line-height:1.25}
.see-items p{margin:0;color:var(--muted);font-size:17px;line-height:1.47}
@media (min-width:600px){.see-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (min-width:1000px){.see-shot{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px);font-size:calc(var(--see-w) * .0125)}}
@media (min-width:1180px){.see-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .see-shot{--shot-shadow:rgba(0,0,0,.4)}}
:root[data-theme="dark"] .see-shot{--shot-shadow:rgba(0,0,0,.4)}
/* How it works (his word 2026-10-25, docs/opus_decor_home_v3.md, How it works): the path of one connection in three
   steps, a drawn card of each part: the controller, the account checking it, the program on the device letting it
   in. After his "cheappo": the three cards stand in one pale blue panel, read as one flow (a leader's lifecycle
   diagram, named in docs/opus_decor_home_v3.md), the panel language of the section after the hero, with plain chevrons between them; fewer and larger
   things in each card; small numbers over the titles instead of bubbles. On a phone each card keeps its own panel.
   A band of its own (his model: a band's colour for the split). Sized from the window's width. */
.how{display:grid;gap:clamp(40px,5vw,64px);padding-block:clamp(56px,7vw,96px);background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
.how-head,.home-plans-head{display:grid;gap:16px;justify-items:center;text-align:center}.how-head h2,.home-plans-head h2{margin:0}
.how-lead,.home-plans-lead{margin:0;max-inline-size:46ch;color:var(--muted);font-size:17px;line-height:1.47;text-wrap:balance}
.how-path{--how-w:min(440px,100vw - 32px);--how-font:min(14px,calc(var(--how-w) * .04));--shot-shadow:rgba(21,23,28,.08);position:relative;margin:0;padding:0;list-style:none;display:grid;gap:48px;justify-self:center;inline-size:min(440px,100%);counter-reset:step}
.how-step{display:grid;align-content:start;gap:8px;counter-increment:step}
.how-shot{position:relative;display:grid;margin-block-end:24px;padding:calc(var(--how-w) * .06);border-radius:20px;background:var(--accent-soft);font-size:var(--how-font)}
.how-card{align-content:start}
.how-body{display:grid;gap:.8em;padding:1em 1.18em}
.how-dev{display:flex;align-items:center;gap:.7em}
.how-dev > .see-muted:first-child{inline-size:4.6em;flex:none;white-space:nowrap}
.see-dot.on{background:var(--online);box-shadow:0 0 0 .27em var(--online-soft)}.see-dot.off{background:var(--line);box-shadow:none}
.how-connect{margin-inline-start:auto;display:inline-flex;align-items:center;block-size:2em;padding:0 .9em;border-radius:999px;background:var(--accent);color:var(--surface);font-size:.88em;font-weight:600}
.how-person{display:flex;align-items:center;gap:.6em}
.how-face{display:grid;place-items:center;inline-size:2em;block-size:2em;border-radius:50%;background:#EDE3F7;color:#5B2A86;font-size:.8em;font-weight:700}
.how-logo{display:grid;place-items:center;inline-size:2.2em;block-size:2.2em;border-radius:.6em;background:var(--accent);color:var(--surface);font-size:.8em;font-weight:700}
.how-book{display:inline-flex;align-items:center;gap:.4em}.how-book svg{inline-size:1em;block-size:1em;color:var(--muted)}
.how-card .flag{inline-size:1.07em;block-size:.8em;border-radius:2px;box-shadow:0 0 0 1px var(--line);vertical-align:-.05em;margin-inline-end:.2em}
.how-state{display:flex;align-items:center;gap:.7em;padding:.6em .8em;border:1px solid var(--line);border-radius:.8em;background:var(--ground)}
.how-state .see-cut{margin-inline-start:auto}
.how-id{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.how-copy{display:grid;color:var(--muted)}.how-copy svg{inline-size:1em;block-size:1em}
.how-step h3{margin:0;font-size:22px;line-height:1.25}
.how-step h3::before{content:counter(step,decimal-leading-zero);display:block;margin-block-end:8px;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.how-step p{margin:0;color:var(--muted);font-size:17px;line-height:1.47}
@media (min-width:1180px){
  .how-path{--how-pad:clamp(24px,3vw,40px);--how-gap:clamp(40px,4.5vw,64px);--how-w:calc((min(1200px,100vw - 32px) - 2 * var(--how-pad) - 2 * var(--how-gap)) / 3);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--how-gap);inline-size:100%;padding-inline:var(--how-pad);box-sizing:border-box}
  .how-path::before{content:"";position:absolute;z-index:0;inset-inline:0;inset-block-start:0;block-size:calc(var(--how-font) * 13.6 + 2 * var(--how-pad));border-radius:24px;background:var(--accent-soft)}
  .how-card{block-size:calc(var(--how-font) * 13.6)}
  .how-shot{z-index:1;padding:var(--how-pad) 0;margin-block-end:calc(24px + 0px);background:none;border-radius:0}
  .how-step:not(:last-child) .how-shot::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:calc(var(--how-gap) / -2 - 5px);inline-size:9px;block-size:9px;margin-block-start:-5px;border:solid var(--accent);border-width:2px 2px 0 0;rotate:45deg;opacity:.7}
  [dir=rtl] .how-step:not(:last-child) .how-shot::after{rotate:-135deg}
  .how-step h3,.how-step p{position:relative;z-index:1}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .how-path{--shot-shadow:rgba(0,0,0,.4)}:root:not([data-theme="light"]) .how-face{background:#2E2140;color:#D9C2F2}}
:root[data-theme="dark"] .how-path{--shot-shadow:rgba(0,0,0,.4)}:root[data-theme="dark"] .how-face{background:#2E2140;color:#D9C2F2}
/* Everything else you'd expect (his pick 2026-10-25, docs/opus_decor_home_v3.md, Everything else): the look scored
   against the pioneers' (one leader's won: a plain icon, the title in bold running into its line in one paragraph, a
   hairline above each item; lighter than more cards right after How it works). On the page's ground between two bands,
   so the glow behind it by his model; in light the grey a step darker, as in the hero, since any glow takes the
   muted grey under 4.5 to 1 (5.3 at the glow's middle, computed; dark keeps the muted grey at 6.4).
   Three across from 1000 pixels, two from 600, one on a phone. */
.more{--more-ink:#5E636E;position:relative;isolation:isolate;display:grid;gap:clamp(40px,5vw,64px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .more{--more-ink:var(--muted)}}
:root[data-theme="dark"] .more{--more-ink:var(--muted)}
.more::before{content:"";position:absolute;z-index:-1;inset:-12% -8%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft) 55%,transparent) 0%,color-mix(in srgb,var(--accent-soft) 34%,transparent) 30%,color-mix(in srgb,var(--accent-soft) 16%,transparent) 56%,color-mix(in srgb,var(--accent-soft) 5%,transparent) 78%,transparent 100%)}
.more > h2{text-align:center}
.more-list{margin:0;padding:0;list-style:none;display:grid;gap:40px}
.more-list li{padding-block-start:20px;border-block-start:1px solid var(--line);color:var(--more-ink);font-size:17px;line-height:1.47}
.more-icon{display:block;margin-block-end:14px;color:var(--accent)}.more-icon svg{display:block;inline-size:22px;block-size:22px}
.more-list h3{display:inline;margin:0;color:var(--text);font-size:17px;font-weight:600;line-height:1.47}
.more-list h3::after{content:". "}
.more-list p{display:inline;margin:0}
@media (min-width:600px){.more-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
@media (min-width:1000px){.more-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(32px,4vw,56px)}}
.home-more{display:grid;justify-items:center}
/* The plans, read from the packages: the price the loudest thing on each, the trial and the billing under them. */
/* The plans (his "l price w yalli faw2a ma lezem ykouno contrast l sections?", 2026-10-25): a band, as You decide and How
   it works are, so Home reads ground and band in turn from the hero to the questions; on the band the plans stand on the
   ground's grey and the recommended one comes forward in white, as the leaders brighten their pick. No glow: a band carries none. */
.home-plans{display:grid;gap:clamp(40px,5vw,64px);justify-items:center;text-align:center;padding-block:clamp(56px,7vw,96px);background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
/* The plans (audit 2026-10-26): one column under 1000px no wider than 480, then one row whatever the number for sale, each card at most 384 so one or two plans never stretch across the page; the button at each card's foot, so a size line that wraps never lowers it. */
.home-plan-list{inline-size:100%;max-inline-size:480px;margin:0;padding:0;list-style:none;display:grid;gap:24px}
.home-plan{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--ground);text-align:start;min-inline-size:0}
.home-plan.featured{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)}
.home-plan .btn{inline-size:100%;min-block-size:48px;margin-block-start:16px}
.home-plan h3{margin:0;font-size:18px;line-height:1.3}
.home-plan-facts{align-self:start;margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:15px;line-height:1.5}
.home-plan-notes{display:grid;gap:8px;justify-items:center}.home-plan-notes p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
@media (min-width:1000px){.home-plan-list{max-inline-size:none;grid-auto-flow:column;grid-auto-columns:minmax(0,384px);justify-content:center}}
/* The questions, then the last call. */

/* The pages about the product (part 2 on): a head, groups that open with what they give, more pieces for the pictures. */
.whatsnew-list{display:grid}.whatsnew-release{display:grid;gap:16px 48px;padding-block:40px;border-block-start:1px solid var(--line)}.whatsnew-release:first-child{padding-block-start:0;border-block-start:0}.whatsnew-meta h2{margin:0;font-size:18px;line-height:1.4;font-weight:600}.whatsnew-versions{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;color:var(--muted);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}.whatsnew-versions dd{margin:0;color:var(--text)}.whatsnew-lines{margin:0;padding:0;list-style:none;display:grid;gap:16px}.whatsnew-lines li{font-size:16px;line-height:1.6;text-wrap:pretty}.whatsnew-lines .tag{margin:0 8px 0 0;vertical-align:1px}@media (min-width:760px){.whatsnew-release{grid-template-columns:184px minmax(0,1fr)}.whatsnew-lines li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:start}.whatsnew-lines .tag{margin:0;justify-self:end}}.whatsnew .tag.better{background:var(--online-soft);color:var(--online)}.whatsnew .tag.fixed{background:var(--warn-soft);color:var(--warn)}.card-group h3{margin:0 0 14px;font-size:clamp(22px,2.2vw,26px);line-height:1.1;text-wrap:balance}
.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}
.last-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:8px}.last-acts .btn.primary{margin:0}
.last .btn.ghost{min-block-size:48px;padding-inline:24px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:rgba(255,255,255,.30);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
@media (hover:hover){.last .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.24)}}
/* Home's last call (his "too blahh" on an icon ending, "chi that fits w bala l icon", then "lets try", 2026-10-26;
   docs/opus_decor_home_v3.md, The last call): the page's own signature, a pale blue panel with the line and the button
   beside a drawn card of the app's setup list as the app draws it, the steps after the click; stacked on a phone, side by side from 1000.
   The gradient card stays the other pages' last call. */
.home .last,.inner .last{box-sizing:border-box;gap:32px;padding:clamp(40px,5vw,64px) clamp(16px,4vw,56px);background:var(--accent-soft);color:var(--text)}
.home .last h2,.inner .last h2{margin:0}
.home .last .last-acts,.inner .last .last-acts{margin:0}
.last-words{display:grid;gap:24px;justify-items:center}
.last-guide{box-sizing:border-box;inline-size:min(440px,100%);display:grid;gap:12px;padding:20px;border-radius:16px;background:var(--surface);text-align:start;box-shadow:0 1px 2px rgba(21,23,28,.08),0 10px 28px rgba(21,23,28,.08)}
.last-guide-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.last-guide-head b{font-size:18px;font-weight:600}.last-guide-head span{color:var(--muted);font-size:14px;font-weight:600}
.last-guide-steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.last-guide-steps li{display:flex;align-items:center;gap:12px;min-block-size:44px;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ground);font-size:15px;font-weight:500;line-height:1.4}
.last-guide-steps i{flex:none;box-sizing:border-box;inline-size:18px;block-size:18px;border:2px solid var(--line);border-radius:50%}
.home .last .btn.primary,.inner .last .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(21,94,117,.25)}
@media (hover:hover){.home .last .btn.primary:hover:not(:disabled),.inner .last .btn.primary:hover:not(:disabled){background:color-mix(in oklab,var(--accent),var(--text) 12%);border-color:color-mix(in oklab,var(--accent),var(--text) 12%)}}
@media (min-width:1000px){.home .last,.inner .last{grid-template-columns:1fr 1fr;align-items:center;text-align:start;padding-inline:clamp(40px,5vw,80px)}.last-words{justify-items:start}}

/* 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. */
.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}@media (hover:hover){.more-link:hover{text-decoration:underline}}
[dir=rtl] .more-link::after{rotate:-135deg}

/* Work from home and business (part 4): numbered steps, the pains, two offices priced. */
.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:600;font-variant-numeric:tabular-nums}
@media (max-width:520px){.cases li{grid-template-columns:minmax(0,1fr) auto}.case-plan{grid-row:2}}
.trust-see .cases{justify-self:center;inline-size:min(100%,760px)}

/* The pricing page, second version (docs/opus_decor_pricing_v2.md, his pick B 2026-10-27, from the leaders' pricing pages): each card says who it is for, the price and its button at one height, only what differs; the comparison on a white band, the plans' names, prices and buttons kept in view under the bar, a check under each plan (his word), the size first (the differences at the top); on a phone a real table with three narrow plan columns, nothing to swipe. */
.pricing{gap:clamp(28px,4vw,44px)}
.pricing-proof{margin:0;border:0;padding:0}
.compare-more{margin:0;color:var(--muted);font-size:15px;text-align:center}.compare-more a{color:var(--accent);font-weight:600}
.period-slot{min-block-size:48px;margin-block-start:28px}
.price-cards{align-items:stretch}.price-card{gap:24px;align-content:start}
.plan-top h2{margin:0;font-size:20px;line-height:1.3}.plan-who{margin:4px 0 0;color:var(--muted);font-size:15px}
.plan-price{display:grid;gap:6px}.plan-price .price-note{margin:0}.price-card .btn{margin:0}
.price-card .price-facts{padding-block-start:24px;border-block-start:1px solid var(--line)}
.plan-all a{color:var(--accent);font-weight:600;text-decoration:none}@media (hover:hover){.plan-all a:hover{text-decoration:underline}}
.plans-compare{inline-size:min(1200px,100%);justify-self:center;margin-block-start:clamp(72px,10vw,136px);padding-block:clamp(56px,7vw,96px);background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax);display:grid;gap:32px}
.plans-compare-head{text-align:center}.plans-compare-head h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.15;font-weight:600;letter-spacing:-.01em}.plans-compare-head p{margin:10px 0 0;color:var(--muted);font-size:17px;text-wrap:balance}
.plans-table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.plans-table thead th{position:sticky;inset-block-start:64px;z-index:2;background:var(--surface);padding:16px 12px 18px;border-block-end:1px solid var(--line);vertical-align:bottom}
.plans-corner{inline-size:34%}.plans-plan{text-align:center}.plans-plan-name{display:block;font-size:17px;font-weight:600}.plans-plan.featured .plans-plan-name{color:var(--accent)}
.plans-plan-price{display:block;margin-block:2px 12px;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}.plans-per{color:var(--muted);font-weight:400}
.plans-plan .btn{min-block-size:40px;inline-size:100%;max-inline-size:200px;font-size:14px}
.plans-group th[scope=colgroup]{padding:40px 0 12px;text-align:start;font-size:18px;font-weight:600;color:var(--text);border-block-end:1px solid var(--line)}
.plans-table tbody th[scope=row]{padding:14px 16px 14px 0;text-align:start;font-weight:500;color:var(--text);border-block-end:1px solid var(--line)}
.plans-table tbody th small{display:block;margin-block-start:2px;color:var(--muted);font-size:13px;font-weight:400;line-height:1.4}
.plans-table td{padding:14px 12px;text-align:center;border-block-end:1px solid var(--line);font-variant-numeric:tabular-nums}
.cmp-tick{color:var(--accent);vertical-align:middle}.plans-fine{margin:0;color:var(--muted);font-size:14px;text-align:center}
@media (max-width:759px){.plans-table{font-size:14px;table-layout:fixed}.plans-table thead th{inset-block-start:60px;padding:10px 2px 12px}.plans-corner{inline-size:44%}.plans-plan .btn,.plans-per{display:none}.plans-plan-name{font-size:14px}.plans-plan-price{margin:2px 0 0;font-size:13px}.plans-table tbody th[scope=row]{padding:12px 8px 12px 0}.plans-table tbody th small{font-size:12px}.plans-table td{padding:12px 2px}.plans-group th[scope=colgroup]{padding-block-start:32px;font-size:17px}}
@media (max-width:359px){.plans-table{font-size:13px}.plans-corner{inline-size:38%}.plans-plan-name{font-size:12.5px}.plans-plan-price{font-size:12px}}

/* The two forms (part 6): Contact, the report of misuse, the answer in place of the form. Contact lays its title, the
   reply time and the other roads beside the form, as the leaders' contact pages do (docs/opus_decor_contact.md). */
.contact{display:grid;gap:48px;align-items:start;padding-block-start:clamp(16px,3vw,48px)}
@media (min-width:980px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(48px,6vw,96px)}}
.contact-intro{display:grid;gap:clamp(36px,4vw,56px);align-content:start}
.contact-intro .inner-head{justify-items:start;text-align:start;padding:0}
.contact-roads{display:grid;gap:28px;margin:0;padding:0;list-style:none}
.contact-roads li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:16px;align-items:start}
.contact-roads .more-icon{margin:2px 0 0}
.contact-roads h3{margin:0 0 4px;font-size:18px;line-height:1.35}
.contact-roads p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;text-wrap:pretty}
.contact-roads .underline{display:inline-block;margin-block-start:8px;color:var(--accent);font-weight:600}
.contact-form .hint{text-wrap:pretty}
/* The forms' lists: the empty first choice reads as a hint, and a list with an error is red like its neighbours
   (the app's script marks it; this holds without a script). Where the browser lets a page style the open list (a
   customizable select), it opens in the site's look; elsewhere, a phone's picker included, it's the browser's own. */
form[data-check] select:invalid{color:var(--muted)}form[data-check] select option{color:var(--text)}
form[data-check] .field:has(.errorlist) select{border-color:var(--danger)}
/* What stops the whole form (mail can't go, too many messages) stands over the fields in a soft red panel with the
   field errors' own mark, the way design systems show a form's critical message; the address in it is a link. */
form[data-check] .errors.problem{gap:10px;margin-block-end:20px;padding:12px 14px;border-radius:12px;background:var(--danger-soft);color:var(--danger-ink);font-size:15px;line-height:1.5}
form[data-check] .errors.problem::before{margin-top:3.5px}form[data-check] .errors a{color:inherit;font-weight:600;text-decoration:underline}
@supports (appearance:base-select){
  form[data-check] select,form[data-check] select::picker(select){appearance:base-select}
  form[data-check] select{display:flex;align-items:center;gap:12px;padding-inline:14px 12px;cursor:pointer}
  form[data-check] select::picker-icon{content:"";inline-size:7px;block-size:7px;margin-block-start:-4px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;rotate:45deg;transition:rotate .15s}
  form[data-check] select:open::picker-icon{margin-block:4px 0;rotate:225deg}
  form[data-check] select::picker(select){margin-block:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
  form[data-check] option{gap:10px;padding:10px 12px;border-radius:8px;font-size:16px;line-height:1.35}
  form[data-check] option:focus-visible{background:var(--ground);outline:none}@media (hover:hover){form[data-check] option:hover{background:var(--ground)}}
  form[data-check] option:checked{color:var(--accent);font-weight:600}form[data-check] option::checkmark{order:1;margin-inline-start:auto;color:var(--accent)}
  form[data-check] option[value=""]{display:none}
  form[data-check] select::picker(select){scrollbar-width:thin;scrollbar-color:var(--line) transparent}
}
.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}
/* Report misuse (docs/opus_decor_misuse.md): the signs' title with the line that we never ask, centred over the list;
   the steps' line under their title, beside the bar; the form beside what we do and the companies' line, in Contact's
   grid, the page ending on its grey. */
.misuse-signs-head{display:grid;justify-items:center;gap:14px;text-align:center}.misuse-signs-head h2{margin:0}
.misuse-signs-head p{margin:0;max-inline-size:52ch;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.5;text-wrap:balance}
.misuse-steps-head{display:grid;gap:10px}.misuse-steps-head h2{margin:0}.misuse-steps-head p{margin:0;color:var(--muted);font-size:17px}
.misuse-steps .decide-shot .mock-desk{inline-size:100%}
.misuse-tell{padding-block-start:0}.misuse-tell .inner-faq-side p + p{margin-block-start:14px}
.misuse-side{display:grid;gap:40px;align-content:start}
.misuse-company{display:grid;gap:8px;padding-block-start:28px;border-block-start:1px solid var(--line)}.misuse-company h2{margin:0;font-size:20px;line-height:1.3}
.misuse-company p{margin:0;color:var(--muted);font-size:17px;line-height:1.5;text-wrap:pretty}.misuse-company .underline{justify-self:start;margin-block-start:6px;color:var(--accent);font-weight:600}
.form-acts{display:flex;justify-content:flex-end}.form-acts .btn{min-block-size:48px;padding-inline:24px}
/* The message box grows with what is typed and has no corner to drag (his word 2026-10-27), up to a height that
   keeps the Send button near; past it the box scrolls. Where a field can't size itself, public.js fits it. */
.form textarea{inline-size:100%;box-sizing:border-box;min-block-size:140px;max-block-size:min(480px,60dvh);field-sizing:content;resize:none;overflow-y:auto;font:inherit;font-size:16px}
/* Its bar thin, as the app's lists that scroll (app.css): a hairline thumb on no track, darker under the pointer, and
   no arrows; the standard properties only where the bar can't be styled itself, since they switch that styling off. */
@supports not selector(::-webkit-scrollbar){.form textarea{scrollbar-width:thin;scrollbar-color:var(--line) transparent}}
.form textarea::-webkit-scrollbar{width:6px}.form textarea::-webkit-scrollbar-track{background:transparent}.form textarea::-webkit-scrollbar-button{display:none}
.form textarea::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}@media (hover:hover){.form textarea::-webkit-scrollbar-thumb:hover{background:var(--muted)}}
.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}
/* The visitors' error pages (part 8): one calm statement and the way on. */

/* Text on the light blue panels at the contrast the guidelines ask for (part 10, the accessibility audit): the muted
   grey is too light for words on that ground in the light theme; the dark theme's own value already passes. */
:root{--muted-on-soft:#4B5059}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted-on-soft:#9AA0AB}}
:root[data-theme="dark"]{--muted-on-soft:#9AA0AB}
.signup-side h2{color:var(--muted-on-soft)}

/* Three moments of motion (his "back up what we have now in case we want to revert and do it", 2026-10-26; the backup is
   the tag opus-decor-before-motion-2026-10-26; docs/opus_decor_home_v3.md, Motion): each shows the product once, when its
   picture comes into view, everything done within two seconds; public.js marks the page `with-moments` only (never `moving` or `shown`: app.css owns a `.shown`, a flex row, which once stretched a card) when the browser can
   watch for it and the system does not ask for reduced motion, so without the script, or with reduced motion, every
   picture stands still in its first state. The Master lock's switch as the app draws it: open is green with the knob at
   the start, locked is red with the knob at the end (app.css, .breaker); the app's locked line shortened, never rewritten. */
.lock-switch{background:var(--online)}
.lock-states{display:inline-grid}.lock-states > *{grid-area:1/1}
.lock-shut{opacity:0}
@keyframes see-arrive{from{opacity:0;translate:0 -.6em}to{opacity:1;translate:0 0}}
@keyframes see-fresh{from{background:var(--accent-soft)}to{background:transparent}}
@keyframes track-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes stop-pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:no-preference){
  .with-moments .mock-lock[data-moment].moment-on{border-color:var(--danger);box-shadow:0 0 0 .24em var(--danger-soft),0 1px 2px var(--shot-shadow),0 10px 28px var(--shot-shadow);transition:border-color .25s ease .7s,box-shadow .25s ease .7s}
  .with-moments .mock-lock[data-moment].moment-on .lock-switch{background:var(--danger);transition:background-color .25s ease .7s}
  .with-moments .mock-lock[data-moment].moment-on .lock-switch::after{inset-inline-start:1.12em;transition:inset-inline-start .25s ease .7s}
  .with-moments .mock-lock[data-moment].moment-on .mock-pill{background:var(--danger-soft);color:var(--danger);transition:background-color .25s ease .7s,color .25s ease .7s}
  .with-moments .mock-lock[data-moment].moment-on .lock-open{opacity:0;transition:opacity .2s ease .8s}
  .with-moments .mock-lock[data-moment].moment-on .lock-shut{opacity:1;transition:opacity .2s ease .95s}
  .with-moments .see-card[data-moment]:not(.moment-on) .see-new{opacity:0}
  .with-moments .see-card[data-moment].moment-on .see-new{animation:see-arrive .45s ease-out .3s both,see-fresh 1.2s ease-out .75s both}
  .with-moments .audience-track[data-moment]:not(.moment-on) .audience-stop{opacity:0}
  .with-moments .audience-track[data-moment]:not(.moment-on) .audience-stop::after{transform:scaleX(0)}
  .with-moments .audience-track[data-moment].moment-on .audience-stop{animation:stop-pop .3s ease-out both}
  .with-moments .audience-track[data-moment].moment-on li:nth-child(2) .audience-stop{animation-delay:.6s}
  .with-moments .audience-track[data-moment].moment-on li:nth-child(3) .audience-stop{animation-delay:1.2s}
  .with-moments .audience-track[data-moment].moment-on .audience-stop::after{transform-origin:left center;animation:track-draw .5s ease-in-out .2s both}
  .with-moments .audience-track[data-moment].moment-on li:nth-child(2) .audience-stop::after{animation-delay:.8s}
  [dir="rtl"].with-moments .audience-track[data-moment].moment-on .audience-stop::after{transform-origin:right center}
}
/* THE INNER PAGES IN HOME'S LANGUAGE (his pick A, 2026-10-26, docs/opus_decor_inner_pages.md): the head centred, Home's
   icon list for short facts, the steps in one pale strip, Home's drawn app cards two by two, the questions centred,
   Home's ending. Home's own pieces carry the rest (.more, .decide, .mock, .how-step, .last under .inner). */
.inner-head{display:grid;justify-items:center;text-align:center;padding-block:clamp(16px,3vw,48px) 0}
.inner-head h1{margin:0 0 18px;font-size:clamp(40px,5.2vw,68px);line-height:1.05;letter-spacing:-.012em;font-weight:600;text-wrap:balance}
.inner-head .lead{margin:0;max-inline-size:48ch;color:var(--muted);font-size:clamp(17px,1.5vw,20px);line-height:1.5;text-wrap:balance}
.inner-head .hero-acts{justify-content:center;margin-block-start:32px}
.inner-head.oops{inline-size:min(680px,100%);padding-block:clamp(48px,10vw,120px)}
/* A lost visitor's next pages beside the way home, as the leaders' 404 pages offer support and contact (docs/opus_audit_decor_content_and_wording_2026-10-27.md). */
.oops-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px;margin:24px 0 0}
.inner-reasons .more-list{grid-template-columns:1fr}
@media (min-width:600px){.inner-reasons .more-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.inner-reasons .more-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:760px){.inner-reasons.three .more-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The bands alternate (his "your page is 6/10 not 9", 2026-10-26): the head and the reasons on the page's grey, the
   steps on white, the drawn cards on grey, the questions on white, the ending on grey, so no two sections share a
   ground. */
.inner-band{padding-block:clamp(56px,7vw,96px);background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}
.inner .decide{padding-block:0;background:none;box-shadow:none;clip-path:none}
.inner-reasons .more-list li{text-wrap:pretty}
/* The steps beside the app's own Add a device window (the practice read in docs/opus_decor_inner_pages.md, page 1
   again): numbered dots joined by a thin line, the company's setup code drawn as the app shows it. */
.inner-split{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.inner-split{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,80px)}}
.inner-split-words{display:grid;gap:32px}.inner-split-words h2{text-align:start}
.step-path{--dot:40px;margin:0;padding:0;list-style:none;display:grid;gap:24px;counter-reset:step}
.step-path li{position:relative;display:grid;grid-template-columns:var(--dot) 1fr;gap:16px;counter-increment:step}
.step-path li:not(:last-child)::after{content:"";position:absolute;inset-block:var(--dot) -24px;inset-inline-start:calc(var(--dot) / 2 - 1px);inline-size:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.step-dot{display:grid;place-items:center;inline-size:var(--dot);block-size:var(--dot);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:600}
.step-dot::before{content:counter(step)}
.step-path h3{margin:8px 0 4px;font-size:20px;line-height:1.25}
.step-path p{margin:0;color:var(--muted);font-size:17px;line-height:1.47}
/* A step's title leads to the guide that walks it (his "link them", 2026-10-27), named by the guide's title in the
   site's link color, the text's color under the mouse and never an underline (his word 2026-10-27), as the leaders' quickstarts link their pages (docs/opus_audit_decor_content_and_wording_2026-10-27.md). */
.step-path h3 a{color:var(--accent);text-decoration:none;transition:color .15s}
@media (hover:hover){.step-path h3 a:hover{color:var(--text)}}
.inner-split .decide-shot{--panel-w:min(560px,100vw - 32px);aspect-ratio:auto;margin:0;padding:clamp(24px,3vw,40px)}
@media (min-width:900px){.inner-split .decide-shot{--panel-w:calc((min(1200px,100vw - 32px) - clamp(40px,5vw,80px)) / 2)}}
/* The head shows the product (the polish re audit, 2026-10-26): one of the app's screens in a pale panel, drawn by the
   one shared drawing of that screen (templates/draw/, his words: "u're drawing different stuff for each page for the
   same interface ... mich kill matra7 chi"), sized here to the panel as Home sizes its own. */
.inner-shot{--panel-w:min(720px,100vw - 32px);--shot-shadow:rgba(21,23,28,.08);inline-size:min(880px,100%);box-sizing:border-box;margin-block-start:clamp(40px,5vw,64px);padding:clamp(20px,3vw,40px);border-radius:24px;background:var(--accent-soft);font-size:clamp(12px,1.2vw,16px)}
:root:not([data-theme="light"]) .inner-shot{--shot-shadow:rgba(0,0,0,.4)}
:root[data-theme="dark"] .inner-shot{--shot-shadow:rgba(0,0,0,.4)}
.inner-shot .see-card{max-inline-size:520px;margin-inline:auto}.inner-shot .how-card{block-size:auto}.inner-shot .mock{margin-inline:auto}
.decide-shot .see-card{inline-size:86%;font-size:calc(var(--panel-w) * .0207)}
.mock-x{margin-inline-start:auto;color:var(--muted)}
.mock .mock-muted{text-wrap:pretty}
.mock-code{display:flex;align-items:center;gap:.8em;margin-block-start:1em;padding:.8em 1em;border:1px solid var(--line);border-radius:.8em;background:var(--ground)}
.mock-code code{flex:1;font-family:var(--mono);font-size:1.25em;letter-spacing:.08em;color:var(--text)}
.mock-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-block-end:.9em;border-block-end:1px solid var(--line)}
.mock-monitors{display:inline-flex;gap:.4em}.mock-monitors span{display:grid;place-items:center;min-inline-size:2.2em;block-size:2em;padding:0 .6em;border:1px solid var(--line);border-radius:999px;font-size:.9em;color:var(--muted)}
.mock-monitors span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mock-screens{display:flex;gap:1.4em;justify-content:center;padding-block-start:1em}
.mock-screen{margin:0;display:grid;align-content:start;justify-items:center;gap:.4em;inline-size:8.6em;padding:.7em;border:2px solid var(--line);border-radius:.6em;background:var(--ground)}
.mock-screen > i{display:block;inline-size:7.2em;block-size:.5em;border-radius:.25em;background:var(--line)}
.mock-screen > i:nth-child(2){inline-size:5em}.mock-screen > i:nth-child(3){inline-size:6em}
.mock-screen figcaption{font-size:.85em;font-weight:600;color:var(--muted)}
.mock-screen.on{border-color:var(--accent);background:var(--accent-soft)}.mock-screen.on > i{background:color-mix(in srgb,var(--accent) 35%,transparent)}.mock-screen.on figcaption{color:var(--accent)}
.mock-logs .mock-tr{grid-template-columns:1.15fr 1.1fr .6fr 1.25fr}
.mock-state.refused{color:var(--danger)}.mock-state.refused .mock-dot{background:var(--danger);box-shadow:0 0 0 .24em var(--danger-soft)}
/* The questions as the leaders set theirs (docs/opus_decor_inner_pages.md, page 1 again): the title on the left with
   a way to ask more, the questions on the right, on a white band apart from the ending. */
.inner-faq{display:grid;gap:32px}.inner-faq .faq{inline-size:100%}
.inner-faq-side h2{margin:0 0 12px;text-align:start;font-size:clamp(30px,3vw,40px)}
.inner-faq-side p{margin:0;color:var(--muted);font-size:17px}.inner-faq-side a{color:var(--accent);font-weight:600}
@media (min-width:900px){.inner-faq{grid-template-columns:1fr 2fr;align-items:start;column-gap:clamp(40px,5vw,80px)}}
/* The features page (page 3, 2026-10-26, docs/opus_decor_inner_pages.md): each group its title and line beside its
   screen, the screen's side and the ground alternating, its features under them in three columns, each with its icon
   (Home's), its title and one line, as the remote access vendors' long features pages list theirs (his "neshfine" on
   the bare lists of run in titles); the groups as icon tiles under the head, never a second bar under the top bar (his
   "2 bars stacked is ugly"). */
.feat-row{display:grid;gap:clamp(40px,5vw,56px)}
.feat-intro{display:grid;gap:20px;align-items:center}.feat-intro h2{margin:0;text-align:start}
.feat-intro .decide-shot{--panel-w:min(560px,100vw - 32px);margin:12px 0 0}
@media (min-width:900px){
  .feat-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(40px,5vw,80px)}
  .feat-intro h2{grid-row:2}.feat-intro .feat-lead{grid-row:3}
  .feat-intro .decide-shot{--panel-w:calc((min(1200px,100vw - 32px) - clamp(40px,5vw,80px)) / 2);grid-column:2;grid-row:1/5;margin:0}
  .feat-row.flip .feat-intro .decide-shot{grid-column:1}.feat-row.flip .feat-intro :is(h2,.feat-lead){grid-column:2}
}
.feat-lead{margin:0;color:var(--muted);font-size:clamp(17px,1.5vw,20px);line-height:1.5;text-wrap:pretty}
.feat-list{--more-ink:#5E636E;margin:0;padding:0;list-style:none;display:grid;gap:36px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .feat-list{--more-ink:var(--muted)}}
:root[data-theme="dark"] .feat-list{--more-ink:var(--muted)}
@media (min-width:600px){.feat-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}}
@media (min-width:1000px){.feat-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(32px,4vw,56px)}}
@media (min-width:1100px){.feat-list:is(:has(> li:nth-child(4):last-child),:has(> li:nth-child(7):last-child),:has(> li:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(28px,3vw,40px)}}
.feat-list li{padding-block-start:20px;border-block-start:1px solid var(--line);color:var(--more-ink);font-size:17px;line-height:1.47;text-wrap:pretty}
.feat-list h3{margin:0 0 4px;color:var(--text);font-size:17px;font-weight:600;line-height:1.35}
.feat-list p{margin:0}
.feat-more{display:grid;gap:clamp(40px,5vw,64px)}.feat-more > h2{margin:0;text-align:center}
.shot-live .see-card{max-inline-size:600px;font-size:min(15px,calc((100vw - 32px) * .034))}
.feat-jump{justify-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;inline-size:min(100%,760px);margin-block-start:calc(clamp(72px,10vw,136px) * -.5)}
@media (min-width:760px){.feat-jump{grid-template-columns:repeat(6,minmax(0,1fr))}}
.feat-jump a{display:grid;justify-items:center;align-content:start;gap:10px;min-block-size:44px;padding:16px 8px;border-radius:16px;color:var(--muted);font-size:15px;font-weight:500;line-height:1.3;text-align:center;text-decoration:none}
.feat-jump svg{inline-size:24px;block-size:24px;color:var(--accent)}
@media (hover:hover){.feat-jump a:hover{background:var(--surface);color:var(--text)}}
/* The bar on the device's screen while someone is connected (draw/banner.html, from the endpoint's banner.dart): the
   company's initials on a soft tile, who and from which company, the minutes, End, above two faint windows. */
.mock.mock-desk{aspect-ratio:auto;align-content:start;justify-items:center;gap:1.4em;padding:1.1em 1.4em 1.4em;background:var(--ground)}
.mock-banner{display:flex;align-items:center;gap:.8em;inline-size:min(100%,36em);box-sizing:border-box;padding:.6em .7em;border:1px solid var(--line);border-radius:.9em;background:var(--surface);box-shadow:0 1px 2px var(--shot-shadow),0 8px 20px var(--shot-shadow)}
.mock-logo{display:grid;place-items:center;flex:none;inline-size:2.3em;block-size:2.3em;border-radius:.6em;background:var(--accent-soft);color:var(--accent);font-size:.85em;font-weight:700}
.mock-who{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mock-banner .mock-btn{flex:none}.mock-banner .mock-muted{text-wrap:nowrap}
.mock-windows{display:grid;grid-template-columns:1.5fr 1fr;gap:1em;inline-size:100%}
.mock-windows i{display:block;block-size:8em;border:1px solid var(--line);border-radius:.6em;background:var(--surface);opacity:.7}
/* The trust page (page 4, 2026-10-26, from the leaders' security pages in docs/opus_decor_shots/trust/leaders/, named in
   docs/opus_decor_inner_pages.md): what our servers keep and what only the two devices see side by side, the second
   tinted; the two ways to tell us side by side with their buttons, as the leaders' report bands are. */
.trust-see{display:grid;gap:clamp(40px,5vw,64px)}.trust-see > h2{margin:0;text-align:center}
.trust-lead{margin:calc(clamp(40px,5vw,64px) * -1 + 16px) auto 0;max-inline-size:56ch;color:var(--muted);font-size:clamp(17px,1.5vw,20px);line-height:1.5;text-align:center;text-wrap:balance}
.trust-split{display:grid;gap:20px}
@media (min-width:760px){.trust-split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust-split article{padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.trust-split article.private{border-color:transparent;background:var(--accent-soft)}
.trust-split h3{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:20px;line-height:1.3}
.trust-split h3 svg{flex:none;inline-size:22px;block-size:22px;color:var(--accent)}
.trust-split ul{margin:0;padding:0;list-style:none}
.trust-split li{padding-block:12px;border-block-start:1px solid var(--line);font-size:17px;line-height:1.47}
.trust-split .private li{border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.trust-split article > p{margin:16px 0 0;color:var(--accent);font-size:15px;font-weight:600}
.trust-note{margin:0;color:var(--muted);font-size:17px;text-align:center}.trust-note a{color:var(--accent);font-weight:600}
/* Pricing's close (page 7, 2026-10-26): the questions and Home's ending after the plans, in the inner pages' system. */
.pricing-end{margin-block-start:clamp(72px,10vw,136px)}.pricing-head{padding-block-start:0}
/* What's new, Contact and Report misuse in the system's head (2026-10-26): no label above the title, centred; the changelog's column under it. */
.whatsnew .whatsnew-list{justify-self:center;inline-size:min(880px,100%)}
/* The two ways to tell us as two equal cards (his pick A, 2026-10-27, from a leader's paired cards on its security
   page, docs/opus_decor_shots/trust/report/): one height whatever each one's words, the buttons on one line at the
   cards' feet; stacked on a phone. */
.trust-report{display:grid;gap:24px}
@media (min-width:760px){.trust-report{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,40px)}}
.trust-report article{display:flex;flex-direction:column;gap:8px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--ground)}
.trust-report h3{margin:0;font-size:22px;line-height:1.25}
.trust-report article > p{margin:0;color:var(--muted);font-size:17px;line-height:1.47}
.trust-report .trust-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-block-start:auto;padding-block-start:12px}
.trust-report .trust-acts .btn{min-block-size:48px;padding-inline:22px}
/* The drawings on a phone (the re audit of page 3, 2026-10-26): sized by their panel's width, their words shrank to 7 px at
   390; on an inner page under 600 px a drawn card takes the panel's width and words of 11.5 px, its height its own.
   Home keeps its own. */
@media (max-width:599px){
  .inner .decide-shot{aspect-ratio:auto;padding:20px 16px}
  .inner .decide-shot :is(.mock,.see-card){inline-size:100%;aspect-ratio:auto;font-size:11.5px}
  .inner .inner-shot .mock{inline-size:100%;aspect-ratio:auto;font-size:11.5px}.inner .mock-who{white-space:normal}
  .inner :is(.decide-shot,.inner-shot) .mock-logs{font-size:10px}.inner :is(.decide-shot,.inner-shot) .mock-logs .mock-tr > *{white-space:nowrap}
}
@media (max-width:367px){.inner :is(.decide-shot,.inner-shot) .mock-logs{font-size:9.5px}.inner :is(.decide-shot,.inner-shot) .mock-logs .mock-tr{grid-template-columns:1.15fr 1.1fr 1.25fr}.inner :is(.decide-shot,.inner-shot) .mock-logs .mock-tr > :nth-child(3){display:none}}
/* The Windows page's two moments, Home's way (the polish re audit, 2026-10-26): once, when in view, nothing for a
   visitor who asks for less motion. The steps' dots come one after another as the line grows down between them; in
   a drawn list (the logs, the notifications) the newest row arrives on top and lights for a moment. */
@keyframes path-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Each step's place in the order, so every dot and line comes in turn whatever the list's length (his catch 2026-10-27:
   Report misuse's eight steps had timings for four, so five to eight lit with the first): half a second apart up to four
   steps, a quarter from five, so eight still finish in about two seconds. */
.step-path{--step-gap:.5s;--step-lead:.2s;--step-line:.35s}
.step-path:has(> li:nth-child(5)){--step-gap:.25s;--step-lead:.05s;--step-line:.2s}
.step-path > li:nth-child(2){--step-i:1}.step-path > li:nth-child(3){--step-i:2}.step-path > li:nth-child(4){--step-i:3}.step-path > li:nth-child(5){--step-i:4}
.step-path > li:nth-child(6){--step-i:5}.step-path > li:nth-child(7){--step-i:6}.step-path > li:nth-child(8){--step-i:7}
@media (prefers-reduced-motion:no-preference){
  .with-moments .step-path[data-moment]:not(.moment-on) .step-dot{opacity:0}
  .with-moments .step-path[data-moment]:not(.moment-on) li::after{transform:scaleY(0)}
  .with-moments .step-path[data-moment].moment-on .step-dot{animation:stop-pop .3s ease-out both;animation-delay:calc(var(--step-gap) * var(--step-i, 0))}
  .with-moments .step-path[data-moment].moment-on li::after{transform-origin:top center;animation:path-draw var(--step-line) ease-in-out both;animation-delay:calc(var(--step-gap) * var(--step-i, 0) + var(--step-lead))}
  .with-moments .mock-desk[data-moment]:not(.moment-on) .mock-banner{opacity:0}
  .with-moments .mock-desk[data-moment].moment-on .mock-banner{animation:see-arrive .5s ease-out .4s both}
  .with-moments .mock[data-moment]:not(.moment-on) .mock-new{opacity:0}
  .with-moments .mock[data-moment].moment-on .mock-new{animation:see-arrive .45s ease-out .3s both,see-fresh 1.2s ease-out .75s both}
}
/* Help (docs/opus_decor_help.md, his look A 2026-10-27, from the small products' docs named there). The home: the search, Start here as four numbered cards, the other groups with their guides, a way to a person. A guide: the menu on the left (a fold on a phone), the guide, "On this page" on the right from 1240 px, the legal pages' marking of the part in view. Every class starts with help- (app.css holds .guide). Polished on his "ma betrayyi7" (docs/opus_decor_help.md, The polish): the frame on the bar's edges, the docs leaders' scale in the site's face, the menu's groups folded but the one being read, the two side columns stopping on one line; the home's guides as links in the accent under their groups' titles, his "khabbine b ba3don". */
.help-home{gap:clamp(56px,7vw,96px)}
/* The bold words in Help, the legal pages and What's new at 600, the headings' own weight (his "go" 2026-10-27, measured on the leaders in docs/opus_decor_help.md; the browser's 700 read as blots where a guide's step holds three screen words). The drawings of the app keep the app's bold. */
:is(.help-home,.help-doc,.legal-doc,.whatsnew) :is(b,strong){font-weight:600}
.help-find{display:flex;justify-content:center;inline-size:100%;margin-block-start:28px}.help-search{display:flex;align-items:center;gap:10px;inline-size:min(560px,100%);max-inline-size:560px;block-size:52px;min-block-size:52px;padding-inline:18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);box-sizing:border-box;cursor:text}

.help-search input{flex:1;min-inline-size:0;border:0;background:none;font:inherit;font-size:17px;color:var(--text);outline:0}
.help-start>h2{margin:0 0 24px;font-size:clamp(24px,2.4vw,30px);font-weight:600}
.help-start-list{margin:0;padding:0;list-style:none;display:grid;gap:16px;counter-reset:start}
.help-start-list li{counter-increment:start}
.help-start-list a{position:relative;display:grid;align-content:start;gap:6px;block-size:100%;box-sizing:border-box;padding:56px 20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-decoration:none}
.help-start-list a::before{content:counter(start);position:absolute;inset-block-start:20px;inset-inline-start:20px;display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:600}
.help-start-list b{font-size:17px}.help-start-list span{color:var(--muted);font-size:15px;line-height:1.5}
.help-groups{display:grid;gap:40px}
.help-group h2{margin:0 0 16px;font-size:20px;font-weight:600}
.help-group ul{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.help-group li{display:grid;gap:2px}.help-group a{color:var(--accent);font-size:16px;font-weight:500;text-decoration:none}.help-group li span{color:var(--muted);font-size:15px}
.help-none{margin:0;color:var(--muted);font-size:16px;text-align:center}.help-none[hidden]{display:none}.help-none a{color:var(--accent)}
.help-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.help-ask h2{margin:0;font-size:20px}.help-ask p{margin:4px 0 0;color:var(--muted);font-size:15px}
@media (hover:hover){.help-start-list a:hover{border-color:var(--accent)}.help-group a:hover{color:var(--text)}.help-nav a:not([aria-current]):hover,.help-toc a:hover{color:var(--text)}.help-nav-part>summary:hover{color:var(--accent)}.help-next a:hover{color:var(--accent)}.help-next a:hover::after{border-color:var(--accent)}}
@media (min-width:700px){.help-start-list{grid-template-columns:repeat(2,minmax(0,1fr))}.help-groups{display:block;columns:2;column-gap:48px}.help-group{break-inside:avoid;padding-block-end:40px}}
@media (min-width:1000px){.help-start-list{grid-template-columns:repeat(4,minmax(0,1fr))}.help-groups{columns:3}}
.help-frame{inline-size:min(1200px,100%);display:grid;gap:24px;padding-block:clamp(8px,2vw,24px) 0}
.help-nav{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.help-nav>summary{display:flex;align-items:center;justify-content:space-between;min-block-size:48px;padding-inline:16px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.help-nav summary::-webkit-details-marker{display:none}
.help-nav>summary::after,.help-nav-part>summary::after{content:"";inline-size:7px;block-size:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;rotate:45deg;translate:0 -2px}
.help-nav[open]>summary::after,.help-nav-part[open]>summary::after{rotate:-135deg;translate:0 2px}
.help-nav nav{display:grid;gap:2px;padding:0 8px 12px}
.help-nav-part>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-block-size:36px;padding-inline:8px;border-radius:8px;color:var(--text);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.help-nav ul{margin:2px 0 8px 8px;padding:0 0 0 8px;border-inline-start:1px solid var(--line);list-style:none;display:grid;gap:2px}
.help-nav a{display:block;padding:6px 8px;border-radius:8px;color:var(--muted);font-size:15px;line-height:1.4;text-decoration:none}
.help-nav a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.help-doc{min-inline-size:0;max-inline-size:680px}
.help-crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px;line-height:1.5}.help-crumbs a{color:var(--muted)}
.help-doc h1{margin:12px 0 6px;font-size:clamp(30px,3vw,36px);line-height:1.15;letter-spacing:-.012em;font-weight:600;text-wrap:balance}
.help-doc p,.help-doc li,.help-doc dd{font-size:16px;line-height:1.65;text-wrap:pretty}
.help-doc .help-date{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.help-doc .help-lead{margin:20px 0 0;font-size:18px;line-height:1.55}
.help-doc section{margin-block-start:36px}
.help-doc>.help-steps{margin-block-start:28px}
.help-doc h2{margin:0 0 12px;font-size:22px;line-height:1.3;letter-spacing:-.012em}
.help-doc section>p{margin:12px 0 0}.help-doc section>h2+p{margin-block-start:0}.help-doc>.help-steps+p{margin:16px 0 0}
.help-doc a{color:var(--accent)}.help-doc :is(p,li,dd) a{text-decoration:underline}
.help-steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:12px}
.help-steps li{counter-increment:step;position:relative;padding-inline-start:40px}
.help-steps li::before{content:counter(step);position:absolute;inset-inline-start:0;inset-block-start:1px;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;line-height:1}
.help-doc section ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}.help-doc section ul li::marker{color:var(--muted)}
/* The controller's messages as a table, the message and what to do side by side, a hairline between rows (the leaders' error pages, docs/opus_decor_help.md, The controller's messages; the site's own table on Pricing); the answer in the text colour, never the grey (his "unreadable" in dark, 2026-10-27). On a phone each row stacks. */
.help-messages{inline-size:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.help-messages thead th{padding:0 16px 10px 0;border-block-end:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;text-align:start}
.help-messages tbody th,.help-messages td{padding:14px 16px 14px 0;border-block-end:1px solid var(--line);text-align:start;vertical-align:top}
.help-messages tbody th{inline-size:44%;font-weight:600}.help-messages tbody th span{display:block}.help-messages tbody th span+span{margin-block-start:4px}
.help-messages td{padding-inline-end:0;color:var(--text)}
@media (max-width:639px){.help-messages thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}.help-messages tr{display:grid;gap:4px;padding-block:14px;border-block-end:1px solid var(--line)}.help-messages tbody th,.help-messages td{inline-size:auto;padding:0;border:0}}
/* Previous and next as plain links with a chevron by the title, a hairline ending the guide (his pick A 2026-10-27, docs/opus_decor_help.md, Previous and next): Still stuck stays the one box. */
.help-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block-start:56px;padding-block-start:24px;border-block-start:1px solid var(--line)}
.help-next a{position:relative;display:grid;gap:4px;padding-block:8px;padding-inline:20px 0;color:var(--text);font-size:16px;font-weight:600;text-decoration:none}.help-next a.to-next{padding-inline:0 20px;text-align:end}
.help-next a::after{content:"";position:absolute;inset-block-end:16px;inset-inline-start:2px;inline-size:7px;block-size:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;rotate:135deg;transition:border-color .15s}.help-next a.to-next::after{inset-inline:auto 2px;rotate:-45deg}
:dir(rtl) .help-next a::after{rotate:-45deg}:dir(rtl) .help-next a.to-next::after{rotate:135deg}
.help-next small{color:var(--muted);font-weight:400;font-size:13px}
.help-doc .help-ask{margin-block-start:24px}.help-doc .help-ask h2{margin:0;font-size:18px}.help-doc .help-ask p{margin:4px 0 0;font-size:15px;line-height:1.5}
.help-toc{display:none}
.help-toc p{margin:0 0 10px;color:var(--text);font-size:13px;font-weight:600;line-height:1.5}
.help-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.45}.help-toc a{color:var(--muted);text-decoration:none}.help-toc a[aria-current]{color:var(--accent)}
@media (min-width:1000px){
  .help-frame{grid-template-columns:240px minmax(0,1fr);column-gap:48px;align-items:start}
  .help-nav{position:sticky;inset-block-start:88px;max-block-size:calc(100dvh - 112px);overflow-y:auto;border:0;background:none}
  .help-nav>summary{display:none}.help-nav nav{padding:0}.help-nav{margin-block-start:-8px}
  .help-nav{margin-inline:-8px -16px;padding-inline-end:16px;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:transparent transparent;transition:scrollbar-color .15s}.help-nav:focus-visible{scrollbar-color:var(--line) transparent}
  .help-nav[data-more="bottom"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
  .help-nav[data-more="top"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px);mask-image:linear-gradient(to bottom,transparent,#000 24px)}
  .help-nav[data-more="top bottom"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}
@media (min-width:1000px) and (hover:hover){.help-nav:hover{scrollbar-color:var(--line) transparent}}
@media (min-width:1000px) and (pointer:coarse){.help-nav{scrollbar-width:none;scrollbar-gutter:auto}}
@media (pointer:coarse){.help-nav-part>summary{min-block-size:44px}.help-nav a{padding-block:11.5px}}
@media (min-width:1240px){.help-frame{grid-template-columns:240px minmax(0,1fr) 192px}.help-toc{display:block;position:sticky;inset-block-start:96px}}
/* THE INTERFACE AUDIT'S FIXES (2026-10-27, docs/opus_audit_decor_interface_2026-10-27.md, his "fix what is worth"): one
   block, so they read and revert together; each part names its finding. Links keep no underline and nothing gets a
   pressed look (his word the same day). */
/* D1, the way past the bar (public_top.html): off the screen until it has the focus, then a capsule over the bar's start. */
.skip-link{position:absolute;inset-inline-start:16px;inset-block-start:-200px;z-index:30;display:inline-flex;align-items:center;min-block-size:44px;padding-inline:20px;border-radius:999px;background:var(--surface);color:var(--text);font-size:15px;font-weight:600;text-decoration:none;box-shadow:var(--glass-shadow)}
.skip-link:focus{inset-block-start:8px}
/* D3, text at 4.5 to 1: the pale blue band's lines in the grey made for that ground, the Better tag in the online ink. */
.audience-track p{color:var(--muted-on-soft)}
.whatsnew .tag.better{color:var(--online-ink)}
/* D4, nothing wider than its page: the main area and the page grids hold a zero floor, so a long word or larger text
   spacing wraps instead of pushing the page past the window, where the main area's clip would cut it. */
.public-main,.home,.page,.pricing,.inner-head,.legal-nav,.legal-body{grid-template-columns:minmax(0,1fr)}
@media (max-width:999px){.legal,.help-frame{grid-template-columns:minmax(0,1fr)}}
@media (max-width:979px){.contact{grid-template-columns:minmax(0,1fr)}}
/* The floor showed what the widened page had hidden: under 360 pixels a head's drawn logs need 4 pixels more than their
   panel left them, so the panel's sides give 8. */
@media (max-width:359px){.inner .inner-shot{padding-inline:12px}}
/* D5, a finger's 44 pixels, probed point by point: the phone bar's Log in, the legal pages' documents and contents, the
   guide's way back to Help, the period switch, the lone links, the foot's short words, the computer's bar on a touch
   tablet. Where the drawn size stays, an invisible overlay carries the touch, the house's way (app.css). */
@media (max-width:859px){.site-login{min-block-size:44px}}
@media (pointer:coarse){
  .legal-docs a{min-block-size:44px}
  .legal-toc ol{gap:0}.legal-toc a{display:block;box-sizing:border-box;min-block-size:44px;padding-block:12px}
  .help-crumbs a,.period button,.trust-note a,.plan-all a,.legal-address a,.contact-roads .underline,.misuse-company .underline,.step-path h3 a{position:relative}
  .help-crumbs a::after,.trust-note a::after,.plan-all a::after,.legal-address a::after,.contact-roads .underline::after,.misuse-company .underline::after,.step-path h3 a::after{content:"";position:absolute;inset:-12px -4px}
  .help-crumbs a::after{inset-inline:-7px}
  .period button::after{content:"";position:absolute;inset:-3px 0}
  .site-foot ul a{min-inline-size:44px}
}
@media (min-width:860px) and (pointer:coarse){.site-bar .btn.site-cta{position:relative}.site-bar .btn.site-cta::after{content:"";position:absolute;inset:-5px 0}.site-nav .site-link{min-inline-size:44px;justify-content:center}}
/* The legal contents on a computer: a column, not a fold (public.js, D9); its first line clear of the heading by the
   24 pixels a pointer's target needs. */
@media (min-width:1000px){.legal-toc summary{cursor:default}.legal-toc ol{padding-block-start:4px}}
/* D6, print: the policies and the guides print as documents, without the bar, the menus and contents, the foot, the
   buttons and switches; in the light theme's ink on white whatever the screen's theme; the bands' edges, drawn by a
   shadow, left off the paper. */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--ground:#FFFFFF;--surface:#FFFFFF;--text:#15171C;--muted:#6C717C;--line:#E4E7EC;--accent:#155E75;--accent-soft:#D7EEF6;--muted-on-soft:#4B5059;color-scheme:light}
  body.public{background:#FFFFFF;color:#15171C}
  .skip-link,.site-top,.site-foot,.legal-nav,.help-nav,.help-toc,.help-next,.help-ask,.help-find,.period-slot,.feat-jump,.last,.public .btn{display:none!important}
  .public-main{padding:0}.legal{display:block}.legal-doc,.help-doc{max-inline-size:none}
  .audience,.decide,.how,.home-plans,.inner-band,.plans-compare{box-shadow:none}
}
/* D10, Pricing's pinned head: flush under the phone's bar up to 859 pixels (from 760 it pinned at 64 under a bar of 61,
   a slit between), and not pinned on a screen too short for it (a phone held sideways, 400 percent zoom), where the bar
   and the head took half the window. */
@media (max-width:859px){.plans-table thead th{inset-block-start:60px}}
@media (max-height:500px){.plans-table thead th{position:static}}
/* D11, the legal pages' column says when it scrolls, as Help's menu does (.help-nav above, the named mirror): a thin
   bar, quiet until hover or focus, and a fade at the end that holds more (public.js marks the ends). */
@media (min-width:1000px){
  .legal-nav{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .15s}.legal-nav:focus-visible{scrollbar-color:var(--line) transparent}
  .legal-nav[data-more="bottom"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
  .legal-nav[data-more="top"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px);mask-image:linear-gradient(to bottom,transparent,#000 24px)}
  .legal-nav[data-more="top bottom"]{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}
@media (min-width:1000px) and (hover:hover){.legal-nav:hover{scrollbar-color:var(--line) transparent}}
@media (min-width:1000px) and (pointer:coarse){.legal-nav{scrollbar-width:none}}
/* D12, lines under 80 characters, counted by the breaks the browser draws: the policies at 600 pixels (91 to 95 at 720),
   a guide's sentences at 600 (up to 91 at 680; its headings and tables keep the column), the questions' answers at 56ch
   (92 at 68ch, a ch being a zero's width). */
.legal-doc{max-inline-size:600px}.help-doc :is(p,li,dd){max-inline-size:600px}.faq details p{max-inline-size:56ch}
/* D13, Windows high contrast: what a fill showed shows by an outline in the system's colour: the pressed period and
   theme buttons, the current page in Help's menu and the legal list, the part in view in the contents. */
@media (forced-colors:active){
  .period button[aria-pressed=true],.site-foot .seg button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-2px}
  .help-nav a[aria-current],.legal-docs a[aria-current],.legal-toc a[aria-current],.help-toc a[aria-current]{outline:1px solid Highlight;outline-offset:1px}
}
/* D14, a tap on the site's own links neither flashes the browser's blue nor starts a text selection, as the app's buttons
   (app.css); links inside running text keep both. */
:is(.site-top,.site-menu-panel,.site-foot,.legal-docs,.legal-toc,.help-nav,.help-next,.help-start-list,.help-group,.feat-jump) a,.help-nav summary,.more-link,.skip-link{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
/* D18, "Still stuck?" keeps its button at the end when the box wraps on a phone. */
.help-ask .btn{margin-inline-start:auto}
/* THE DOOR PAGES (2026-10-28, docs/door-pages-2026-10-28.md, his word "do them to match the new decore"): the sign in
   pages and the download pages, on the app's name, in the site's frame (door_base.html): the wordmark alone at the
   start, one card in the middle on the hero's glow, a foot row with the links, the copyright and the app's theme
   control. app.css keeps the login's mechanics (.login: the form held back while the page asks, the loading ring,
   web/test_logout.py); this part dresses them and takes the old frame's place (the fixed brand, the 400px main). */
body.door{display:flex;flex-direction:column;min-block-size:100dvh;padding:0}
.door-top{inline-size:min(1232px,100%);margin-inline:auto;box-sizing:border-box;display:flex;padding-block:12px;padding-inline:16px}
.door-main{position:relative;isolation:isolate;flex:1;inline-size:100%;box-sizing:border-box;display:grid;justify-items:center;align-content:center;padding-block:24px 48px;padding-inline:16px;overflow-x:clip}
.door .card{position:relative;inline-size:100%;max-inline-size:420px;padding:28px;border-radius:20px;box-shadow:var(--shadow)}
.door.wide .card{max-inline-size:480px}
@media (max-width:359px){.door .card{padding:20px}}
/* The glow: the hero's own oval and stops, painted inside the main area's own box, centred where the card is, so it
   widens nothing (measured with cdp.py --overflow: a box drawn past the card widened the clipped main) and fades
   before the foot. */
.door-main::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse 360px 400px at 50% 50%,color-mix(in srgb,var(--accent-soft) 100%,transparent) 0%,color-mix(in srgb,var(--accent-soft) 62%,transparent) 30%,color-mix(in srgb,var(--accent-soft) 30%,transparent) 56%,color-mix(in srgb,var(--accent-soft) 10%,transparent) 78%,transparent 100%)}
/* The card's title names the act (Log in to the product, Enter your code, Choose a new password), 28px as the signup's;
   under it a lead sentence in the muted grey where the page needs one, or the form at once. */
.door .card h1{margin:0 0 8px;font-size:28px;line-height:1.2;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:anywhere}
.door .card h1+.form,.door .card h1+.errors{margin-block-start:20px}
.door .card .lead{margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.door .card .lead b{color:var(--text)}
.door .card .lead+.seen{margin:-12px 0 20px}
.door .card .seen{font-size:15px;line-height:1.5}
.door .form{max-inline-size:none}
.door .errors{padding:12px 14px;border-radius:12px;background:var(--danger-soft);color:var(--danger-ink);font-size:15px;line-height:1.5}
.door .form>.btn{inline-size:100%;min-block-size:48px}
.door .btn.primary{font-size:17px}
.door .acts{display:flex;justify-content:flex-end;gap:8px;margin:0}.door .acts .btn{min-block-size:48px;padding-inline:24px}
.door .form .center-link{justify-self:center;font-size:14px}
.door .signup-line{margin:18px 0 0;color:var(--muted);font-size:14px;text-align:center}.door .signup-line .quiet-link{font-size:14px}
.door .door-other{margin-block-start:18px}
/* While the login page asks whether the browser holds a login, its title and its signup line are held with the form
   (app.css holds the form itself, the test pins that rule) and come back with it, by the script or by themselves. */
.login.checking .card>:not(.checking-sign,.form){visibility:hidden;animation:checked 0s linear 3s forwards}
/* The foot: one row, the links at the start, the copyright and the theme control at the end; on a phone the links
   take their own row above them. */
.door-foot{inline-size:min(1232px,100%);margin-inline:auto;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:20px;padding-inline:16px;border-block-start:1px solid var(--line)}
.login-links{display:flex;flex-wrap:wrap;gap:0 20px}
.login-links a{display:inline-flex;align-items:center;min-block-size:32px;color:var(--muted);font-size:14px;text-decoration:none}
@media (hover:hover){.login-links a:hover{color:var(--text)}}
@media (pointer:coarse){.login-links a{min-block-size:44px}}
.door-foot-end{display:flex;align-items:center;gap:16px;margin-inline-start:auto}
.door-foot .site-copy{margin:0}
/* THE DOWNLOAD PAGE OF THE SITE (his "put" 2026-10-28, docs/door-pages-2026-10-28.md, part 8): the two programs as two
   cards in the inner pages' language, side by side from 760 pixels, each with its version line, the button across the
   card, the steps as the signup's numbered list, the checksum under its label and the guide that walks it. */
.download-cards{inline-size:min(960px,100%);margin-inline:auto;display:grid;gap:24px;padding-block-start:clamp(32px,4vw,56px)}
@media (min-width:760px){.download-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.download-card{display:grid;align-content:start;gap:12px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);min-inline-size:0}
.download-card h2{margin:0;font-size:22px;line-height:1.3}
.download-what{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.download-meta{margin:0;font-size:15px;line-height:1.5}
.download-btn{inline-size:100%;min-block-size:48px;font-size:17px;margin-block:4px}
.download-card .signup-steps{margin-block-start:8px}
.download-sum{margin:8px 0 0;display:grid;gap:4px}.download-sum-label{font-size:13px;font-weight:600;color:var(--muted)}.download-sum code{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;word-break:break-all}
.download-guide{margin:4px 0 0;font-size:14px}.download-guide .underline{color:var(--accent);font-weight:600}
/* The download pages (get.html, views_get.py): the wide card, the version line as the lead, the button across the card,
   the started line under it in the pale accent, the steps as the signup's numbered list, the checksum in the mono face
   under its label, broken wherever the card is narrow. */
.door .get-started{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);color:var(--text);font-size:15px;line-height:1.5}
.door .get-steps{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px;line-height:1.5;counter-reset:step}
.door .get-steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:step}
.door .get-steps li::before{content:counter(step);flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}
.door .get-sum{margin:24px 0 0;display:grid;gap:4px}
.door .get-sum-label{font-size:13px;font-weight:600;color:var(--muted)}
.door .get-sha{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;word-break:break-all}