/* Public site layout. Components and tokens come from /web/ui/. Logical properties only. */
/* The brand's fonts, palette and type roles are in /brand.css (loaded before this file; the owner console uses it too). */
:root {
  /* one scale (px): 13 14 15 17 lead 20 h2 h1; Hebrew carries hierarchy by size and weight only */
  --fs-xs: 13px; --fs-sm: 14px; --fs-ui: 15px; --fs-body: 17px; --fs-lead: clamp(18px, .5vw + 16px, 21px);
  --fs-title: 17px; --fs-h3: 20px; --fs-h2: clamp(28px, 1.6vw + 20px, 40px); --fs-h1: clamp(38px, 3.4vw + 22px, 64px);
  --lh-ui: 1.45; --lh-body: 1.65; --lh-title: 1.25; --lh-display: 1.12;
  --fw-reg: 400; --fw-med: 500; --fw-bold: 600; --fw-head: 700;
  --band: clamp(56px, 8vw, 104px);
  --bar-h: 64px;
}
.i18n-pending body { visibility: hidden; }
html { scroll-padding-block-start: calc(var(--bar-h) + env(safe-area-inset-top) + var(--s4)); }
/* Hide only the landing page scrollbar; scrolling remains native for touch, wheel and keyboard. */
html.page-index { scrollbar-width: none; }
html.page-index::-webkit-scrollbar { display: none; }
body { min-block-size: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.btn-lg { min-block-size: 52px; padding-inline: var(--s5); font-size: var(--fs-body); border-radius: var(--r-lg); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.h2 { font: var(--fw-head) var(--fs-h2)/var(--lh-title) var(--font-display); margin: 0 0 var(--s5); text-wrap: balance; }
.hand-accent { font-family: var(--font-hand); font-weight: 400; font-synthesis: none; }

/* skip link */
.skip { position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s2); z-index: 60; translate: 0 -200%; }
.skip:focus { translate: 0 0; }

/* ---------- header ---------- */
/* The bar stays at the top of the window while the page scrolls, always the same height. Its ground is the page colour,
   a little see-through with a soft blur where the browser can blur; without blur, or when the visitor asked for less
   transparency, it is opaque. The open menu hangs below it (the bar never clips). */
.site-bar { position: sticky; inset-block-start: 0; z-index: 40; background: var(--bg); border-block-end: 1px solid var(--line); padding-block-start: env(safe-area-inset-top); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-bar { background: var(--bar-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
@media (prefers-reduced-transparency: reduce) { .site-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bar-in { display: flex; align-items: center; gap: var(--s2); block-size: var(--bar-h); max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
/* The logo: one drawing everywhere (the same strokes as web/brand.js YADI and tools/gen_icons.py), never mirrored, never
   typed in a font. The product's name stays in the page as text for readers and search (visually hidden beside the
   drawing). A brand without this logo (web/brand.json "logo" not "yadi") shows its name as text instead. */
.brand { display: inline-flex; align-items: center; gap: 7px; min-block-size: var(--tap); text-decoration: none; color: var(--fg); direction: ltr; }
.brand .logo { flex: none; inline-size: 82px; block-size: 36px; overflow: visible; }
.wordmark { font: var(--fw-head) 20px/1 var(--font-ui); white-space: nowrap; }
:root:not(.brand-text) .brand .wordmark { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand-text .brand .logo { display: none; }
.nav { display: flex; gap: 2px; margin-inline-start: var(--s5); }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: var(--s3); border-radius: var(--r); color: var(--muted); text-decoration: none; font-size: var(--fs-ui); }
.nav a:hover { color: var(--fg); background: var(--chip); }
.nav a[aria-current="page"] { color: var(--fg); font-weight: var(--fw-bold); }
/* The bar (Roy 05/10): the logo at the left edge in both languages; the account (sign in, white, at the top right; the
   main action beside it) is one group, the links another, the small tools (share, day or night) a third beside the logo.
   English: logo, links ... tools, try, sign in. Hebrew, from the right: sign in, try, links ... tools, logo. */
.bar-tools { position: relative; margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.bar-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: var(--s2); }
[dir="ltr"] .bar-actions > .acct { order: 2; }
[dir="ltr"] .bar-actions > .menu { order: 3; }
[dir="rtl"] .bar-in > .bar-actions { order: 0; margin-inline-start: 0; }
[dir="rtl"] .bar-in > .nav { order: 1; }
[dir="rtl"] .bar-in > .bar-tools { order: 2; }
[dir="rtl"] .bar-in > .brand { order: 3; margin-right: var(--s2); }   /* (physical: .brand itself is ltr) */
.bar-actions > .acct { background: #ffffff; color: #1b1c1d; border: 1px solid var(--line); }
.bar-actions > .acct:hover { background: #f2f2f0; color: #1b1c1d; }
.bar-share svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bar-share-done { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; padding: 4px 10px; border-radius: var(--r); background: var(--fg); color: var(--bg); white-space: nowrap; z-index: 50; }
.bar-share-done:empty { display: none; }
.lang-select { inline-size: auto; min-block-size: var(--tap); padding-inline: var(--s3) var(--s6); border-color: transparent; background-color: transparent; font-size: var(--fs-ui);
               -webkit-appearance: none; appearance: none; cursor: pointer;
               background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
               background-repeat: no-repeat; background-size: 16px; background-position: right 10px center; }
[dir="rtl"] .lang-select { background-position: left 10px center; }
.lang-select:hover { background-color: var(--chip); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="graphite"] .theme-toggle .i-sun { display: block; }
:root[data-theme="graphite"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .i-moon { display: none; }
}
.menu { display: none; position: static; }
.menu > summary { list-style: none; }
.menu[open] > summary { background: var(--chip); }
.menu-sheet { position: absolute; inset-inline: var(--s3); inset-block-start: calc(var(--bar-h) + env(safe-area-inset-top) + 6px); max-block-size: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 24px); overflow-y: auto; display: grid; gap: 2px; padding: var(--s2);
              background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--edge), var(--shadow-md); }
.menu-sheet > a { display: flex; align-items: center; min-block-size: 48px; padding-inline: var(--s3); border-radius: var(--r); text-decoration: none; font-size: var(--fs-body); }
.menu-sheet > a:hover, .menu-sheet > a[aria-current="page"] { background: var(--chip); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3) var(--s1); border-block-start: 1px solid var(--line); margin-block-start: var(--s1); }
.menu-row .lang-pick { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.menu-row .lang-select { border-color: var(--line); color: var(--fg); }
@media (max-width: 899px) {
  .nav, .bar-actions > .lang-pick, .bar-tools > .theme-toggle { display: none; }
  .menu { display: block; }
}
@media (max-width: 380px) { .bar-actions .cta { padding-inline: var(--s3); font-size: var(--fs-sm); } }

/* ---------- footer ---------- */
.site-foot { border-block-start: 1px solid var(--line); margin-block-start: var(--s8); padding-block-end: env(safe-area-inset-bottom); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); max-inline-size: var(--page-max); margin-inline: auto; padding: var(--s5) var(--gutter); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s1); }
.foot-nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: var(--s2); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.foot-nav a:hover { color: var(--fg); text-decoration: underline; }
.foot-lang { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.foot-lang .lang-select { border-color: var(--line); color: var(--fg); font-size: var(--fs-sm); }
.foot-full { margin-block-start: 0; }
.foot-grid { display: grid; gap: var(--s6); max-inline-size: var(--page-max); margin-inline: auto; padding: var(--s7) var(--gutter) var(--s6); }
.foot-brand { display: grid; gap: var(--s1); justify-items: start; align-content: start; }
.foot-cols { display: grid; gap: var(--s5) var(--s6); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.foot-h { margin: 0 0 var(--s1); padding-inline: var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-ui); color: var(--fg); }
.foot-col .foot-nav { display: grid; gap: 0; justify-items: start; }
.foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); }
.foot-tools .theme-toggle { font-weight: var(--fw-reg); font-size: var(--fs-sm); }
/* the language (Roy 04/10: in the footer, not the header) and sharing Yadi: one quiet row */
.foot-in .foot-tools { padding: 0; border: 0; }
.foot-share { min-block-size: var(--tap); font-size: var(--fs-sm); color: var(--muted); }
.foot-share:hover { color: var(--fg); }
.foot-share svg { inline-size: 18px; block-size: 18px; }
.foot-share-done:empty { display: none; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .foot-tools { grid-column: 1 / -1; } }

/* ---------- landing ---------- */
/* one rhythm: a band is a section; its head is eyebrow, title, lead; everything start-aligned */
.band { padding-block: var(--band); }
.sec-head { display: grid; gap: var(--s3); margin-block-end: var(--s7); max-inline-size: 46rem; }
.eyebrow { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); line-height: var(--lh-ui); }
.h2 { margin: 0; }
.h2 em, .display em { font-style: normal; color: var(--muted); }
.value .h2 em { display: block; }
.sec-lead { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--muted); }
.more { display: inline-flex; align-items: center; min-block-size: var(--tap); font-size: var(--fs-ui); color: var(--fg); font-weight: var(--fw-bold); }
.ic { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.band h3 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: var(--fw-bold); }
.band li > p { margin: 0; color: var(--muted); line-height: var(--lh-body); }
.m { font-family: var(--font-math); font-size: 1.06em; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.m sup, .m sub { font-size: .7em; line-height: 0; }

/* hero: the words, and beside them the demo */
.hero { display: grid; gap: var(--s7); align-items: start; padding-block: clamp(28px, 4vw, 56px) var(--band); }
.hero-copy { display: grid; gap: var(--s5); justify-items: start; }
.free-line { margin: 0; }
.free-chip { min-block-size: 32px; padding-inline: 14px; font-size: var(--fs-sm); }
.display { font: var(--fw-head) var(--fs-h1)/1.16 var(--font-display); margin: 0; text-wrap: balance; max-inline-size: 13em; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--muted); margin: 0; max-inline-size: 30rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.hero-free { margin: 0; font-size: var(--fs-ui); color: var(--muted); line-height: var(--lh-ui); }
.hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-block-start: var(--s4); border-block-start: 1px solid var(--line);
               font-size: var(--fs-sm); color: var(--muted); inline-size: 100%; }
.hosts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--fg); }
.hosts li { display: inline-flex; align-items: center; gap: var(--s2); font-weight: var(--fw-bold); }
.hs-more { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--fg); }
/* desktop: the iPad takes the hero's other column, from the top of the words to about where they end (Roy 30/09, round 3) */
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: start; }
  .hero-copy { padding-block-start: var(--s2); }
}

