/* ==========================================================================
   Public landing page (GET /)
   --------------------------------------------------------------------------
   The marketing face of the same product the panel administers, so it inherits
   the panel's tokens — same near-black canvas, same blue accent — but not its
   density. The panel is a console read at arm's length by someone who already
   knows what they came for; this page has to explain the bot to a freelancer
   who has never seen it, so the scale is roughly double and the page breathes.

   A normal sticky header on a desktop; below 1100px its links move into a
   drawer that slides in from the reading edge.

   Deliberately dependency-free: no Tailwind CDN, no font CDN beyond the two the
   panel already pulls, no framework. A landing page that cannot render because a
   CDN is blocked in Iran is worse than a plain one, and this is the page most
   likely to be opened on a bad mobile connection. The same goes for the photos:
   they live in /static/img, sized to how large they are drawn, not hot-linked.
   ========================================================================== */

:root {
  --bg:           #0A0A0B;
  --surface:      #101012;
  --surface-2:    #16161A;
  --surface-3:    #1E1E23;

  --fg:           #FAFAFA;
  --fg-muted:     #C4C4CC;
  --fg-subtle:    #8A8A96;

  --line:         #202024;
  --line-strong:  #2E2E36;

  --accent:       #1963DE;
  --accent-fg:    #FFFFFF;
  --accent-hover: #134FB4;
  --accent-deep:  #000E50;
  --accent-text:  #8FB5FF;
  --accent-wash:  rgba(25, 99, 222, .16);
  /* Referenced by every focus ring on the page and, until now, never defined — so the
     outline resolved to nothing and keyboard focus was invisible. */
  --ring:         #8FB5FF;

  --warn-text:    #FBBF24;
  --info-text:    #7DD3FC;

  /* The mobile drawer, and the header (taller once it carries the links). */
  --side-w:       270px;
  --top-h:        64px;

  --radius:       12px;
  --radius-lg:    18px;
  --radius-xl:    28px;

  --dur:  200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Drawers and reveals want a curve that leaves fast and lands softly, not the symmetric
     one used for hovers. */
  --ease-out: cubic-bezier(.32, .72, 0, 1);

  color-scheme: dark;
}

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

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-muted);
  font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* While the drawer is over the page, the page behind it must not scroll away underneath. */
body.is-drawer-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none; }

/* Latin runs (prices, counts, @handles) inside Persian text. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }

h1, h2, h3 { color: var(--fg); line-height: 1.45; margin: 0; font-weight: 800; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* --- Ambient light --------------------------------------------------------
   One quiet wash up behind the hero, and that is all. Two saturated blobs at opposite
   corners lit the whole page evenly, which is the giveaway of a background nobody looked
   at twice; a single off-centre source reads like a room with one window in it. */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(760px 460px at 72% -10%, rgba(25, 99, 222, .16), transparent 68%);
}

/* Keyboard users land on this before anything else; it stays off-screen until focused. */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: .875rem;
}
.skip:focus { inset-inline-start: 12px; }

/* One focus treatment for everything that can be reached from the keyboard. */
:is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 8px;
}

/* The header is sticky, so every jump target keeps its height clear. */
:target, section[id] { scroll-margin-top: calc(var(--top-h) + 20px); }

/* --- Drawer ----------------------------------------------------------------
   Phones and tablets only: the section links, slid in from the reading edge (the right,
   in Persian) by the burger. */
.sidebar {
  position: fixed;
  z-index: 60;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(var(--side-w), 86vw);
  background: rgba(12, 12, 14, .96);
  border-inline-end: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 340ms var(--ease-out), visibility 340ms;
}
.sidebar.is-open { transform: none; visibility: visible; }
.sidebar-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 16px 18px;
  overflow-y: auto;
  gap: 8px;
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--fg); min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 6px 18px rgba(25, 99, 222, .3), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transition: transform var(--dur) var(--ease);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.brand-text b { font-size: 1rem; font-weight: 800; white-space: nowrap; }
.brand-text small { font-size: .6875rem; color: var(--fg-subtle); font-weight: 500; white-space: nowrap; }

.side-nav { display: grid; gap: 2px; margin-top: 22px; }
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--fg-subtle);
  font-size: .875rem;
  font-weight: 600;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* The marker on the reading edge grows from nothing when a section becomes current, so the
   sidebar answers the scroll instead of just recolouring. */
