/* Hallmark · shape: kept · genre: modern-minimal · theme: brand · redesign: restyle · copy: verbatim · paper: #050506 night, #f5f5f7 daylight · accent: #2997ff on night, #0071e3 on light · display: Inter Tight · body: Inter Tight (Assistant for Hebrew) · hero: centred, one blue light through a door, then the stage card · nav: floating glass pill · footer: night, glow · signature: the 3D door in a rounded stage card · posture: restrained · v2.0.0 */
/* Hallmark · restored (30 Oct 2026): the original full-page door journey (fixed .stage canvas, .door-slot, .threshold): the door opens on scroll and the camera flies through it into the bright room behind the day sections */
/* concept_rl layer (Raycast x Lusion study, patterns only). Loaded after style.css on every page.
   Night: a centred hero on #050506 with one soft diagonal blue light; Liquid Glass on night (thin rim, inner
   highlight, blur) with a hover lift. Day: the light ground with dark rounded "stage" panels. Motion is
   transform/opacity only, scroll-driven where supported, static under reduced motion or the
   widget's Stop animations (the home door journey always runs; reduced motion only calms its drift, as the original), and nothing is hidden when scripts or animations do not run. */

/* ---------- floating glass nav pill (Raycast) ---------- */
.site-header { position: sticky; top: var(--space-sm); margin: var(--space-sm) auto 0; width: min(100% - 2 * var(--space-sm), calc(var(--wide) + 2 * var(--space-lg)));
  border-radius: 16px; border: 1px solid var(--night-rim);
  background: color-mix(in srgb, var(--night-2) 92%, transparent);
  box-shadow: inset 0 1px 0 var(--night-glass-2), 0 18px 40px -24px color-mix(in srgb, var(--night) 70%, transparent);
  transition: box-shadow var(--dur-long) var(--ease-out); }
/* phone check: the 1.1s light/dark crossfade left the bar grey-on-grey (text under AA) for about half a second; keep it brief */
:root .site-header.tone-ready, :root .site-header.tone-ready :is(.brand, .brand-mark, .lang-switch, .nav-toggle, .main-nav a, .main-nav) {
  transition: background-color var(--dur-micro) linear, border-color var(--dur-micro) linear, color var(--dur-micro) linear, fill var(--dur-micro) linear, box-shadow var(--dur-long) var(--ease-out); }
.site-header .header-inner { width: auto; padding-inline: var(--space-md); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--night-2) 95%, transparent); }
:root .site-header :focus-visible { outline-color: var(--on-night); outline-offset: 2px; }
:root .site-header.is-light :focus-visible { outline-color: var(--focus-light); }
.site-header.is-light { border-color: color-mix(in srgb, var(--night) 9%, transparent); background: color-mix(in srgb, var(--white) 84%, transparent);
  box-shadow: inset 0 1px 0 var(--white), 0 18px 40px -26px color-mix(in srgb, var(--night) 30%, transparent); }
.site-header .btn-small { border-radius: 10px; }
@media (max-width: 1020px) { .site-header:has(.main-nav.is-open) { border-radius: 16px; } }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--night-2); } .site-header.is-light { background: var(--white); } }

