/* The Hebrew article page, time-saved.html (owner, 2026-11-01). about.html has its own about.css.
   They take the palette the landing actually renders with: the "midnight theme"
   block at the end of style.css, which overrides the air-blue tokens at its top
   (and DESIGN.md's description of them). A reader who clicks through from the
   landing must not land on a different-looking site. Light only, like the landing.
   The CSP is style-src 'self', so no style attribute may appear on either page. */
:root{
  --paper:#f6f9fa; --panel:#ffffff; --mist:#eef6f7; --sky:#eef8fa; --ink:#102938; --muted:#526571; --line:#d9e5e9;
  --brand:#087f79; --brand-deep:#06252b; --brand-soft:#def5f2; --action:#20bbb0; --action-hover:#35c9be;
  --navy:#0b1826; --navy-ink:#d4e1e8; --navy-line:#29414d; --on-navy:#69ddd3; --mint:#a1ede5;
  --teal:#087f79; --teal-soft:#edf8f6; --logo-teal:#0993a4;
  --manual:#8a6a55;
  --ok:#0a7d5a; --bad:#b0362c; --bad-soft:#fbeceb;
  --sans:Rubik,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  --col:68ch; --max:1120px; --gutter:clamp(16px,4vw,48px);
  /* The names the stopwatch's styles were written against. */
  --bg:var(--sky); --brand-ink:var(--brand-deep);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--sans);-webkit-text-size-adjust:100%}
