/* Jalten public website: what the real site adds to the prototype's CSS (assets/jalten/*.css, copied
   verbatim from jalten-prototype 8ced2a1). Every rule here is either something the prototype has no place
   for (legal pages, the contact form, the consent bar, screenshot placeholders, the release switch) or a
   stated departure from it (two providers instead of three, a static provider row, a pause control). Each
   departure is listed in docs/phase6/review/M4/index.md. Loaded after home.css (and download.css). */

/* ---------- Product screenshot placeholders (shots.js swaps in the real image at M8) ---------- */
/* :where() keeps the default shape weaker than a slot's own (.cf-shot sets its crop at each width). */
:where(.shot-ph) { aspect-ratio: var(--ar, 16 / 10); }
.shot-ph { position: relative; display: grid; place-items: center; width: 100%; padding: 16px; margin: 0;
  background: repeating-linear-gradient(-45deg, #f4f7fa 0 12px, #eef3f8 12px 24px); box-shadow: inset 0 0 0 1.5px #b9c6d6; color: var(--ink-2); text-align: center; }
.shot-ph-in { display: grid; justify-items: center; gap: 8px; max-width: 30ch; font-size: 14px; font-weight: 600; line-height: 1.4; }
.shot-ph-in .icon { font-size: 22px; color: var(--brand-mark); }
.shot-ph-in small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pr-shots .shot-ph, .console-frame .shot-ph { border-radius: 0; }
.cf-shot.shot-ph { height: auto; }
/* Inside the product tour, sized to the frame like everything else there. */
.film-inner .shot-ph { padding: 1cqw; }
.film-inner .shot-ph-in { gap: 0.6cqw; font-size: max(10.5px, 1.15cqw); }
.film-inner .shot-ph-in .icon { font-size: max(14px, 1.8cqw); }
.fp-shot .shot-ph { width: 100%; height: 100%; aspect-ratio: auto; }
.fp-shot.fp-admin .shot-ph-in, .fp-shot.fp-picker .shot-ph-in small { display: none; }
.fp-shot.fp-admin .shot-ph::after { content: "Product screenshot \2014 added before launch"; font-size: max(10px, 1cqw); font-weight: 600; }
.sc-img .shot-ph { border-radius: inherit; }
.pr-zoom-view .shot-ph { width: 1280px; max-width: none; }
@media (min-width: 1361px) { .pr-zoom-view .shot-ph { width: 100%; } }

/* ---------- Hero network: two providers (ChatGPT, Claude), not three ---------- */
@media (min-width: 901px) {
  .net .n-models.is-two .n-node:nth-child(1) { top: 29.26%; }   /* centre on y = 190 of 540 */
  .net .n-models.is-two .n-node:nth-child(2) { top: 58.89%; }   /* centre on y = 350 of 540 */
}
@media (max-width: 900px) { .n-models.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.n-admin-g dd small { display: block; margin-top: 1px; font-size: 11px; color: #8796b2; }
/* A pause for the network's motion (WCAG 2.2.2): it loops for as long as the hero is on screen. */
.net-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 16px; margin: 14px 0 0; padding: 12px 4px 0; border-top: 1px solid var(--nl); }
.net-foot .net-key { grid-column: 2; margin: 0; padding: 0; border: 0; }
.net-pause { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid var(--nl-2); border-radius: 99px; background: transparent; color: var(--on-navy-2); font-size: 12.5px; font-weight: 600; }
.net-pause:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.net-pause .icon { font-size: 13px; }
@media (max-width: 900px) { .net-foot { grid-template-columns: minmax(0, 1fr) auto; } .net-foot .net-key { grid-column: 1; justify-content: flex-start; } .net-pause { grid-column: 2; } }
@media (max-width: 560px) { .net-foot { grid-template-columns: minmax(0, 1fr); } .net-pause { grid-column: 1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .net-pause { display: none; } }
.motion-paused .final-art .moving, .motion-paused .pulse-dot::after { animation-play-state: paused; }

/* ---------- Provider row: the two supported providers, still (no marquee, so no 2.2.2 pause needed) ---------- */
.belt.is-static { -webkit-mask-image: none; mask-image: none; }
.belt.is-static .belt-track { animation: none; width: auto; justify-content: center; }
.belt.is-static .belt-set { flex-wrap: wrap; justify-content: center; gap: 22px 96px; padding: 0 32px; }
.belt.is-static .belt-item::before { content: none; }
.belt.is-static .belt-item small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--t2); }
.belt.is-static .belt-item > span { display: block; line-height: 1.25; }

/* ---------- 01 Model choice: two tabs ---------- */
.task-tabs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-meta .tm-ex { font-variant-numeric: tabular-nums; }

/* ---------- Product tour: two separate tools, not four ---------- */
.sc-apps.is-two { left: 24%; right: 24%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .sc-apps.is-two { left: 12%; right: 12%; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-apps.is-two .sc-app:nth-child(n) { display: block; } }

/* ---------- Start with how your team works: the real first steps ---------- */
.ob-conn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-conn li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); font-size: 14px; }
.ob-conn img { width: 16px; height: 16px; flex: none; }
.ob-conn b { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; }
.ob-conn small { display: block; font-size: 12px; color: var(--t2); }
.ob-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--protect-bg); color: var(--protect-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ob-ok .icon { font-size: 12px; }
.ob-people { list-style: none; margin: 0; padding: 0; display: grid; }
.ob-people li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #edf1f6; font-size: 14px; }
.ob-people li:first-child { border-top: 0; padding-top: 0; }
.ob-people .avatar { width: 28px; height: 28px; font-size: 11.5px; }
.ob-people b { font-weight: 550; }
.ob-people .badge { margin-left: auto; }
.fc-big small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--t2); }