/* ---------- the light: one diagonal blue glow, like light through an open door (pure CSS) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: clip; }
.glow { position: absolute; inset: -10% -20% auto; height: min(980px, 120svh); z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(62% 60% at 50% 40%, var(--night) 0%, color-mix(in srgb, var(--night) 70%, transparent) 50%, transparent 78%);
  mask-image: radial-gradient(62% 60% at 50% 40%, var(--night) 0%, color-mix(in srgb, var(--night) 70%, transparent) 50%, transparent 78%); }
.glow-beam { position: absolute; inset: 0; filter: blur(16px); opacity: 1;
  background: repeating-linear-gradient(118deg, transparent 0 7%, var(--beam-lo) 9%, var(--beam-hi) 12.5%, var(--beam-white) 13.2%, var(--beam-hi) 14%, var(--beam-lo) 17%, transparent 20% 27%); }
.glow-beam--2 { filter: blur(48px); opacity: .55; transform: translateX(6%);
  background: repeating-linear-gradient(118deg, transparent 0 12%, var(--beam-lo) 16%, var(--beam-hi) 20%, transparent 26% 34%); }
.glow-core { position: absolute; inset: 20% 30% 30%; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-night) 50%, transparent), transparent); }
:dir(rtl) .glow { transform: scaleX(-1); }
/* the copy always sits on a dark scrim, so its contrast never depends on where a beam falls */
.page-hero > .container:not(.stage-wrap) { position: relative; }
.page-hero > .container:not(.stage-wrap)::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--scrim), color-mix(in srgb, var(--night) 30%, transparent) 70%, transparent); }
.page-hero h1 { text-shadow: 0 2px 24px color-mix(in srgb, var(--night) 60%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.wa-still) .glow-beam { animation: beam-drift 14s var(--ease-in-out) infinite alternate; }
  html:not(.wa-still) .glow-beam--2 { animation-duration: 19s; animation-direction: alternate-reverse; }
}
@keyframes beam-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }
@media (forced-colors: active) { .glow, .page-hero > .container::before { display: none; } }

/* ---------- hero: tight type, big headline, short line, filled + secondary button ---------- */
.page-hero .cta-row { gap: var(--space-sm); margin-top: var(--space-xl); }
.btn { transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); background: var(--accent-fill-press); }
.btn-glass, .into-light a.btn-glass { background: var(--night-glass-2); color: var(--on-night); border: 1px solid var(--night-rim-hi);
  box-shadow: inset 0 1px 0 var(--night-rim-hi); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass:hover { background: color-mix(in srgb, var(--white) 14%, transparent); }
.btn-glass span { margin-inline-start: .25em; }
:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 3px; }
.into-light :focus-visible, .is-light :focus-visible { outline-color: var(--focus-light); }
.into-light .is-night :focus-visible, .site-footer.is-night :focus-visible { outline-color: var(--focus-dark); }

/* ---------- the stage card (Lusion): full container width, rounded, holds the 3D door ---------- */
.stage-wrap { position: relative; margin-top: var(--space-2xl); }
.stage-card { position: relative; overflow: clip; isolation: isolate; border-radius: var(--stage-radius);
  aspect-ratio: 16 / 9; max-height: 82svh; width: 100%; background: var(--night);
  box-shadow: inset 0 0 0 1px var(--night-rim), inset 0 1px 0 var(--night-rim-hi), 0 0 120px -30px color-mix(in srgb, var(--white) 22%, transparent), 0 40px 90px -50px color-mix(in srgb, var(--night) 90%, transparent);
  transform-origin: 50% 0; }
.stage-card .stage { position: absolute; inset: 0; z-index: 0; }
.stage-card .stage.is-static { -webkit-mask-image: none; mask-image: none; }
.stage-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: .35;
  background: radial-gradient(42% 60% at 50% 52%, color-mix(in srgb, var(--white) 16%, transparent), transparent 70%); mix-blend-mode: screen; }
.mark { position: absolute; z-index: 2; width: 14px; height: 14px; pointer-events: none; opacity: .5;
  background: linear-gradient(var(--on-night-2), var(--on-night-2)) center / 1px 100% no-repeat, linear-gradient(var(--on-night-2), var(--on-night-2)) center / 100% 1px no-repeat; }
.mark--ts { top: var(--space-md); inset-inline-start: var(--space-md); } .mark--te { top: var(--space-md); inset-inline-end: var(--space-md); }
.mark--bs { bottom: var(--space-md); inset-inline-start: var(--space-md); } .mark--be { bottom: var(--space-md); inset-inline-end: var(--space-md); }