/* One sky behind the page, as on the landing (style.css) and About (owner, 2026-11-02). */
body{isolation:isolate;background:#f6fafc}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:#edf5f9 url("./shots/cloud-journey-background.webp") no-repeat center/cover}
@media (max-width:600px){body::before{background-position:68% center}}
h1,h2,h3,p,figure,ul,ol,dl{margin:0}
h1,h2,h3{line-height:1.25;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(23px,2.8vw,32px);font-weight:750;letter-spacing:-.01em}
h3{font-size:18px;font-weight:700}
p,li{color:var(--muted)}
strong,b{color:var(--ink)}
a{color:var(--brand);text-underline-offset:4px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.wrap{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto}
.col{width:min(var(--col),calc(100% - 2*var(--gutter)));margin-inline:auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.eyebrow{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.source{font-size:13px;line-height:1.6;color:var(--muted)}
.note{font-size:13px;color:var(--muted)}

/* Header: the landing's navy bar and its logo, plus the two pages and the trial. */
.top{background:var(--navy);border-bottom:1px solid var(--navy-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;min-height:44px}
.wordmark{display:block;width:auto;height:22px}
.wm-letters{fill:#f6f9fa}
.wm-chevrons{fill:var(--logo-teal)}
.site-nav{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap;font-size:15px;font-weight:600}
.site-nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:#f6f9fa;text-decoration:none}
.site-nav a:not(.btn):hover{color:var(--on-navy)}
.site-nav a[aria-current="page"]{color:var(--on-navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.site-nav .btn{min-height:40px;padding:6px 16px}
.top :focus-visible{outline-color:var(--on-navy)}
@media (max-width:600px){.wordmark{height:18px}.site-nav{gap:4px 16px;font-size:14px}}

/* Buttons: sky-blue primary with a dark-blue label, as on the landing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 20px;border-radius:6px;
  border:1px solid var(--brand);background:transparent;color:var(--brand);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--brand-deep)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--brand-deep)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn.primary[disabled]:hover{background:var(--action);border-color:var(--action);color:var(--brand-deep)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* The navy regions (About's opening, both closes) carry the landing's midnight waves. */
.night{background:var(--navy) url("./shots/midnight-waves.webp") no-repeat center/cover;color:var(--navy-ink)}
.night h1,.night h2{color:#fff}
.night p{color:var(--navy-ink)}
.night .eyebrow{color:var(--on-navy)}
.night .btn:not(.primary){color:#fff;border-color:var(--on-navy)}
.night .btn:not(.primary):hover{color:var(--brand-deep);background:#d5f6f2;border-color:#d5f6f2}
.night :focus-visible{outline-color:var(--on-navy)}
.close{border-radius:12px;padding:32px 28px;display:grid;gap:14px}

/* Footer: white, as on the landing, with the contract and the accessibility statement. */
.foot{border-top:1px solid var(--line);background:transparent}
.foot .wrap{padding-block:22px 28px;display:grid;gap:6px}
.foot p{font-size:13px}
.foot .foot-brand{font-size:14px;color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;font-size:13px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.foot-links a:hover{color:var(--brand-deep)}

/* ---------- The article (time-saved.html) ---------- */
.article{display:grid;gap:52px;padding-block:44px 64px}
.article-head{display:grid;gap:14px}
.lead{font-size:19px;line-height:1.75;color:var(--ink)}
.q{font-size:clamp(25px,3.4vw,34px)}
.block{display:grid;gap:14px}
.pain{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pain li{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--sky);color:var(--ink);font-weight:700}
.cmp th:first-child,.cmp td:first-child{white-space:normal;min-width:9em}
.cmp td{white-space:normal}
@media (max-width:520px){.cmp th:first-child,.cmp td:first-child{min-width:6.5em}}
.cmp td.app{color:var(--teal);font-weight:700}
.cmp td.man{color:var(--manual);font-weight:700}
.calc-box{padding:22px;display:grid;gap:14px;background:var(--sky)}
.calc-box label{display:grid;gap:6px;max-width:20em;font-weight:700;color:var(--ink)}
.calc-box input{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:16px var(--sans);width:9em}
.calc-out{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:18px;color:var(--ink)}
.calc-out li{color:var(--ink)}
.calc-out .man strong{color:var(--manual)}
.calc-out .app strong{color:var(--teal)}
.faq-list{display:grid;gap:8px}
.faq-item{border:1px solid var(--line);border-radius:8px;background:#fff}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:50px;padding:12px 16px;cursor:pointer;list-style:none;font-weight:700;color:var(--ink);line-height:1.5}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;line-height:1;font-weight:400;color:var(--teal)}
.faq-item[open]{border-color:var(--teal);background:var(--teal-soft)}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 16px 14px;max-width:var(--col);color:var(--ink)}

/* ---------- The stopwatch (inside the article) ---------- */
.sw{padding:24px;display:grid;gap:20px;container-type:inline-size}
.sw-head{display:grid;gap:8px;max-width:var(--col)}
.sw-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{min-width:44px;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.chip[disabled]{opacity:.5;cursor:not-allowed}
.sw-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
/* Inside the article's column the passport goes above the form. */
@container (max-width:860px){.sw-stage{grid-template-columns:minmax(0,1fr)}.sw-stage .pp{max-width:520px}}

/* The specimen data page: drawn, not an image, so its MRZ is computed from its own fields.
   Laid out like a modern data page; the state stays the fictional UTO.
   Soft on purpose: pale paper, faint pattern, no red anywhere. Its size is approved — keep it. */
.pp{margin:0;min-width:0;border-radius:12px;border:1px solid var(--line);background:var(--mist);overflow:hidden;container-type:inline-size}
.pp-cover{min-height:300px;display:grid;place-content:center;gap:6px;text-align:center;padding:24px}
.pp-page{position:relative;color:#2a3b50;font-family:Arial,sans-serif;
  background:repeating-radial-gradient(circle at 80% 28%,rgba(70,110,160,.035) 0 1px,transparent 1px 10px),linear-gradient(170deg,#f6f8fc,#edf2f8)}
.pp-band{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 14px;background:#e1e9f3;color:#3b5577;border-bottom:1px solid #d3deeb;font-size:12px;font-weight:700;letter-spacing:.1em}
.pp-band span:last-child{letter-spacing:0}
.pp-top{display:flex;gap:4px 22px;padding:10px 14px 0}
.pp-body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:10px 14px 14px}
.pp-photo-wrap{align-self:start;display:grid;gap:4px}
.pp-photo{display:block;width:64px;height:auto;border-radius:6px}
.pp-photo rect{fill:#dbe3ee}
.pp-photo circle,.pp-photo path{fill:#a7b6c9}
.pp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin:0}
.pp-fields .wide{grid-column:1/-1}
.pp-fields div,.pp-top div{min-width:0}
.pp dt{font-size:9px;line-height:1.3;color:#7586a0}
.pp dt bdi{font-family:var(--sans)}
.pp dd{margin:0;font-size:clamp(11px,3.3cqi,14px);font-weight:600;color:#22344b;white-space:nowrap}
.pp-fields .num-row{margin-top:2px;padding-top:7px;border-top:1px solid #dde5ef}
.pp-fields .num-row dd{font-size:clamp(12px,3.8cqi,16px);letter-spacing:.05em}
.pp-spec{text-align:center;color:#8a9ab0;font-weight:700;font-size:8px;line-height:1.3;letter-spacing:.06em}
/* 44 monospace characters must fit the card's width: about 0.66em each with the letter spacing. */
.pp-mrz{margin:0;padding:10px 14px 12px;background:#f9fafc;border-top:1px solid #e1e8f1;font:min(12.5px,calc((100cqi - 30px) / 30.5))/1.5 var(--mono);letter-spacing:.06em;color:#3a4a5e;white-space:pre;overflow:hidden}

.sw-form{min-width:0;display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.sw-form-title{font-weight:700;color:var(--ink)}
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){.sw-grid{grid-template-columns:minmax(0,1fr)}}
.sw-grid label{display:grid;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.sw-grid input{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:15px var(--mono);direction:ltr;text-align:left}
.sw-grid input:disabled{opacity:.6}
.sw-grid label.wrong input{border-color:var(--bad);background:var(--bad-soft)}
.sw-grid label.right input{border-color:var(--ok)}
.sw-grid .expect{font:12px var(--mono);color:var(--bad);direction:ltr;text-align:left}

.sw-result{display:grid;gap:12px;padding:18px;border-radius:10px;background:var(--mist);border:1px solid var(--line)}
.sw-result p{color:var(--ink)}
.sw-stats{display:flex;flex-wrap:wrap;gap:12px 28px}
.sw-stats div{display:grid}
.sw-stats b{font-size:28px;color:var(--ink);font-variant-numeric:tabular-nums}
.sw-stats span{font-size:13px;color:var(--muted)}
.sw-runs{display:grid;gap:10px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:700}
td{color:var(--ink)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.foot-links span{display:inline-flex;align-items:center;min-height:44px}

/* Glass on the sky (owner, 2026-11-04): the landing's cards, on the same sky.
   The specimen passport inside the stopwatch keeps its own approved look. */
.panel, .faq-item {
  background: rgb(255 255 255 / .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / .9);
  border-radius: 16px;
  box-shadow: 0 12px 28px -18px rgb(11 24 38 / .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .faq-item { background: rgb(255 255 255 / .92); }
}
.faq-item[open] { border-color: var(--teal); }