/* the demo: the notebook itself in a small iPad (site/appshot.js puts the real app's bar and page in the screen), two
   examples on a compact switch, the request and send under it. The frame's size comes from the column's width alone
   (4:3, an iPad on its side), so the example, the writing and the zoom never change it. */
.demo { margin: 0; min-inline-size: 0; display: grid; gap: var(--s3); inline-size: 100%; scroll-margin-block-start: calc(var(--bar-h) + var(--s4)); }
@media (min-width: 700px) and (max-width: 999px) { .demo { max-inline-size: 720px; justify-self: center; } }
/* (overflow-anchor: WebKit's scroll anchoring would move the WINDOW to follow ink scrolled inside the screen) */
.demo, .ipad, .ipad-screen { overflow-anchor: none; }
.ipad-screen { position: absolute; inset: var(--bezel); border-radius: clamp(10px, 2.8vw, 18px); overflow: hidden; background: #f1f1ef; cursor: zoom-in; }
.ipad-screen:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* before the script (and without it): the same page as a light picture under a plain bar the height of the app's */
.demo-still { position: absolute; inset: 0; padding-block-start: 6.33%; background: #fff; }
.demo-still::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 6.33%; background: #fff; border-block-end: 1px solid #e5e5e2; }
.demo-page { display: block; inline-size: 100%; block-size: 100%; }
.js .demo-page g + g { display: none; }        /* with script the page starts blank (only its ruled lines); send writes it */
/* the request: what was asked in the chat, with the file it came with; sending writes the page above */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "att att" "msg send"; align-items: center; gap: var(--s2) var(--s3);
           padding: 10px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.compose-att { grid-area: att; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-inline-size: 0; }
.compose-file { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; max-inline-size: 100%; padding: 5px 9px; border-radius: 8px; background: var(--chip); font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); }
.compose-file .ic { inline-size: 14px; block-size: 14px; flex: none; }
.compose-file b { font-weight: var(--fw-bold); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-img { display: block; flex: none; inline-size: 84px; aspect-ratio: 120 / 72; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.08); }
.compose-img[hidden] { display: none; }
.compose-img svg { display: block; inline-size: 100%; block-size: 100%; }
.compose-msg { grid-area: msg; min-inline-size: 0; margin: 0; padding-inline: 4px; color: var(--fg); font: var(--fs-sm)/1.45 var(--font-ui); }   /* a fixed request: the demo answers only this */
/* send: a labelled pill; nothing breathes around it */
.demo-send { grid-area: send; position: relative; align-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
             inline-size: auto; min-inline-size: 92px; block-size: 44px; min-block-size: 44px; padding-inline: 14px 18px; border-radius: 999px; font-weight: var(--fw-bold); }
[dir="rtl"] .demo-send { padding-inline: 18px 14px; }
.demo-send .ic { inline-size: 18px; block-size: 18px; stroke-width: 2.4; flex: none; }
.demo-status { margin: 0; min-block-size: 1.5em; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); text-align: center; }
@media (max-width: 480px) { .compose-img { inline-size: 64px; } }

/* value: one question, one claim, three short points */
.value { display: grid; gap: var(--s7); align-items: start; }
.value .h2 { font-size: clamp(30px, 2.6vw + 16px, 46px); line-height: 1.2; }
.value-copy { display: grid; gap: var(--s4); justify-items: start; }
.value-copy p { margin: 0; }
.value-body { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--muted); max-inline-size: 32rem; }
.value-access { font-weight: var(--fw-bold); line-height: var(--lh-body); }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.points li { display: grid; gap: var(--s1); padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }
@media (min-width: 900px) { .value { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); } }

/* reviews: the owner's design (handoff actual-site-preview.html, "voices"): a quiet band, three columns without boxes, a
   large quote, the person under it, and the signature they drew under that. Real people only (site/reviews.json or the
   owner console); the section is not there while nothing is published. A preview build may show marked samples. */