.side-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--accent-text);
  transform: translateY(-50%);
  transition: height 260ms var(--ease-out);
}
.side-link:hover { color: var(--fg); background: var(--surface-2); }
.side-link.is-active { color: var(--fg); background: var(--surface-3); }
.side-link.is-active::before { height: 22px; }
.side-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.side-icon svg { width: 16px; height: 16px; }
.side-link:hover .side-icon { color: var(--accent-text); border-color: var(--line-strong); }
.side-link.is-active .side-icon { color: var(--accent-text); background: var(--accent-wash); border-color: rgba(25, 99, 222, .3); }

.side-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.side-foot .btn { width: 100%; }
.side-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--fg-subtle);
  transition: color var(--dur) var(--ease);
}
.side-support:hover { color: var(--fg); }
.side-support svg { width: 16px; height: 16px; flex: none; }

/* The dimmed page behind an open drawer. Kept in the flow with opacity so it can fade;
   [hidden] alone would snap it in and out. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(5, 5, 6, .66);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 300ms var(--ease);
}
.scrim[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }

/* --- Header ---------------------------------------------------------------
   A normal site header at every width. Over the hero it is barely there; once the page
   scrolls it picks up a solid ground and a rule, so it reads as sitting above the content. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topbar.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(10, 10, 11, .88);
  box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .9);
}
.topbar-in { display: flex; align-items: center; gap: 16px; height: var(--top-h); }
.topbar .brand-text small { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.top-nav { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.top-link {
  position: relative;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--fg-subtle);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* The underline draws out from the middle on hover, and stays drawn under the section
   being read. */
.top-link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-text);
  transform: scaleX(0);
  transition: transform 280ms var(--ease-out);
}
.top-link:hover { color: var(--fg); }
.top-link:hover::after { transform: scaleX(.5); }
.top-link.is-active { color: var(--fg); }
.top-link.is-active::after { transform: scaleX(1); }

/* On a phone the button shrinks to its icon so brand, button and burger share one row.
   Doubled class so it outranks .btn-sm, which is declared further down. */
@media (max-width: 560px) {
  .top-cta.btn-sm { width: 40px; padding-inline: 0; }
  .top-cta span { display: none; }
}
.topbar-progress { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; overflow: hidden; }
.topbar-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(to left, var(--accent), var(--accent-text));
  transform: scaleX(0);
  transform-origin: right;
}

.icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }

/* Three bars that fold into a cross while the drawer opens. */
.burger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span {
  width: 17px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 280ms var(--ease-out), opacity 180ms var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Each link arrives a beat after the one above it, so the drawer unfolds rather than
   appearing whole. */
.sidebar.is-open .side-link,
.sidebar.is-open .side-foot { animation: side-in 420ms var(--ease-out) both; }
.sidebar.is-open .side-link:nth-child(1) { animation-delay: 60ms; }
.sidebar.is-open .side-link:nth-child(2) { animation-delay: 95ms; }
.sidebar.is-open .side-link:nth-child(3) { animation-delay: 130ms; }
.sidebar.is-open .side-link:nth-child(4) { animation-delay: 165ms; }
.sidebar.is-open .side-link:nth-child(5) { animation-delay: 200ms; }
.sidebar.is-open .side-link:nth-child(6) { animation-delay: 235ms; }
.sidebar.is-open .side-link:nth-child(7) { animation-delay: 270ms; }
.sidebar.is-open .side-link:nth-child(8) { animation-delay: 305ms; }
.sidebar.is-open .side-foot { animation-delay: 340ms; }
@keyframes side-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* A desktop gets an ordinary website: the links sit in the header and the drawer, its
   scrim and its burger do not exist. */
@media (min-width: 1100px) {
  :root { --top-h: 72px; }
  .top-nav { display: flex; }
  .top-nav + .topbar-actions { margin-inline-start: 0; }
  .burger, .sidebar, .scrim { display: none; }
}
@media (min-width: 1280px) {
  .topbar .brand-text small { display: block; }
}

.main { position: relative; z-index: 1; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding-inline: 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn > svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 8px 24px -8px rgba(25, 99, 222, .65);
}
.btn-primary:hover { background: #2E77EC; box-shadow: 0 12px 30px -8px rgba(25, 99, 222, .75); }

.btn-ghost { background: var(--surface-2); color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-3); border-color: #3A3A44; }

.btn-sm { height: 40px; padding-inline: 16px; font-size: .8125rem; border-radius: 11px; }
.btn-sm > svg { width: 16px; height: 16px; }
.btn-lg { height: 54px; padding-inline: 30px; font-size: 1rem; border-radius: 14px; }

/* --- Section furniture ---------------------------------------------------- */
.section { padding-block: 84px; }
.section.is-tight { padding-top: 0; }
.section-head { max-width: 660px; margin-inline: auto; text-align: center; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); letter-spacing: -.01em; }
.section-head p { margin: 14px 0 0; color: var(--fg-subtle); font-size: 1rem; }
/* Most section headings start at the text edge rather than sitting centred. Centring every
   one of them is what gives a page that stacked-template look. */
.section-head.is-start { margin-inline: 0; text-align: start; max-width: 620px; }

.kicker { margin: 0 0 14px; font-size: .875rem; font-weight: 600; color: var(--accent-text); }

/* Every photo gets the same quiet frame: a hairline border and a dark wash at the bottom,
   so it settles into the canvas instead of glaring out of it. */
.hero-photo,
.how-photo,
.tile,
.compare-media,
.field-media,
.banner-media,
.show-media {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
}
:is(.hero-photo, .how-photo, .tile, .compare-media, .field-media, .banner-media, .show-media) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Reveal on scroll ------------------------------------------------------
   Added by script, so with JS off — or with reduced motion asked for — nothing is ever
   hidden waiting for an observer that will not run. */
.will-reveal { opacity: 0; transform: translateY(20px); }
.will-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal, .will-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .sidebar, .burger span, .side-link::before { transition: none; }
  .sidebar.is-open .side-link, .sidebar.is-open .side-foot { animation: none; }
  .hero-quote { animation: none; }
  .card, .chip, .btn, .tile > img, .field-media > img, .show-media > img { transition: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: 56px 88px; }
.hero-grid { display: grid; gap: 56px; align-items: center; }

.hero h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: 1.3; letter-spacing: -.02em; }
/* The emphasis is a line drawn under the phrase rather than a gradient poured through the
   letters — the single most recognisable "generated page" tell, and it costs the text its
   contrast besides. */
.hero h1 .mark { position: relative; white-space: nowrap; }
.hero h1 .underline {
  position: absolute;
  inset-inline: -2%;
  bottom: -.1em;
  width: 104%;
  height: .3em;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero-sub { margin: 22px 0 0; font-size: clamp(1rem, 2.2vw, 1.125rem); color: var(--fg-muted); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}
.hero-note { margin: 16px 0 0; font-size: .8125rem; color: var(--fg-subtle); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; max-width: 520px; }
.stat { padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16, 16, 18, .6); text-align: center; }
.stat b { display: block; color: var(--fg); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.stat span { display: block; margin-top: 4px; font-size: .75rem; color: var(--fg-subtle); }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; }
}

/* The photograph, with a real message the bot sends quoted over its corner. */
.hero-visual { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.hero-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 45%, rgba(10, 10, 11, .72));
}
.hero-quote {
  position: absolute;
  inset-inline-end: -7%;
  bottom: 7%;
  width: min(300px, 84%);
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 17, .86);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95);
  animation: float 7s var(--ease) infinite;
}
.hero-quote figcaption { display: flex; align-items: center; gap: 7px; color: var(--accent-text); font-size: .8125rem; font-weight: 700; }
.hero-quote figcaption svg { width: 15px; height: 15px; flex: none; }
.hero-quote blockquote { margin: 8px 0 0; font-size: .8125rem; line-height: 1.9; color: var(--fg-muted); }
.hero-quote-meta { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .6875rem; color: var(--fg-subtle); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* The overhang only has room once the page is wider than its content column; below that it
   would reach past the edge of the screen. */
@media (max-width: 1239px) {
  .hero-quote { inset-inline-end: 0; }
}
@media (max-width: 700px) {
  .hero-quote { width: 92%; }
}

/* --- Inside the bot: alternating photo rows --------------------------------
   What used to be a carousel of drawn phone screens. Rows do not scroll sideways, nothing
   auto-advances, and every word is real text rather than a picture of text. */
.shows { display: grid; gap: 56px; }
.show { display: grid; gap: 22px; align-items: center; }
.show-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.show-media > img { transition: transform 900ms var(--ease); }
.show:hover .show-media > img { transform: scale(1.04); }
.show-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, .55));
}
.show-step {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-text);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.show-body h3 { font-size: clamp(1.25rem, 2.6vw, 1.625rem); margin-bottom: 12px; letter-spacing: -.01em; }
.show-body > p { margin: 0; font-size: .9375rem; color: var(--fg-subtle); line-height: 1.95; }
.show-body .ticks { margin-top: 16px; }
.show-note { margin: 12px 0 0; font-size: .8125rem; color: var(--fg-subtle); }