/* ---------- Footer: the prototype's row, then the legal links and the hosting fact ---------- */
/* The hairline spans the content, not the wrap's side padding (32px, 20px on phones). */
.home .site-foot .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 18px; padding-top: 16px; background: linear-gradient(var(--hair), var(--hair)) no-repeat center top / calc(100% - 64px) 1px; }
@media (max-width: 640px) { .home .site-foot .foot-legal { background-size: calc(100% - 40px) 1px; } }
.foot-legal p { margin: 0; font-size: 13px; color: var(--t2); }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.foot-legal a { color: #3b4558; text-decoration: none; }
.foot-legal a:hover { color: var(--blue-text); }
.foot-row a[aria-current="page"], .foot-legal a[aria-current="page"] { color: var(--t1); font-weight: 600; }
@media (max-width: 640px) { .foot-legal nav { margin-left: 0; } }

/* ---------- Analytics consent bar (consent.js), in the Jalten style ---------- */
.cbar { position: fixed; z-index: 75; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cbar__t { margin: 0; grid-column: 1; }
.cbar__t strong { color: var(--ink); font-weight: 600; }
.cbar__a { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }
.cbar__more { grid-column: 1; justify-self: start; font-size: 13px; font-weight: 600; color: var(--harbour-strong); }
.cbar .btn-ghost { background: var(--surface); }
@media (max-width: 640px) { .cbar { grid-template-columns: minmax(0, 1fr); } .cbar__a { grid-column: 1; grid-row: auto; } .cbar__a .btn { flex: 1; } }

/* ---------- Pages built on the download page's hero: contact, security, privacy, terms ---------- */
.legal .dl-hero h1, .contact-page .dl-hero h1 { max-width: 20ch; }
.draft-note { display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 0 auto 8px; padding: 12px 16px; border-radius: 12px; background: var(--amber-bg); border: 1px solid var(--amber-line); color: #5c3606; font-size: 14px; font-weight: 600; line-height: 1.45; }
.draft-note .icon { flex: none; margin-top: 2px; color: var(--amber); font-size: 16px; }
.dl-hero .dl-meta { margin: 14px auto 0; font-size: 13.5px; color: var(--t2); }

/* margin, not padding: .home .wrap sets the side padding with a shorthand that would undo it */
.doc-wrap { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.doc-toc { position: sticky; top: 90px; padding: 18px 18px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); }
.doc-toc .k { margin: 0 0 8px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: block; padding: 6px 8px; border-radius: 6px; color: #3b4558; text-decoration: none; font-size: 14px; line-height: 1.35; }
.doc-toc a:hover { background: var(--page); color: var(--t1); }
.doc { padding: clamp(24px, 3.4vw, 44px) clamp(22px, 4vw, 52px); border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(16, 27, 50, 0.04), 0 20px 50px rgba(16, 27, 50, 0.06); color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.doc > :first-child { margin-top: 0; }
.doc h2 { margin: 40px 0 10px; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; color: var(--t1); scroll-margin-top: 90px; }
.doc h3 { margin: 26px 0 6px; font-size: 16.5px; letter-spacing: -0.015em; color: var(--t1); scroll-margin-top: 90px; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--blue-bright); }
.doc strong, .doc b { color: var(--t1); font-weight: 600; }
.doc code { font-family: var(--mono); font-size: 0.86em; padding: 1px 5px; border-radius: 4px; background: var(--canvas-2); border: 1px solid var(--line); color: var(--ink-2); }
.doc a { color: var(--blue-text); font-weight: 550; }
.doc .stmt { margin: 16px 0; padding: 14px 16px; border-radius: 12px; background: var(--sky-2); border: 1px solid var(--sky-line); color: var(--t1); }
.doc .stmt > :last-child { margin-bottom: 0; }
.doc .doc-part { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--hair); }
.doc .doc-part > .k { margin: 0 0 6px; }
.doc .doc-meta { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--t2); }
.doc .doc-contact { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--page); border: 1px solid var(--hair); }
.doc .doc-contact p { margin: 0; font-size: 14px; color: var(--t2); }
.cchoice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 16px; }
.cchoice__s { font-size: 14px; color: var(--t2); }
@media (max-width: 900px) { .doc-wrap { grid-template-columns: minmax(0, 1fr); } .doc-toc { position: static; } }