.reviews { border-block: 1px solid var(--line); background: var(--surface); }
.reviews-head { margin-block-end: var(--s6); display: grid; gap: 10px; justify-items: start; }
.reviews-note { margin: 0; font-size: 22px; line-height: 1.5; color: var(--muted); }
:root[lang="en"] .reviews-note { font-size: var(--fs-ui); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.review-grid[data-count="1"] { grid-template-columns: minmax(0, 36rem); }
.review-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review { margin: 0; display: flex; flex-direction: column; gap: 28px; justify-content: space-between; padding: 0 0 6px; min-inline-size: 0; position: relative; }
.review blockquote { margin: 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.65; color: var(--fg); overflow-wrap: anywhere; }
.review figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; font-size: 15px; color: var(--fg); }
.review-photo { grid-row: span 2; inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; background: var(--chip); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 20px; color: var(--muted); overflow: hidden; }
.review-name { align-self: end; font-weight: var(--fw-bold); line-height: 1.35; overflow-wrap: anywhere; min-inline-size: 0; }
.review-ctx { align-self: start; margin-block-start: 3px; font-size: 13px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; min-inline-size: 0; }
.review figcaption > .review-name:last-child { grid-row: span 2; align-self: center; }
/* the person's own signature: graphite, 150 x 50 (3:1, the box it was drawn in), written once */
.review-sig { display: block; inline-size: 150px; max-inline-size: 100%; aspect-ratio: 3 / 1; block-size: auto; color: var(--fg); direction: ltr; overflow: visible; margin-block-start: -8px; }
.review-sig path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.review-mark { align-self: flex-start; margin-block-end: -16px; }
.review-siglabel { font-size: 11px; color: var(--muted); margin-block-start: -24px; }
@media (max-width: 760px) {
  .review-grid, .review-grid[data-count] { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .review + .review { border-block-start: 1px solid var(--line); padding-block-start: 28px; }
}

/* questions */
.faq-more { margin: var(--s5) 0 0; }

/* the close */
.final { padding-block: var(--band); display: grid; justify-items: start; gap: var(--s5); }
.display-2 { font: var(--fw-head) var(--fs-h2)/var(--lh-title) var(--font-display); margin: 0; text-wrap: balance; }

/* ---------- inner pages ---------- */
.page-head { padding-block: clamp(36px, 5vw, 72px) var(--s5); }
.page-head h1 { font: var(--fw-head) var(--fs-h1)/var(--lh-display) var(--font-display); margin: 0 0 var(--s3); }
.page-head .lead { max-inline-size: 48ch; }
.draft { display: inline-block; margin-block-start: var(--s3); padding: 4px 10px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.prose { max-inline-size: var(--measure); }
.prose h2 { font-size: var(--fs-h3); margin: var(--s6) 0 var(--s2); }
.prose p, .prose li { color: var(--fg); line-height: var(--lh-body); }
.prose p { margin: 0 0 var(--s3); }
.prose ol, .prose ul { padding-inline-start: 1.3em; margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.prose .updated { color: var(--muted); font-size: var(--fs-sm); }
/* the legal pages' tables (privacy retention, subprocessors); never wider than the page */
.prose .table-wrap { overflow-x: auto; margin: 0 0 var(--s4); }
.legal-table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); }
.legal-table th, .legal-table td { text-align: start; vertical-align: top; padding: var(--s2) var(--s3); border-block-end: 1px solid var(--line); }
.legal-table thead th { color: var(--muted); font-weight: var(--fw-bold); }
.legal-table tbody th { font-weight: var(--fw-bold); }
@media (max-width: 599px) {   /* a phone: each row becomes a short block, the row's name first */
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding-block: var(--s2); border-block-end: 1px solid var(--line); }
  .legal-table th, .legal-table td { display: block; border: 0; padding: var(--s1) 0; }
}
.toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: 0 var(--s4); padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: var(--s3); border-radius: var(--r-pill); background: var(--chip); text-decoration: none; font-size: var(--fs-sm); }
.rows { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: 52px; border-block-end: 1px solid var(--line); }
/* a phone: a long status chip wraps under its label instead of pushing the row off the screen (audit 05/10) */
.rows li { flex-wrap: wrap; row-gap: 6px; padding-block: 6px; } .rows li .chip { white-space: normal; line-height: 1.3; padding-block: 4px; max-inline-size: 100%; }
.support-line { color: var(--fg); }