@media (min-width: 900px) {
  .shows { gap: 88px; }
  .show { grid-template-columns: 1fr 1fr; gap: 52px; }
  /* Every other row puts the photograph on the other side, so the eye zig-zags down the
     section instead of running down one rail. */
  .show:nth-child(even) .show-media { order: 2; }
}

/* Chips: the bot's own field names and menu labels, as they appear on its keyboard. */
.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 22, 26, .9), rgba(16, 16, 18, .9));
  color: var(--fg-muted);
  font-size: .8125rem;
  font-weight: 600;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { border-color: rgba(25, 99, 222, .4); color: var(--fg); transform: translateY(-2px); }
.chip-n { color: var(--fg-subtle); font-size: .75rem; }
.chip-icon { display: grid; place-items: center; color: var(--accent-text); }
.chip-icon svg { width: 15px; height: 15px; }

/* The sample message the bot writes, set as the quotation it is. */
.quote {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  background: rgba(22, 22, 26, .8);
  font-size: .875rem;
  line-height: 1.95;
  color: var(--fg-muted);
}

/* --- Feature list ----------------------------------------------------------
   A list with a rule between the rows and the icon inline with the heading — writing with
   headings, which is what it is, rather than six identical bordered boxes. */
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 46px; grid-template-columns: 1fr; }
/* Two explicit columns rather than auto-fit: with auto-fit the track count depended on the
   viewport, and the rule above the first row — removed by position — came back on whichever
   item happened to land third. */
@media (min-width: 760px) {
  .feats { grid-template-columns: 1fr 1fr; }
}
.feat { display: flex; align-items: flex-start; gap: 16px; padding-block: 26px; border-top: 1px solid var(--line); }
.feat:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 760px) {
  .feat:nth-child(2) { border-top: 0; padding-top: 0; }
}
.feat-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  margin-top: 2px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent-text);
}
.feat-icon svg { width: 19px; height: 19px; }
.feat h3 { font-size: 1rem; margin: 0 0 7px; }
.feat p { margin: 0; font-size: .875rem; color: var(--fg-subtle); line-height: 1.9; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(22, 22, 26, .8), rgba(16, 16, 18, .8));
  transition: border-color var(--dur) var(--ease);
}
/* Only the border answers a hover. Every card lifting by the same 3px was a uniform tic
   rather than a response to anything. */
.card:hover { border-color: var(--line-strong); }
.card h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.card p { margin: 0; font-size: .875rem; color: var(--fg-subtle); line-height: 1.9; }

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--accent-wash);
  border: 1px solid rgba(25, 99, 222, .28);
  color: var(--accent-text);
  font-size: 1.25rem;
}
.card-icon svg { width: 21px; height: 21px; }

/* --- Before / after ------------------------------------------------------- */
.compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 380px) {
  .compare { grid-template-columns: 1fr; }
}
.compare-col { padding: 0; overflow: hidden; }
.compare-media { aspect-ratio: 16 / 8; border-bottom: 1px solid var(--line); }
/* The «before» photo is drained of colour, so the two columns differ before a word of
   either is read. */