/* the cinematic scroll: the card grows to full size and its light comes up as it rises into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.wa-still) .stage-card { animation: stage-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    html:not(.wa-still) .stage-card::after { animation: stage-light linear both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  }
}
@keyframes stage-rise { from { transform: scale(.9); } to { transform: scale(1); } }
@keyframes stage-light { from { opacity: .15; } to { opacity: .85; } }
@media (prefers-reduced-motion: no-preference) {
  html.no-sda:not(.wa-still) .stage-card { transform: scale(calc(.9 + .1 * min(1, var(--p, 1) * 1.6))); }
  html.no-sda:not(.wa-still) .stage-card::after { opacity: calc(.15 + .7 * var(--p, 1)); }
}

/* inner pages: the logo symbol with depth and parallax instead of the door */
.stage-card--symbol { aspect-ratio: 21 / 8; display: grid; place-items: center; }
.symbol-depth { position: relative; width: min(38%, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.symbol-depth .symbol { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--night) 80%, transparent)); }
.symbol-halo { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-night) 34%, transparent), color-mix(in srgb, var(--accent-fill) 10%, transparent) 55%, transparent); filter: blur(10px); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.wa-still) .symbol-depth .symbol { animation: sym-turn 90s linear infinite; }
  html:not(.wa-still) .symbol-halo { animation: halo-breathe 7s var(--ease-in-out) infinite alternate; }
  @supports (animation-timeline: view()) {
    html:not(.wa-still) .symbol-depth { animation: sym-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes sym-turn { to { transform: rotate(360deg); } }
@keyframes halo-breathe { from { opacity: .7; transform: scale(.95); } to { opacity: 1; transform: scale(1.06); } }
@keyframes sym-parallax { from { transform: translate3d(0, -14%, 0) scale(.92); } to { transform: translate3d(0, 14%, 0) scale(1.06); } }
.page-hero { padding-bottom: var(--space-2xl); }
.page-hero > .container:not(.stage-wrap) { text-align: center; }
.page-hero h1, .page-hero .lede { margin-inline: auto; }
.page-hero .stage-wrap { margin-top: var(--space-xl); }

.h-dim { color: var(--ink-2); }
.into-light .h-dim { color: var(--grey-2f); }   /* QA #3 re-measure (hcr2, worst pixel incl. 3D): #424245 fell to 3.6-4.5:1 where the scene room shows through (d1440 why/peace/pricing/start, phone pricing); #2f2f33 = main's light-section grey (style.css --ink-2 in .into-light) */
@media (max-width: 760px) { .into-light .h-dim { color: #282829; } }   /* phone: the 3D behind the light sections reaches 143-146 grey under the grey half (pricing accordion headers, home start); #282829 = 4.56-4.73:1 there */
.page-hero .h-dim { color: var(--on-night-2); }

/* glass cards lift on hover (transform only) */
:root .into-light :is(.promise-card, .peace-list li, .addon-card) { transition: transform var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root .into-light :is(.promise-card, .peace-list li, .addon-card):hover { transform: translateY(var(--lift)); }
}


/* scroll reveal by CSS: transform only, so nothing is ever invisible */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.wa-still) .into-light .section > .container { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes rise { from { transform: translate3d(0, 36px, 0) scale(.985); } to { transform: none; } }

/* ---------- footer: night, with the light low behind it ---------- */
:root .site-footer.is-night { position: relative; isolation: isolate; overflow: clip; background: var(--night) !important; color: var(--on-night-2);
  border-radius: 0; box-shadow: none; border-top: 1px solid var(--night-rim); -webkit-backdrop-filter: none; backdrop-filter: none;
  margin-top: 0; padding-block: var(--space-3xl) var(--space-xl); --ink-2: var(--on-night-2); }
.site-footer.is-night .glow { inset: -150px -20% auto; height: 300px; opacity: .55; }
:root .site-footer.is-night h2 { color: var(--on-night); }
:root .site-footer.is-night a { color: var(--on-night); text-decoration-color: var(--night-rim-hi); }
:root .site-footer.is-night a:hover { color: var(--accent-night); }
:root .site-footer.is-night p { color: var(--on-night-2); }
.site-footer.is-night .footer-base { border-top-color: var(--night-rim); }
.site-footer.is-night::before, .site-footer.is-night::after { display: none; }
.into-light { padding-bottom: var(--space-md); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .site-header { top: var(--space-xs); margin-top: var(--space-xs); width: calc(100% - 2 * var(--space-xs)); border-radius: 14px; }
  .stage-wrap { margin-top: var(--space-xl); }
  .stage-card { aspect-ratio: 4 / 5; border-radius: var(--stage-radius-sm); }
  .stage-card--symbol { aspect-ratio: 4 / 3; }
  .symbol-depth { width: min(56%, 240px); }
  .hero-more { grid-template-columns: minmax(0, 1fr); border-radius: var(--stage-radius-sm); }
  .mark { display: none; }
}

/* ---------- fallbacks ---------- */
html.wa-still .stage-card { transform: none; }
@media (prefers-reduced-transparency: reduce) { .hero-more, .btn-glass { background: var(--night-2); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) { .stage-card, .hero-more, :root .into-light .section.is-night > .container { border: 1px solid CanvasText; } .stage-card::after, .mark { display: none; } }
@media print { .glow, .stage-wrap { display: none !important; } :root .into-light .section.is-night > .container, .site-footer.is-night { background: var(--white) !important; color: var(--ink) !important; } }

/* footer on small phones: one column so links keep to one line */
@media (max-width: 480px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
/* FAQ rows (Raycast /pro accordion): hairline rows, quiet hover tint, open row keeps a faint glass ground */
.faq details { border-radius: 0; transition: background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .faq summary:hover { color: var(--accent); } }
.faq details[open] { background: linear-gradient(to bottom, color-mix(in srgb, var(--white) 70%, transparent), transparent); }
/* task pages (a form is the job): the stage card steps back so the form starts near the fold */
main:has(form) .stage-card--symbol { aspect-ratio: 21 / 5; }
main:has(form) .stage-card--symbol .symbol-depth { width: min(22%, 180px); }
@media (max-width: 760px) {
  .stage-card--symbol { aspect-ratio: 16 / 10; }
  main:has(form) .stage-card--symbol { aspect-ratio: 16 / 7; }
  main:has(form) .stage-card--symbol .symbol-depth { width: min(36%, 140px); }
}
@media (max-width: 760px) {
  main:has(form) .stage-card--symbol { place-items: center start; padding-inline: 14%; }
  .stage-card--symbol .symbol-depth { margin-block-end: var(--space-lg); }
}
/* AA over the beams: hero ledes read in near-white, and the scrim behind the copy is denser at its core */
.page-hero .lede { color: var(--on-night); }
.page-hero > .container:not(.stage-wrap)::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--night) 82%, transparent), color-mix(in srgb, var(--night) 55%, transparent) 65%, transparent); }
/* the lockup's ring sits inside the pill, on the pill's own ground */
.site-header a.brand { padding-inline: var(--space-xs); margin-inline: calc(-1 * var(--space-xs)); border-radius: 10px; }
:root .site-header a.brand:focus-visible { outline-offset: 1px; }

/* ---------- the door journey: the home hero, door slot and threshold are exactly main f45da3a (style.css); concept styles only .page-hero ---------- */
/* scan page, phone: emblem centered in the stage card (was pushed to the inline start) */
@media (max-width: 760px) {
  main:has(form#scan) .stage-card--symbol { place-items: center; }
  main:has(form#scan) .stage-card--symbol .symbol-depth { margin-block-end: 0; }
}
/* 44px targets (audit-targets44): skip link, and the privacy link inside the consent label (inline: 12px block padding grows the hit area, not the layout) */
.skip-link { min-height: 44px; display: flex; align-items: center; }
.field.check label a { padding-block: 12px; }