/* ==========================================================================
   public.css — the landing page (/ and /home). Built on site.css (tokens and components).
   Sections: hero (headline, sign-in, how to start; under them a kosher phone on a call with סגני, a different call
   on every visit) · trust strip · a big sentence · how it works · features bento · your own line to סגני · FAQ ·
   sign-in · footer. No prices
   on this page: they are on the customer's own page, after signing in.
   Motion plays only under html.motion (set by a one-line script in the hero for a normal browser that did not ask for
   reduced motion). Without it — no JS, reduced motion, screenshots — the final state shows. The motion on scroll is
   at the end of the file.
   Every decorative loop has a finite iteration count.
   ========================================================================== */

/* ---------- Shared bits ---------- */
.landing section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.tinted { background: var(--bg-subtle); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 760px; }
.section-head > p { font-size: var(--fs-lg); color: var(--muted); max-width: 60ch; line-height: 1.6; }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 1.35fr 1fr; max-width: none; align-items: end; gap: var(--s-7); }
  .section-head .eyebrow { grid-column: 1 / -1; margin-bottom: -12px; }
  .section-head > p { justify-self: end; max-width: 44ch; }
}
.landing .code { font-size: .92em; }

/* ---------- Hero ---------- */
/* One centered column: the headline, the sign-in and how to start */
/* overflow: clip, not hidden: hidden would make the hero a scroll container of its own, and the motion on scroll
   inside it (the copy, the phone, the call) would follow it instead of the page */
.hero { position: relative; overflow: clip; isolation: isolate; padding-block: var(--s-8) var(--s-9); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(to right, rgba(15, 23, 42, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%); }
.hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 38%; width: min(1100px, 140vw); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(31, 91, 255, .12), rgba(31, 91, 255, .04) 55%, transparent); }
.hero-copy { display: grid; justify-items: center; text-align: center; min-width: 0; }
.pill { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-full);
  background: #fff; box-shadow: var(--shadow-1); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); line-height: 1.3; }
.pill-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.pill-tag .icon { width: 15px; height: 15px; }
.hero-title { margin-top: var(--s-5); font-size: clamp(2.5rem, 1.1rem + 4.8vw, 4.75rem); line-height: 1.06; }
.hero .lead { margin-top: var(--s-5); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); }
/* The sign-in at the top (#signin): Google's button, why it may not load, and the privacy line; then how to start */
.hero-signin { display: grid; justify-items: center; gap: 6px; margin-top: var(--s-6); scroll-margin-top: calc(var(--header-h) + 24px); }
.hero-signin .error-text:empty { display: none; }
.hero-signin .signin-legal { margin-top: 2px; }
.start-steps { display: grid; justify-items: center; gap: 10px; margin: var(--s-6) 0 0; padding: 0; list-style: none;
  font-weight: 600; color: var(--ink-2); }
.start-steps li { display: flex; align-items: center; gap: 10px; }
.start-steps .n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font: 700 .875rem/1 var(--font-tech); }
/* Wider: the three steps in one row */
@media (min-width: 720px) {
  .start-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
}
@media (min-width: 1000px) {
  .hero { padding-block: var(--s-9); }
}

/* The demo under the hero copy: a kosher (keypad) phone on a call with סגני, and what is said on it.
   Phones: the conversation under the phone. >= 860: side by side (the phone first, on the reading-start side).
   Under them "עוד דוגמה" (only with JS: site.js swaps in another call from the <template>s). */