.is-before .compare-media > img { filter: grayscale(1) brightness(.72) contrast(1.05); }
.compare-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(16, 16, 18, .75)); }
.compare-body { padding: 22px 24px 26px; }
.compare-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; margin-bottom: 16px; }
.compare-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.compare-icon svg { width: 16px; height: 16px; }
.compare-icon.is-bad { background: rgba(220, 38, 38, .12); border: 1px solid rgba(220, 38, 38, .26); color: #F87171; }
.compare-icon.is-ok  { background: var(--accent-wash); border: 1px solid rgba(25, 99, 222, .34); color: var(--accent-text); }
.is-before .compare-body { opacity: .82; }
.is-after { border-color: rgba(25, 99, 222, .3); }

/* Bulleted lists whose marker is drawn, so the text of every line starts on the same
   vertical rule however long the line above wrapped. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-inline-start: 22px; font-size: .875rem; line-height: 1.85; color: var(--fg-subtle); }
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: .78em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.ticks.is-ok li { color: var(--fg-muted); }
.ticks.is-ok li::before { background: var(--accent-text); }

/* --- Pipeline -------------------------------------------------------------
   On a phone, a vertical timeline: each step a compact row with its icon on the reading
   edge, and a line running down from one icon to the next. From 760px, a row of five with
   the line running across instead.

   The steps used to be flex items with a 150px basis inside a column — and in a column a
   flex basis is a HEIGHT, which is what turned each step into a tall, mostly empty box. */
.pipeline { margin: 40px 0 0; }
.pipeline-cap { text-align: center; font-size: .8125rem; color: var(--fg-subtle); margin: 0 0 18px; }
.pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pipe-step {
  --icon: 42px;
  --pad: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px var(--pad);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 22, 26, .8), rgba(16, 16, 18, .8));
}
.pipe-icon {
  position: relative;
  z-index: 1;
  width: var(--icon); height: var(--icon); flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
}
.pipe-icon svg { width: 20px; height: 20px; }
.pipe-text { min-width: 0; }
.pipe-text b { display: block; color: var(--fg); font-size: .9375rem; font-weight: 700; line-height: 1.5; }
.pipe-text span { display: block; color: var(--fg-subtle); font-size: .8125rem; line-height: 1.6; }

/* The connector: from the bottom of this step's icon, through the gap, to the top of the
   next one's. Every step holds the same two lines, so they share one height and the line
   can be sized from this step alone. */
.pipe-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--pad) + var(--icon) / 2 - 1px);
  top: calc(50% + var(--icon) / 2);
  width: 2px;
  height: calc(100% - var(--icon) + 14px);
  border-radius: 2px;
  background: linear-gradient(rgba(143, 181, 255, .45), rgba(143, 181, 255, .12));
}

.pipe-step.is-accent { border-color: rgba(25, 99, 222, .4); background: rgba(25, 99, 222, .1); }
.pipe-step.is-accent .pipe-icon { background: var(--accent-wash); border-color: rgba(25, 99, 222, .45); }
.pipe-step.is-accent b { color: var(--accent-text); }
.pipe-step.is-you { border-color: rgba(25, 99, 222, .6); background: linear-gradient(180deg, rgba(25, 99, 222, .22), rgba(25, 99, 222, .08)); }
.pipe-step.is-you .pipe-icon { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(25, 99, 222, .9); }

@media (min-width: 760px) {
  .pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .pipe-step { flex-direction: column; text-align: center; gap: 12px; padding: 20px 12px 18px; --pad: 20px; }
  /* Across the row now: from the inline-end edge of this icon to the next card's icon. */
  .pipe-step:not(:last-child)::after {
    top: calc(var(--pad) + var(--icon) / 2 - 1px);
    inset-inline-start: calc(50% + var(--icon) / 2);
    width: calc(100% - var(--icon) + 16px);
    height: 2px;
    background: linear-gradient(to left, rgba(143, 181, 255, .45), rgba(143, 181, 255, .12));
  }
}

/* --- Steps timeline -------------------------------------------------------- */
.how-grid { display: grid; gap: 40px; }
.how-photo { aspect-ratio: 16 / 10; border-radius: var(--radius-xl); border: 1px solid var(--line-strong); }
.how-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 11, .88)); }
.how-photo figcaption {
  position: absolute;
  z-index: 1;
  inset-inline: 22px;
  bottom: 20px;
  color: var(--fg);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.8;
}
/* Side by side, the photo stays in view while the four steps scroll past it. */
@media (min-width: 980px) {
  .how-grid { grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: start; }
  .how-photo { aspect-ratio: 9 / 11; position: sticky; top: calc(var(--top-h) + 28px); margin-top: 8px; }
}

/* A real <ol>, with the numeral in a badge on the rail rather than inside the card, so
   every card's text starts at the same place no matter how long its heading runs. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step-item { position: relative; display: flex; align-items: stretch; gap: 16px; }
.step-dot {
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  margin-top: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
  font-weight: 800;
  font-size: .9375rem;
  z-index: 1;
}
/* The rail: drawn from each badge down to the next, so it never overshoots the last item. */
.step-item:not(:last-child) .step-dot::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  width: 1px;
  height: calc(100% + 14px);
  background: linear-gradient(var(--line-strong), transparent);
}
.step-card { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; }
.step-card .card-icon { margin-bottom: 0; }
.step-body { min-width: 0; }
.step-body h3 { margin-bottom: 6px; }

