/* ARIEL
   Rules (design.md): dark navy base + one violet accent. No gradients, glow, glass or heavy shadows.
   Shape rule: buttons are full pills; frames, cards and fields are sharp; arches appear only on the two doors (from the logo).
   Direction: logical properties everywhere, so Hebrew (rtl) and English (ltr) share one stylesheet. */

:root {
  color-scheme: dark; /* native checkboxes, spinners and scrollbars follow the dark theme */
  --bg: #0B1020;
  --bg-2: #0F1528;
  --bg-3: #141B33;
  --line: rgba(163, 169, 191, 0.16);
  --line-2: rgba(163, 169, 191, 0.32);
  --field: #5B6279; /* 3:1 against the dark sections - form fields must be findable */
  --text: #E9EBF3;
  --text-2: #A3A9BF;
  --text-3: #7A8199;
  --accent: #7454E8;
  --accent-hover: #8163EE;
  --accent-ink: #A996F5;
  --accent-soft: rgba(116, 84, 232, 0.12);
  --danger: #F2A7B4;
  --ok: #8ED6AE; /* a field filled in right, a message that went through - as soft as the error's pink */
  --hatch: repeating-linear-gradient(45deg, rgba(116, 84, 232, 0.28) 0 1px, transparent 1px 13px);

  --font: 'IBM Plex Sans Hebrew', 'IBM Plex Sans', system-ui, sans-serif;
  --latin: 'IBM Plex Sans', 'IBM Plex Sans Hebrew', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1240px;
  --narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 68px;
  --section: clamp(88px, 11vw, 150px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="en"] body { font-family: var(--latin); }

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2.3rem, 3.8vw, 3.45rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
img, svg { display: block; }
a { color: inherit; }
bdi { font-family: inherit; }
.nw { white-space: nowrap; } /* product names never split across lines */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; }
[dir="ltr"] .i-dir { transform: scaleX(-1); } /* the "forward" arrow points the reading direction */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.section-lead {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--text-2);
  font-size: 1.125rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px; /* a rounded rectangle, not a pill (Ariel, 29.09: "more impressive"); the icon buttons stay round */
  font: 500 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
html[lang="en"] .btn { font-family: var(--latin); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: progress; }
/* the purchase button (Ariel, 29.09), after "wonderful-baboon-62" by cssbuttons-io on uiverse.io (MIT), in the
   site's own violets: a gradient frame around a dark inside, which fills with the gradient on hover and on focus */
.btn-primary {
  position: relative;
  isolation: isolate;
  border: 0;
  background: linear-gradient(144deg, #C9BBFF, var(--accent) 50%, #4B2FD6);
  box-shadow: rgba(116, 84, 232, 0.28) 0 15px 30px -5px;
  color: #fff;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: 7px;
  background: var(--bg);
  transition: opacity 0.3s ease;
}
.btn-primary:is(:hover, :focus-visible)::before { opacity: 0; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-lg { min-height: 52px; padding: 0 32px; font-size: 17px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.16s var(--ease-out);
}
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn:active { transform: scale(0.95); }
.lang img { width: 22px; height: 16px; border-radius: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
}
.brand-mark path { vector-effect: non-scaling-stroke; }
.brand-word { /* inherits the page font - Plex Sans Hebrew carries the same Latin letters, so Hebrew pages skip a download */
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.42em;
  margin-inline-end: -0.42em;
}

.main-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  color: var(--text-2);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - var(--header-h));
  padding-block: 40px 56px;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  column-gap: var(--gutter);
  width: 100%;
}
.hero-copy { grid-column: 1 / span 2; }
.hero-copy .lead {
  max-width: 34ch;
  margin: 22px 0 34px;
  color: var(--text-2);
  font-size: 1.2rem;
}
.hero-mark {
  position: relative;
  grid-column: 3 / span 3;
  justify-self: center;
  width: min(100%, 68vh, 580px);
  view-timeline-name: --mark;
}