/* plans */
.plans { display: grid; gap: var(--s4); align-items: stretch; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: var(--s4); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: 32px; }
.plan h2 { margin: 0; font-size: var(--fs-h3); }
.plan .tag { margin: 0; color: var(--muted); }
.price-box { display: grid; gap: var(--s1); padding-block: var(--s2); border-block-end: 1px solid var(--line); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.price-n { font: var(--fw-head) var(--fs-h2)/1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price-per { color: var(--muted); font-size: var(--fs-body); }
.price-sub { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
/* a temporary discount (web/discount.js): the regular price struck through, then the label and when it ends; black and white */
.price-was { color: var(--muted); font-size: var(--fs-body); text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.price-deal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-sm); }
.chip-deal { background: var(--fg); color: var(--on-fg); border-color: var(--fg); font-weight: var(--fw-head, 600); }
.chip-deal::before { display: none; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); flex: 1; align-content: start; }
.plan .notsale { margin: 0; padding: var(--s3); border: 1px dashed var(--line); border-radius: var(--r-md, 10px); color: var(--muted); font-size: var(--fs-sm); }
.plan .notsale strong { color: var(--fg); }
.plan-rec { border: 2px solid var(--fg); box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .35); }
.chip-rec { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.chip-rec::before { display: none; }
.plans-meta { margin-block-start: var(--s4); color: var(--muted); font-size: var(--fs-sm); display: grid; gap: var(--s1); }

/* ai connections */
.conns { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .conns { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.conn { display: grid; gap: var(--s3); align-content: start; }
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.conn h2 { margin: 0; font-size: var(--fs-h3); }
.conn .will { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.conn p { margin: 0; }
.conn .own { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: center; }
.split { display: grid; gap: var(--s5); margin-block-start: var(--s7); }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }
.split h2 { font-size: var(--fs-h3); margin: 0 0 var(--s2); }
.split p { margin: 0; color: var(--muted); }

/* sign in and sign up (Roy 04/10): one calm card, nothing beside it (no plans, no marketing). The title, the way in, and
   under a hairline the two ways around (the other page, the trial notebook). The card starts near the top rather than at
   the vertical centre, so the iPad keyboard never covers the field being typed in; on a phone it drops its frame. */
.auth { display: grid; justify-items: center; align-content: start; padding-block: clamp(28px, 7vh, 104px) clamp(48px, 8vh, 112px); }
.auth-card { inline-size: min(440px, 100%); display: grid; gap: var(--s5); }
@media (min-width: 600px) { .auth-card { padding: var(--s6) clamp(28px, 4vw, 44px) var(--s5); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); } }
.auth-head { display: grid; gap: var(--s2); text-align: center; }
.auth-card h1 { font: var(--fw-head) clamp(28px, 1.2vw + 22px, 36px)/var(--lh-title) var(--font-display); margin: 0; text-wrap: balance; }
.auth-head .lead { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: balance; }
.auth-form { display: grid; gap: var(--s4); }
.gbtn { gap: var(--s3); }
.gbtn svg { inline-size: 20px; block-size: 20px; }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.or::before, .or::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
.email-box { border: 1px solid var(--line); border-radius: var(--r-lg); }
.email-box > summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 52px; padding-inline: var(--s4); font-weight: var(--fw-bold); font-size: var(--fs-ui); cursor: pointer; list-style: none; border-radius: inherit; }
.email-box > summary:hover { background: var(--chip); }
.email-box > summary::-webkit-details-marker { display: none; }
.email-box > summary::after { content: ""; inline-size: 8px; block-size: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; translate: 0 -2px; transition: rotate var(--t) var(--ease); }
.email-box[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.email-box[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.email-fields { display: grid; gap: var(--s3); padding: var(--s2) var(--s4) var(--s4); }
.auth-msg { margin: 0; }
.auth-foot { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0; text-align: center; }
.auth-foot a, .auth-switch a { color: var(--fg); font-weight: var(--fw-bold); }
.auth-alt { display: grid; justify-items: center; text-align: center; padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }
.auth-switch { margin: 0; font-size: var(--fs-ui); color: var(--muted); }
.auth-switch a { display: inline-flex; align-items: center; min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: var(--s1); }
#tryLine, #tryLine a { color: var(--muted); font-weight: var(--fw-reg); }
#tryLine a { text-decoration: underline; text-underline-offset: 3px; }

/* the moment between Google and the notebook (/auth/callback, Roy 04/10): the Yadi logo alone in the middle, one quiet
   line under it; the way back appears only with an error */
.splash-wrap { display: grid; place-items: center; }
.sys.splash { justify-items: center; text-align: center; gap: var(--s4); padding-block: clamp(48px, 18vh, 200px); }
.splash-logo .logo { inline-size: 132px; block-size: auto; }
.sys.splash #busy { font-size: var(--fs-ui); }
.sys.splash .actions { justify-content: center; }
.js .sys.splash #busy:not([hidden]) ~ .actions { display: none; }
/* 404 / offline */
.sys { display: grid; justify-items: start; gap: var(--s3); padding-block: clamp(48px, 10vw, 128px); }
.sys h1 { font: var(--fw-head) var(--fs-h1)/var(--lh-display) var(--font-display); margin: 0; }
.sys p { margin: 0; color: var(--muted); max-inline-size: 44ch; }
.sys .actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s3); }
body[data-page="signin"] .bar-actions .cta, body[data-page="signup"] .bar-actions .cta { display: none; }
.check-wrap .field-hint { margin: 0; padding-inline-start: 34px; }
/* the terms and privacy box on /signup and /signin (web/signin.js, web/legal.js): never ticked for him */
.consent-wrap .check { align-items: flex-start; line-height: var(--lh-body); }
.consent-wrap .check a { color: var(--fg); font-weight: var(--fw-bold); }
.consent-wrap[hidden] { display: none; }
html:not(.js) .mesh { position: relative; }

/* one calm banner at the top of a page (web/notice.js): the maintenance notice */
.ep-banner { display: flex; gap: var(--s3, 12px); align-items: center; padding: 10px 16px; background: var(--accent-soft, #eef3ff); color: var(--fg); font-size: var(--fs-sm, 15px); }
.ep-banner p { margin: 0; flex: 1; max-width: 72ch; margin-inline: auto; }
.ep-banner-x { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 22px; border-radius: 10px; cursor: pointer; }
/* the diagnostic line on /help (signed in) */
.ep-diag { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ep-diag code { padding: 4px 8px; border-radius: 8px; background: var(--desk); user-select: all; }
.ep-diag-copy { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.g-mark { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--r-round); background: #fff; flex: none; }
.ticks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); flex: 1; align-content: start; }
.ticks-list li { position: relative; padding-inline-start: var(--s5); color: var(--fg); line-height: var(--lh-body); }
.ticks-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em; inline-size: 7px; block-size: 7px; border-radius: var(--r-round); background: var(--fg); }

/* AI assisted setup uses native buttons/details and the site's existing tokens. */
.ai-connect { padding-block: var(--s8); scroll-margin-block-start: 90px; }
.ai-setup { max-inline-size: 760px; padding: var(--s5); margin-block-end: var(--s6); }
.ai-hosts, .ai-routes, .ai-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ai-hosts .ai-host { flex: 1; min-block-size: 52px; font-size: 20px; }
.ai-hosts [aria-pressed="true"], .ai-routes [aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.ai-routes { margin-block: var(--s3); }
.ai-routes[hidden] { display: none; }
.ai-routes button, .ai-prompt summary, .ai-actions a, .ai-actions button { min-block-size: 44px; }
.ai-next { margin-block: var(--s4); max-inline-size: 60ch; }
.ai-feedback { min-block-size: 1.5em; margin-block: var(--s3); }
.ai-prompt summary { display: list-item; cursor: pointer; inline-size: fit-content; padding-block: var(--s3); }
.ai-prompt textarea { display: block; inline-size: 100%; max-inline-size: 100%; padding: var(--s3); font: 16px/1.55 monospace; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.ai-stages { padding-inline-start: 1.5em; margin-block: var(--s4); }
.ai-stages li { padding-block: var(--s1); }
.ai-recovery { max-inline-size: 760px; margin-block: var(--s5); }
.my-conns { margin-block: var(--s5); }
.conn-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-block-start: var(--s3); }
.conn-actions .btn { min-block-size: 44px; }
/* On the landing the setup card spans the page like every other section; wide screens split it: choose and copy on
   the start side, the three stages beside it. The /ai page keeps its own narrow column. */
.ai-connect .ai-setup { max-inline-size: none; }
/* the /ai page too (Roy 05/10, iPad landscape: a narrow column beside empty space): from 960 px it uses the page's width,
   the setup card in two columns as on the landing, the recovery text and the lead on the full measure */
@media(min-width: 960px) {
  :is(.ai-connect, .ai-page) .ai-setup { max-inline-size: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s7); align-items: start; padding: var(--s6); }
  :is(.ai-connect, .ai-page) .ai-main, :is(.ai-connect, .ai-page) .ai-side { min-inline-size: 0; }
  :is(.ai-connect, .ai-page) .ai-side { padding-inline-start: var(--s7); border-inline-start: 1px solid var(--line); align-self: stretch; }
  :is(.ai-connect, .ai-page) .ai-side .ai-stages { margin-block: 0 var(--s4); }
  :is(.ai-connect, .ai-page) .ai-hosts .ai-host { min-block-size: 56px; }
  .ai-page .ai-recovery { max-inline-size: none; }
  .ai-page .page-head .lead { max-inline-size: 70ch; }
}
@media(max-width: 600px) { .ai-setup { padding: var(--s4); } .ai-actions { flex-direction: column; align-items: stretch; } .ai-actions .btn { text-align: center; } }

/* one composition down the page (Roy 03/10): every section on the same width, in two columns where it has a heading
   and a body (the FAQ and the contact form, as "value" is), never a narrow column beside neighbours that span */
.faq-wrap, .contact { display: grid; gap: var(--s6); align-items: start; }
.faq-wrap .sec-head, .contact .sec-head { margin-block-end: 0; }
.faq { max-inline-size: none; }
@media (min-width: 900px) {
  .faq-wrap, .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4) var(--s8); }
}