@media (max-width: 620px) {
  .step-item { gap: 12px; }
  .step-dot { width: 34px; height: 34px; font-size: .875rem; margin-top: 20px; }
  /* Once the row is narrow the icon and the text stop fitting side by side. */
  .step-card { flex-direction: column; gap: 12px; padding: 20px; }
  .step-card .card-icon { margin-bottom: 0; }
}

/* --- Who it's for: a photo mosaic ------------------------------------------
   Four real photos at deliberately unequal sizes. Equal tiles would read as a stock grid;
   one large picture with three around it reads as a spread someone laid out. */
.mosaic { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
.tile { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.tile > img { transition: transform 700ms var(--ease); }
.tile:hover > img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(10, 10, 11, .9)); }
.tile figcaption { position: absolute; z-index: 1; inset-inline: 16px; bottom: 14px; line-height: 1.6; }
.tile figcaption b { display: block; color: #fff; font-size: 1rem; font-weight: 800; }
.tile figcaption span { display: block; color: rgba(255, 255, 255, .72); font-size: .78125rem; }
.tile.is-big { grid-column: span 2; grid-row: span 2; }
.tile.is-wide { grid-column: span 2; }
.tile.is-big figcaption b { font-size: 1.25rem; }
/* Two columns cannot fit a caption under a 150px square without covering the picture. */
@media (max-width: 759px) {
  .tile:not(.is-big):not(.is-wide) figcaption span { display: none; }
}
@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 14px; }
  .tile figcaption { inset-inline: 20px; bottom: 18px; }
}

/* --- Fields: one photo card per field --------------------------------------
   Each field is a real photo of that kind of work, with the same emoji the bot's own
   keyboard uses sitting on it, so the card and the button a user presses later match. */
.fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.field { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.field-media { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--line); }
.field-media > img { transition: transform 700ms var(--ease); }
.field:hover .field-media > img { transform: scale(1.05); }
.field-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .15), transparent 40%, rgba(10, 10, 11, .6));
}
.cat-icon {
  position: absolute;
  z-index: 1;
  inset-inline-start: 14px;
  bottom: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(16, 16, 18, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-icon svg { width: 21px; height: 21px; }
.field:hover .cat-icon { background: var(--accent); border-color: transparent; }
/* A field with no photo yet shows its icon large in the middle instead of a blank frame. */
.field-media.is-empty .cat-icon { inset: 0; margin: auto; width: 64px; height: 64px; color: var(--accent-text); }
.field-media.is-empty .cat-icon svg { width: 30px; height: 30px; }
.cat-count {
  position: absolute;
  z-index: 1;
  top: 12px;
  inset-inline-end: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 11, .66);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .71875rem;
  font-weight: 600;
  white-space: nowrap;
}
.field-body { padding: 16px 18px 18px; }
.field-body h3 { font-size: .9375rem; margin-bottom: 4px; line-height: 1.6; }
/* The sample subcategories are a hint, not a list: two lines at most, so every card in a
   row keeps the same height however long the field's names are. */
.field-body p {
  font-size: .78125rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Pricing -------------------------------------------------------------- */
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
@media (max-width: 380px) {
  .plans { grid-template-columns: 1fr; }
}
.plan { padding: 30px 26px; }
.plan.is-featured {
  border-color: rgba(25, 99, 222, .45);
  background: linear-gradient(180deg, rgba(25, 99, 222, .1), rgba(16, 16, 18, .9));
  box-shadow: 0 24px 60px -34px rgba(25, 99, 222, .8);
}
.plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: .6875rem;
  font-weight: 800;
}
.plan-name { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; color: var(--fg); }
.plan-icon {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
}
.plan-icon svg { width: 18px; height: 18px; }
.plan.is-featured .plan-icon { background: var(--accent-wash); border-color: rgba(25, 99, 222, .4); color: var(--accent-text); }
.plan-tagline { margin: 10px 0 0; font-size: .875rem; color: var(--fg-subtle); min-height: 3.4em; }

.plan-prices { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .875rem; }
.price-row .dur { color: var(--fg-subtle); }
.price-row .amt { color: var(--fg); font-weight: 700; }
.price-free { font-size: 1.75rem; font-weight: 800; color: var(--accent-text); }
.price-note { font-size: .8125rem; color: var(--fg-subtle); }

.plan-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; color: var(--fg-muted); line-height: 1.75; }
.plan-list svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--accent-text); }
.plan-list .off { color: var(--fg-subtle); }
.plan-list .off svg { color: var(--fg-subtle); opacity: .6; }
.plan .btn { width: 100%; margin-top: 24px; }