.stage-wrap { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
.stage { position: relative; display: grid; justify-items: center; gap: var(--s-6); min-width: 0; }
.kp-more { justify-self: center; }
.kp-more .icon { width: 17px; height: 17px; transition: transform .5s var(--ease); }
.kp-more:hover .icon { transform: rotate(-180deg); }
.kp-wrap { position: relative; display: grid; place-items: center; padding: 18px; }
.kp-wrap::before { content: ""; position: absolute; z-index: -1; inset: -90px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 91, 255, .16), rgba(31, 91, 255, .05) 60%, transparent); }
.kp-wrap::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(31, 91, 255, .16); opacity: 0; }
.motion .kp-wrap::after { animation: kp-ripple 3.6s var(--ease) 3; }
@keyframes kp-ripple { 0% { transform: scale(.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* The phone: a dark candybar with a small backlit screen, call/end keys and a keypad (all text >= 12px) */
.kosher { --kp-w: 156px; position: relative; display: grid; gap: 12px; width: var(--kp-w); padding: 26px 14px 20px; border-radius: 30px 30px 36px 36px;
  background: linear-gradient(165deg, #2b3343, #161b26 55%, #0e121a); color: #e9eef8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(15, 23, 42, .25),
    0 30px 60px -22px rgba(15, 23, 42, .55), 0 70px 120px -40px rgba(31, 91, 255, .45); }
.kp-ear { position: absolute; top: 11px; left: 50%; width: 38px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: #05070b; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.kp-screen { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 7px 8px 10px; border-radius: 10px;
  background: linear-gradient(170deg, #e7efff, #cfdcf6); color: #0f1a33; box-shadow: inset 0 0 0 2px #0a0d14, inset 0 2px 6px rgba(15, 26, 51, .25); }
.kp-status { display: flex; justify-content: space-between; align-items: center; width: 100%; font: 600 12px/1 var(--font-tech); color: #2a3a5c; }
.kp-bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.kp-bars i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.kp-bars i:nth-child(1) { height: 3px; } .kp-bars i:nth-child(2) { height: 5px; } .kp-bars i:nth-child(3) { height: 7px; } .kp-bars i:nth-child(4) { height: 10px; }
.kp-mark { width: 34px; height: 34px; margin-top: 7px; }
.kp-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-align: center; text-wrap: balance; }
.kp-state { display: inline-flex; gap: 5px; font-size: 12px; color: #2a3a5c; line-height: 1.3; }
.kp-state .num { font-weight: 600; }
/* A keypad is laid out the same in every language: 1 at the top left, the green call key on the left */
.kp-nav { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 8px; padding-inline: 2px; direction: ltr; }
.kp-nav i { display: block; height: 14px; border-radius: 7px; }
.kp-nav .call { background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, .45); }
.kp-nav .end { background: #ef4444; opacity: .85; }
.kp-nav .pad { height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a4356, #222937); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 3px #0e121a; }
.kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 8px; direction: ltr; }
.kp-keys i { display: grid; place-items: center; height: 24px; border-radius: 8px 8px 11px 11px; font: 600 13px/1 var(--font-tech); font-style: normal; color: #dbe3f2;
  background: linear-gradient(#2f3748, #232a38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #07090d; }

/* What is said on the call */
.kp-talk { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; min-width: 0; text-align: start; }
.kp-label { display: inline-flex; align-items: center; align-self: center; gap: 8px; margin-bottom: 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.kp-label .icon { width: 17px; height: 17px; color: var(--accent); }
.kp-talk .bubble { max-width: 88%; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.kp-talk .bubble.caller { background: #fff; box-shadow: var(--shadow-2); }
.kp-done { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 16px; }
.kp-done .tick { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--success-soft); color: var(--success-ink); }
.kp-done .tick .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.kp-done.accent .tick { background: var(--accent-soft); color: var(--accent); }
.kp-done.urgent .tick { background: var(--danger-soft); color: var(--danger); }
.kp-done b { display: block; font-size: var(--fs-base); font-weight: 700; line-height: 1.35; }
.kp-done small { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }

/* The call plays: the lines appear one after another, then what came of it (only under html.motion; .wait holds it
   until seen) */
.motion .stage .seq { animation: appear .55s var(--ease) both; animation-delay: var(--at, 0s); }
.motion .stage.wait .seq { animation: none; opacity: 0; }
@keyframes appear { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

@media (min-width: 860px) {
  .stage { grid-template-columns: auto minmax(0, 440px); justify-content: center; align-items: center; column-gap: 64px; }
  .kp-label { align-self: flex-start; }
  .kosher { --kp-w: 184px; }
}

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--line); background: linear-gradient(#fff, var(--bg-subtle)); }
.trust ul { display: grid; grid-template-columns: 1fr 1fr; }
.trust li { display: flex; align-items: center; gap: 12px; padding: var(--s-5) var(--s-3); min-width: 0; }
.trust li:nth-child(odd) { padding-inline-start: 0; border-inline-end: 1px solid var(--line); }
.trust li:nth-child(even) { padding-inline-end: 0; padding-inline-start: var(--s-4); }
.trust li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.trust .icon { width: 26px; height: 26px; flex: none; color: var(--accent); stroke-width: 1.6; }
.trust b { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
@media (min-width: 720px) {
  .trust ul { grid-template-columns: repeat(4, 1fr); }
  .trust li, .trust li:nth-child(odd), .trust li:nth-child(even) { padding: var(--s-6) var(--s-5); border-bottom: 0; border-inline-end: 1px solid var(--line); }
  .trust li:first-child { padding-inline-start: 0; }
  .trust li:last-child { border-inline-end: 0; padding-inline-end: 0; }
}

/* ---------- How it works: one path, three steps and what comes of them ----------
   Phones: the stops one under the other, the line between them on the reading-start side. >= 900: side by side,
   the line through the dots. Each stop: a round dot (the number on it), a title and one sentence; the last, in green,
   is what comes of it. Then an invitation to start. */
.how-path { --dot: 56px; --gap: var(--s-6); display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.how-stop { position: relative; display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: var(--s-4); align-content: start; min-width: 0; }
.how-stop h3 { grid-column: 2; padding-top: 6px; font-size: var(--fs-h3); line-height: 1.3; }
.how-stop p { grid-column: 2; margin-top: 4px; color: var(--muted); line-height: 1.65; max-width: 36ch; }
.stop-dot { grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot);
  border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.stop-dot .icon, .stop-dot .g-logo { width: 24px; height: 24px; }
.stop-n { position: absolute; top: -3px; inset-inline-end: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font: 700 12px/1 var(--font-tech); box-shadow: 0 0 0 3px #fff; }
.stop-done .stop-dot { background: var(--success); color: #fff; box-shadow: 0 10px 24px -10px rgba(22, 163, 74, .7); }
.stop-done .stop-dot .icon { stroke-width: 2.6; }
.stop-done h3 { color: var(--success-ink); }
/* The line from each dot to the next: down (phones), or across, toward the reading end (>= 900) */
.how-stop:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--dot) + 6px); bottom: calc(var(--gap) * -1 + 6px);
  inset-inline-start: calc(var(--dot) / 2 - 1px); width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent-tint)); transform-origin: top; }
.how-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: var(--s-7); color: var(--muted); font-weight: 500; }
@media (min-width: 900px) {
  .how-path { --dot: 64px; --gap: var(--s-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how-stop { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .how-stop h3, .how-stop p { grid-column: 1; }
  .how-stop h3 { padding-top: var(--s-4); }
  .how-stop p { max-width: 26ch; }
  .stop-dot { grid-row: auto; }
  .how-stop:not(:last-child)::after { top: calc(var(--dot) / 2 - 1px); bottom: auto; width: auto; height: 2px;
    inset-inline-start: calc(50% + var(--dot) / 2 + 10px); inset-inline-end: calc(-50% - var(--gap) + var(--dot) / 2 + 10px);
    background: linear-gradient(to left, var(--accent), var(--accent-tint)); transform-origin: right; }
}

/* ---------- Features (bento) ---------- */
.bento { display: grid; gap: var(--s-4); }
.cell { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); overflow: clip; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); min-width: 0; }
.cell > .art { margin-top: auto; }
.cell > .tile, .cell-text > .tile { align-self: flex-start; }
.cell-text { display: grid; gap: 8px; align-content: start; }
.cell h3 { font-size: var(--fs-h3); }
.cell p { font-size: var(--fs-base); color: var(--muted); line-height: 1.65; max-width: 52ch; }
.art { padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04); }
.note { max-width: 440px; margin-inline: auto; padding: 14px 16px 4px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); }
.note-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.note-top b { font-size: 15px; white-space: nowrap; }
.note-top .badge { margin-inline-start: auto; min-height: 24px; font-size: 13px; }
.note-sum { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin-bottom: 6px; }
.note .kv { font-size: 13px; }
.note .kv dd.no { color: var(--success-ink); font-weight: 600; }
.flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 6px; padding: var(--s-3) var(--s-1); }
.flow .node { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.flow .node i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-2); color: var(--ink-2); }
.flow .node.ai i { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.flow .node.you i { color: var(--accent); }
.flow .node .icon { width: 19px; height: 19px; }
.flow .link { position: relative; top: -11px; height: 2px; border-radius: 2px; opacity: .55; background: repeating-linear-gradient(to left, var(--accent) 0 6px, transparent 6px 11px); }
.flow-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.flow-tags .badge { min-height: 26px; font-size: 13px; }
.art.chat { gap: 8px; }
.art.chat .bubble { font-size: 14px; max-width: 92%; }
.art.chat .bubble .who { font-size: 12px; }
.know { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-1); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.know .lbl { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.know mark { padding: 0 3px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); }
.know-answer { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.know-answer > .icon { color: var(--accent); transform: rotate(-90deg); }
.know-answer .bubble { font-size: 14px; max-width: none; }
.know-answer .bubble .who { font-size: 12px; }
.inbox-mock { display: grid; gap: 6px; }
.inbox-mock li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-1); min-width: 0; }
.inbox-mock li > span:nth-child(2) { min-width: 0; flex: 1; }
.inbox-mock b { display: block; font-size: 14px; line-height: 1.3; }
.inbox-mock small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.inbox-mock .t { font-size: 12px; color: var(--muted); }
.inbox-mock .badge { min-height: 22px; padding: 0 8px; font-size: 12px; }
.inbox-mock .avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.inbox-mock .avatar .icon { width: 16px; height: 16px; }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cell-wide { grid-column: span 4; }
  .cell-narrow { grid-column: span 2; }
  .cell-third { grid-column: span 2; }
}
@media (max-width: 359px) { .cell .art { padding: 10px; } }
@media (min-width: 720px) and (max-width: 1023px) {
  .cell-wide, .cell-narrow { grid-column: span 3; }
  .cell-third { grid-column: span 3; }
  .cell-third:last-child { grid-column: 1 / -1; }
  .cell > .art { margin-top: 0; flex: 1; display: grid; align-content: center; }   /* fills the stretched cell */
  .cell > .art.chat { display: flex; justify-content: center; }   /* the chat keeps its flex column (bubbles to each side) */
}
@media (min-width: 1024px) {
  .cell { padding: var(--s-6); }
  .cell-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: var(--s-6); }
  .cell-wide > .art { margin: 0; padding: var(--s-5); }
}

/* ---------- Your own line to סגני (#own): calling it yourself ----------
   Phones: the text, then the conversation. >= 960: side by side. */
.own-grid { display: grid; gap: var(--s-7); align-items: center; }
.own-copy { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.own-lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.6; max-width: 46ch; }
.own-list { display: grid; gap: var(--s-4); margin-top: var(--s-3); padding: 0; list-style: none; }
.own-list li { display: flex; align-items: flex-start; gap: 14px; }
.own-list b { display: block; margin-bottom: 2px; font-size: var(--fs-md); color: var(--ink); }
.own-list li > span:last-child { color: var(--muted); line-height: 1.6; }
.own-art { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; justify-self: center; padding: var(--s-5); border-radius: var(--r-xl);
  background: var(--bg-subtle); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04); }
.own-art .bubble { font-size: var(--fs-sm); max-width: 90%; }
.own-art .bubble.caller { background: #fff; box-shadow: var(--shadow-1); }
@media (min-width: 960px) { .own-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-8); } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: var(--s-6); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { justify-content: space-between; gap: 16px; min-height: 0; padding: 20px 0; color: var(--ink); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.45; }
.faq summary:hover { color: var(--ink); }
.faq summary .pm { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; box-shadow: var(--shadow-1); color: var(--ink-2);
  transition: transform .35s var(--ease), background-color .2s, color .2s; }
.faq summary:hover .pm { background: var(--accent-soft); color: var(--accent); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--accent); color: #fff; box-shadow: none; }
.faq summary .pm .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.faq .answer { max-width: 62ch; padding: 0 0 24px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.75; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: var(--s-5); color: var(--ink-2); font-size: var(--fs-md); font-weight: 600; }
@media (min-width: 1024px) {
  .faq-wrap { grid-template-columns: 5fr 7fr; gap: var(--s-9); }
  .faq-wrap .section-head { grid-template-columns: 1fr; position: sticky; top: 120px; align-self: start; margin-bottom: 0; }
  .faq-wrap .section-head .eyebrow { margin-bottom: 0; }
  .faq-wrap .section-head > p { justify-self: start; }
  .faq-wrap .title { font-size: 2.75rem; }
}

/* ---------- Sign-in ---------- */
.signin-section { padding-bottom: var(--s-9); }
.signin-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; padding: var(--s-7) var(--s-5); border-radius: var(--r-2xl); text-align: center;
  background: linear-gradient(180deg, #f5f8ff, #fff 70%); box-shadow: var(--shadow-2); }
.signin-panel::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(31, 91, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 91, 255, .08) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000, transparent 75%); }
.signin-main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-4); min-width: 0; }
.signin-mark { width: 52px; height: 52px; filter: drop-shadow(0 10px 20px rgba(31, 91, 255, .35)); }
.signin-main .title { max-width: 16ch; }
.signin-action { display: grid; justify-items: center; gap: 10px; min-height: 44px; }
/* Google's script did not load (a filter, an ad blocker, no connection): site.js hides the dead pill and explains */
.g_id_signin.gsi-failed { display: none; }
.gsi-slot { min-height: 44px; }
/* While Google's script loads: a quiet outline where its button will appear (not clickable, only with JS) */
.js .g_id_signin:empty { width: 300px; max-width: 100%; height: 44px; border-radius: var(--r-full); border: 1px solid #dadce0; background: #fff center / 20px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); }
.soon { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-1);
  font-weight: 600; color: var(--ink-2); }
.soon .icon { color: var(--accent); }
@media (min-width: 900px) { .signin-panel { padding: var(--s-8) var(--s-7); } }

/* ---------- Footer ---------- */
.landing-footer { padding-block: var(--s-6) var(--s-7); }
.footer-top, .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-top { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.footer-bottom { padding-top: var(--s-4); }
.landing-footer .brand { font-size: var(--fs-md); }
.landing-footer .brand-mark { width: 26px; height: 26px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-sm); }
.footer-nav a { color: var(--ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--accent-ink); text-decoration: underline; }
.landing-footer .footer-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-xs); }
.admin-link { color: var(--muted) !important; }
@media (min-width: 720px) {
  .footer-top, .footer-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
  .footer-top .footer-contact { margin-inline-start: auto; }
  .landing-footer .footer-end { margin-inline-start: auto; }
}

