/* ============================================================
   PUW — "Two Voices"
   Your voice  = Archivo 900 italic display (questions, rules)
   Puw's voice = JetBrains Mono (captions, matches, alerts)
   Theme flips ink → bone at "Be told." — the notification
   lighting up the room. Accent green = the machine's voice only.
   ============================================================ */

:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --type-giant: clamp(3.2rem, 13vw, 14rem);
  --type-big: clamp(2.3rem, 7.5vw, 6.8rem);
  --type-title: clamp(1.8rem, 4vw, 3.2rem);
  --type-body: clamp(1rem, 1.2vw, 1.2rem);
  --type-mono: clamp(0.8rem, 1vw, 1rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --pad-x: clamp(20px, 5vw, 72px);

  /* ink (dark) — default */
  --bg: #0b0b0c;
  --text: #f2efe9;
  --muted: rgba(242, 239, 233, .52);
  --faint: rgba(242, 239, 233, .22);
  --hairline: rgba(242, 239, 233, .14);
  --accent: #29d67d;            /* the ping — machine voice only */
  --on-accent: #05130b;
  --card-bg: #141416;
  --card-border: rgba(242, 239, 233, .12);
  --nav-bg: rgba(11, 11, 12, .72);
}

[data-theme="light"] {
  --bg: #f2efe9;
  --text: #0b0b0c;
  --muted: rgba(11, 11, 12, .55);
  --faint: rgba(11, 11, 12, .2);
  --hairline: rgba(11, 11, 12, .14);
  --accent: #0c8a4c;
  --on-accent: #f2efe9;
  --card-bg: #faf8f4;
  --card-border: rgba(11, 11, 12, .12);
  --nav-bg: rgba(242, 239, 233, .78);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.mono { font-family: var(--font-mono); }

/* ---------- voices ---------- */

.giant,
.big {
  font-style: italic;
  font-weight: 900;
  font-stretch: 105%;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.giant { font-size: var(--type-giant); letter-spacing: -.03em; line-height: .85; }
.big { font-size: var(--type-big); }

.metal,
.metal .ch {
  background: linear-gradient(180deg, #ffffff 0%, #c8cdd4 42%, #f2f4f6 60%, #8b9198 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Italic caps rise above the .85 line box and lean past their right edge.
   background-clip:text only paints inside the box, and the reveal mask
   clips to it, so both shaved the top off letters like R. Give the boxes
   room, then cancel it with negative margins so the layout doesn't move. */
.hero-title .mask { padding-top: .16em; margin-top: -.16em; }
.metal .ch,
.mline.metal { padding: .16em .08em 0 0; margin: -.16em -.08em 0 0; }

/* split spans (added by JS) */
.mask .ch { display: inline-block; }
.rule-sentence .w { display: inline-block; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.kicker {
  font-size: var(--type-body);
  color: var(--muted);
  max-width: 44ch;
  margin: 2.2rem 0 0;
}

.caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .12em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .8em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }
.btn-lg { font-size: .95rem; padding: 1em 2.2em; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  transition: background-color .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-img { height: 30px; width: auto; display: block; transition: filter .5s var(--ease); }
.brand-word {
  display: none;
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  line-height: 1;
}
[data-theme="light"] .brand-img { filter: invert(1) hue-rotate(180deg); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a:not(.btn) {
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--muted);
  transition: color .25s;
}
.nav-links > a:not(.btn):hover { color: var(--text); }
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--faint);
}
.nav-lang a { color: var(--faint); transition: color .25s; }
.nav-lang a:hover { color: var(--text); }
.nav-lang a.on { color: var(--text); }

/* ---------- sections (shared rhythm) ---------- */

section {
  padding: 0 var(--pad-x);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- S1 hero ---------- */

.hero { padding-top: 14vh; }
/* Turkish İ: its dot would touch the line above at .85 */
.hero-title:lang(tr) { line-height: .95; }
.hero-title .mask { display: block; overflow: hidden; }
.hero-title .mline { display: block; }
/* unsplit (no JS, reduced motion, html.late) the italic words ran together
   ("ASKYOUR"): give the space what it gets split into letters (main.js
   labels a line when it splits it) */
.hero-title .mline:not([aria-label]) { word-spacing: .06em; }
html.js .hero-title { visibility: hidden; }
html.js .hero-title.ready { visibility: visible; }
/* until main.js has the fonts in and sets the intro up (the head script in
   template.html sets html.boot; main.js lifts it) */
html.boot .hero { visibility: hidden; }

/* ---------- the curtain ----------
   On the way into the site the page opens like the hero's eye: a green line
   is drawn across the dark, then the lids part from it, an almond that
   widens past the corners. html.curtain-on shows it (template.html's head);
   main.js lifts html.boot when the fonts are in, and the lids open.
   Without @property the lids don't glide: the page just appears. */
@property --lid { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.curtain { display: none; }
html.curtain-on .curtain {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  background: #0b0b0c;
  --lid: 0%;
  -webkit-mask: radial-gradient(80vw var(--lid) at 50% 50%, transparent 97%, #000 100%);
          mask: radial-gradient(80vw var(--lid) at 50% 50%, transparent 97%, #000 100%);
}
html.curtain-on:not(.boot) .curtain {
  --lid: 85%;
  visibility: hidden;
  transition: --lid 1s cubic-bezier(.7, 0, .2, 1), visibility 0s 1s;
}
.curtain-seam {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -.5px;
  background: var(--accent);
  box-shadow: 0 0 14px 1px rgba(41, 214, 125, .55);
  transform: scaleX(0);
  animation: seam .5s cubic-bezier(.22, .61, .36, 1) .05s forwards;
}
@keyframes seam { to { transform: scaleX(1); } }

.hero-query {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--text);
  margin: 3rem 0 0;
  min-height: 1.6em;
}
/* the questions are whole sentences: on a phone they take two lines, kept so nothing below jumps */
@media (max-width: 640px) { .hero-query { min-height: 3.2em; } }
.q-mark { color: var(--accent); margin-right: .6em; }
.q-rotator { color: var(--muted); unicode-bidi: plaintext; }

.hero-sub {
  color: var(--muted);
  margin: 1.4rem 0 0;
  max-width: 44ch;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 2.6rem;
}
.scroll-cue { font-size: .8rem; color: var(--faint); letter-spacing: .18em; }

/* ---------- S2 problem ---------- */

.problem { position: relative; align-items: flex-start; }
.clock {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  transform: translateY(-72%);
  font-size: clamp(3rem, 17vw, 15rem);
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--faint);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@supports not (-webkit-text-stroke: 1px black) {
  .clock { color: var(--faint); }
}
.problem .big, .problem .kicker { position: relative; z-index: 1; }

/* ---------- S3 / S5 acts ---------- */

.act { padding-top: 12vh; padding-bottom: 12vh; }
.act-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem;
  min-height: 76vh;
}
.act-title { margin: 0; }
.act-num {
  font-size: .22em;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .2em;
  color: var(--accent);
  vertical-align: super;
}

.ask-query,
.rule-sentence {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.captions { display: flex; flex-direction: column; gap: .9rem; max-width: 720px; }
.caption {
  font-size: var(--type-mono);
  line-height: 1.6;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 1.1em;
  margin: 0;
}
.c-time { color: var(--muted); }
.chip {
  display: inline-block;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .15em .8em;
  margin-left: .6em;
  white-space: nowrap;
}
.act-close { color: var(--muted); max-width: 40ch; margin: 0; }

/* Be told — rule sentence overlays the stage while pinned (JS desktop only) */
@media (min-width: 769px) {
  html.js .act-told .rule-sentence {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }
  html.js .act-told .rule-sentence .w-wrap { max-width: 18ch; }
}

/* the messaging-app moment — an incoming chat bubble with a video clip */
.notif {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: min(400px, 100%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px 20px 20px 6px;
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 24px 60px -24px rgba(11, 11, 12, .35);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.notif-clip {
  position: relative;
  height: 168px;
  border-radius: 12px;
  overflow: hidden;
  background: #141517;      /* video thumb stays dark in both themes */
  border: 1px solid rgba(242, 239, 233, .1);
  color: rgba(242, 239, 233, .3);
}
/* the clip's first frame: a Luw.ai illustration in the about page's camera style */
.notif-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.notif-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
}
.notif-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-left: 13px solid #05130b;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.notif-clip-time {
  position: absolute;
  right: 8px;
  bottom: 7px;
  font-size: .65rem;
  color: #f2efe9;
  background: rgba(11, 11, 12, .6);
  padding: .15em .7em;
  border-radius: 999px;
}
.notif-meta { display: inline-flex; align-items: center; gap: .6em; }
.ticks { color: var(--accent); letter-spacing: -.12em; font-weight: 700; }
.notif-via { display: flex; gap: .5em; }
.notif-via span {
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .2em .85em;
}
.notif-head {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.notif-dot {
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: var(--accent);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 .55em transparent; }
}
.notif-body {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.15;
}
.notif-meta { font-size: .75rem; color: var(--muted); }

/* ---------- S4 language marquees ---------- */

.language { padding-left: 0; padding-right: 0; align-items: stretch; }
.language .big, .language .kicker { padding: 0 var(--pad-x); }
.language .kicker { align-self: flex-start; max-width: 52ch; }

.marquees {
  display: flex;
  flex-direction: column;
  gap: .6em;
  margin-top: 3.4rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.2em 0;
}
.marquee { overflow: hidden; white-space: nowrap; }
.marquees .marquee {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 4rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.marquees .marquee:nth-child(2) { color: var(--muted); }
.marquees .marquee:nth-child(3) { color: var(--faint); }
.m-track { display: inline-block; padding-left: var(--pad-x); }
html.js .m-track { padding-left: 0; }
html.js .marquee .m-track { animation: marquee var(--m-dur, 26s) linear infinite; }
html.js .marquee[data-dir="right"] .m-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

.rules-marquee { font-size: var(--type-mono); color: var(--muted); }

/* ---------- S6 hardware ---------- */

.strikes {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
/* struck by default (no-JS reads correctly); JS un-strikes, then re-strikes on scroll */
.strikes li {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 3.2rem);
  line-height: 1.15;
  color: var(--muted);
  transition: color .5s var(--ease);
}
.strikes li::after {
  content: "";
  position: absolute;
  left: -.1em;
  right: -.1em;
  top: 52%;
  height: .07em;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform .6s var(--ease);
}
html.js .strikes li:not(.struck) { color: var(--text); }
html.js .strikes li:not(.struck)::after { transform: scaleX(0); }

.text-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}
.text-link:hover { color: var(--accent); }

/* ---------- S7 pricing ---------- */

.pricing { padding-top: 16vh; padding-bottom: 10vh; }
.pricing-head { max-width: 720px; }
.pricing .lead { color: var(--muted); max-width: 52ch; margin: 1.6rem 0 0; }
.pricing .lead b, .meter-note b { color: var(--text); font-weight: 700; }

.plans {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  margin-top: 3.2rem;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.8rem 1.7rem;
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.plan.feat { border-color: var(--accent); }
.tag {
  position: absolute;
  top: -0.75em;
  left: 1.5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: .3em 1em;
  margin: 0;
}
.plan-name {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.price {
  font-style: italic;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  margin: 0;
}
.price small { font-size: .95rem; font-weight: 400; font-style: normal; color: var(--muted); }
.bill { font-size: .72rem; color: var(--faint); margin: .5rem 0 0; }
.bill + .bill { margin-top: .3rem; color: var(--muted); }
.plan .desc { color: var(--muted); font-size: .95rem; margin: 1.1rem 0 0; }
.plan ul {
  list-style: none;
  margin: 1.2rem 0 1.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .92rem;
}
/* the one plan is wide: its list in two columns */
.plan.feat ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
.plan ul li { padding-left: 1.4em; position: relative; }
.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan .btn { margin-top: auto; align-self: stretch; }

.meter-note {
  color: var(--muted);
  font-size: .9rem;
  max-width: 68ch;
  margin: 2.6rem 0 0;
}
.pr-annual {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 1.6rem 0 0;
  padding: .5em 1.2em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
}
.pr-annual::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--accent);
}
.pr-trust {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 1.8rem 0 0;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -.01em;
  max-width: 56ch;
}
.pr-trust::before {
  content: "";
  flex: none;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--accent);
}
.tl-note {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--faint);
  margin: .9rem 0 0;
}

/* ---------- S8 final ---------- */

.final { text-align: center; align-items: center; }
.final .kicker { margin-left: auto; margin-right: auto; }
.final .cta-row { justify-content: center; }
.note { font-size: .78rem; color: var(--faint); margin: 1.2rem 0 0; letter-spacing: .08em; }

/* ---------- footer ---------- */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px var(--pad-x) 48px;
  border-top: 1px solid var(--hairline);
  font-size: .85rem;
  color: var(--muted);
}
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand img { height: 24px; width: auto; }
[data-theme="light"] .foot-brand img { filter: invert(1) hue-rotate(180deg); }
.foot-brand .mono { font-size: .75rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; } /* seven links don't fit a phone in one row */
.foot-links a:hover, .foot-lang a:hover, .foot-consent:hover { color: var(--text); }
.foot-consent { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* The cookie banner (js/consent.js): Reject and Accept look the same on purpose.
   Settings opens the switches (Necessary, always on; Analytics; Advertising). */
.consent {
  position: fixed; z-index: 200; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(720px, calc(100% - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 16px 20px;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font-family: var(--font-mono); font-size: .8rem; line-height: 1.55;
}
.consent p { margin: 0; flex: 1 1 260px; }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.consent-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent .btn { padding: .65em 1.4em; }
.consent-more { background: none; border: 0; padding: .65em .4em; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-more:hover { color: var(--text); }
.consent-list { flex: 1 1 100%; list-style: none; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: 12px; }
.consent-list li { display: flex; align-items: flex-start; gap: 16px; padding: 12px 14px; }
.consent-list li + li { border-top: 1px solid var(--card-border); }
.consent-list div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.consent-list b { font-weight: 700; }
.consent-list span, .consent-list small { color: var(--muted); font-size: inherit; }
.consent-switch {
  flex: none; position: relative; width: 40px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 999px;
  background: var(--faint); cursor: pointer; transition: background-color .2s;
}
.consent-switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); transition: transform .2s var(--ease);
}
.consent-switch[aria-checked="true"] { background: var(--text); }
.consent-switch[aria-checked="true"]::after { transform: translateX(16px); }
[dir="rtl"] .consent-switch[aria-checked="true"]::after { transform: translateX(-16px); }
.consent-switch:disabled { opacity: .5; cursor: not-allowed; }
.consent-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .consent-switch, .consent-switch::after { transition: none; } }
/* "Cookie settings" under the legal pages */
.doc-foot { max-width: 820px; margin: -60px auto 0; padding: 0 var(--pad-x) 80px; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
/* The chat button (js/chat.js): ours, so Crisp loads only when it's pressed.
   Under the curtain and the cookie banner; where the banner reaches the
   corner (narrow screens) it waits until the banner is answered. */
.chat-fab {
  position: fixed; z-index: 150; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease);
  animation: chat-fab-in .5s var(--ease) 1.2s backwards;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.chat-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-fab[hidden] { display: none; }
@keyframes chat-fab-in { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .chat-fab { animation: none; } }
@media (max-width: 900px) { body:has(> .consent) .chat-fab { display: none; } }
@media print { .chat-fab { display: none; } }
.foot-lang { display: flex; gap: 10px; font-size: .75rem; }
.foot-lang a.on { color: var(--text); }

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .nav-links > a:not(.btn) { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan.feat ul { grid-template-columns: 1fr; }
  .clock { right: auto; left: var(--pad-x); transform: translateY(-120%); }
  .act-stage { gap: 1.8rem; }
  .cta-row { flex-wrap: wrap; }
  section { min-height: 88svh; padding-top: 10vh; padding-bottom: 10vh; }
  .language { padding-top: 10vh; padding-bottom: 10vh; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .caret { animation: none; opacity: 1; }
  html.js .marquee .m-track { animation: none; }
  .strikes li::after { transform: scaleX(1); }
  .strikes li { color: var(--muted); }
  html.js .hero-title { visibility: visible; }
}

/* ---------- hero: download first, the how second ---------- */

.hero-fine { font-size: .78rem; letter-spacing: .04em; color: var(--faint); margin: 1.1rem 0 0; }
.hero > .scroll-cue { display: block; margin-top: 3.2rem; }

/* ---------- language menu (no JS: <details>) ---------- */

.lang-menu { position: relative; font-size: .75rem; letter-spacing: .06em; }
.lang-menu summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: .35em .8em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color .25s, border-color .25s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "\25BE"; margin-inline-start: .45em; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); border-color: var(--faint); }
.lang-menu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 11rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
}
.lang-menu a { display: block; padding: .5em .8em; border-radius: 8px; color: var(--text); letter-spacing: 0; }
.lang-menu a:hover { background: var(--hairline); }
.lang-menu a.on { color: var(--accent); }
.foot-lang { flex-wrap: wrap; gap: 6px 14px; }

/* ---------- S5a draw: motion alarm areas ----------
   The frame is a camera picture, so it stays dark in the light theme. */

.act-draw {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  padding-top: 12vh;
  padding-bottom: 12vh;
}
.draw-copy { display: flex; flex-direction: column; gap: 1.6rem; }
.act-draw .act-title { font-size: var(--type-big); }
.draw-rule {
  font-style: italic;
  font-weight: 800;
  font-size: var(--type-title);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.draw-frame {
  --live-acc: #29d67d;
  position: relative;
  margin: 0;
  direction: ltr;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0b0c;
  color: rgba(242, 239, 233, .4);
  box-shadow: 0 40px 90px -50px rgba(11, 11, 12, .8);
}
.draw-frame svg { display: block; width: 100%; height: 100%; }
.door-gap { fill: rgba(242, 239, 233, .12); stroke: none; }
.door-leaf { transform-box: fill-box; transform-origin: left center; }
.door-leaf rect { fill: #0b0b0c; }
#draw-hatch line { stroke: rgba(242, 239, 233, .3); stroke-width: 1.5; }
.zp-ignore { fill: url(#draw-hatch); stroke: rgba(242, 239, 233, .6); stroke-dasharray: 6 5; }
.zp-watch { stroke: var(--live-acc); stroke-width: 2.5; fill: rgba(41, 214, 125, 0); }
.zp-handles circle { fill: #f2efe9; stroke: #0b0b0c; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.zp-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: rgba(242, 239, 233, .6); stroke: none; }
.zp-label-watch { fill: var(--live-acc); }
.draw-frame .osd { position: absolute; font-size: .72rem; letter-spacing: .1em; color: rgba(242, 239, 233, .75); }
.draw-frame .osd-tl { top: 14px; left: 16px; display: inline-flex; align-items: center; gap: .5em; }
.draw-frame .osd-br { bottom: 14px; right: 16px; }
.draw-frame .rec { width: .55em; height: .55em; border-radius: 50%; background: #e5574c; display: inline-block; }
.draw-alert {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(62%, 290px);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: #f2efe9;
  color: #0b0b0c;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
}
.draw-alert .notif-head, .draw-alert .notif-meta { color: rgba(11, 11, 12, .55); }
.draw-alert .notif-dot { background: #0c8a4c; }
.draw-alert-body { font-style: italic; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.15; }

/* Draw the area, then the door opens, the area lights up and the phone
   pings, on a loop. Without JS or with reduced motion: the final picture. */
@media (prefers-reduced-motion: no-preference) {
  html.js .draw-frame .zp-watch { stroke-dasharray: 100; stroke-dashoffset: 100; }
  html.js .draw-frame .zp-handles circle,
  html.js .draw-frame .zp-label-watch { opacity: 0; }
  html.js .draw-frame .draw-alert { opacity: 0; transform: translateY(-12px) scale(.96); }
  .draw-frame.on .zp-watch { animation: zp-draw 1.4s var(--ease) .2s forwards, zp-flash 4.8s ease-in-out 2.2s infinite; }
  .draw-frame.on .zp-handles circle { animation: zp-pop .35s var(--ease) forwards; }
  .draw-frame.on .zp-handles circle:nth-child(1) { animation-delay: .25s; }
  .draw-frame.on .zp-handles circle:nth-child(2) { animation-delay: .5s; }
  .draw-frame.on .zp-handles circle:nth-child(3) { animation-delay: .75s; }
  .draw-frame.on .zp-handles circle:nth-child(4) { animation-delay: 1s; }
  .draw-frame.on .zp-handles circle:nth-child(5) { animation-delay: 1.25s; }
  .draw-frame.on .zp-label-watch { animation: zp-fade .4s 1.5s forwards; }
  .draw-frame.on .door-leaf { animation: door-swing 4.8s ease-in-out 2.2s infinite; }
  .draw-frame.on .draw-alert { animation: alert-in 4.8s var(--ease) 2.2s infinite; }
}
@keyframes zp-draw { to { stroke-dashoffset: 0; } }
@keyframes zp-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes zp-fade { to { opacity: 1; } }
@keyframes door-swing { 0%, 14% { transform: scaleX(1); } 30%, 62% { transform: scaleX(.4); } 80%, 100% { transform: scaleX(1); } }
@keyframes zp-flash {
  0%, 24% { fill: rgba(41, 214, 125, 0); }
  32%, 60% { fill: rgba(41, 214, 125, .3); }
  74%, 100% { fill: rgba(41, 214, 125, 0); }
}
@keyframes alert-in {
  0%, 28% { opacity: 0; transform: translateY(-12px) scale(.96); }
  36%, 80% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-12px) scale(.96); }
}

/* ---------- S5a1 area: an area with a question ----------
   Same stage as draw, mirrored: a workshop camera, an area around the press
   asking for "no helmet". The worker without one walks in, the AI looks at
   that spot only, the phone pings; the one with a helmet outside never counts.
   Shares draw's area and alert animations, on a slower loop. */

.act-area { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: 4vh; }
.act-area .act-title { font-size: clamp(2.2rem, 3.8vw, 4.4rem); }
.act-area .eyebrow { margin: 0; }
/* Acts 04 and 05 are Pro features (the pricing section says what Lite has). */
.pro-chip { display: inline-block; padding: .2em .7em; border: 1px solid currentColor; border-radius: 999px; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; vertical-align: .1em; }
.area-frame .draw-alert { right: auto; left: 14px; top: auto; bottom: 14px; }
.area-frame .osd-br { top: 14px; bottom: auto; }
.area-frame .helmet { fill: #f5b700; stroke: #f5b700; }
.area-frame .worker-in { color: rgba(242, 239, 233, .9); }
.press-stripes { stroke: rgba(242, 239, 233, .28); }
.ai-look rect { stroke: #e5574c; stroke-width: 2; stroke-dasharray: 5 4; }
.ai-look text { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: #e5574c; stroke: none; }
.area-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 44ch; }
.area-steps li { display: grid; gap: .2rem; padding-left: 1.1em; border-left: 2px solid var(--hairline); line-height: 1.4; }
.area-steps .mono { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
[dir="rtl"] .area-steps li { padding-left: 0; padding-right: 1.1em; border-left: 0; border-right: 2px solid var(--hairline); }
@media (prefers-reduced-motion: no-preference) {
  html.js .area-frame .worker-in { transform: translateX(-150px); opacity: 0; }
  html.js .area-frame .ai-look { opacity: 0; }
  .area-frame.on .zp-watch { animation: zp-draw 1.4s var(--ease) .2s forwards, zp-flash 7s ease-in-out 2.2s infinite; }
  .area-frame.on .draw-alert { animation: alert-in 7s var(--ease) 2.2s infinite; }
  .area-frame.on .worker-in { animation: worker-in 7s var(--ease) 2.2s infinite; }
  .area-frame.on .ai-look { animation: ai-look 7s linear 2.2s infinite; }
}
@keyframes worker-in {
  0% { transform: translateX(-150px); opacity: 0; }
  5% { opacity: 1; }
  24%, 80% { transform: none; opacity: 1; }
  95% { transform: translateX(-150px); opacity: 1; }
  100% { transform: translateX(-150px); opacity: 0; }
}
@keyframes ai-look { 0%, 26% { opacity: 0; } 30%, 80% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* ---------- S5a2 guard: tampering + black box ----------
   Same stage as area, mirrored: a shop camera at night. A hand reaches in
   and turns it; the view it should have stays behind as a dashed ghost, the
   black box fills, the phone pings, on a loop. Without JS or with reduced
   motion: the final picture (turned, ghost, black box, alert). */

.act-guard { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: 4vh; }
.act-guard .eyebrow { margin: 0; }
.act-guard .act-title { font-size: clamp(2.2rem, 3.8vw, 4.4rem); }
.guard-frame .draw-alert { top: auto; bottom: 14px; }
.guard-frame .osd-br { top: 14px; bottom: auto; }
.guard-frame .notif-dot { background: #e5574c; }
.guard-frame text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; stroke: #0b0b0c; stroke-width: 4px; paint-order: stroke; }
.g-scene { transform-origin: 320px 200px; transform: translate(-80px, 10px) rotate(-6deg); }
.g-ghost :is(rect, path) { stroke: var(--live-acc); stroke-width: 2; stroke-dasharray: 7 6; }
.g-ghost text { fill: var(--live-acc); }
.g-moved path { stroke: #e5574c; stroke-width: 2.5; }
.g-moved text { fill: #e5574c; }
.g-hand { transform: translateY(330px); }
.g-hand path { fill: #0b0b0c; stroke: rgba(242, 239, 233, .85); stroke-width: 2; }
.g-hand .g-hand-line { fill: none; stroke: rgba(242, 239, 233, .35); }
.g-static { fill: url(#guard-scan); stroke: none; opacity: 0; }
#guard-scan line { stroke: rgba(242, 239, 233, .55); stroke-width: 1.2; }
.g-box-bg { fill: rgba(11, 11, 12, .82); stroke: rgba(242, 239, 233, .16); }
.g-box-dot { fill: #e5574c; stroke: none; }
.g-box text { fill: #e5574c; }
.g-box .g-box-time { fill: rgba(242, 239, 233, .6); font-size: 11px; font-weight: 400; }
.g-box-track { stroke: rgba(242, 239, 233, .18); stroke-width: 4; }
.g-box-fill { stroke: #e5574c; stroke-width: 4; stroke-dasharray: 100; }
.guard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 44ch; }
.guard-list li { display: grid; gap: .2rem; padding-left: 1.1em; border-left: 2px solid var(--hairline); line-height: 1.4; }
.guard-list .mono { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
[dir="rtl"] .guard-list li { padding-left: 0; padding-right: 1.1em; border-left: 0; border-right: 2px solid var(--hairline); }
@media (prefers-reduced-motion: no-preference) {
  html.js .g-scene { transform: none; }
  html.js .g-ghost, html.js .g-moved, html.js .g-box { opacity: 0; }
  html.js .g-box-fill { stroke-dashoffset: 100; }
  html.js .guard-frame .draw-alert { opacity: 0; transform: translateY(12px) scale(.96); }
  .guard-frame.on .g-scene { animation: g-turn 11s ease-in-out .6s infinite; }
  .guard-frame.on .g-hand { animation: g-hand 11s var(--ease) .6s infinite; }
  .guard-frame.on .g-static { animation: g-static 11s linear .6s infinite; }
  .guard-frame.on .g-ghost { animation: g-ghost 11s linear .6s infinite; }
  .guard-frame.on .g-ghost :is(rect, path) { animation: g-march 1s linear infinite; }
  .guard-frame.on .g-moved { animation: g-moved 11s linear .6s infinite; }
  .guard-frame.on .g-box { animation: g-box 11s linear .6s infinite; }
  .guard-frame.on .g-box-fill { animation: g-box-fill 11s ease-out .6s infinite; }
  .guard-frame.on .g-box-dot { animation: blink 1s steps(1) infinite; }
  .guard-frame.on .draw-alert { animation: g-alert 11s var(--ease) .6s infinite; }
}
@keyframes g-turn {
  0%, 16% { transform: none; opacity: 1; }
  17% { transform: translate(3px, -2px); }
  18% { transform: translate(-4px, 2px) rotate(.5deg); }
  19% { transform: translate(2px, -1px); }
  20% { transform: none; }
  40%, 90% { transform: translate(-80px, 10px) rotate(-6deg); opacity: 1; }
  93% { transform: translate(-80px, 10px) rotate(-6deg); opacity: 0; }
  94% { transform: none; opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes g-hand {
  0%, 8% { transform: translateY(330px); }
  16%, 20% { transform: none; }
  40% { transform: translate(-6px, 4px); }
  48%, 100% { transform: translateY(330px); }
}
@keyframes g-static {
  0%, 15% { opacity: 0; }
  16% { opacity: .55; }
  17% { opacity: .15; }
  18% { opacity: .6; }
  20% { opacity: .2; }
  24%, 36% { opacity: .12; }
  40%, 100% { opacity: 0; }
}
@keyframes g-ghost { 0%, 42% { opacity: 0; } 47%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes g-march { to { stroke-dashoffset: -26; } }
@keyframes g-moved { 0%, 46% { opacity: 0; } 50%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes g-box { 0%, 50% { opacity: 0; } 53%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes g-box-fill { 0%, 53% { stroke-dashoffset: 100; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes g-alert {
  0%, 62% { opacity: 0; transform: translateY(12px) scale(.96); }
  67%, 90% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
}

/* ---------- S5a3 own: scheduled checks + unusual activity (Pro) ----------
   Two small stages side by side. Left: 09:05, the shutter still down; a scan
   passes, Puw marks it CLOSED, the phone pings. Right: a store room's usual
   day as hourly bars (learned once, as it scrolls in); today a lone bar rises
   at 03:12, where every day was quiet, and the phone pings — on a loop.
   Without JS or with reduced motion: the final pictures. */

.act-own { display: grid; gap: clamp(28px, 4vw, 56px); padding-top: 4vh; padding-bottom: 12vh; }
.own-head { display: grid; gap: 1.2rem; }
.own-head .eyebrow { margin: 0; }
.act-own .act-title { font-size: clamp(2.2rem, 3.8vw, 4.4rem); }
.act-own .draw-rule { max-width: 28ch; }
.own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.own-card { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.own-label { margin: .5rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.own-text { margin: 0; line-height: 1.45; max-width: 46ch; }
.own-frame text { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; stroke: #0b0b0c; stroke-width: 4px; paint-order: stroke; }
.own-frame .notif-dot { background: #e5574c; }
.own-frame .draw-alert-body { font-size: clamp(.95rem, 1.25vw, 1.1rem); }
.check-frame .draw-alert { top: auto; bottom: 14px; }
.check-frame .slats line { stroke: rgba(242, 239, 233, .26); }
.check-scan { fill: rgba(41, 214, 125, .35); stroke: none; }
.check-look rect { stroke: #e5574c; stroke-width: 2; stroke-dasharray: 5 4; }
.check-look text { fill: #e5574c; }
.usual-key text { fill: rgba(242, 239, 233, .6); font-size: 11px; }
.usual-key .k-usual, .usual-bars rect { fill: rgba(242, 239, 233, .14); stroke: rgba(242, 239, 233, .45); }
.usual-key .k-today { fill: rgba(229, 87, 76, .35); stroke: #e5574c; }
.usual-bars { transform-origin: 0 320px; }
.hours text { fill: rgba(242, 239, 233, .5); font-size: 11px; font-weight: 400; text-anchor: middle; }
.odd-bar rect { fill: rgba(229, 87, 76, .35); stroke: #e5574c; stroke-width: 2; transform-origin: 0 320px; }
.odd-bar text { fill: #e5574c; text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) {
  html.js .check-scan, html.js .check-look, html.js .odd-bar text { opacity: 0; }
  html.js .usual-bars, html.js .odd-bar rect { transform: scaleY(0); }
  html.js .own-frame .draw-alert { opacity: 0; transform: translateY(12px) scale(.96); }
  .check-frame.on .check-scan { animation: check-scan 8s linear .6s infinite; }
  .check-frame.on .check-look { animation: check-look 8s linear .6s infinite; }
  .check-frame.on .draw-alert { animation: check-alert 8s var(--ease) .6s infinite; }
  .usual-frame.on .usual-bars { animation: usual-learn 1.6s var(--ease) .2s forwards; }
  .usual-frame.on .odd-bar rect { animation: odd-rise 7s var(--ease) 1.4s infinite; }
  .usual-frame.on .odd-bar text { animation: odd-label 7s linear 1.4s infinite; }
  .usual-frame.on .draw-alert { animation: odd-alert 7s var(--ease) 1.4s infinite; }
}
@keyframes check-scan {
  0% { transform: translateY(-10px); opacity: 0; }
  2% { opacity: 1; }
  22% { transform: translateY(400px); opacity: 1; }
  23%, 100% { transform: translateY(400px); opacity: 0; }
}
@keyframes check-look { 0%, 21% { opacity: 0; } 25%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes check-alert {
  0%, 30% { opacity: 0; transform: translateY(12px) scale(.96); }
  35%, 88% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
}
@keyframes usual-learn { from { transform: scaleY(0); } to { transform: none; } }
@keyframes odd-rise { 0%, 12% { transform: scaleY(0); } 26%, 88% { transform: none; } 95%, 100% { transform: scaleY(0); } }
@keyframes odd-label { 0%, 24% { opacity: 0; } 30%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes odd-alert {
  0%, 34% { opacity: 0; transform: translateY(12px) scale(.96); }
  40%, 88% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
}

@media (max-width: 900px) {
  .act-draw { grid-template-columns: 1fr; }
  .act-area .draw-copy { order: -1; }
  .area-frame .draw-alert { width: min(47%, 220px); gap: .15rem; padding: .5rem .65rem; left: 10px; top: 30px; bottom: auto; border-radius: 10px; }
  .area-frame .draw-alert-body { font-size: .8rem; }
  .area-frame .notif-meta { display: none; }
  .area-frame .osd { font-size: .6rem; }
  .act-guard .draw-copy { order: -1; }
  .guard-frame .draw-alert { width: min(56%, 240px); gap: .15rem; padding: .5rem .65rem; right: 10px; bottom: 10px; border-radius: 10px; }
  .guard-frame .draw-alert-body { font-size: .8rem; }
  .guard-frame .notif-meta { display: none; }
  .guard-frame .osd { font-size: .6rem; }
  .draw-alert { width: min(70%, 260px); padding: .7rem .85rem; }
  .own-grid { grid-template-columns: 1fr; }
  .own-frame .draw-alert { width: min(60%, 250px); gap: .15rem; padding: .5rem .65rem; border-radius: 10px; }
  .own-frame .draw-alert-body { font-size: .8rem; }
  .own-frame .notif-meta { display: none; }
  .own-frame .osd { font-size: .6rem; }
  .check-frame .draw-alert { right: 10px; bottom: 10px; }
  .usual-frame .draw-alert { right: 10px; top: 10px; }
}

/* ---------- right-to-left (Arabic) ---------- */

[dir="rtl"] .marquee { direction: ltr; }
[dir="rtl"] .m-item { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .caption { border-left: 0; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 1.1em; }
[dir="rtl"] .q-mark { margin-right: 0; margin-left: .6em; display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .plan ul li { padding-left: 0; padding-right: 1.4em; }
[dir="rtl"] .plan ul li::before { left: auto; right: 0; }
[dir="rtl"] .tag { left: auto; right: 1.5rem; }

/* ---------- scripts without italics or capitals (ja, ko, ar) ----------
   Latin stays Archivo; their own letters come from Noto (loaded per page). */

:lang(ja) { --font-display: "Archivo", "Noto Sans JP", sans-serif; --font-mono: "JetBrains Mono", "Noto Sans JP", monospace; line-break: strict; }
:lang(ko) { --font-display: "Archivo", "Noto Sans KR", sans-serif; --font-mono: "JetBrains Mono", "Noto Sans KR", monospace; word-break: keep-all; }
:lang(ar) { --font-display: "Archivo", "Noto Kufi Arabic", sans-serif; --font-mono: "JetBrains Mono", "Noto Kufi Arabic", monospace; }
:lang(ja) :is(.giant, .big, .draw-rule, .rule-sentence, .uc-rule, .price, .notif-body, .draw-alert-body, .marquees .marquee, .pr-trust, .ask-query),
:lang(ko) :is(.giant, .big, .draw-rule, .rule-sentence, .uc-rule, .price, .notif-body, .draw-alert-body, .marquees .marquee, .pr-trust, .ask-query),
:lang(ar) :is(.giant, .big, .draw-rule, .rule-sentence, .uc-rule, .price, .notif-body, .draw-alert-body, .marquees .marquee, .pr-trust, .ask-query) { font-style: normal; }
:lang(ja) .giant, :lang(ko) .giant, :lang(ar) .giant { letter-spacing: 0; line-height: 1.05; }
/* Spacing letters apart breaks Arabic joining. */
:lang(ar) * { letter-spacing: 0 !important; }

/* ---------- simple pages: thank-you, terms, privacy ---------- */
.doc { max-width: 820px; margin: 0 auto; padding: 140px var(--pad-x) 100px; display: flex; flex-direction: column; gap: 1.4rem; }
.doc .lead { color: var(--muted); max-width: 60ch; }
.legal { display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; line-height: 1.65; }
.legal h1 { font-style: italic; font-weight: 900; font-size: var(--type-title); line-height: 1.05; margin: 0 0 .6rem; }
.legal h2 { font-size: 1.25rem; margin: 1.6rem 0 0; }
.legal h3 { font-size: 1.05rem; margin: 1rem 0 0; }
.legal p, .legal li { color: var(--text); margin: 0; }
.legal ul { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: .4rem; }
.legal blockquote { margin: 0; padding: .9rem 1.1rem; border: 1px solid var(--accent); border-radius: 12px; color: var(--muted); font-size: .92rem; }
.legal a { color: var(--accent); }
.legal code { font-family: var(--font-mono); font-size: .9em; }
.legal .table { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal th, .legal td { border: 1px solid var(--hairline); padding: .55rem .7rem; text-align: start; vertical-align: top; }

.footer > .foot-note { flex-basis: 100%; font-size: .78rem; color: var(--faint); max-width: 80ch; margin: .4rem 0 0; }

/* ---------- not on Windows: send the download link to a PC (main.js) ---------- */

.send {
  width: min(92vw, 440px);
  padding: 2rem 1.8rem 1.6rem;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  background: var(--card-bg);
  color: var(--text);
}
.send[open] { animation: send-in .3s var(--ease); }
@keyframes send-in { from { opacity: 0; transform: translateY(12px); } }
.send::backdrop { background: rgba(5, 5, 6, .72); backdrop-filter: blur(4px); }
.send-x {
  position: absolute;
  top: .5rem;
  right: .7rem;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  padding: .2em .35em;
  cursor: pointer;
}
[dir="rtl"] .send-x { right: auto; left: .7rem; }
.send-h { font-style: italic; font-weight: 900; font-size: 1.7rem; line-height: 1.05; margin: 0 1.8rem 0 0; }
[dir="rtl"] .send-h { margin: 0 0 0 1.8rem; }
.send-p { color: var(--muted); font-size: 1rem; margin: .9rem 0 0; }
.send-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.send-row .btn { flex: 1 1 auto; }
.send-url { font-size: .78rem; color: var(--faint); margin: 1.1rem 0 0; }
.send-anyway { display: inline-block; margin-top: .3rem; font-size: .85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- S2b why we built it: the story beside the same day on the phone ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: center;
  padding-top: 12vh;
  padding-bottom: 12vh;
}
.story-text { max-width: 46rem; }
/* looser than .big: Turkish İ dots would touch the line above */
.story-h { font-size: clamp(2.3rem, 4.8vw, 5.6rem); line-height: .98; margin: 0; }
.story-p { color: var(--muted); max-width: 46ch; margin: 1.4rem 0 0; }
.story-qs { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.story-qs li {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.2;
}
.story-qs li::before {
  content: "›";
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
  margin-inline-end: .6em;
}
.story-sign { color: var(--text); font-size: .9rem; margin: 1.6rem 0 0; }
/* no slanted voice where the script has no italic (as for .giant) */
:lang(ja) :is(.story-qs li, .chat-msg.me, .chat-name),
:lang(ko) :is(.story-qs li, .chat-msg.me, .chat-name),
:lang(ar) :is(.story-qs li, .chat-msg.me, .chat-name) { font-style: normal; }
.story-cta { margin-top: 2rem; }

/* the chat: your voice in bone bubbles, Puw's in mono */
.chat {
  justify-self: end;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.1rem 1.1rem 1.4rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 28px;
}
.chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem .4rem .85rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid var(--hairline);
}
.chat-name { font-style: italic; font-weight: 900; font-size: 1.1rem; }
.chat-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: .5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.chat-meta { font-size: .72rem; color: var(--faint); }
.chat-msg { max-width: 86%; padding: .7rem .9rem .5rem; border-radius: 16px; }
.chat-msg p { margin: 0; }
.chat-msg time { display: block; margin-top: .3rem; font-size: .66rem; color: var(--faint); text-align: end; }
.chat-msg.me {
  align-self: flex-end;
  background: var(--text);
  color: var(--bg);
  font-style: italic;
  font-weight: 800;
  line-height: 1.3;
  border-end-end-radius: 4px;
}
.chat-msg.me time { color: color-mix(in srgb, var(--bg) 55%, transparent); font-style: normal; font-weight: 400; }
.chat-msg.puw {
  align-self: flex-start;
  border: 1px solid var(--hairline);
  border-end-start-radius: 4px;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.5;
}
.chat-msg.alert { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.chat-msg.alert b { color: var(--accent); font-weight: 700; }

/* a camera's picture in a message (always dark, like the camera's) */
.chat-shot {
  position: relative;
  margin-top: .6rem;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #070708;
}
.chat-shot svg { display: block; width: 100%; height: auto; color: rgba(242, 239, 233, .7); }
.chat-shot .d { stroke: rgba(242, 239, 233, .25); }
.chat-shot .s { fill: #070708; }
.chat-shot .k { stroke: var(--accent); stroke-width: 1.8; }
.chat-shot .g { fill: #f2efe9; opacity: .07; stroke: none; }
.chat-shot span { position: absolute; top: .4rem; inset-inline-start: .6rem; font-size: .62rem; color: rgba(242, 239, 233, .55); }

/* it plays once it scrolls into view (main.js adds .on): one message after another */
.chat-msg { transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .6s + .2s); }
html.js .chat:not(.on) .chat-msg { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .chat-msg { transition-delay: 0s !important; }
}

@media (max-width: 1100px) {
  .story { grid-template-columns: 1fr; }
  .chat { justify-self: start; }
}