/* --- Referral / closing banner -------------------------------------------- */
.banner {
  position: relative;
  padding: 44px 32px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(25, 99, 222, .3);
  background:
    radial-gradient(520px 200px at 80% 0%, rgba(25, 99, 222, .2), transparent 70%),
    linear-gradient(180deg, rgba(22, 22, 26, .9), rgba(16, 16, 18, .9));
  text-align: center;
  overflow: hidden;
}
.banner h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.banner p { margin: 14px auto 0; max-width: 560px; color: var(--fg-subtle); }
.banner .btn { margin-top: 28px; }

/* The referral banner: copy on one side, a photo of friends working together on the other. */
.banner.is-split { display: grid; padding: 0; text-align: start; }
.banner-copy { padding: 40px 28px; align-self: center; }
.banner-copy p { margin-inline: 0; }
.banner-media { min-height: 240px; }
.banner-media > img { position: absolute; inset: 0; }
.banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 16, 18, .9), transparent 45%); }
@media (min-width: 860px) {
  .banner.is-split { grid-template-columns: 1.1fr .9fr; }
  .banner-copy { padding: 52px 44px; }
  .banner-media { min-height: 100%; }
  /* The fade runs toward the copy, which in RTL is on the right. */
  .banner-media::after { background: linear-gradient(to left, rgba(16, 16, 18, .95), transparent 50%); }
}

/* The closing banner sits on a photograph, darkened enough that the heading keeps its
   contrast wherever the light in the picture happens to fall. */
.banner.is-photo { padding-block: 84px; background: var(--surface); }
.banner.is-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.banner.is-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(10, 10, 11, .55), rgba(10, 10, 11, .92));
}
.banner.is-photo > :not(img) { position: relative; z-index: 1; }
.banner.is-photo p { color: var(--fg-muted); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(16, 16, 18, .7); transition: border-color var(--dur) var(--ease); }
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  padding: 18px 20px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-size: 1.25rem; font-weight: 700; flex: none; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-q { display: flex; align-items: center; gap: 11px; min-width: 0; }
.faq-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-icon svg { width: 16px; height: 16px; }
.faq details[open] .faq-icon { background: var(--accent-wash); border-color: rgba(25, 99, 222, .35); }
.faq-a { padding: 0 20px 18px; }
/* Answers come from the bot verbatim, where a blank line separates paragraphs; each of
   those becomes a <p> so the spacing survives the trip to the web. */
.faq-a p { margin: 0 0 10px; font-size: .875rem; color: var(--fg-subtle); line-height: 1.95; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-more { text-align: center; margin: 24px 0 0; font-size: .875rem; color: var(--fg-subtle); }
.link { color: var(--accent-text); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* --- Footer ---------------------------------------------------------------
   What the product is, where every section is, every field by name, and how to reach
   support — the things a visitor who scrolled all the way down is most likely after. */
.foot {
  position: relative;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(600px 220px at 85% 0%, rgba(25, 99, 222, .08), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg));
}
.foot-grid { display: grid; gap: 36px 24px; padding-block: 56px 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 1.7fr 1fr 1.1fr 1.2fr; gap: 40px; }
  .foot-brand { grid-column: auto; }
}
.foot-brand p { margin: 16px 0 0; max-width: 360px; font-size: .875rem; color: var(--fg-subtle); line-height: 1.95; }
.foot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.foot-h { margin: 0 0 14px; color: var(--fg); font-size: .875rem; font-weight: 700; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-list a { font-size: .84375rem; color: var(--fg-subtle); transition: color var(--dur) var(--ease); }
.foot-list a:hover { color: var(--fg); }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--line);
}
.foot-bottom p { margin: 0; font-size: .8125rem; color: var(--fg-subtle); }
.foot-bottom p a { color: var(--fg-muted); }
.foot-bottom p a:hover { text-decoration: underline; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: .8125rem;
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.to-top:hover { background: var(--surface-3); color: var(--fg); }
.to-top svg { width: 15px; height: 15px; }