/* ---------- Privacy policy (/privacy) ---------- */
.legal { padding-top: var(--s-6); padding-bottom: var(--s-8); }
.legal-head { margin-bottom: var(--s-5); }
.legal-head h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); letter-spacing: -.03em; }
.legal-head .sub { margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); }
.legal-head .lead { margin-top: var(--s-3); font-size: var(--fs-md); color: var(--ink-2); line-height: 1.7; }
.legal section { margin-top: var(--s-5); }
.legal h2 { margin-bottom: 8px; font-size: 1.25rem; letter-spacing: -.015em; }
.legal p, .legal li { font-size: var(--fs-base); line-height: 1.75; color: var(--ink-2); }
.legal ul { display: grid; gap: 6px; padding-inline-start: 1.25em; list-style: disc; }
.legal p + ul, .legal ul + p { margin-top: 8px; }
.signin-legal { margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- A big sentence (between the trust strip and how it works) ---------- */
.statement { padding-block: var(--s-9) var(--s-6); }
.scrub { max-width: 24ch; margin-inline: auto; text-align: center; font-size: clamp(1.75rem, 1.05rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.22; color: var(--ink); text-wrap: balance; }
.scrub .hot { color: var(--accent); }
@media (min-width: 1024px) { .statement { padding-block: var(--s-10) var(--s-7); } }

/* Chips that pop up beside a section's title. Phones: a row under the title. >= 1024: in the head's empty column,
   scattered and tilted. */
.head-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; pointer-events: none; }
.hc { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-2);
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hc .icon { width: 16px; height: 16px; color: var(--muted); }
.hc.accent .icon { color: var(--accent); }
.hc.ok { color: var(--success-ink); } .hc.ok .icon { color: var(--success); }
.hc.urgent { background: var(--danger-soft); color: var(--danger-ink); } .hc.urgent .icon { color: var(--danger); }
@media (min-width: 1024px) {
  .head-chips { position: relative; display: block; align-self: stretch; min-height: 150px; margin: 0; }
  .hc { position: absolute; font-size: 15px; padding: 9px 16px; box-shadow: var(--shadow-3); }
  .hc:nth-child(1) { top: 4px; right: 10%; transform: rotate(3deg); }
  .hc:nth-child(2) { top: 56px; left: 6%; transform: rotate(-4deg); }
  .hc:nth-child(3) { bottom: 0; right: 32%; transform: rotate(-2deg); }
}

/* ---------- Motion on scroll ----------
   Two kinds, both only under html.motion (a normal browser that did not ask for reduced motion):
   1. Things appear when they come into view: [data-reveal] (a rise; "pop", "start": from the reading-start side,
      "zoom"), one after another inside [data-reveal-group] (--i). site.js adds html.fx and .in; without them (no JS)
      nothing is hidden. Each animation fills only backwards, so after it the element's own transforms (hover) work.
   2. Things move with the scroll itself (CSS scroll-driven animations, where the browser has them): the line under
      the header, the hero drifting away, the phone tilting, the words of the big sentence lighting up, the chips
      drifting, the grey lines of the titles sliding in, the pictures in the cards floating. */
.landing main { overflow-x: clip; }   /* a card sliding in from the side does not widen the page (and sticky still works) */
.fx [data-reveal]:not(.in) { opacity: 0; }
.fx [data-reveal].in { animation: fx-rise .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.fx [data-reveal="pop"].in { animation-name: fx-pop; animation-duration: .7s; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.fx [data-reveal="start"].in { animation-name: fx-start; }
.fx [data-reveal="zoom"].in { animation-name: fx-zoom; animation-duration: 1s; }
.fx .head-chips [data-reveal].in { animation-delay: calc(200ms + var(--i, 0) * 160ms); }
.fx [data-reveal].in.now { animation: none; }   /* already in view when the page opened */
@keyframes fx-rise { from { opacity: 0; transform: translateY(32px); } }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(.55); } 70% { opacity: 1; } }
@keyframes fx-start { from { opacity: 0; transform: translateX(48px); } }   /* RTL: the reading-start side is the right */
@keyframes fx-zoom { from { opacity: 0; transform: scale(.92) translateY(24px); } }

/* How it works, once the path is in: stop after stop, each dot pops, its words rise, and the line to the next is drawn */
.fx [data-reveal="path"].in { animation: none; }
.fx .how-path.in .stop-dot { animation: fx-pop .6s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--k) * 550ms); }
.fx .how-path.in .how-stop h3, .fx .how-path.in .how-stop p { animation: fx-rise .6s var(--ease) backwards; animation-delay: calc(var(--k) * 550ms + 150ms); }
.fx .how-path.in .how-stop::after { animation: fx-draw-y .5s ease-out backwards; animation-delay: calc(var(--k) * 550ms + 300ms); }
@media (min-width: 900px) { .fx .how-path.in .how-stop::after { animation-name: fx-draw-x; } }
@keyframes fx-draw-y { from { transform: scaleY(0); } }
@keyframes fx-draw-x { from { transform: scaleX(0); } }
.fx .how-path.in .stop-done .stop-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--success); opacity: 0;
  animation: fx-ring 1.6s var(--ease) 2; animation-delay: calc(var(--k) * 550ms + 500ms); }