.mark { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; }
.mark .lines path {
  fill: none;
  stroke: var(--text);
  stroke-width: 9.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.15s var(--ease-out) forwards;
}
.mark .lines .d1 { animation-duration: 1.4s; }
.mark .lines .d2 { animation-delay: 0.45s; }
.mark .lines .d3 { animation-delay: 0.6s; }
.mark .lines .d4 { animation-delay: 1.05s; animation-duration: 0.7s; }
.mark .lines .d5 { animation-delay: 1.15s; animation-duration: 0.7s; }
.mark .part { transform-box: fill-box; transform-origin: center; }

.cell { cursor: pointer; opacity: 0; animation: reveal 0.8s var(--ease-out) forwards; }
.cell:nth-child(1) { animation-delay: 1.55s; }
.cell:nth-child(2) { animation-delay: 1.65s; }
.cell:nth-child(3) { animation-delay: 1.72s; }
.cell:nth-child(4) { animation-delay: 1.79s; }
.cell:nth-child(5) { animation-delay: 1.86s; }
.cell-shape { fill: url(#hatch); }
.cell-hi { fill: var(--accent); fill-opacity: 0; transition: fill-opacity 0.25s ease; }
.cell:hover .cell-hi { fill-opacity: 0.22; }
/* keyboard focus is stronger than hover: brighter cell and a white label (an outline would hide under the logo lines) */
.cell:focus-visible .cell-hi { fill-opacity: 0.36; }
.cell:focus-visible text { fill: var(--text); }
.cell:focus-visible { outline: none; }
.cell text {
  fill: var(--text-2);
  font-family: var(--mono);
  font-size: 25px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.cell text.cell-small { font-size: 23px; }
.cell-lens text { fill: var(--text); font-size: 42px; font-weight: 500; }
.cell.has-video .cell-shape { fill: transparent; }
.cell.has-video text { display: none; }

/* a video inside a logo cell - behind the lines, masked to the cell */
.cell-video {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cell-video video { width: 100%; height: 100%; object-fit: cover; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes reveal { to { opacity: 1; } }

/* ---------- Doors ---------- */
.doors { padding-block: 16px var(--section); }
.doors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* the content sits in the middle of the arch (Ariel, 29.09) */
  align-items: center;
  gap: 12px;
  min-height: clamp(440px, 44vw, 580px);
  padding: clamp(96px, 11vw, 140px) clamp(24px, 3vw, 40px) 44px; /* the top padding keeps words below the arch's curve */
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 999px 999px 0 0; /* resolves to a true semicircle: the arch of the logo */
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.door::before { /* second line inside the arch - a wall with thickness */
  content: "";
  position: absolute;
  inset: 14px 14px 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.door:hover { border-color: var(--accent); background: var(--accent-soft); }
.door:hover::before { border-color: rgba(116, 84, 232, 0.45); }
/* the two product names, AC_Template and AC_Plugins, share the mono face of the plugin names - one family of names */
.door-title, .product, .choice-title { font-family: var(--mono); letter-spacing: -0.02em; }
.door-title { font-size: clamp(2rem, 3.3vw, 2.8rem); font-weight: 500; line-height: 1.1; }
.door-text { max-width: 30ch; color: var(--text-2); }
/* what is inside each door: the template's seven parts, the twelve plugins' own ribbon icons. Four across in both
   doors; the template's last part, the schedules, takes two cells, so its door stays two rows */
.door-grid { display: grid; gap: 10px; width: min(100%, 390px); margin-top: 16px; }
.door-grid-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.door-cell.wide { grid-column: span 2; }
.door-cell {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.2;
}
.door-cell .i { width: 24px; height: 24px; color: var(--accent-ink); }
/* the icons sit in the same boxes as the template's parts, so both doors carry blocks of the same height */
.door-grid-12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.door-grid-12 img { box-sizing: border-box; width: 100%; height: 50px; padding: 11px; border: 1px solid var(--line); object-fit: contain; }
.door-go {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 20px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, background-color 0.3s ease;
}
.door:hover .door-go { transform: translateX(-6px); border-color: var(--accent); background: var(--accent); }
[dir="ltr"] .door:hover .door-go { transform: translateX(6px); }

/* ---------- Media slots (videos from assets/video/manifest.json) ---------- */
.media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--hatch), var(--bg-2);
}
.media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 14px;
}
.media-label .i { color: var(--accent-ink); font-size: 16px; }
.media.has-video .media-label { display: none; }
.media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Template ---------- */
.template { padding-block: 0 var(--section); }
/* a tall video box on the start side (right in Hebrew), and the six parts of the template beside it (Ariel, 29.09) */
.t-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  margin-top: 48px;
}
.t-video { min-height: 520px; } /* as tall as the cards beside it */
.t-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.t-wide { grid-column: 1 / -1; } /* the seventh part, the schedules, across both columns */
.t-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.t-icon { width: 28px; height: 28px; margin-bottom: 8px; color: var(--accent-ink); }
.t-card h3 { font-size: 1.2rem; }
.t-card p { max-width: 36ch; color: var(--text-2); font-size: 15.5px; }

.section-cta { margin-top: 48px; }

/* ---------- Plugins ---------- */
.plugins { padding-block: 0 var(--section); }
.p-layout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  margin-top: 56px;
}
.p-list {
  grid-column: 1 / span 2;
  position: relative;
  margin: 0;
  padding: 0;
  padding-inline-start: 40px;
  list-style: none;
  view-timeline-name: --plist;
}
.p-list::before, .p-list::after { /* the line that connects all twelve, and its violet progress */
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  inset-inline-start: 11px;
  border-inline-start: 1px solid var(--line-2);
}
.p-list::after { border-color: var(--accent); transform-origin: top; transform: scaleY(0); }
.p-group + .p-group { margin-top: 40px; }
.p-panel {
  display: block;
  margin-bottom: 8px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
  direction: ltr;
}
[dir="rtl"] .p-panel { text-align: right; }
.p-item {
  position: relative;
  padding-block: 22px;
  transition: opacity 0.3s ease;
}
.p-item::before { /* node on the line */
  content: "";
  position: absolute;
  z-index: 1;
  top: 30px;
  inset-inline-start: -34px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.p-item.is-active::before { background: var(--accent); border-color: var(--accent); }
.p-head { display: flex; align-items: center; gap: 14px; }
.p-head img { width: 32px; height: 32px; flex: none; }
.p-head h3 { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; }
.p-item p { margin-top: 10px; max-width: 46ch; color: var(--text-2); }
.media-inline { display: none; }

.p-stage { grid-column: 3 / span 3; } /* the product (video) gets the larger share */
.media-stage {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  aspect-ratio: 16 / 10;
  grid-template-rows: 1fr auto;
  gap: 12px;
  padding: 24px;
  place-items: center;
}
.media-stage .stage-icon { position: relative; width: 32px; height: 32px; align-self: end; }
.stage-name { position: relative; font-family: var(--mono); font-size: 1.05rem; color: var(--text); }
.media-stage .media-label { position: absolute; inset-inline-start: 16px; bottom: 16px; }
.media-stage.has-video .stage-icon, .media-stage.has-video .stage-name { display: none; }
.media-stage.is-switching .stage-icon,
.media-stage.is-switching .stage-name { opacity: 0; }
.media-stage .stage-icon, .media-stage .stage-name { transition: opacity 0.2s ease; }

/* ---------- About ---------- */
.about { padding-block: 0 var(--section); }
.about-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding-top: var(--section);
  border-top: 1px solid var(--line);
}
.about-copy { grid-column: 1 / span 3; }
/* five paragraphs since 29.09 (Ariel: "a smaller font") - body size, with room for a longer line */
.about-text {
  margin-top: 14px;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.7;
}
.about-head + .about-text { margin-top: 26px; }
/* Ariel's photo beside the title (29.09), its corners rounded like the cards; a faint ring keeps its edge on the dark */
.about-head { display: flex; align-items: center; gap: 22px; }
.about-photo img {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(233, 235, 243, 0.12), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.about-mark { grid-column: 4 / span 2; justify-self: center; width: min(100%, 240px); height: auto; }

/* ---------- Questions: one line each, closed until asked ---------- */
.faq { padding-block: 0 var(--section); }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  padding-top: var(--section);
  border-top: 1px solid var(--line);
}
.faq-grid > h2 { grid-column: 1 / span 2; }
.faq-list { grid-column: 3 / span 3; display: grid; gap: 40px; }
/* product names in the mono face, like everywhere; Hebrew titles ("רכישה") fall through to the Hebrew face, which the mono lacks */
.faq-group-title { margin: 0 0 4px; color: var(--accent-ink); font: 500 14px/1.4 'IBM Plex Mono', 'IBM Plex Sans Hebrew', sans-serif; letter-spacing: 0.02em; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { /* a small chevron: down when closed, up when open */
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out), margin 0.25s var(--ease-out);
}
.faq-item[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.faq-item p { max-width: 60ch; margin: -4px 0 20px; color: var(--text-2); }
.faq-item p a { color: var(--accent-ink); }

/* ---------- Contact ---------- */
.contact { padding-block: var(--section); background: var(--bg-2); border-top: 1px solid var(--line); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  row-gap: 40px;
}
.contact-copy { grid-column: 1 / span 2; }
.contact-form { grid-column: 3 / span 3; display: grid; gap: 22px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; align-content: start; }
.field label { color: var(--text-2); font-size: 15px; }
.field .optional { color: var(--text-3); }
.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field);
  border-radius: 10px; /* like the buttons (29.09) */
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font); /* 16px keeps iPhone from zooming in */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[lang="en"] .field input, html[lang="en"] .field textarea { font-family: var(--latin); }
.field textarea { resize: vertical; }
/* focus = a 2px frame in the light violet: the plain gray-to-violet border change was too faint (1.2:1) */
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--danger); }
.field input[aria-invalid]:focus, .field textarea[aria-invalid]:focus { box-shadow: 0 0 0 1px var(--danger); }
.field-hint { color: var(--text-3); font-size: 14px; }
.field-error { color: var(--danger); font-size: 14px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-status { color: var(--text-2); font-size: 15px; }
.form-status:empty { display: none; }
/* the contact form's bot trap (30.09): out of sight and out of the grid, so it adds no gap */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Inner pages (purchase, thanks, legal) ---------- */
.page-main { padding-block: clamp(56px, 8vw, 96px) var(--section); }
.page-main h1 { font-size: clamp(2.2rem, 3.6vw, 3rem); }

.notice {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-2);
  color: var(--text);
  font-size: 15px;
}
.notice-draft { border-inline-start-color: #E0B45C; }

.purchase-form { display: grid; gap: 24px; margin-top: 44px; }
/* each step is a glass panel, so it is clear what belongs together (Ariel, 29.09) - the home page's glass (motion.css),
   without the blur: there is no 3D behind this page */
.step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.022) 40%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.09);
}
.step::after { /* the edge: bright at the top and the bottom, faint on the sides */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 15%, rgba(255, 255, 255, 0.025) 40%, rgba(255, 255, 255, 0.025) 60%, rgba(255, 255, 255, 0.08) 85%, rgba(255, 255, 255, 0.2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.step legend { /* floated, so it sits inside the panel like a heading instead of on its edge */
  float: inline-start;
  width: 100%;
  padding: 0;
  margin-bottom: 18px;
  font-size: 1.25rem;
  font-weight: 500;
}
.step legend + * { clear: both; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choices-hint { margin: -8px 0 16px; } /* "one of them, or both" - right under the step's title */
.choice {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line-2);
  border-radius: 12px; /* rounded like the panel around it and the buttons */
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.choice:hover { border-color: var(--text-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.choice-body { display: grid; gap: 6px; }
.choice-title { font-size: 1.15rem; font-weight: 500; }
.choice-text { color: var(--text-2); font-size: 15px; }
/* the number of licenses belongs to the plugins only, so it opens under that choice (Ariel, 29.09) */
.choices .licenses { grid-column: 2; animation: field-in 0.35s var(--ease-out); }
.purchase-form:not(:has(input[name="product"][value="plugins"]:checked)) .licenses { display: none; }
@keyframes field-in { from { opacity: 0; transform: translateY(-8px); } }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.check a { color: var(--accent-ink); }
.secure-note { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 14px; }
.secure-note .i { color: var(--accent-ink); font-size: 18px; }

.thanks { display: grid; justify-items: start; gap: 20px; }
.thanks .section-lead { margin-top: 0; }
.thanks-mark { width: 96px; height: 96px; margin-bottom: 8px; }
.thanks-product { max-width: 52ch; }
.thanks-question a { color: var(--accent-ink); }

.legal-doc h1 { margin-bottom: 8px; }
.legal-updated { margin-top: 20px; color: var(--text-3); font-size: 14px; }
.legal-doc > p { margin-top: 28px; max-width: 64ch; color: var(--text-2); }
.legal-doc h2 { margin-top: 56px; font-size: 1.6rem; }
.legal-doc h3 { margin-top: 32px; font-size: 1.15rem; }
.legal-doc p { max-width: 64ch; }
.legal-doc h2 + p, .legal-doc h3 + p { margin-top: 12px; color: var(--text-2); }
.legal-doc a { color: var(--accent-ink); }
.legal-part { padding-top: 8px; }
.legal-source { margin-top: 10px; color: var(--text-3); font-size: 15px; }
.legal-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 64ch; color: var(--text-2); }
/* the number sits in the margin; the clause stays one run of text (a grid would split it at every <bdi>) */
.legal-list li { position: relative; padding-inline-start: 3.2em; }
.legal-list .n { position: absolute; inset-inline-start: 0; top: 0; color: var(--text-3); font-family: var(--mono); font-size: 14px; padding-top: 3px; } /* no direction:ltr here - a positioned element reads "start" from its own direction */
.legal-bullets { margin: 14px 0 0; padding-inline-start: 1.2em; display: grid; gap: 8px; max-width: 64ch; color: var(--text-2); }
.draft-notes {
  margin-top: 64px;
  padding: 20px 24px;
  border: 1px dashed #E0B45C;
  color: var(--text-2);
  font-size: 15px;
}
.draft-notes h2 { margin: 0 0 10px; font-size: 1.05rem; color: #E0B45C; }
.draft-notes ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 36px;
}
/* the links get a 42px-tall tap area; the list's negative margin keeps the footer looking the same */
.legal { display: flex; flex-wrap: wrap; column-gap: 24px; margin: -12px 0; padding: 0; list-style: none; }
.legal a { display: inline-block; padding-block: 12px; color: var(--text-3); font-size: 14px; text-decoration: none; }
.legal a:hover { color: var(--text); }
.copyright { color: var(--text-3); font-family: var(--mono); font-size: 13px; }

/* ---------- The details of use (30.09, from the UX booklet Ariel sent; he chose which apply) ---------- */
/* everything clickable answers: on hover a door or a product card rises a little, and on press it gives way. A phone
   has no hover, so there the press is the only answer. translate and scale, not transform: the doors' rise on scroll
   already animates transform */
.door, .choice, .faq-item summary { -webkit-tap-highlight-color: transparent; }
.faq-item summary:active { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .door { transition: border-color 0.3s ease, background-color 0.3s ease, translate 0.25s var(--ease-out), scale 0.15s var(--ease-out), box-shadow 0.3s ease; }
  .choice { transition: border-color 0.2s ease, background-color 0.2s ease, translate 0.2s var(--ease-out), scale 0.15s var(--ease-out), box-shadow 0.25s ease; }
  @media (hover: hover) {
    .door:hover { translate: 0 -4px; }
    .choice:hover { translate: 0 -2px; box-shadow: rgba(116, 84, 232, 0.22) 0 14px 30px -14px; }
  }
  .door:active { scale: 0.985; }
  .choice:active { scale: 0.98; }
}


/* short messages after an action: they slide in at the bottom corner and leave by themselves (site.js, toast) */
.toasts {
  position: fixed;
  z-index: 40;
  inset-inline-end: 20px;
  bottom: 20px;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 15px;
  box-shadow: rgba(0, 0, 0, 0.45) 0 18px 40px -16px;
  pointer-events: auto;
}
.toast .i { margin-top: 4px; font-size: 16px; color: var(--accent-ink); }
.toast-ok { border-inline-start-color: var(--ok); }
.toast-ok .i { color: var(--ok); }
.toast-error { border-inline-start-color: var(--danger); }
.toast-error .i { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 0.35s var(--ease-out); }
  .toast.is-leaving { animation: toast-out 0.25s ease forwards; }
}
@keyframes toast-in { from { opacity: 0; translate: 0 16px; } }
@keyframes toast-out { to { opacity: 0; translate: 0 8px; } }

/* a field filled in right gets a small green check at its end, while typing; an error still waits until the visitor
   leaves the field. The field's own direction decides the end: an email reads left to right on a Hebrew page too */
.field input[data-valid] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%238ED6AE'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
}
.field input[data-valid]:dir(ltr) { background-position: right 14px center; padding-right: 40px; }
.field input[data-valid]:dir(rtl) { background-position: left 14px center; padding-left: 40px; }

/* the purchase in three steps: each says where it stands, and a bar above fills as they are done.
   The bar stays in sight under the header while the form scrolls (Ariel, 30.09) - on a band of the page's own color
   that runs the full width, so the steps pass under it cleanly */
.steps-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
  padding: 14px 0;
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}
/* a field the form jumps to (an error) lands below the header and the bar, not under them */
html:has(.steps-bar) { scroll-padding-top: calc(var(--header-h) + 48px); }
.steps-bar span { height: 4px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.steps-bar span::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
[dir="rtl"] .steps-bar span::after { transform-origin: right; }
.steps-bar span.is-done::after { transform: none; }
.steps-bar + .purchase-form { margin-top: 6px; }
.step-n { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.step-ok { display: none; color: var(--ok); font-size: 14px; }
.step.is-done .step-ok { display: block; }

/* a button waiting for an answer (sending, going to payment) turns a small wheel beside its words */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { rotate: 1turn; } }

/* while something loads, its own box shimmers in the shape it will fill: a video until its first frame, the photo
   until it arrives */
.about-photo { position: relative; display: block; border-radius: 18px; background: var(--bg-3); }
.media.is-loading::after,
.js-motion .about-photo:not(.is-loaded)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 25%, rgba(233, 235, 243, 0.07) 50%, transparent 75%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
  pointer-events: none;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* a video box without its video yet says so on purpose, instead of looking broken */
.media-empty { position: relative; display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.media-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
  color: var(--accent-ink);
  font-size: 22px;
}
.media-empty-title { font-size: 1.1rem; font-weight: 500; }
.media-empty-text { color: var(--text-3); font-size: 14px; }
.media.has-video .media-empty { display: none; }

/* a wrong address: the site's own page instead of the server's white one */
.nf-code { color: var(--accent-ink); font: 500 clamp(3.2rem, 8vw, 5rem)/1 var(--mono); letter-spacing: -0.02em; }
.nf-more { color: var(--text-2); }
.nf-more a { color: var(--accent-ink); }

/* ---------- Motion (only when the visitor allows it) ---------- */
.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js-motion .reveal.is-in { opacity: 1; transform: none; }
/* the template's seven cards arrive one after another */
.js-motion .t-items .reveal:nth-child(2) { transition-delay: 0.06s; }
.js-motion .t-items .reveal:nth-child(3) { transition-delay: 0.12s; }
.js-motion .t-items .reveal:nth-child(4) { transition-delay: 0.18s; }
.js-motion .t-items .reveal:nth-child(5) { transition-delay: 0.24s; }
.js-motion .t-items .reveal:nth-child(6) { transition-delay: 0.3s; }
.js-motion .t-items .reveal:nth-child(7) { transition-delay: 0.36s; }

/* Scroll-driven: the logo's two arches part as the opening scrolls away (they become the doors),
   the doors rise into place, and the plugin line fills as you read. Browsers without support see the still version. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-mark .part-a { animation: part-a linear both; animation-timeline: --mark; animation-range: exit 0% exit 100%; }
    .hero-mark .part-b { animation: part-b linear both; animation-timeline: --mark; animation-range: exit 0% exit 100%; }
    .hero-mark .part-frame { animation: part-frame linear both; animation-timeline: --mark; animation-range: exit 0% exit 100%; }
    .hero-mark .cells { animation: part-cells linear both; animation-timeline: --mark; animation-range: exit 0% exit 70%; }
    .door { animation: door-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .p-list::after { animation: fill-line linear both; animation-timeline: --plist; animation-range: cover 50vh cover calc(100% - 50vh); }
  }
}
/* the two arches slide apart along the logo's own diagonal (its axis of symmetry) - no rotation, so it reads as intended */
@keyframes part-a { to { transform: translate(-6%, -6%); } }
@keyframes part-b { to { transform: translate(6%, 6%); } }
@keyframes part-frame { to { opacity: 0; } }
@keyframes part-cells { to { opacity: 0; } }
/* a door rises whole - never cut (Ariel, 29.09: "it must always be complete, not cut") */
@keyframes door-rise { from { transform: translateY(56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fill-line { to { transform: scaleY(1); } }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-copy { grid-column: 1 / span 3; }
  .hero-mark { grid-column: 4 / span 2; width: 100%; }
  .p-list { grid-column: 1 / -1; }
  .p-stage { display: none; }
  .media-inline { display: grid; margin-top: 16px; aspect-ratio: 16 / 10; }
}

/* ---------- Phone ---------- */
@media (max-width: 860px) {
  /* the menu is always there, hidden, so it can fade and slide in instead of appearing at once (30.09);
     hidden also keeps its links out of reach until it opens */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    inset-inline: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity 0.2s ease, translate 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  .site-header.nav-open .main-nav { visibility: visible; opacity: 1; translate: none; transition-delay: 0s; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .main-nav a { display: block; padding: 14px 0; font-size: 18px; color: var(--text); }
  .menu-toggle { display: inline-grid; }
  .header-row { grid-template-columns: auto 1fr; gap: 12px; }
  .header-actions { justify-self: end; }

  .hero { min-height: auto; padding-block: 28px 56px; }
  .hero-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .hero-copy, .hero-mark { grid-column: 1; }
  .hero-mark { width: min(100%, 440px); }

  .doors-grid { grid-template-columns: 1fr; }
  .door { min-height: 0; padding-top: 104px; }

  .t-layout { grid-template-columns: 1fr; }
  .t-video { min-height: 0; aspect-ratio: 4 / 5; }
  .t-video:not(.has-video) { aspect-ratio: 16 / 10; } /* no video yet: a whole screen of empty box was too much (30.09) */
  .t-items { gap: 12px; }
  .t-card { padding: 20px 18px; }

  .about-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > h2, .faq-list { grid-column: 1; }
  .faq-list { margin-top: 24px; gap: 32px; }
  .about-copy, .about-mark, .contact-copy, .contact-form { grid-column: 1; }
  /* the mark above the words: the 3D arches land on it, and with five paragraphs (29.09) a mark below the text had
     them fly across it while it was being read */
  .about-mark { order: -1; justify-self: start; width: 140px; margin-bottom: 32px; }

  .choices, .fields { grid-template-columns: 1fr; }
  .choices .licenses { grid-column: auto; }
  .step { padding: 22px 18px; border-radius: 18px; }
  .about-photo img { width: 96px; height: 96px; border-radius: 16px; }

  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .header-actions .btn { padding: 0 18px; }
  .brand-word { letter-spacing: 0.3em; margin-inline-end: -0.3em; }
}

/* a phone's door is too narrow for four of the template's parts across ("Parameters" ran over its cell): three
   across, and the schedules on a row of their own */
@media (max-width: 480px) {
  .door-grid-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .door-cell.wide { grid-column: 1 / -1; }
}

/* ---------- Less motion: show the final state ---------- */
@media (prefers-reduced-motion: reduce) {
  .mark .lines path { animation: none; stroke-dashoffset: 0; }
  .cell { animation: none; opacity: 1; }
  .btn, .btn-primary::before, .icon-btn, .door, .door-go, .p-item, .media-stage *, .choice { transition: none; }
  .choices .licenses { animation: none; }
  .faq-item summary::after { transition: none; }
  .main-nav { transition: none; }
  .media.is-loading::after { animation: none; }
  .btn[aria-busy="true"]::after { animation-duration: 1.6s; }
}