/* the contact form ("השאירו פרטים") */
.contact { padding-block: var(--band); scroll-margin-block-start: 90px; }
.contact-card { padding: var(--s6); }
.contact-form { display: grid; gap: var(--s4); }
.cf-row { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .cf-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-form .field-label small { font-weight: var(--fw-reg); }
.contact-form .textarea { resize: vertical; min-block-size: 88px; }
.contact-form [aria-invalid="true"] { border-color: var(--danger, #b42318); }
.cf-hint, .cf-count { margin: calc(var(--s2) * -1) 0 0; }
.cf-count { text-align: end; font-variant-numeric: tabular-nums; }
.cf-count[data-over="1"] { color: var(--danger, #b42318); }
.cf-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.cf-status { margin: 0; color: var(--muted); }
.cf-status[data-tone="error"] { color: var(--danger, #b42318); }
.cf-status[data-tone="note"] { color: var(--fg); }
.contact-done { display: grid; justify-items: center; gap: var(--s3); padding: var(--s7) var(--s4); text-align: center; font-size: var(--fs-h3); font-weight: var(--fw-bold); outline: none; }
.contact-done svg { inline-size: 44px; block-size: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-done p { margin: 0; }

/* the account button in the top bar: "כניסה" signed out, "למחברות שלי" signed in (site.js); on a phone the menu carries
   the sign in, so the bar keeps one button */
.bar-actions .acct { white-space: nowrap; }
.menu-sheet > .menu-acct { font-weight: var(--fw-bold); }
/* (signed out; signed in it stays: "My notebooks", btn-primary). Hidden from the first paint, not after site.js has run, so
   the bar never shifts when the script decides (the phone's only layout shift, 05/10) */
@media (max-width: 559px) { .bar-actions > .acct:not(.btn-primary) { display: none; } }
body[data-page="signin"] .bar-actions .acct, body[data-page="signup"] .bar-actions .acct { display: none; }

/* Connect's billing: Yearly (the default) or Lifetime, a small segmented control (44 px targets) */
.seg-bill { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--chip); }
.seg-opt { display: grid; place-items: center; align-content: center; gap: 0; min-block-size: 44px; padding: 4px 10px; border: 0; border-radius: 10px; background: none;
           color: var(--muted); font: inherit; font-weight: var(--fw-bold); cursor: pointer; transition: background var(--t-fast, .15s) var(--ease, ease), color var(--t-fast, .15s) var(--ease, ease); }
.seg-opt[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px var(--line); }
.seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .seg-opt { transition: none; } }
/* the landing's pricing: the same cards as /plans, on the page's width */
.pricing { padding-block: var(--band); }
.pricing .plans { max-inline-size: none; }

/* ===================== the calm pass (Roy 05/10) =====================
   One quiet layer over the rules above: a warm page in light mode, the header's small tools without a stuck square, the
   demo's answer as a notification inside the device, four points with one icon each, one plan at a time on a phone, the
   FAQ as one calm card, a real footer, and site pages that change without a white flash. */

/* the header's share and day/night: no square left behind after a tap (a stuck :hover on touch, the "pressed" state of the
   theme toggle); the keyboard still gets its ring through :focus-visible */
.bar-tools .btn-quiet, .menu > summary { -webkit-tap-highlight-color: transparent; }
.bar-tools .btn-quiet[aria-pressed="true"] { background: transparent; }
.bar-tools .btn-quiet:focus:not(:focus-visible) { outline: none; }
@media (hover: none) { .bar-tools .btn-quiet:hover { background: transparent; } }
.bar-tools .btn-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
.bar-tools .theme-toggle svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* hero: the words and two plain ways in; on a phone the header already carries the logo, so the hero does not repeat it */
.hero-cta .btn-lg { min-inline-size: 11rem; }
.hero-signup { background: var(--surface); }
@media (max-width: 699px) {
  .hero { gap: var(--s6); }
  .hero-cta { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; }
  .hero-cta .btn-lg { inline-size: 100%; }
}

/* the demo's answer: a small notification at the bottom of the screen, inside the device (Roy 05/10). It takes no room
   in the page, so nothing moves when it comes. */
.demo-reply { position: absolute; z-index: 3; inset-inline: calc(var(--bezel) + 6%); inset-block-end: calc(var(--bezel) + 4%); margin-inline: auto; max-inline-size: 30rem;
              display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px;
              background: var(--surface); color: var(--fg);
              box-shadow: 0 0 0 1px var(--line), 0 8px 24px -10px rgba(0, 0, 0, .35); font-size: clamp(11.5px, .35vw + 10px, 13px); line-height: 1.4; pointer-events: none; }
.demo-reply.wait { visibility: hidden; opacity: 0; }
.demo-reply-ic { flex: none; inline-size: 26px; block-size: 26px; border-radius: 8px; background: var(--fg) radial-gradient(circle at 50% 50%, var(--brand-orange) 0 4px, transparent 4.5px); }
.demo-reply-body { display: grid; min-inline-size: 0; }
.demo-reply-who { font-size: .85em; font-weight: var(--fw-bold); color: var(--muted); line-height: 1.3; }
.demo-status { color: var(--muted); }
/* a phone (Roy 05/10): the notebook page itself, larger. A slim frame without the app's bar, a little taller than wide,
   the view on the solution's column (site/appshot.js NARROW) so the handwriting reads at about body size. */

/* plans: one card at a time on a phone, chosen by a tap; both cards share one cell so switching never moves the page */
.plan-tabs { display: none; }
@media (max-width: 759px) {
  .plan-tabs { display: grid; margin-block-end: var(--s4); }
  .plans > .plan { grid-area: 1 / 1; }
  .plans[data-shown] > .plan:not([data-plan]) { display: none; }
  .plans[data-shown="free"] > .plan:not(.plan-free), .plans[data-shown="connect"] > .plan:not(.plan-connect) { visibility: hidden; pointer-events: none; }
}
.price-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
/* what you get (a check) and what you do not (a muted dash), the same mark for every line */
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.plan-list li::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; background: var(--fg);
  -webkit-mask: var(--mark) center / 18px no-repeat; mask: var(--mark) center / 18px no-repeat; }
.plan-list li.yes { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.plan-list li.no { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); color: var(--muted); }
.plan-list li.no::before { background: var(--muted); }
.plan-rec { border-color: var(--fg); }

/* the AI setup: switching between ChatGPT and Claude changes nothing's size (both lines hold their place) */
.ai-next { display: grid; }
.ai-next > p { grid-area: 1 / 1; margin: 0; }
.ai-next > p[aria-hidden="true"] { visibility: hidden; }
.ai-feedback { min-block-size: 1.5em; margin-block: var(--s2); }

/* questions: one calm card, a question per row, a plus that turns into a minus, the answer opening smoothly where the
   browser can */
.faq { background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--line); padding-inline: clamp(16px, 3vw, 28px); }
.faq-item + .faq-item { border-block-start: 1px solid var(--line); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-block-size: 64px; padding-block: var(--s3); cursor: pointer; list-style: none;
                      font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-title); -webkit-tap-highlight-color: transparent; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus:not(:focus-visible) { outline: none; }
.faq-ic { position: relative; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--chip); }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 12px; block-size: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--fg); transition: rotate var(--t, .2s) var(--ease, ease), opacity var(--t, .2s) var(--ease, ease); }
.faq-ic::after { rotate: 90deg; }
.faq-item[open] .faq-ic::after { rotate: 0deg; opacity: 0; }
.faq-a p { margin: 0; padding-block-end: var(--s5); color: var(--muted); line-height: var(--lh-body); max-inline-size: 60ch; }
.faq-a p a { color: var(--fg); }
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .24s var(--ease, ease), content-visibility .24s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq-item::details-content { transition: none; } .faq-ic::before, .faq-ic::after { transition: none; } }
.faq-lead a { color: var(--fg); }
.faq-wrap .sec-head { gap: var(--s3); }
.faq-wrap .faq-more { margin: 0; }