/* The extension's data-flow diagram, kept on /security for Browser Protection, in Jalten colours. */
.eflow { display: grid; gap: 10px; margin: 16px 0 20px; padding: 18px; border-radius: 14px; background: var(--page); border: 1px solid var(--hair); font-size: 14px; }
.eflow__zone, .eflow__out, .eflow__bcard { padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hair); }
.eflow__zonelabel, .eflow__outlabel, .eflow__blabel { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue-text); }
.eflow__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eflow__steps li { display: flex; gap: 8px; margin: 0; }
.eflow__steps b { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--protect-bg); color: var(--protect-text); font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
.eflow__out p, .eflow__bcard p { margin: 0 0 6px; }
.eflow__arrow { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: var(--t2); }
.eflow__arrow svg { width: 16px; height: 16px; color: var(--blue-bright); }
.eflow__branch { margin-top: 6px; padding-top: 12px; border-top: 1px dashed #b9c6d6; }
.eflow__never { color: var(--t1); }

/* ---------- Contact ---------- */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3vw, 32px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.ct-card { padding: clamp(22px, 3vw, 32px); border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(16, 27, 50, 0.04), 0 20px 50px rgba(16, 27, 50, 0.06); }
.ct-form { display: grid; gap: 16px; }
.ct-form .field > label { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-opt { margin-left: 4px; font-weight: 500; color: var(--t2); }
.field-note { margin: 2px 0 0; font-size: 13px; color: var(--amber); }
.ct-ea { display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--sky-2); border: 1px solid var(--sky-line); }
.ct-ea[hidden] { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choices legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--t1); }
.choices .check { align-items: center; }
.choice-other { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.choice-other .input { width: 180px; min-height: 34px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-form .btn-primary { justify-self: start; min-width: 160px; }
.form-msg { margin: 0; font-size: 14px; color: var(--t2); }
.form-msg:empty { display: none; }
.form-msg.is-bad { padding: 10px 12px; border-radius: 10px; background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red); font-weight: 550; }
.ct-aside { display: grid; gap: 16px; }
.ct-next { padding: 22px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); }
.ct-next h2 { font-size: 18px; letter-spacing: -0.02em; }
.ct-next ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ct-next li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--t2); }
.ct-next li b { display: block; color: var(--t1); font-weight: 600; }
.ct-next .n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sky); color: var(--blue-text); font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.ct-mail { display: flex; gap: 10px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--sky-2); border: 1px solid var(--sky-line); font-size: 14.5px; color: var(--t1); }
.ct-mail .icon { flex: none; margin-top: 3px; color: var(--blue-bright); }
.ct-mail a { color: var(--blue-text); font-weight: 600; word-break: break-word; }
.ct-sent { max-width: 560px; margin: 0 auto clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 44px); border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); text-align: center; box-shadow: 0 1px 2px rgba(16, 27, 50, 0.04), 0 20px 50px rgba(16, 27, 50, 0.06); }
.ct-sent[hidden] { display: none; }
.ct-tick { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky); color: var(--blue-text); font-size: 24px; }
.ct-sent h1 { margin: 16px 0 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.04em; color: var(--t1); }
.ct-sent h1:focus { outline: none; }
.ct-sent p { margin: 12px auto 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--t2); }
.ct-sent .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.contact-page.is-sent .dl-hero, .contact-page.is-sent .ct-grid { display: none; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.download .dl-hero h1 { text-wrap: balance; }
@media (max-width: 560px) { .ct-two { grid-template-columns: minmax(0, 1fr); } .ct-form .btn-primary { width: 100%; } }

/* ---------- Download: one platform, laid out across the width ---------- */
.dl-platforms.is-single { grid-template-columns: minmax(0, 1fr); }
.plat-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 48px); }
.plat-wide .plat-top { grid-column: 1 / -1; }
.plat-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.plat-avail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.plat-state { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r); border: 1px dashed #b9c6d6; background: var(--page); color: var(--t1); font-size: 15px; font-weight: 600; }
.plat-state .icon { color: var(--blue-bright); }
.plat-sum { margin: 0; font-size: 13.5px; color: var(--t2); }
.plat-sum code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.mdm-list.is-real li { align-items: flex-start; }
.mdm-list.is-real .icon { flex: none; margin-top: 3px; color: var(--blue-bright); }
.mdm-list.is-real span { display: block; }
.mdm-list.is-real small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--t2); font-weight: 400; }
/* The prototype's closing note ("Prototype: nothing on this page downloads") is gone; its space stays. */
.download .dl-company.wrap:last-child { margin-bottom: clamp(56px, 7vw, 104px); }
@media (max-width: 900px) { .plat-wide { grid-template-columns: minmax(0, 1fr); } }