@keyframes fx-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

/* Inside the cards of the features, once a card is in */
.fx .cell.in .note { animation: fx-rise .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
.fx .cell.in .note-top .badge, .fx .cell.in .flow-tags .badge { animation: fx-pop .6s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 1s); }
.fx .cell.in .flow .node { animation: fx-pop .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.fx .cell.in .flow .node:nth-child(1) { animation-delay: calc(var(--i, 0) * 90ms + .2s); }
.fx .cell.in .flow .node:nth-child(3) { animation-delay: calc(var(--i, 0) * 90ms + .5s); }
.fx .cell.in .flow .node:nth-child(5) { animation-delay: calc(var(--i, 0) * 90ms + .8s); }
.fx .cell.in .flow .link { animation: fx-dash .9s linear 4; animation-delay: calc(var(--i, 0) * 90ms + .3s); }
@keyframes fx-dash { to { background-position: -22px 0; } }
.fx .cell.in .art.chat .bubble, .fx .cell.in .inbox-mock li, .fx .cell.in .know, .fx .cell.in .know-answer { animation: fx-rise .6s var(--ease) backwards; }
.fx .cell.in .art.chat .bubble:nth-child(1), .fx .cell.in .inbox-mock li:nth-child(1), .fx .cell.in .know { animation-delay: calc(var(--i, 0) * 90ms + .3s); }
.fx .cell.in .art.chat .bubble:nth-child(2), .fx .cell.in .inbox-mock li:nth-child(2), .fx .cell.in .know-answer { animation-delay: calc(var(--i, 0) * 90ms + .9s); }
.fx .cell.in .art.chat .bubble:nth-child(3), .fx .cell.in .inbox-mock li:nth-child(3) { animation-delay: calc(var(--i, 0) * 90ms + 1.5s); }

/* The conversation of "your own line", once in: line after line */
.fx .own-art.in .bubble { animation: fx-rise .6s var(--ease) backwards; }
.fx .own-art.in .bubble:nth-child(2) { animation-delay: .7s; }
.fx .own-art.in .bubble:nth-child(3) { animation-delay: 1.4s; }
.fx .own-art.in .bubble:nth-child(4) { animation-delay: 2.6s; }
.fx .own-art.in .bubble:nth-child(5) { animation-delay: 3.3s; }

/* The sign-in, once in */
.fx .signin-panel.in .signin-mark { animation: fx-mark .9s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; }
@keyframes fx-mark { from { opacity: 0; transform: scale(.3) rotate(-40deg); } }

@supports (animation-timeline: view()) {
  /* The line under the header fills as the page scrolls (from the reading-start side) */
  .motion .landing .site-header::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; transform-origin: right; transform: scaleX(0);
    background: linear-gradient(to left, var(--accent), #6e98ff); animation: fx-progress linear both; animation-timeline: scroll(root); }
  @keyframes fx-progress { to { transform: scaleX(1); } }

  /* The hero: the copy drifts up and fades as it leaves, the grid behind it moves slower, the phone tilts, the call floats */
  .motion .hero-copy { animation: fx-leave linear both; animation-timeline: view(); animation-range: exit 15% exit 100%; }
  @keyframes fx-leave { to { opacity: .35; transform: translateY(-70px) scale(.97); } }
  .motion .hero::before { animation: fx-slow linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  @keyframes fx-slow { to { transform: translateY(260px); } }
  .motion .kosher { animation: fx-tilt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes fx-tilt { from { transform: rotate(-5deg) translateY(36px); } to { transform: rotate(5deg) translateY(-36px); } }
  .motion .kp-talk { animation: fx-float linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes fx-float { from { transform: translateY(56px); } to { transform: translateY(-56px); } }

  /* The big sentence: each word lights up in turn (--a to --b of the sentence's way through the screen) */
  .motion .scrub { view-timeline-name: --scrub; }
  .motion .scrub .w { opacity: .14; animation: fx-word linear both; animation-timeline: --scrub; animation-range: cover var(--a) cover var(--b); }
  @keyframes fx-word { to { opacity: 1; } }

  /* The grey line of each title slides in as the title comes up; the chips drift; the pictures in the cards float */
  .motion .section .title .soft { animation: fx-soft linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  @keyframes fx-soft { from { opacity: .1; transform: translateX(-60px); } }
  .motion .head-chips { animation: fx-float linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .motion .cell .art { animation: fx-art linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes fx-art { from { transform: translateY(22px); } to { transform: translateY(-22px); } }
}