/* the footer: the columns, then one bottom line with the rights, the language and sharing */
.foot-mail { margin: 0; font-size: var(--fs-sm); }
.foot-mail a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--muted); text-decoration: none; }
.foot-mail a:hover { color: var(--fg); text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); max-inline-size: var(--page-max); margin-inline: auto;
               padding: var(--s4) var(--gutter) var(--s5); border-block-start: 1px solid var(--line); }
.foot-full .foot-bottom { inline-size: calc(100% - 2 * var(--gutter)); padding-inline: 0; }
.foot-copy { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.foot-in .foot-copy { flex-basis: 100%; }
.foot-copy a { color: var(--muted); }
.foot-tools { padding-block-start: 0; border: 0; gap: var(--s2) var(--s3); }
.foot-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--tap); padding-inline: 12px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); background: var(--surface); }
.foot-lang:hover { border-color: var(--muted); }
.foot-lang:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-lang .ic { inline-size: 18px; block-size: 18px; color: var(--muted); }
.foot-lang .lang-select, .foot-lang .lang-select:hover { min-block-size: 44px; border: 0; border-radius: 999px; background-color: transparent; color: var(--fg); font: var(--fw-med) var(--fs-sm)/1 var(--font-ui);
  padding-block: 0; padding-inline: 2px 26px; background-position: right 8px center; outline: none; }
[dir="rtl"] .foot-lang .lang-select { background-position: left 8px center; }
.foot-share { border-radius: 999px; }
@media (max-width: 559px) { .foot-bottom { flex-direction: column; align-items: flex-start; } }

/* moving between the site's pages: the new page fades in over the old one with the bar held still, never a white frame
   (the browser keeps the old page on screen until the new one can paint; color-scheme gives the dark canvas in the
   head). Browsers without cross-document view transitions simply change page. */