html.dialog-open { overflow: hidden; }

/* ---------- Accessibility gate (PLAN.md §10.4): contrast, kept visually equivalent ---------- */
/* The section numbers (01, 02…) at 85% opacity fell just under 4.5:1 on white and on sky: full strength. */
.home .kicker .num { opacity: 1; }
/* White on the bright blue is 4.1:1. The closing card's button takes the primary blue every other button uses (4.8:1). */
.final .btn-primary { background: var(--blue); border-color: var(--blue); }
.final .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

/* ---------- Website first (owner, 14 Oct 2026): the browser app now, the Mac app "coming soon" ----------
   The hero's secondary line under its two actions: a text link to the browser app and a "Mac app coming soon"
   tag in the style of the download page's own .plat-tag (a status, never a button). Either part may be left out
   at build time (scripts/lib/release-blocks.mjs). */
.hero-alt { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 16px auto 0; }
.hero-alt:empty { display: none; }
.hero-alt .text-link { min-height: 32px; }
.soon-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; border: 1px dashed #b9c6d6; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--t2); white-space: nowrap; }
/* /download: the browser card leads, so it sits directly under the hero. */
.download .dl-browser.wrap:first-of-type { margin-top: 0; }
.download .dl-browser + .dl-platforms { margin-top: 20px; }
/* The header's browser link is longer than the "Download" it replaced: just above the phone-menu breakpoint the
   links tighten a little so none of them wraps (checked at 981 px). */
@media (min-width: 981px) and (max-width: 1060px) { .home .site-nav a { padding-left: 9px; padding-right: 9px; } }