@view-transition { navigation: auto; }
.site-bar { view-transition-name: site-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* reviews, four or more (site/reviews.js loop): one calm row that moves by itself, cards of one width, the full quote
   readable; the edges fade; a still row with snap points under reduced motion. Fewer than four keep the columns above. */
.reviews-head:has(.reviews-pause) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.reviews-head:has(.reviews-pause) > :not(.reviews-pause) { grid-column: 1; }
.reviews-pause { grid-column: 2; grid-row: 1 / span 2; align-self: end; min-block-size: var(--tap); color: var(--muted); }
.reviews-pause[hidden] { display: none; }
.review-grid[data-mode="loop"] { display: block; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 6px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.review-grid[data-mode="loop"]::-webkit-scrollbar { display: none; }
.review-grid[data-mode="loop"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.review-track { display: flex; inline-size: max-content; align-items: stretch; }
.review-grid[data-mode="loop"] .review { flex: none; inline-size: min(80vw, 340px); margin-inline-end: 20px; padding: 22px; gap: 18px; border-radius: 18px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.review-grid[data-mode="loop"] .review + .review { border-block-start: 0; padding-block-start: 22px; }
.review-grid[data-mode="loop"] .review blockquote { font-size: var(--fs-body); line-height: 1.6; }
.review-grid[data-still] { scroll-snap-type: x mandatory; }
.review-grid[data-still] .review { scroll-snap-align: start; }
.review-stars { color: var(--accent); font-size: 15px; line-height: 1; }
/* reviews on a phone (site/reviews.js deck, Roy 05/10): exactly one card per view, a swipe or the dots move it */
.review-grid[data-mode="deck"] { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 4px; }
.review-grid[data-mode="deck"]::-webkit-scrollbar { display: none; }
.review-grid[data-mode="deck"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.review-grid[data-mode="deck"] .review { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 2px 6px; gap: 24px; justify-content: flex-start; }   /* (the owner's design: no box, the quote large) */
.review-grid[data-mode="deck"] .review + .review { border-block-start: 0; padding-block-start: 0; }
.review-dots { display: flex; justify-content: center; gap: 2px; margin-block-start: var(--s3); }
.review-dot { display: grid; place-items: center; inline-size: 28px; block-size: 28px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.review-dot::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--line); transition: background var(--t) var(--ease), scale var(--t) var(--ease); }
.review-dot[aria-current="true"]::before { background: var(--fg); scale: 1.15; }
.review-dot:focus:not(:focus-visible) { outline: none; }

/* ===================== landing v2 (Roy 05/10: "graphite and white, professional, no slop") =====================
   White by day, the notebook's graphite at night (/brand.css); orange only in the logo's dot and the AI's mark. Nothing
   moves by itself except the demo writing its page: no reveal on scroll, no drift, no breathing ring, no glass. Sections
   are separated by one hairline on the content's width, everything start-aligned. */
.rule { background-image: linear-gradient(var(--line), var(--line)); background-repeat: no-repeat; background-position: top center;
        background-size: min(100% - 2 * var(--gutter), var(--page-max) - 2 * var(--gutter)) 1px; }
.eyebrow { color: var(--muted); font-weight: var(--fw-med); }

/* hero: the claim, two ways in, one plain fact; the product beside it (desktop) or under it (phone) */
.hero { padding-block: clamp(32px, 5vw, 80px) var(--band); gap: var(--s7); }
.hero-copy { gap: var(--s5); }
.display { font: var(--fw-head) clamp(36px, 2.4vw + 22px, 58px)/1.12 var(--font-display); max-inline-size: 12em; }
.hero .lead { font-size: var(--fs-lead); max-inline-size: 28rem; }
.hero-note { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--muted); }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .hero-copy { padding-block-start: var(--s5); }
}

/* the device: one flat graphite frame and a soft floor shadow. No glare layer, no blend mode, no layered gradients, and
   nothing on it is ever transformed or animated, so it is painted once and then left alone (the flicker, 05/10). */
.ipad { --bezel: clamp(8px, 1.3vw, 12px); --r-out: clamp(16px, 2.4vw, 26px); position: relative; inline-size: 100%; aspect-ratio: 4 / 3; min-block-size: 0;
        border-radius: var(--r-out); background: #1c1d1f; isolation: isolate; contain: layout paint;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 48px -28px rgba(0, 0, 0, .45); }
:root[data-theme="graphite"] .ipad, :root[data-theme="dark"] .ipad { background: #121315; box-shadow: 0 0 0 1px #45484e, 0 24px 48px -28px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ipad { background: #121315; box-shadow: 0 0 0 1px #45484e, 0 24px 48px -28px rgba(0, 0, 0, .6); } }
.ipad-cam { position: absolute; inset-block-start: calc(var(--bezel) / 2 - 2px); inset-inline-start: 50%; inline-size: 4px; block-size: 4px; margin-inline-start: -2px; border-radius: 50%; background: #303235; }
.ipad-screen { border-radius: calc(var(--r-out) - var(--bezel)); background: #fff; }
.demo { gap: var(--s4); }
.compose { border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.demo-status { text-align: start; color: var(--muted); }
.demo-reply { box-shadow: 0 0 0 1px var(--line), 0 6px 18px -10px rgba(0, 0, 0, .3); }

/* a phone (Roy 05/10): the notebook page itself, larger. A slim frame without the app's bar, a little taller than wide;
   the view is the solution's column with even margins (site/appshot.js NARROW), so no stroke touches the glass edge. */
@media (max-width: 600px) {
  .ipad { --bezel: 6px; --r-out: 22px; aspect-ratio: 6 / 7; }
  .ipad-cam { display: none; }
  .demo-still { padding-block-start: 0; } .demo-still::before { display: none; }
  .demo-reply { inset-inline: calc(var(--bezel) + 10px); inset-block-end: calc(var(--bezel) + 10px); }
  .compose-msg { font-size: var(--fs-ui); }
}

/* value: the claim and its proof on one side, the four points as a plain list on the other (no icons, no cards) */
.value .h2 { font-size: var(--fs-h2); line-height: var(--lh-title); }
.value-copy { gap: var(--s4); }
.points { gap: 0; grid-template-columns: minmax(0, 1fr); }
.points li { display: grid; gap: var(--s1); padding-block: var(--s5); border-block-start: 1px solid var(--line); }
.points li:first-child { border-block-start: 0; padding-block-start: 0; }
.band .points h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-title); }
.points li > p { max-inline-size: 34rem; }
@media (min-width: 900px) { .value { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s9); } }

/* plans and questions: hairlines, not boxes in boxes */
.plan-rec { border: 1.5px solid var(--fg); box-shadow: none; }
.faq { background: none; border-radius: 0; box-shadow: none; padding-inline: 0; border-block: 1px solid var(--line); }
.faq-ic { inline-size: 20px; block-size: 20px; background: none; }
.faq-ic::before, .faq-ic::after { inline-size: 12px; block-size: 1.5px; background: var(--muted); }
.faq-item > summary:hover .faq-ic::before, .faq-item > summary:hover .faq-ic::after { background: var(--fg); }

/* /docs: one article per language; the page shows the one that matches the site language (store review 08/10) */
:root[lang="he"] .docs[lang="en"], :root[lang="en"] .docs[lang="he"] { display: none; }

/* ---------- the landing of 25/10 (Roy's approved prototype; docs/DESIGN.md): a centred hand-written headline, the notebook
   writing under it, how it works in three turning rows, then plans, questions and a quiet contact card ---------- */
.page-index { --frame: #1d1e20; --bubble: #f1f1ee; }
:root[data-theme="graphite"] .page-index, :root[data-theme="dark"] .page-index { --frame: #111213; --bubble: #3c3f44; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .page-index { --frame: #111213; --bubble: #3c3f44; } }
.page-index .eyebrow { display: inline-block; font-size: 14px; font-weight: 700; color: var(--accent); margin: 0 0 10px; }

.hero3 { text-align: center; padding-block: 72px 0; }
.hero3 h1 { margin: 0 auto; font-weight: 700; font-size: clamp(34px, 5vw, 68px); line-height: 1.1; max-inline-size: 15em; }
.hero3 .l1 { display: block; text-wrap: balance; }
.hero3 .l2 { display: block; }
:root[lang="he"] .hero3 .l2 { min-block-size: 1.45em; margin-block-start: .1em; }   /* the hand's height from the first paint: no jump when it arrives */
.hero3 .l2-hand { display: none; }
.hero3 h1.handed .l2-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero3 h1.handed .l2-hand { position: relative; inline-size: max-content; max-inline-size: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; block-size: 1.45em; }
.hero3 svg.hand { block-size: 1.45em; inline-size: auto; max-inline-size: calc(100% - .4em); overflow: visible; }
.hero3 svg.hand > path { fill: none; stroke: var(--fg); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; }
.hero3 .go svg.hand > path { animation: l3ink var(--t) cubic-bezier(.3,0,.4,1) calc(var(--d) + .25s) forwards; }
.hero3 svg.hand > path.ul { stroke: var(--brand-orange); stroke-width: 1.3; }
.hero3 .go svg.hand > path.ul { animation: l3ink .32s cubic-bezier(.3,0,.4,1) var(--ul) forwards; }
@keyframes l3ink { to { stroke-dashoffset: 0; } }
.hero3 .lead { font-size: 19px; color: var(--muted); max-inline-size: 32em; text-wrap: balance; margin: 26px auto 30px; }
.hero3 .hero-cta { justify-content: center; }
.hero3 .hero-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.stage { position: relative; max-inline-size: 1000px; margin: 56px auto 0; padding: 0 var(--gutter); }
.stage .ipad { aspect-ratio: auto; inline-size: auto; background: var(--frame); border-radius: 28px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.stage .shot { position: relative; aspect-ratio: 1180 / 885; border-radius: 16px; overflow: hidden; background: #fff; }
.stage .shot > .demo-page { position: absolute; inset: 6.33% 0 0; inline-size: 100%; block-size: 93.67%; }
.stage .shot[data-live] > .demo-page { display: none; }
.stage .phone { position: absolute; inset-inline-end: -120px; inset-block-end: -70px; inline-size: 220px; background: var(--frame); border-radius: 34px; padding: 10px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.35); }
.stage .screen { position: relative; background: var(--bg); border-radius: 26px; block-size: 440px; padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.stage .chat-h { font-size: 13px; font-weight: 700; text-align: center; color: var(--muted); padding-block-end: 6px; border-block-end: 1px solid var(--line); margin-block-end: 6px; }
.stage .msgs { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.stage .bubble { background: var(--bubble); border-radius: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.4; text-align: start; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.stage .bubble.in { opacity: 1; transform: none; }
.stage .bubble.me { background: var(--fg); color: var(--bg); align-self: flex-start; }
.stage .file { display: block; font-size: 11px; opacity: .85; margin-block-end: 5px; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.14); }
.stage .ai-dot { display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--brand-orange); margin-inline-end: 6px; vertical-align: middle; animation: l3pulse 1s ease-in-out infinite; }
.stage .done .ai-dot { animation: none; }
@keyframes l3pulse { 50% { opacity: .25; } }
.stage .input { margin-block-start: 8px; border: 1px solid var(--line); border-radius: 18px; padding: 7px 10px; font-size: 12px; min-block-size: 34px; display: flex; align-items: center; gap: 2px; color: var(--fg); }
.stage .send-dot { margin-inline-start: auto; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 12px; flex: none; }
.stage .caret { inline-size: 1px; block-size: 14px; background: var(--fg); }
.stage.typing .caret { animation: l3pulse 1s steps(1) infinite; }

.how { margin-block: 130px 110px; scroll-margin-block-start: 90px; }
.how-h { text-align: center; margin-block-end: 72px; }
.how-h h2 { text-wrap: balance; margin: 0; font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; line-height: 1.15; }
.how .row { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding: 44px 0; }
.how .row + .row { border-block-start: 1px solid var(--line); }
.how .row.flip { grid-template-columns: 7fr 5fr; } .how .row.flip .txt { order: 2; }
.how .num { display: block; font-size: 15px; font-weight: 700; color: var(--accent); margin-block-end: 10px; }
.how .txt h3 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; }
.how .txt p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-inline-size: 27em; }
.how .vis { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 48px -32px rgba(0,0,0,.28); }
.how .mini { position: relative; aspect-ratio: 16 / 10; }
.how .conn { padding: 22px 30px; color: #202121; font-size: 16px; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; }
.how .conn .ch { font-weight: 700; padding-block-end: 12px; border-block-end: 1px solid #ececea; }
.how .ci { display: flex; align-items: center; gap: 14px; padding: 16px 2px; border-block-end: 1px solid #f1f1ee; }
.how .ci:last-child { border-block-end: 0; }
.how .av { inline-size: 32px; block-size: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: #f3f3f0; color: #4b4d4d; }
.how .st { margin-inline-start: auto; font-size: 13px; color: #676969; border: 1px solid #e7e7e4; border-radius: 99px; padding: 3px 11px; }
.how .ci.on .st { color: #202121; border-color: #202121; }
.how .ci.on .st::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #ed6a24; margin-inline-end: 6px; vertical-align: middle; }
.how .seen { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; font-size: 13px; color: #202121; background: #fff; border: 1px solid #e7e7e4; border-radius: 99px; padding: 5px 12px; box-shadow: 0 6px 16px -10px rgba(0,0,0,.3); opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.how .seen::before { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #ed6a24; margin-inline-end: 7px; vertical-align: middle; }
.how .seen.in { opacity: 1; transform: none; }
.how .more { font-weight: 400; font-size: inherit; min-block-size: 0; align-items: stretch; list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.how .more li { display: flex; flex-direction: column; gap: 6px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.how .more b { font-size: 17px; font-weight: 700; } .how .more span { color: var(--muted); font-size: 15px; line-height: 1.55; }

.page-index .l3-head { text-align: center; margin-inline: auto; justify-items: center; }
.page-index .l3-head .h2, .page-index #faqTitle { margin: 0; font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.15; }
.page-index .plan { border: 1px solid var(--line); border-radius: 22px; padding: 28px 26px 26px; background: var(--bg); }
.page-index .plan-rec { border-color: var(--fg); border-width: 1px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }

.l3-contact { margin-block: 0 110px; padding-block: 0; display: block; }
.l3-contact .ct { display: grid; grid-template-columns: 5fr 7fr; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--bg); box-shadow: 0 40px 80px -60px rgba(0,0,0,.35); }
.l3-contact .ct-side { background: var(--desk); padding: 48px 44px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; border-inline-end: 1px solid var(--line); }
.l3-contact .ct-side h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.15; }
.l3-contact .ct-side > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.l3-contact .ct-mail { margin-block-start: auto; display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; font-size: 16px; font-weight: 700; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; align-self: stretch; }
.l3-contact .ct-mail svg { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: var(--brand-orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.l3-contact .ct-mail:hover { border-color: var(--fg); }
.l3-contact .ct-small { margin: 0; font-size: 14px; color: var(--muted); }
.l3-contact .contact-card { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 44px; }

@media (max-width: 1240px) { .stage .phone { inset-inline-end: 6px; inset-block-end: -60px; inline-size: 200px; } .stage { padding-inline-end: 40px; } }
@media (max-width: 860px) {
  .how .row.flip .txt { order: 0; } .how .row, .how .row.flip { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; } .how .txt p { max-inline-size: none; } .how-h { margin-block-end: 36px; }
  .l3-contact .ct { grid-template-columns: 1fr; } .l3-contact .ct-side { border-inline-end: 0; border-block-end: 1px solid var(--line); padding: 32px 24px; }
  .l3-contact .ct-mail { margin-block-start: 8px; } .l3-contact .contact-card { padding: 28px 24px; }
}
@media (max-width: 700px) {
  .hero3 { padding-block-start: 40px; }
  .stage .phone { display: none; } .stage { padding-inline-end: var(--gutter); }
  .stage .ipad { border-radius: 18px; padding: 8px; } .stage .shot { border-radius: 11px; aspect-ratio: 6 / 7; }   /* the whole page fits at reading size: it never scrolls while written */
  .how { margin-block: 90px 80px; } .how .more { grid-template-columns: 1fr; gap: 0; margin-block-start: 28px; } .how .more li { padding: 16px 0; }
  .how .seen { inset-block-end: 10px; inset-inline-end: 10px; font-size: 12px; } .how .conn { aspect-ratio: auto; padding: 20px 20px 8px; }
  .l3-contact { margin-block-end: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3 svg.hand > path { stroke-dashoffset: 0; animation: none !important; }
  .stage .bubble, .how .seen { transition: none; } .stage .ai-dot, .stage .caret { animation: none; }
}
/* the plans arrive a moment after the page (site/plans.js): their place is kept from the first paint, so nothing below jumps */
.page-index #plans { min-block-size: 600px; }
@media (max-width: 759px) { .page-index #plans { min-block-size: 612px; } }

/* ---------- every inner page in the landing's language (Roy 25/10: "כל החלונות והעמודים... אחידים בנראות שיצרנו לדף
   הנחיתה"): a large calm title, one muted lead, hairline sections, 22 px cards, the same plan cards and seg controls ---------- */
.page-head { padding-block: 72px 28px; }
.page-head h1, main.wrap > h1, main.wrap > header > h1 { font-weight: 700; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; text-wrap: balance; margin: 0 0 14px; }
.page-head .lead, main.wrap > header .lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-inline-size: 34em; text-wrap: balance; }
main.wrap .card, main.wrap .panel { border-radius: 22px; border: 1px solid var(--line); box-shadow: none; }
main.wrap .plan { border-radius: 22px; padding: 28px 26px 26px; background: var(--bg); }
main.wrap .plan-rec { border: 1px solid var(--fg); box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
main.wrap .prose h2, main.wrap > section > h2:not(.h2), main.wrap .legal h2 { font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; }
main.wrap .prose > h2 { margin-block-start: 48px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
main.wrap .prose a, main.wrap .lead a { text-underline-offset: 3px; text-decoration-color: var(--brand-orange); }
main.wrap .btn { border-radius: 12px; }
main.wrap .input, main.wrap .select, main.wrap .textarea { border-radius: 12px; min-block-size: 50px; font-size: 16px; }
main.wrap .chip { border-radius: 999px; }
.auth .card { border-radius: 28px; box-shadow: 0 40px 80px -60px rgba(0,0,0,.35); }
@media (max-width: 700px) { .page-head { padding-block: 40px 20px; } }