/* Mahbodpour landing page, UI/UX prototype.
   Built on the Minutes Agency design system (plated white cards, orange
   material buttons, tag pills, dark video island), coloured
   with the Mahbodpour palette (D10): Orange #F16204, Navy #0E1A2C, neutrals. */

@font-face { font-family: "Modam"; src: url("assets/fonts/Modam-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Modam"; src: url("assets/fonts/Modam-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Modam"; src: url("assets/fonts/Modam-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Modam"; src: url("assets/fonts/Modam-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Modam"; src: url("assets/fonts/Modam-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Latin glyphs come from Plus Jakarta Sans (the Minutes display face);
   unicode-range keeps it off Persian text so Modam renders every Farsi glyph. */
@font-face {
  font-family: "Jakarta";
  src: url("assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* Mahbodpour palette */
  --orange: #f16204;
  --orange-light: #fccdac;
  --orange-lightest: #feefe6;
  --orange-text: #9a3d00;
  --navy: #0e1a2c;
  --navy-light: #cbd2dc;
  --navy-lightest: #e9ecf2;
  --bg: #f5f5f5;
  --card-grey: #f0f0f0;
  --white: #fff;
  --ink: #363636;
  --ink-strong: #0e1a2c;
  --muted: #5e5e5e;
  --hairline: rgba(54, 54, 54, 0.1);
  --positive: #1d8a4c;
  --negative: #d65a2e;

  /* Minutes pill material, re-toned to Mahbodpour navy */
  --tag-text: #0e1a2c;
  --tag-ring: #cbd2dc;
  --tag-glow: rgba(14, 26, 44, 0.22);
  /* hovered fill for the FAQ chevron pill: as far from --tag-ring as Minutes'
     --purple-hover is from its lilac (ΔE2000 15.8 vs 16.3), so the cue still
     reads in peripheral vision; the navy glyph on it is 6.3:1 */
  --tag-hover: #8b9db4;

  /* Minutes button material */
  --surface-orange: linear-gradient(180deg, #f4700e 0%, #f16204 55%, #ea5c00 100%);
  --surface-soft: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --shadow-e1: 0 1px 2px 0 rgba(14, 26, 44, 0.04), 0 8px 24px -8px rgba(14, 26, 44, 0.08);
  --shadow-e2: 0 2px 4px 0 rgba(14, 26, 44, 0.06), 0 12px 28px -8px rgba(14, 26, 44, 0.16);
  --shadow-orange-glow: 0 1px 2px 0 rgba(14, 26, 44, 0.08), 0 10px 26px -6px rgba(241, 98, 4, 0.3);
  --shadow-orange-glow-lg: 0 2px 4px 0 rgba(14, 26, 44, 0.08), 0 14px 34px -6px rgba(241, 98, 4, 0.38);

  /* Minutes motion system */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-tap: 80ms;
  --dur-hover: 200ms;
  --dur-panel: 340ms;
  --dur-enter: 720ms;

  --font: "Jakarta", "Modam", system-ui, sans-serif;
  --gutter: 16px;
  --header-h: 72px;
  /* room above the bar: the header row centres 45px down on phones, as on
     minutes.agency, and 50px from 768px up, a touch tighter than its 57px;
     the bar's own centre is 36px */
  --header-gap: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
bdi { font-family: "Jakarta", "Modam", sans-serif; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; border-radius: 8px; }
/* the dark orange keeps the ring at 3:1 on the light surfaces; the dark ones keep the brand orange,
   drawn solid over the price card's button glow and the video scrim so it stays at 3:1 there */
.footer :focus-visible, .sc-board :focus-visible { outline-color: rgba(241, 98, 4, 0.7); }
.book-price :focus-visible, .vmodal :focus-visible { outline-color: var(--orange); }

.skip {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px;
}
.skip:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: min(1240px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
@media (min-width: 768px) { :root { --gutter: 5vw; --header-gap: 14px; } }
@media (min-width: 1367px) { :root { --gutter: 32px; } }

.section { padding-block: 72px; }
@media (min-width: 1025px) { .section { padding-block: 112px; } }
/* the last block on a page needs less room below it: the switch to the black
   footer already sets the two apart */
main > :last-child { padding-bottom: 56px; }
@media (min-width: 1025px) { main > :last-child { padding-bottom: 80px; } }

.sec-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 40px; }
@media (min-width: 1025px) { .sec-head { margin-bottom: 56px; } }
.sec-head .pill { margin-bottom: 18px; }
.sec-head.start { margin-inline: 0; text-align: start; }
.sec-head .h-sec + .p-lead { margin-top: 12px; }

/* ---------- type ---------- */
/* Balance short headings and introductions; keep prose from ending in a lone word. */
h1, h2, h3, h4, .p-lead, .qa summary > span:first-child, .vmeta b { text-wrap: balance; }
p, .ans, .doc-list li, .book-notes li { text-wrap: pretty; }
.h-hero {
  font-weight: 800;
  color: var(--ink-strong);
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.35;
}
.h-sec {
  font-weight: 700;
  color: var(--ink-strong);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.45;
}
.h-card {
  font-weight: 700;
  color: var(--ink-strong);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
}
.p-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.9; color: var(--muted); }
.p-card { font-size: 16px; line-height: 1.85; color: var(--muted); }
.accent { color: var(--orange); }

/* ---------- buttons (Minutes portal material, three sizes) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 100px;
  font-family: var(--font); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition:
    transform var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover),
    background-color var(--dur-hover) var(--ease-hover),
    border-color var(--dur-hover) var(--ease-hover);
  font-size: 15px; line-height: 22px; padding: 12px 26px;
}
.btn-sm { font-size: 14px; line-height: 20px; padding: 10px 18px; }
.btn-lg { font-size: 16px; line-height: 24px; padding: 14px 32px; }
@media (min-width: 1025px) {
  .btn { font-size: 16px; line-height: 24px; padding: 14px 32px; }
  .btn-sm { font-size: 15px; line-height: 22px; padding: 11px 22px; }
  .btn-lg { font-size: 17px; line-height: 26px; padding: 16px 40px; }
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-orange {
  background: var(--surface-orange); border-color: var(--orange); color: #fff; font-weight: 700;
  box-shadow: var(--edge-top), var(--shadow-orange-glow);
}
.btn-glow { box-shadow: var(--edge-top), var(--shadow-orange-glow-lg); }
.btn-white {
  background-color: #fff; background-image: var(--surface-soft);
  border-color: #e0e0e0; color: var(--ink-strong); font-weight: 600;
  box-shadow: 0 1px 2px 0 rgba(14, 26, 44, 0.04);
}
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }
.btn-block { width: 100%; }
/* On phones the buttons take Minutes' size there, 16px type and 52px tall, and
   those that close a hero or a section span its width; the service heroes' own
   button follows the same rule wherever that hero is stacked (see the hero card). */
@media (max-width: 600px) {
  .btn:not(.btn-sm, .btn-lg) { font-size: 16px; line-height: 24px; padding-block: 13px; }
  :is(.hero-actions, .final-actions, .br-next, .br-no-foot) .btn { width: 100%; max-width: 400px; }
}
@media (hover: hover) and (pointer: fine) {
  .btn-orange:hover { transform: translateY(-1px); box-shadow: var(--edge-top), var(--shadow-orange-glow-lg); }
  .btn-white:hover { border-color: #c9c9c9; box-shadow: var(--shadow-e1); }
  .btn-navy:hover { transform: translateY(-1px); box-shadow: var(--shadow-e2); }
}
.btn:active { transform: translateY(0); transition-duration: var(--dur-tap); }

.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1.8; color: var(--ink-strong);
}
.link-more svg { width: 16px; height: 16px; color: var(--orange); transition: transform var(--dur-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .link-more:hover svg { transform: translateX(-4px); } }

/* ---------- pills (Minutes pill material in navy) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--tag-ring) 100%);
  color: var(--tag-text);
  border: 1px solid var(--card-grey); border-radius: 100px;
  padding: 4px 14px; font-size: 13px; font-weight: 600; line-height: 24px;
  box-shadow: 0 2px 4px 0 var(--tag-glow);
}
.pill-orange {
  background: var(--surface-orange); color: #fff; border-color: #ff8a3c;
  box-shadow: 0 0 0 1px rgba(241, 98, 4, 0.4), 0 6px 18px -4px rgba(241, 98, 4, 0.55);
}
.pill-soft {
  background: var(--orange-lightest); color: #9a3d00; box-shadow: none; border-color: transparent;
}

/* ---------- plate: the Minutes double card ---------- */
/* Minutes' own values: a grey shell with a 1px white rim, a 15px gap, and a
   white card on concentric 30/15 radii lifted by their two-layer grey shadow */
.plate {
  background: var(--card-grey);
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 15px;
}
.plate-in {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 7.78px 7.78px 0 #e0e0e0, 0 3.89px 7.78px 0 #c2c2c2;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); filter: blur(5px);
  transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance), filter var(--dur-enter) var(--ease-entrance);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* =========================================================
   HEADER
   ========================================================= */
/* not sticky: like minutes.agency's, the bar stays at the top of the page and
   scrolls away with it. The gap above the 72px bar is the header's own padding.
   The header stays a wrapping flex row with the menu drawer on its own line:
   centring the bar as a block rounds its auto margins differently, which moves
   the bar by a fraction of a pixel at some widths. */
.header { position: relative; z-index: 50; padding-top: var(--header-gap); display: flex; flex-wrap: wrap; }
.header > .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; direction: ltr; }
.logo-word { font-family: "Jakarta", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: #000; }
.nav { display: none; }
.nav > ul { display: flex; gap: 6px; }
.nav a, .nav summary { display: block; padding: 8px 14px; border-radius: 100px; font-size: 15px; font-weight: 500; color: var(--ink); transition: background-color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .nav summary:hover { background: rgba(14, 26, 44, 0.05); } }
.biz-nav { position: relative; }
.biz-nav > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.biz-nav > summary::-webkit-details-marker { display: none; }
.biz-nav > summary svg { width: 12px; height: 8px; flex: none; transition: transform var(--dur-hover) var(--ease-hover); }
.biz-nav[open] > summary svg { transform: rotate(180deg); }
.nav .biz-links { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); width: max-content; min-width: 240px; padding: 8px; border: 1px solid var(--hairline); border-radius: 15px; background: #fff; box-shadow: var(--shadow-e2); }
/* spans the 8px under the summary (and the list's 1px border), so the mouse
   that opened the list stays on the menu on its way down to the links */
.nav .biz-links::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 9px; }
.nav .biz-links a { padding: 12px 14px; border-radius: 10px; }
.nav .biz-nav[open] > summary, .nav .biz-nav[data-current] > summary { background: rgba(14, 26, 44, 0.05); color: var(--ink-strong); }
.nav .biz-nav[data-current] > summary { font-weight: 700; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.menu-btn {
  width: 44px; height: 44px; border-radius: 100px; border: 1px solid #e0e0e0; background: #fff;
  display: inline-grid; place-items: center; cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
/* On the desktop bar the menu sits in the middle, however wide the logo and
   the button beside it are: the two side columns split what's left equally. */
@media (min-width: 1025px) {
  .header > .wrap { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header .logo { justify-self: start; }
  .header-cta { justify-self: end; }
  .nav { display: block; }
  .menu-btn { display: none; }
}
@media (max-width: 480px) { .header-cta .btn-orange .long { display: none; } }
/* At 342px and narrower the bar is narrower than the logo, the Telegram
   button and the menu button with the 24px gap (310.5px): a smaller gap and
   button padding keep the menu button inside the gutter. */
@media (max-width: 342px) { .header > .wrap { gap: 8px; } .header-cta .btn { padding-inline: 12px; } }

/* Minutes' phone menu: the bar's button turns into a cross and a grey drawer
   unfolds under the bar on the panel glide, its grid row growing from 0fr to
   1fr, so it pushes the page down instead of covering it: no scrim, no scroll
   lock. Visibility waits out the fold, so the links stay painted until it shuts.
   The 6px on top plus the 14px under the 44px button make Minutes' 20px gap. */
.drawer { flex: 0 0 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-panel) var(--ease-glide); }
.drawer.open, .no-js .drawer { grid-template-rows: 1fr; }
.drawer-clip { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-panel); }
.drawer.open .drawer-clip, .no-js .drawer-clip { visibility: visible; transition-delay: 0s; }
.drawer.still, .drawer.still .drawer-clip { transition: none; }
.drawer .wrap { padding-block: 6px 24px; }
.drawer-card { padding: 20px; background: var(--card-grey); border: 1px solid #e0e0e0; border-radius: 15px; }
.drawer nav { margin-top: 7px; }
.drawer nav a, .drawer nav summary { padding-block: 20px; padding-inline: 10px; font-size: 22px; font-weight: 600; line-height: 28px; color: var(--ink-strong); }
.drawer nav > a { display: block; border-bottom: 1px solid #e0e0e0; }
/* as on Minutes, the open list is a white box under the row's divider */
.drawer .biz-nav > summary { border-bottom: 1px solid #e0e0e0; }
.drawer .biz-nav[data-current] > summary { font-weight: 800; }
.drawer .biz-links { margin-top: 10px; padding: 13px 10px; border-bottom: 1px solid #e0e0e0; border-radius: 12px; background: var(--white); }
.drawer .biz-links a { display: flex; align-items: center; gap: 16px; padding: 7px 10px; border-radius: 8px; font-size: 18px; font-weight: 500; line-height: 30px; }
.drawer .biz-links svg { width: 20px; height: 20px; flex: none; }
/* below about 330px «هوشمندسازی کسب‌وکار» would wrap beside its glyph */
@media (max-width: 342px) { .drawer .biz-links a { gap: 10px; padding-inline: 6px; } }
.drawer .btn { display: flex; margin: 20px 0 1px; }
.drawer .btn + .btn { margin-top: 10px; }
@media (min-width: 1025px) { .drawer { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-clip, .biz-nav > summary svg { transition: none; } }
/* without the script the drawer is simply open, so the button would do nothing */
.no-js .menu-btn { display: none; }

/* =========================================================
   HERO: soft, mirrored lines fade behind the existing copy
   ========================================================= */
.hero { position: relative; overflow: hidden; padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 1025px) { .hero { padding-top: 104px; padding-bottom: 96px; } }
.hero-circuit {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  width: min(1000px, calc(100% - 48px)); height: auto; pointer-events: none;
}
.hero-circuit-tracer { stroke-width: 2.5; }
.hero-circuit-tracer-dot { stroke-dasharray: 3 760; animation: hero-circuit-dot 7s linear -2s infinite; }
.hero-circuit-tracer-dash { stroke-dasharray: 9 760; animation: hero-circuit-dash 9s linear -5s infinite; }
@keyframes hero-circuit-dot { to { stroke-dashoffset: -763; } }
@keyframes hero-circuit-dash { to { stroke-dashoffset: -769; } }
.hero-inner { position: relative; text-align: center; }
@media (min-width: 601px) and (max-width: 1024px) { .hero-circuit { opacity: .4; } }
@media (max-width: 600px) { .hero-circuit { top: 52px; width: calc(100% - 32px); opacity: .65; } }
.trust {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--muted); margin-bottom: 22px;
}
.trust img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--orange-light); }
.trust strong { color: var(--ink-strong); font-weight: 700; }
.hero .h-hero { max-width: 820px; margin: 0 auto 20px; font-size: clamp(34px, 5vw, 66px); line-height: 1.3; }
.hero .p-lead { max-width: 600px; margin: 0 auto 32px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* follower counts under the buttons */
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 30px; }
.hero-proof a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.hero-proof svg { width: 20px; height: 20px; flex: none; }
.hero-proof bdi { font-size: 17px; font-weight: 800; color: var(--ink-strong); }
@media (hover: hover) and (pointer: fine) { .hero-proof a:hover span { color: var(--ink-strong); } }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--navy-lightest); border-radius: 100px;
  padding: 5px 12px 5px 14px; font-size: 13px; font-weight: 600; color: var(--tag-text);
  box-shadow: 0 2px 6px -1px rgba(14, 26, 44, 0.16);
  white-space: nowrap;
}

/* logos strip
   Borrowed from the Minutes integrations rail: white tiles with a soft grey
   drop shadow, a rail that fades into the page at both ends, and a tilt-in
   entrance. Each track repeats enough sets to cover the rail. Its live width
   and set count define the exact loop distance, including the seam's gap. */
.tools { padding-top: 14px; padding-bottom: 34px; }
.tools-label { text-align: center; font-size: 15px; color: var(--muted); margin-bottom: 18px; }
/* capped like the Minutes rail: with five tiles to a row, a full-bleed rail
   would show the same five twice at once */
.rails { width: 100%; max-width: 980px; margin-inline: auto; }
.marquee {
  overflow: hidden; direction: ltr; padding: 9px 0;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee-track { --marquee-gap: 14px; display: flex; align-items: center; gap: var(--marquee-gap); width: max-content; animation: marquee 40s linear infinite; }
/* the second rail runs the other way, so the two never track together */
.marquee.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(calc((-100% - var(--marquee-gap)) / var(--sets, 3))); } }

/* the rail drops in from flat, the way the Minutes one does */
.tilt { transform-origin: 50% 100%; transform: perspective(1000px) rotateX(70deg); opacity: 0; filter: none;
  transition: opacity var(--dur-panel, .7s) var(--ease-glide), transform 700ms var(--ease-glide); }
.tilt.in { transform: none; opacity: 1; }

/* The two rails on /systems arrive with the scroll instead, the way n8n's
   integrations marquee does: tipped back, turned and nudged aside, and
   invisible while a rail sits low in the screen, then settling flat as it
   rises. `--tilt` is the share of that pose still left, from 1 down to 0. The
   scripts (components/site/boot.ts, then Observers) set it from the scroll
   position and add `in` when it reaches 0; from then on the rail stays flat.
   Without the scripts, or with reduced motion, it is flat from the start.
   While it tilts, .rails-scroll frames it, so it never widens the page;
   `clip`, where supported, can't be scrolled the way `hidden` can. A flat
   rail needs no frame, and without one it renders exactly like the homepage
   rail. */
.rails-scroll { overflow: hidden; overflow: clip; }
.rails-scroll:has(> .scroll-tilt.in), .no-js .rails-scroll { overflow: visible; }
.scroll-tilt {
  --tilt: 1;
  transform: perspective(1000px) translate3d(calc(var(--tilt) * 5%), 0, 0) rotate(calc(var(--tilt) * 5deg))
    rotateY(calc(var(--tilt) * 15deg)) rotateX(calc(var(--tilt) * 60deg));
  opacity: calc(1 - var(--tilt));
}
.scroll-tilt.in, .no-js .scroll-tilt { transform: none; opacity: 1; }

.tool {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  height: 64px; padding: 0 22px;
  background: #fff; border: 1px solid #fff; border-radius: 22px;
  box-shadow: 0 2px 4px 0 rgba(14, 26, 44, 0.14);
  font-family: "Jakarta", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink-strong);
  white-space: nowrap;
}
.tool img, .tool svg { width: 28px; height: 28px; object-fit: contain; flex: none; }
@media (max-width: 600px) {
  .tool { height: 56px; padding: 0 18px; gap: 10px; font-size: 15px; border-radius: 18px; }
  .tool img, .tool svg { width: 24px; height: 24px; }
}

/* =========================================================
   SERVICES bento
   ========================================================= */
.bento { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.bento .plate-in { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .bento { grid-template-columns: 1fr 1fr; }
}
/* Four equal cards in two rows, consultation first. A full-width consultation
   row above a two-row course card pushed the section past 1000px; with the art
   beside the copy in every card the whole section, heading included, fits
   on one laptop screen, down to 1280x680. The
   Minutes plate's 15px shell takes width from the copy, so below 1367 the art
   gives a little back to keep the paragraphs from wrapping a line deeper. */
@media (min-width: 1025px) {
  .bento { gap: 16px; }
  #services .sec-head { margin-bottom: 22px; }
  .bento .plate-in { flex-direction: row-reverse; align-items: stretch; }
  .bento .b-art { flex: 0 0 36%; min-height: 0; padding: 16px 8px 16px 18px; }
  .bento .b-art .art svg { max-height: 200px; }
  .bento .b-copy { flex: 1; padding: 12px 24px 12px 4px; }
  .bento .b-copy .p-card { line-height: 1.75; margin-bottom: 10px; }
}
/* once the container stops growing there is room to give the art back */
@media (min-width: 1367px) { .bento .b-art { flex-basis: 42%; } }
.b-art { flex: 1; min-height: 190px; position: relative; padding: 20px; display: flex; align-items: center; justify-content: center; }
.b-copy { padding: 4px 24px 26px; }
/* Keep service copy aligned while allowing longer text to grow without clipping. */
.bento .b-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bento .b-copy .p-card { min-height: 3lh; flex: 1; }
@media (min-width: 1025px) { .b-copy { padding: 4px 30px 30px; } }
.b-copy .h-card { margin-bottom: 6px; }
.b-copy .p-card { margin-bottom: 14px; }
#services .b-mobile, #services .b-mobile-glyph { display: none; }

/* The phone chooser keeps all four services visible, with embossed background
   icons. Tablet and desktop retain the original plates and illustrations. */
@media (max-width: 767px) {
  #services .sec-head { margin-bottom: 26px; }
  #services .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #services .plate { min-width: 0; padding: 0; border: 0; border-radius: 24px; background: none; }
  #services .plate-in {
    isolation: isolate; min-height: 236px; padding: 20px 16px 44px;
    border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow-e2);
  }
  #services .b-consult .plate-in, #services .b-brands .plate-in {
    background: color-mix(in srgb, var(--navy-lightest) 60%, #fff);
  }
  #services .b-copy { padding: 0; }
  #services .b-desktop { display: none; }
  #services .b-mobile { display: block; }
  #services .h-card {
    position: relative; z-index: 1; min-height: 57px; margin-bottom: 8px; font-size: 19px;
  }
  #services .b-copy .p-card {
    position: relative; z-index: 1; min-height: 0; margin: 0; font-size: 15px;
  }
  #services .b-art { display: none; }
  #services .b-mobile-glyph {
    display: block; position: absolute; z-index: 0; inset-inline-end: -12px; bottom: -26px;
    width: 140px; height: 140px; color: #fff; opacity: .9; pointer-events: none;
    filter: drop-shadow(0 3px 0 var(--card-grey)) drop-shadow(0 8px 12px var(--hairline));
    transform: rotate(-12deg);
  }
  #services .b-link-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  #services .link-more { position: absolute; z-index: 2; inset: 0; border-radius: 24px; }
  #services .link-more svg { position: absolute; z-index: 1; inset-inline-end: 18px; bottom: 18px; }
  #services .link-more:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
}
@media (max-width: 350px) {
  #services .bento { gap: 10px; }
  #services .plate-in { padding: 18px 12px 42px; }
  #services .h-card { min-height: 54px; font-size: 18px; }
  #services .b-copy .p-card { font-size: 14px; }
  #services .link-more svg { inset-inline-end: 16px; bottom: 16px; }
}

/* =========================================================
   CARD ART — looping SVG illustrations
   Ported from the Minutes Website `card-art` vocabulary. Two rules matter:
   the rest state IS the finished drawing, so switching the motion off leaves
   a complete illustration rather than a half-drawn one; and every entrance is
   gated on `.is-in`, which app.js puts on the wrapper the first time it
   crosses the viewport. Geometry lives in the SVG's own units, so nothing here
   can wrap, overlap or flip with the writing direction.
   ========================================================= */
.art { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
/* a wide card letterboxes the art rather than growing its row */
.b-art .art svg { max-height: 250px; }
/* the consultation and systems drawings are nearly square, so they are held
   lower to leave the card's height to its copy */
:is(.b-consult, .b-systems) .b-art .art svg { max-height: 180px; }
/* A drawing shared between a page and a homepage card takes its accent from
   `--tone`: navy on the page, orange on the card. `--tone-ink` is for small
   text, so on the card it is the darker orange. */
.art { --tone: var(--navy); --tone-light: var(--navy-light); --tone-lightest: var(--navy-lightest); --tone-ink: var(--navy); }
.art.tone-orange { --tone: var(--orange); --tone-light: var(--orange-light); --tone-lightest: var(--orange-lightest); --tone-ink: var(--orange-text); }

/* Entrance. One-shot, `both` so the from-state holds before `.is-in` and the
   to-state holds after. `--d` staggers a piece; keep the cascade under ~1s. */
.art :where([class*="art-enter-"]) {
  animation-duration: 0.85s;
  animation-timing-function: var(--ease-entrance);
  animation-delay: var(--d, 0s);
  animation-fill-mode: both;
  animation-play-state: paused;
}
.art.is-in :where([class*="art-enter-"]) { animation-play-state: running; }
/* inside an SVG the default transform box is the whole viewport, which sends
   every scale around the wrong origin */
.art :where([class*="art-enter-"]), .art :where([class*="art-loop-"]) { transform-box: fill-box; transform-origin: center; }

.art-enter-fade { animation-name: artFade; }
.art-enter-rise { animation-name: artRise; }
.art-enter-pop { animation-name: artPop; }
/* needs `pathLength="1"` on the path, so one dash unit is the whole stroke */
.art-enter-draw { stroke-dasharray: 1 1; animation-name: artDraw; animation-duration: 1.1s; }

/* Loops. Endless, low amplitude, starting after the entrance has settled.
   At most one moving idea per illustration. */
.art :where([class*="art-loop-"]) {
  animation-delay: var(--loop-delay, 1.4s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.art.is-in :where([class*="art-loop-"]) { animation-play-state: running; }

/* a travelling highlight walking the same path the draw-in used */
.art-loop-pulse { opacity: 0; stroke-dasharray: 0.06 0.94; animation-name: artPulse; animation-duration: var(--loop-dur, 6s); animation-timing-function: linear; }
.art-loop-float { animation-name: artFloat; animation-duration: var(--loop-dur, 6s); animation-timing-function: ease-in-out; }
.art-loop-breathe { animation-name: artBreathe; animation-duration: var(--loop-dur, 6s); animation-timing-function: ease-in-out; }
/* the resting opacity is declared rather than left to the keyframe's 0%: it is
   what a reduced-motion reader gets, and for a glow under a solid mark that
   value is not 1 */
.art-loop-glow { opacity: var(--glow-from, 0.4); animation-name: artGlow; animation-duration: var(--loop-dur, 5s); animation-timing-function: ease-in-out; }
/* A task crossing a workflow: one dash (`--flow-dash`, a share of the path)
   travels start to end at a steady pace, then the path rests until the next
   run. Unlike the pulse, the gap is longer than the path, so there is only
   ever one dash on it. `art-flow-short` crosses in under half the time, for
   a short lane that should keep pace with a long one. */
.art-loop-flow { opacity: 0; stroke-dasharray: var(--flow-dash, 0.1) 2; animation-name: artFlow; animation-duration: var(--loop-dur, 9s); animation-timing-function: linear; }
.art-loop-flow.art-flow-short { animation-name: artFlowShort; }
/* `art-flow-quick` crosses in the first 12% of the cycle, 1.2s of a 10s
   loop, so one long cycle can play several steps one after another */
.art-loop-flow.art-flow-quick { animation-name: artFlowQuick; }
/* The steps of such a cycle, after the Minutes cards: a piece beats, swelling
   a touch (`--beat-to`) and settling, as a signal reaches it; a ripple is a
   ring that leaves a piece, growing (`--ripple-to`) and fading. Both rest for
   the remainder of the cycle. */
.art-loop-beat { animation-name: artBeat; animation-duration: var(--loop-dur, 10s); animation-timing-function: ease-in-out; }
.art-loop-ripple { opacity: 0; animation-name: artRipple; animation-duration: var(--loop-dur, 10s); animation-timing-function: var(--ease-entrance); }
/* the tick a workflow step gets once the task has passed through it; the
   ticks go out in the same order they came on */
.art-loop-done { opacity: 0; scale: 0.6; animation-name: artDone; animation-duration: var(--loop-dur, 9s); animation-timing-function: var(--ease-entrance); }

/* The course illustration changes its selected playlist row, with a short
   crossfade and a long rest on each lesson. The player bar stays still. */
.course-choice {
  animation-duration: 15s;
  animation-delay: 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.course-choice-first { opacity: 1; animation-name: courseFirst; }
.course-choice-second { opacity: 0; animation-name: courseSecond; }
.course-choice-third { opacity: 0; animation-name: courseThird; }
.art.is-in .course-choice { animation-play-state: running; }
@keyframes courseFirst { 0%, 29% { opacity: 1; } 34%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes courseSecond { 0%, 29% { opacity: 0; } 34%, 62% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes courseThird { 0%, 62% { opacity: 0; } 67%, 95% { opacity: 1; } 100% { opacity: 0; } }

@keyframes artFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes artRise { from { opacity: 0; translate: 0 var(--from-y, 14%); } to { opacity: 1; translate: 0 0; } }
@keyframes artPop { from { opacity: 0; scale: var(--from-scale, 0.6); } to { opacity: 1; scale: 1; } }
@keyframes artDraw { from { stroke-dashoffset: var(--draw-from, 1); } to { stroke-dashoffset: 0; } }
@keyframes artPulse {
  0% { stroke-dashoffset: 0; opacity: 0; }
  6% { opacity: var(--pulse-opacity, 0.9); }
  30% { opacity: var(--pulse-opacity, 0.9); }
  36%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes artFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float-to, -7px); } }
@keyframes artBreathe { 0%, 100% { scale: 1; } 50% { scale: var(--breathe-to, 1.05); } }
@keyframes artGlow { 0%, 100% { opacity: var(--glow-from, 0.4); } 50% { opacity: var(--glow-to, 1); } }
@keyframes artFlow {
  0% { stroke-dashoffset: var(--flow-dash, 0.1); opacity: 0; }
  4%, 56% { opacity: 1; }
  60%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes artFlowShort {
  0% { stroke-dashoffset: var(--flow-dash, 0.1); opacity: 0; }
  3%, 25% { opacity: 1; }
  28%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes artDone {
  0% { opacity: 0; scale: 0.6; }
  4%, 44% { opacity: 1; scale: 1; }
  50%, 100% { opacity: 0; scale: 1; }
}
@keyframes artFlowQuick {
  0% { stroke-dashoffset: var(--flow-dash, 0.1); opacity: 0; }
  2%, 10% { opacity: 1; }
  12%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes artBeat {
  0% { scale: 1; }
  5% { scale: var(--beat-to, 1.06); }
  13%, 100% { scale: 1; }
}
@keyframes artRipple {
  0% { opacity: 0; scale: 1; }
  2% { opacity: var(--ripple-opacity, 0.5); }
  18%, 100% { opacity: 0; scale: var(--ripple-to, 1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .art [class*="art-enter-"], .art.is-in [class*="art-enter-"] {
    animation: none; opacity: 1; translate: none; scale: 1; stroke-dashoffset: 0;
  }
  /* deliberately no `opacity`: forcing loops to 1 turns a pale halo into a solid
     disc. Each loop class declares its own resting opacity instead. */
  .art [class*="art-loop-"], .art.is-in [class*="art-loop-"] {
    animation: none; translate: none; scale: 1; stroke-dashoffset: 0;
  }
  .art .course-choice { animation: none; }
  /* a workflow at rest has run: every step carries its tick */
  .art .art-loop-done { opacity: 1; }
  .art .course-choice-first { opacity: 1; }
  .art .course-choice-second, .art .course-choice-third { opacity: 0; }
}
/* Off-screen loops sleep. Entrances are exempt so one can never freeze
   half-drawn; the margin keeps a loop running long before it can be seen. */
.art[data-offscreen] :not([class*="art-enter-"]) { animation-play-state: paused !important; }

/* =========================================================
   VIDEOS (the latest YouTube uploads, flat on the page)
   ========================================================= */

/* title on one side, the channel link on the other; on phones the link
   moves under the grid as a full-width button */
.vhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
@media (min-width: 1025px) { .vhead { margin-bottom: 48px; } }
.vhead .sec-head { margin-bottom: 0; }
.vhead .pill { margin-bottom: 8px; }
.vhead > .btn { display: none; }
.vall { margin-top: 20px; }
@media (min-width: 640px) {
  .vhead > .btn { display: inline-flex; }
  .vall { display: none; }
}

/* one long upload beside two shorts, the same 3 / 2 split the site uses */
.vgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.vgrid .v-main { grid-column: span 2; }
@media (min-width: 900px) {
  .vgrid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .vgrid .v-main { grid-column: span 3; }
  .vgrid .v-short { grid-column: span 1; }
}

.vcard {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.vcard:focus-visible { border-radius: 18px; outline-offset: 2px; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card-grey); }
.v-short .vthumb { aspect-ratio: 9 / 16; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-hover); }
.v-short .vthumb img { transform: scale(1.01); }
.vthumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 50%); }
.vplay {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(241, 98, 4, 0.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 18px -8px rgba(0, 0, 0, 0.22);
  transition: transform var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
.v-short .vplay { width: 48px; height: 48px; }
.vplay svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }
.v-short .vplay svg { width: 18px; height: 18px; }

/* capsules over the thumbnail */
.vdur, .vtag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px; border-radius: 100px; border: 1px solid;
  font-size: 12px; font-weight: 600; line-height: 1;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.vdur {
  inset-block-end: 10px; inset-inline-end: 10px; font-family: "Jakarta", sans-serif;
  background: rgba(14, 26, 44, 0.75); border-color: rgba(203, 210, 220, 0.25); color: var(--navy-lightest);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vtag {
  inset-block-start: 10px; inset-inline-start: 10px;
  background: rgba(241, 98, 4, 0.88); border-color: rgba(255, 255, 255, 0.25); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.vmeta { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 16px; }
.v-short .vmeta { padding: 12px 12px 14px; }
.vmeta b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 3.4em; font-size: 16px; font-weight: 600; line-height: 1.7; color: var(--ink-strong);
  transition: color var(--dur-hover) var(--ease-hover);
}
.v-short .vmeta b { font-size: 14px; }
.vmeta time {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-top: 10px;
  border: 1px solid rgba(14, 26, 44, 0.15); border-radius: 100px;
  background: rgba(233, 236, 242, 0.55); color: var(--navy);
  font-size: 12px; font-weight: 600; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .vcard:hover { border-color: rgba(241, 98, 4, 0.5); }
  .vcard:hover .vthumb img { transform: scale(1.03); }
  .v-short.vcard:hover .vthumb img { transform: scale(1.04); }
  .vcard:hover .vplay { transform: translate(-50%, -50%) scale(1.1); background: rgba(241, 98, 4, 0.92); }
  .vcard:hover .vmeta b { color: #9a3d00; }
}

/* ---------- video lightbox ---------- */
.vmodal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear var(--dur-panel);
}
.vmodal.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.vmodal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity var(--dur-panel) var(--ease-glide); }
.vmodal.open .vmodal-scrim { opacity: 1; }
.vmodal-panel {
  position: relative; width: min(1000px, 100%); display: grid; gap: 12px;
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity var(--dur-panel) var(--ease-glide), transform var(--dur-panel) var(--ease-glide);
}
.vmodal.short .vmodal-panel { width: min(400px, 100%); }
.vmodal.open .vmodal-panel { opacity: 1; transform: none; }
.vmodal-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.vmodal.short .vmodal-frame { aspect-ratio: 9 / 16; max-height: 78vh; margin-inline: auto; width: 100%; }
.vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal-close {
  background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.25);
  border-radius: 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
@media (hover: hover) and (pointer: fine) {
  .vmodal-close:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
}

/* =========================================================
   FORM FIELD
   ========================================================= */
/* field text stays at 16px, below which iPhones zoom the page on focus */
.input {
  width: 100%; border: 1px solid #e0e0e0; background: #fff; border-radius: 100px;
  padding: 12px 18px; font: inherit; font-size: 16px; color: var(--ink-strong);
  transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
/* a focused field's border is the dark orange, 3:1 against its fill and its glow on the light surfaces */
.input:focus { outline: none; border-color: var(--orange-text); box-shadow: 0 0 0 4px rgba(241, 98, 4, 0.14); }
.input[dir="ltr"] { text-align: left; }
/* an empty dir="auto" field turns left-to-right, so its Persian placeholder is held on the right; the url field's Latin one stays left */
.input[dir="auto"]:not([type="url"]):placeholder-shown { text-align: right; }
.input-area { border-radius: 18px; resize: vertical; min-height: 104px; line-height: 1.7; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 1025px) { .about { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 64px; } }
.portrait { position: relative; max-width: 460px; width: 100%; margin-inline: auto; }
/* the photo goes without the plate's grey shell; its padding and rim stay as
   empty space, so the photo keeps the size and place it had inside it */
.portrait .plate { background: none; border-color: transparent; }
.portrait .plate-in { aspect-ratio: 4 / 5; background: #d9d3cc; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-copy { min-width: 0; }
/* In the stacked layout, match the portrait's width and its 15px shell + 1px
   border so the heading, paragraphs and social links align with the photo. */
@media (max-width: 1024px) {
  .about-copy { width: 100%; max-width: 460px; margin-inline: auto; padding-inline: 16px; }
}
.about-copy .h-sec { margin: 0 0 14px; }
.about-copy .p-lead { margin-bottom: 14px; text-wrap: pretty; }
.socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; }
.social {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
  padding: 10px 12px; transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
.social svg { width: 22px; height: 22px; flex: none; color: var(--ink-strong); }
.social b { display: block; font-size: 13.5px; color: var(--ink-strong); line-height: 1.4; }
.social small { display: block; font-size: 12px; color: var(--muted); font-family: "Jakarta", sans-serif; direction: ltr; text-align: right; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .social:hover { border-color: #d6d6d6; box-shadow: var(--shadow-e1); } }

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 1025px) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .faq-grid .sec-head { position: sticky; top: 24px; } }
.faq-list { display: grid; gap: 10px; }
/* Everything an opening row changes (the answer's height and fade, in app.js,
   the chevron, the shadow and the border) runs on one curve and one duration,
   so it reads as one movement. A row on its way shut keeps [open] until its
   answer is gone, so `.closing` counts as shut. The reveal's entrance is
   restated here because this `transition` would otherwise replace it. */
.qa {
  background: #fff; border: 1px solid var(--hairline); border-radius: 20px;
  transition: opacity var(--dur-enter) var(--ease-entrance) var(--d, 0ms), transform var(--dur-enter) var(--ease-entrance) var(--d, 0ms), filter var(--dur-enter) var(--ease-entrance) var(--d, 0ms),
    box-shadow var(--dur-panel) var(--ease-glide), border-color var(--dur-panel) var(--ease-glide);
}
.qa[open]:not(.closing) { box-shadow: var(--shadow-e1); border-color: #e2e2e2; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 16px; color: var(--ink-strong); line-height: 1.7; }
.qa summary::-webkit-details-marker { display: none; }
/* Minutes' chevron pill, re-toned to navy like the tags. It is the row's only
   hover cue, so fill and glyph change together */
.qa summary .pm {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--tag-ring); color: var(--ink);
  transition: transform var(--dur-panel) var(--ease-glide), background-color var(--dur-hover) var(--ease-glide), color var(--dur-hover) var(--ease-glide);
}
.qa summary .pm svg { width: 12px; height: 8px; }
.qa[open]:not(.closing) summary .pm { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover .pm { background: var(--tag-hover); color: var(--navy); } }
.qa summary:focus-visible .pm { background: var(--tag-hover); color: var(--navy); }
.qa .ans { padding: 0 20px 20px; font-size: 15px; line-height: 1.95; color: var(--muted); }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final .plate-in {
  padding: 44px 22px; text-align: center;
  background-image: radial-gradient(circle, rgba(14, 26, 44, 0.07) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.final .plate-in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, #fff 40%, rgba(255, 255, 255, 0.3) 100%); }
.final .plate-in > * { position: relative; }
@media (min-width: 1025px) { .final .plate-in { padding: 72px 48px; } }
.final .h-sec { max-width: 680px; margin: 0 auto 12px; }
.final .p-lead { max-width: 560px; margin: 0 auto 28px; }
/* Root-layout failures still load the same type, card and button styles. */
.global-error { display: grid; place-items: center; min-height: 100svh; }
.global-error > .section { width: 100%; padding-block: 32px; }
.global-error .wrap { max-width: 760px; }
.join { max-width: 460px; margin-inline: auto; display: grid; gap: 10px; }
.join-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* =========================================================
   FOOTER
   ========================================================= */
/* black like Minutes' footer: white logo and headings, #a0a0a0 links that turn
   white, a hairline rule, and #767676 small print (4.6:1 on black) */
.footer { padding: 48px 0 28px; background: #000; }
.footer .logo-word { color: #fff; }
.footer-brand { width: min(340px, calc(100vw - 2 * var(--gutter))); max-width: 100%; min-width: 0; }
.footer-newsletter { width: 300px; max-width: 100%; margin-top: 20px; }
.footer-newsletter-label { display: block; margin-bottom: 8px; color: var(--navy-light); font-size: 13px; font-weight: 500; }
/* A single quiet field on the dark footer; controls retain 44px touch targets. */
.footer-email-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--muted); border-radius: 100px;
  background: color-mix(in srgb, var(--white) 6%, transparent);
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.footer-email-row:focus-within, .footer-email-row:has([aria-invalid="true"]) { border-color: var(--orange); }
.footer-email-row:has(.input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.footer-email-row .input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 8px 14px; border: 0; font-size: 16px; line-height: 24px; color: var(--white); background: transparent; box-shadow: none; }
.footer-email-row .input::placeholder { color: var(--navy-light); opacity: .75; font-size: 14px; }
.footer-email-row .input:placeholder-shown { text-align: right; }
.footer-email-row .btn { flex: none; min-height: 44px; padding: 8px 14px; border: 0; font-size: 13px; line-height: 24px; font-weight: 600; color: var(--orange); background: transparent; box-shadow: none; transform: none; }
.footer-email-row .btn:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .footer-email-row .btn:hover { color: var(--orange-light); } }
.footer-newsletter .form-consent { margin-top: 8px; }
.footer-newsletter .form-consent-choice { gap: 7px; color: color-mix(in srgb, var(--navy-light) 78%, transparent); font-size: 12px; line-height: 1.8; }
.footer-newsletter .form-consent-choice input { flex-basis: 16px; width: 16px; height: 16px; border-color: var(--muted); border-radius: 4px; background: transparent; }
.footer-newsletter .form-consent-choice input:checked { border-color: var(--orange); background: var(--orange); }
.footer-newsletter .form-consent-choice input:focus-visible { outline-color: var(--orange-light); }
.footer .footer-newsletter-notice { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 24px; font-size: 12px; line-height: 1.8; color: color-mix(in srgb, var(--navy-light) 78%, transparent); }
.footer-newsletter-notice svg { width: 18px; height: 18px; flex: none; color: var(--orange-light); }
/* Minutes' row: the brand and three link columns at equal gaps, so the two
   outer blocks line up with the bar below. Tablets give the brand its own row;
   phones give the services one too and pair the two short lists. The rule is
   a half-pixel shadow, one device pixel on retina screens: Chrome rounds a
   0.5px border up to 1px */
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 48px; box-shadow: 0 0.5px #2a2a2a; }
.footer-top > :nth-child(-n+2) { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-top { grid-template-columns: repeat(3, auto); justify-content: space-between; row-gap: 48px; }
  .footer-top > :nth-child(2) { grid-column: auto; }
}
@media (min-width: 1025px) {
  .footer { padding-top: 64px; }
  .footer-top { grid-template-columns: repeat(4, auto); padding-bottom: 64px; }
  .footer-top > :nth-child(1) { grid-column: auto; }
}
.footer p { font-size: 14.5px; color: #a0a0a0; margin-top: 14px; max-width: 340px; line-height: 1.9; }
@media (max-width: 767px) {
  .footer-brand, .footer-newsletter { width: 100%; }
  .footer-newsletter p { max-width: none; }
}
.footer h2 { font-size: 17px; color: #fff; margin-bottom: 18px; font-weight: 700; }
.footer li + li { margin-top: 12px; }
.footer li a { font-size: 15.5px; color: #a0a0a0; transition: color var(--dur-hover) var(--ease-hover); }
@media (min-width: 1025px) { .footer h2 { font-size: 18px; margin-bottom: 20px; } .footer li a { font-size: 16px; } }
.footer li a:focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) { .footer li a:hover { color: #fff; } }
/* Minutes' bottom bar: its compact social row at the start edge, the copyright
   centred and the legal links at the end edge. Phones drop the icons (the same
   links are listed above) and stack the other two. Equal side tracks keep the
   copyright centred; each link's 24px line box is its tap target */
.footer-bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 20px; font-size: 12.5px; line-height: 24px; color: #767676; }
.footer-social { display: none; }
.footer-social a { width: 32px; height: 32px; display: grid; place-items: center; }
.footer-social svg { width: 16px; height: 16px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.footer-social a, .footer-legal a { transition: color var(--dur-hover) var(--ease-hover); }
.footer-social a:focus-visible, .footer-legal a:focus-visible, .footer-legal a[aria-current="page"] { color: #fff; }
@media (hover: hover) and (pointer: fine) { .footer-social a:hover, .footer-legal a:hover { color: #fff; } }
@media (min-width: 768px) {
  .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
  /* pulled out by the icon's own inset so its glyph lines up with the logo */
  .footer-social { display: flex; gap: 4px; grid-area: 1 / 1; justify-self: start; margin-inline-start: -8px; }
  .footer-bottom > span { grid-area: 1 / 2; }
  .footer-legal { grid-area: 1 / 3; justify-self: end; justify-content: flex-end; }
}

/* toast */
.toast { position: fixed; z-index: 140; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 14.5px; box-shadow: var(--shadow-e2); opacity: 0; pointer-events: none; transition: opacity var(--dur-panel) var(--ease-glide), transform var(--dur-panel) var(--ease-glide); max-width: calc(100% - 32px); width: max-content; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .scroll-tilt { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .hero-circuit-tracer { display: none; }
}
.hero .h-hero .accent { white-space: nowrap; }


/* =========================================================
   CONTACT POPUP
   Same shell as the video lightbox — scrim, scale-in panel — but the
   panel is a grey Minutes card holding white choice cards.
   ========================================================= */
.cmodal {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear var(--dur-panel);
}
.cmodal.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cmodal-scrim { position: absolute; inset: 0; background: rgba(10, 16, 26, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity var(--dur-panel) var(--ease-glide); }
.cmodal.open .cmodal-scrim { opacity: 1; }
.cmodal-panel {
  position: relative; width: min(980px, 100%);
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-block: 12px; /* a control scrolled into view by focus keeps its whole ring inside the panel */
  background: var(--card-grey); border-radius: 30px; padding: 26px 20px 24px;
  box-shadow: 0 24px 80px rgba(10, 16, 26, 0.28);
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity var(--dur-panel) var(--ease-glide), transform var(--dur-panel) var(--ease-glide);
}
.cmodal.open .cmodal-panel { opacity: 1; transform: none; }
@media (min-width: 768px) { .cmodal-panel { padding: 38px 42px 34px; max-height: 90dvh; } }
@media (prefers-reduced-motion: reduce) { .cmodal-panel { transition: opacity var(--dur-hover) linear; transform: none; } }

.cmodal-x {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2;
  display: grid; justify-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-strong);
}
.cmodal-x svg { width: 20px; height: 20px; }
.cmodal-x span { font-size: 11px; line-height: 1; color: var(--muted); }
.cmodal-x:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 6px; border-radius: 6px; }

.cview { display: flex; flex-direction: column; align-items: center; }
.cview[hidden] { display: none; }
.cmodal-head { max-width: 640px; margin-top: 22px; text-align: center; }
.cmodal-head .h-sec { font-size: clamp(24px, 4.4vw, 38px); }
.cmodal-head .p-lead { margin-top: 10px; font-size: 15.5px; text-wrap: balance; }
@media (min-width: 768px) { .cmodal-head { margin-top: 30px; } .cmodal-head .p-lead { font-size: 17px; } }

/* --- step 1 cards --- */
.ccards { display: grid; gap: 12px; width: 100%; margin-top: 22px; }
@media (min-width: 768px) { .ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } }
@media (min-width: 768px) { .ccards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; } }
.ccard {
  display: flex; align-items: center; gap: 14px; text-align: start;
  background: #fff; border: 1px solid #fff; border-radius: 22px; padding: 16px;
  box-shadow: var(--shadow-e1); cursor: pointer; font: inherit; color: var(--ink);
  transition: transform var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
}
@media (min-width: 768px) {
  .ccard { flex-direction: column; align-items: flex-start; gap: 0; min-height: 218px; border-radius: 24px; padding: 26px; }
}
@media (hover: hover) and (pointer: fine) {
  .ccard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--orange)) 45%, #fff); box-shadow: var(--shadow-e2); }
  .ccard:hover .ccard-go svg { transform: translateX(-3px); }
}
.ccard:focus-visible { outline: 2px solid var(--c, var(--orange-text)); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ccard, .ccard .ccard-go svg { transition: none; } .ccard:hover { transform: none; } }

.ccard-icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.ccard-icon svg { width: 26px; height: 26px; }
@media (min-width: 768px) { .ccard-icon { width: 56px; height: 56px; } .ccard-icon svg { width: 29px; height: 29px; } }
.ccard-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
@media (min-width: 768px) { .ccard-body { display: contents; } }
.ccard-title { font-size: 18px; font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
@media (min-width: 768px) { .ccard-title { margin-top: 18px; font-size: 22px; } }
.ccard-desc { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
@media (min-width: 768px) { .ccard-desc { margin-top: 7px; font-size: 15px; } }
.ccard-go { display: none; }
@media (min-width: 768px) {
  .ccard-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-strong); }
  .ccard-go svg { width: 16px; height: 16px; color: var(--c); transition: transform var(--dur-hover) var(--ease-hover); }
}
.ccard-go-sm { width: 18px; height: 18px; flex: none; color: var(--c); }
@media (min-width: 768px) { .ccard-go-sm { display: none; } }

/* --- step 2 form --- */
.cback {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--muted);
}
.cback svg { width: 16px; height: 16px; rotate: 180deg; }
.cback:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .cback:hover { color: var(--ink-strong); } }

.cform { width: 100%; max-width: 560px; margin-top: 22px; display: grid; gap: 14px; }
@media (min-width: 768px) { .cform { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; } }
.cfield { display: grid; gap: 7px; min-width: 0; }
.cfield label { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); padding-inline-start: 4px; }
/* «(اختیاری)» after an optional field's label */
.cfield-opt { font-weight: 400; color: var(--muted); }
.cfield-wide { grid-column: 1 / -1; }
.form-consent { min-width: 0; text-align: start; }
.form-consent-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-strong); font-size: 13px; line-height: 1.8; cursor: pointer; }
.form-consent-choice input { appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; display: grid; place-content: center; border: 1px solid var(--muted); border-radius: 6px; background: var(--white); cursor: pointer; }
.form-consent-choice input::before { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translateY(-1px) rotate(-45deg); visibility: hidden; }
.form-consent-choice input:checked { background: var(--orange); border-color: var(--orange); }
.form-consent-choice input:checked::before { visibility: visible; }
.form-consent-choice input:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.form-consent-choice:has(input:disabled) { opacity: .65; cursor: wait; }
.br-collab > .form-consent { margin-top: 14px; }
.cfield[hidden] { display: none; }
/* The mobile field: one pill holding the country code and the number, laid
   out left to right like a phone number, so the + and digit groups keep their
   order. The pill takes the focus ring of whichever part has focus. */
.cphone { display: flex; padding: 0; direction: ltr; }
.cphone:not(.is-bad):focus-within { border-color: var(--orange-text); box-shadow: 0 0 0 4px rgba(241, 98, 4, 0.14); }
.cphone.is-bad:has(:focus-visible) { outline: 2px solid #9a3d00; outline-offset: 2px; }
.cphone input {
  flex: 1; width: 0; min-width: 0; padding: 12px 18px 12px 12px; border: 0; border-radius: inherit;
  background: none; font: inherit; color: inherit; outline: none;
}
/* the code shows as text with the native select invisibly over it, so a tap
   opens the phone's own picker */
.cdial {
  position: relative; flex: none; display: flex; align-items: center; gap: 6px;
  padding-inline: 18px 12px; border-radius: 100px 0 0 100px; color: var(--ink-strong);
  transition: background-color var(--dur-hover) var(--ease-hover);
}
.cdial::after { content: ""; position: absolute; inset-inline-end: 0; top: 12px; bottom: 12px; width: 1px; background: #e0e0e0; }
.cdial svg { width: 10px; height: 7px; color: var(--muted); }
.cdial select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cdial:has(select:focus-visible) { background: var(--orange-lightest); }
@media (hover: hover) and (pointer: fine) { .cdial:hover { background: var(--card-grey); } }
@media (prefers-reduced-motion: reduce) { .cdial { transition: none; } }
.cform .input { background: #fff; }
.input.is-bad { border-color: var(--negative); box-shadow: 0 0 0 4px rgba(214, 90, 46, 0.14); }
/* an invalid field keeps the same border and glow when focused, so the
   keyboard ring is what marks the one in focus; the site's dark orange,
   because the brand orange is too faint on the popup's grey */
.input.is-bad:focus-visible { outline: 2px solid #9a3d00; outline-offset: 2px; }
/* reply channel: a radio pill per channel, side by side, the picked one in navy */
.cpick { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.cpick legend { padding: 0; padding-inline-start: 4px; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.cpick-opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.cpick-opt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 100px; background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
.cpick-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cpick-opt svg { width: 18px; height: 18px; flex: none; }
/* «پیشنهادی» on the channel Mahbod would rather reply on; on a phone too
   narrow for both on one line, under the channel's name */
.cpick-tag {
  padding: 0 8px; border-radius: 100px; background: var(--orange-lightest); color: #9a3d00;
  font-size: 11.5px; font-weight: 600; line-height: 20px; white-space: nowrap;
}
@media (max-width: 400px) {
  .cpick-opt:has(.cpick-tag) { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
  .cpick-opt:has(.cpick-tag)::after { content: ""; flex-basis: 100%; order: 1; }
  .cpick-tag { order: 2; }
}
.cpick-opt:has(:checked) { border-color: var(--navy); background: var(--navy-lightest); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--navy); }
.cpick-opt:has(:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.cmodal .cpick-opt:has(:focus-visible) { outline-color: var(--orange-text); }
@media (hover: hover) and (pointer: fine) { .cpick-opt:hover { border-color: var(--navy-light); } .cpick-opt:has(:checked):hover { border-color: var(--navy); } }
@media (prefers-reduced-motion: reduce) { .cpick-opt { transition: none; } }

/* --- step 3 --- */
.cdone-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }


/* =========================================================
   SERVICE PAGES (/systems, /consultation, /brands)
   The Minutes service-page sequence (hero card, a tool rail, four step
   cards), rebuilt from the primitives above so every service page can
   reuse it as is.
   ========================================================= */

.nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 700; background: rgba(14, 26, 44, 0.05); }
.drawer nav a[aria-current="page"] { font-weight: 800; }
.footer li a[aria-current="page"] { color: #fff; }

/* ---------- hero card ---------- */
.svc-hero { padding-top: 8px; }
@media (min-width: 1025px) { .svc-hero { padding-top: 16px; } }
.svc-hero-card {
  position: relative; overflow: hidden;
  display: grid; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 28px;
  box-shadow: 0 8px 16px 0 #e0e0e0;
  padding: 36px 22px 22px;
}
/* grid paper, strongest behind the copy and gone before the edges */
.svc-hero-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14, 26, 44, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 26, 44, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}
/* a warm bloom along the bottom edge, where Minutes keeps its purple one */
.svc-hero-card::after {
  content: ""; position: absolute; inset: auto 0 -35% 0; height: 70%; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(241, 98, 4, 0.1), transparent 70%);
}
.svc-hero-card > * { position: relative; z-index: 1; }
.svc-copy { text-align: center; }
.svc-copy .pill { margin-bottom: 18px; }
.svc-copy .h-hero { font-size: clamp(30px, 3.7vw, 50px); line-height: 1.4; margin-bottom: 16px; }
.svc-copy .h-hero .accent { white-space: nowrap; }
.svc-copy .p-lead { max-width: 560px; margin: 0 auto 28px; }
.svc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.svc-art { padding: 8px 0 0; }
.svc-art .art svg { max-height: 420px; }
/* Phones get a shorter drawing with fewer parts, as on Minutes' pages: each
   hero ships both, and one shows. */
.art .art-narrow { display: none; }
@media (max-width: 600px) {
  .art .art-wide { display: none; }
  .art .art-narrow { display: block; max-width: 440px; }
}
/* a homepage card draws the consultation and systems drawings small, so their
   captions and titles grow there to stay legible */
.b-art :is(.sys-cap, .sys-title, .con-cap, .con-t) { transform-box: fill-box; transform-origin: center; }
.b-art :is(.sys-cap, .con-cap, .con-t) { scale: 1.34; }
.b-art .sys-title { scale: 1.1; }
/* Stacked, the hero reads as Minutes' service pages do: the title and text,
   then the drawing, then a full-width button. The copy's own box gives way so
   its parts can sit either side of the drawing; reading and tab order stay as
   written, since the drawing is hidden from both. */
@media (max-width: 959px) {
  .svc-hero-card:not(.doc-plate) { gap: 0; }
  .svc-hero-card:not(.doc-plate) > .svc-copy { display: contents; }
  .svc-copy > * { position: relative; z-index: 2; }
  .svc-copy .p-lead { margin-bottom: 16px; }
  .svc-actions, .svc-copy .hero-proof { order: 1; }
  .svc-actions { margin-top: 20px; }
  .svc-actions .btn { width: 100%; max-width: 400px; }
  /* each wide drawing names the empty band above and below its parts, so it
     can sit as close to the text and the button as on a phone */
  .svc-art .art-wide { margin-block: var(--stack-trim, 0); }
}
@media (min-width: 960px) {
  .svc-hero-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
    min-height: 540px; border-radius: 32px;
    padding-block: 48px; padding-inline: 56px 32px;
  }
  .svc-hero-card::before {
    -webkit-mask-image: radial-gradient(ellipse 55% 75% at 75% 45%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 75% at 75% 45%, #000, transparent 75%);
  }
  .svc-copy { text-align: start; }
  .svc-copy .p-lead { margin-inline: 0; }
  .svc-actions { justify-content: flex-start; }
  .svc-art { padding: 0; }
}

/* ---------- topic rail ---------- */
.svc-topics { padding-block: 0; }
.svc-topics .sec-head { margin-bottom: 28px; }
@media (min-width: 1025px) { .svc-topics .sec-head { margin-bottom: 36px; } }
/* Persian tiles: Modam instead of the Latin display face, and a line icon
   in place of a logo */
.tool[lang="fa"] { font-family: var(--font); font-size: 15.5px; }
.tool[lang="fa"] svg { width: 22px; height: 22px; color: var(--orange); }

/* ---------- business time estimate ---------- */
.time-section .sec-head { margin-bottom: 24px; }
.time-calculator { max-width: 860px; margin-inline: auto; }
.time-layout { display: grid; height: auto; }
.time-controls { min-width: 0; padding: 16px; }
.time-team-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.time-number-field { min-width: 0; }
.time-number-field > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--ink-strong); }
.time-stepper { display: flex; align-items: center; padding: 2px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg); container-type: inline-size; }
.time-stepper button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: var(--white); color: var(--ink-strong); cursor: pointer; transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.time-stepper button:disabled { opacity: .35; cursor: default; }
.time-stepper button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.time-stepper input { width: 100%; min-width: 0; height: 44px; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-strong); font: 700 clamp(16px, calc((100cqi - 94px) / (var(--time-input-length) * .8)), 24px)/1.2 var(--font); font-variant-numeric: tabular-nums; text-align: center; direction: ltr; }
@media (hover: hover) { .time-stepper button:hover:not(:disabled) { background: var(--orange-lightest); color: var(--orange-text); } }
.time-field { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.time-field > label { font-weight: 600; font-size: 13px; line-height: 1.5; color: var(--ink-strong); }
.time-range { grid-column: 1 / -1; }
.time-value { min-width: 52px; padding: 3px 8px; border-radius: 8px; background: var(--orange-lightest); color: var(--orange-text); font-size: 19px; line-height: 1.4; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-range { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; margin: 0; cursor: pointer; background: transparent; }
.time-range::-webkit-slider-runnable-track { height: 6px; border-radius: 9px; background: linear-gradient(to left, var(--orange) var(--range-fill), var(--navy-lightest) var(--range-fill)); }
.time-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border: 3px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: var(--shadow-e2); }
.time-range::-moz-range-track { height: 6px; border-radius: 9px; background: linear-gradient(to left, var(--orange) var(--range-fill), var(--navy-lightest) var(--range-fill)); }
.time-range::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: var(--shadow-e2); }
.time-range:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; border-radius: 8px; }
.time-range-scale { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -8px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.time-assumption { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.time-result { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; background: radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 70%), var(--navy); color: var(--white); }
.time-result-label { font-size: 11px; line-height: 1.6; color: var(--navy-light); }
.time-result-main { width: 100%; min-width: 0; container-type: inline-size; }
.time-total { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.time-total strong { font-size: min(36px, calc(100cqi / (var(--time-digits) * .8))); line-height: 1.2; font-weight: 800; font-variant-numeric: proportional-nums; letter-spacing: -.035em; }
.time-result-detail { min-width: 0; }
.time-capacity { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.time-capacity span { height: 12px; border-radius: 2px; background: color-mix(in srgb, var(--navy-light) 20%, transparent); transition: background-color var(--dur-hover) var(--ease-hover); }
.time-capacity .is-saved { background: var(--orange); }
@media (min-width: 800px) {
  .time-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .time-controls { padding: 18px 28px; }
  .time-number-field > label { font-size: 13px; }
  .time-field > label { font-size: 14px; }
  .time-assumption { font-size: 12px; }
  .time-result { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 18px; padding: 24px; text-align: center; }
  .time-result-label { font-size: 14px; }
  .time-total { justify-content: center; margin-top: 6px; }
  .time-total strong { font-size: min(56px, calc((100cqi - 42px) / (var(--time-digits) * .8))); }
  .time-result-detail { width: 100%; max-width: 210px; }
  .time-capacity span { height: 18px; }
}
@media (max-width: 799px) {
  .time-section { padding-block: 20px; }
  .time-section .sec-head { margin-bottom: 14px; }
  .time-calculator { padding: 10px; border-radius: 26px; }
  .time-controls { padding-block: 12px; }
  .time-team-fields { margin-bottom: 12px; }
  .time-assumption { margin-top: 6px; }
}
@media (max-width: 380px) {
  .time-team-fields { gap: 8px; }
  .time-number-field > label { min-height: 36px; line-height: 1.5; }
  .time-stepper { padding: 0; }
  .time-total { gap: 4px; font-size: 12px; }
  .time-total strong { font-size: min(30px, calc(100cqi / (var(--time-digits) * .8))); }
}
@media (max-width: 360px) {
  .time-stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .time-stepper input { grid-column: 1 / -1; grid-row: 1; height: 32px; font-size: 22px; }
  .time-stepper button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .time-stepper button, .time-capacity span { transition: none; }
}

/* ---------- process steps ---------- */
.steps { display: grid; gap: 16px; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.step {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 22px;
  box-shadow: 0 8px 16px 0 #e9e9e9;
}
.step:nth-child(even) { background: linear-gradient(180deg, #f9f9f9 0%, var(--navy-lightest) 100%); }
/* two columns: tint in a checkerboard, so the tinted cards don't stack */
@media (min-width: 640px) and (max-width: 1099px) {
  .step:nth-child(4n) { background: #fff; }
  .step:nth-child(4n+3) { background: linear-gradient(180deg, #f9f9f9 0%, var(--navy-lightest) 100%); }
}
.step-band { position: relative; height: 150px; display: flex; justify-content: center; }
/* soft rounded tiles behind the icon, fading out downwards */
.step-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect x='6' y='6' width='56' height='56' rx='16' fill='%230e1a2c' fill-opacity='.04'/%3E%3C/svg%3E");
  background-size: 68px 68px; background-position: center -18px;
  -webkit-mask-image: radial-gradient(ellipse 75% 95% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 95% at 50% 0%, #000 25%, transparent 78%);
}
.step-icon {
  position: relative; margin-top: 30px; width: 70px; height: 70px; flex: none;
  display: grid; place-items: center; border-radius: 24px; border: 4px solid #fff;
  background: linear-gradient(180deg, #f7f7f7 0%, #e0e0e0 100%);
  box-shadow: 0 8px 12px 0 #e0e0e0; color: var(--ink-strong);
}
.step-icon svg { width: 26px; height: 26px; }
.step-n {
  position: absolute; top: 14px; inset-inline-start: 14px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-lightest); color: var(--orange); font-size: 14px; font-weight: 800;
}
.step-copy { position: relative; margin-top: -32px; padding: 0 22px 26px; text-align: center; }
.step-copy .h-card { font-size: 19px; margin-bottom: 6px; }
.step-copy .p-card { font-size: 15px; }

/* ---------- closing card ---------- */
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.qa .ans a { color: var(--ink-strong); font-weight: 700; }

/* =========================================================
   BRANDS PAGE (/brands)
   Collaborations on Mahbod's own Instagram and Telegram channels:
   eligibility, audience, formats, process and an inline enquiry form. Every class here
   starts with `br-`: ad blockers hide elements whose class mentions ads,
   promos, sponsors or banners, so none of those words may appear.
   ========================================================= */
/* the follower counts under the hero buttons, start-aligned with the copy */
.br-proof { margin-top: 24px; }
@media (min-width: 960px) { .br-proof { justify-content: flex-start; } }
@media (max-width: 639px) {
  .br-proof { flex-wrap: nowrap; gap: 12px; margin-top: 12px; }
  .br-proof a { min-height: 44px; gap: 5px; font-size: 13px; white-space: nowrap; }
  .br-proof svg { width: 18px; height: 18px; }
  .br-proof bdi { font-size: 15px; }
  .br-proof-context {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- step sections ---------- */
.br-first { padding-top: 48px; }
@media (min-width: 1025px) { .br-first { padding-top: 80px; } }
.br-page .br-step, .br-page #faq, .br-page #packages { scroll-margin-top: 24px; }
.br-next { display: flex; justify-content: center; margin-top: 32px; }
@media (min-width: 1025px) { .br-next { margin-top: 40px; } }

/* step 1: the fields I don't take on, one row each, and the way on */
.br-no { max-width: 860px; margin-inline: auto; }
.br-no .plate-in { padding: 4px 22px 0; }
@media (min-width: 768px) { .br-no .plate-in { padding: 8px 32px 0; } }
.br-no-list li { display: flex; align-items: flex-start; gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--hairline); }
.br-no-list svg { flex: none; width: 26px; height: 26px; margin-top: 2px; color: var(--negative); }
.br-no-list p { min-width: 0; }
.br-no-list strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink-strong); text-wrap: balance; }
.br-no-list span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.85; color: var(--muted); }
.br-no-foot { display: flex; justify-content: center; padding-block: 22px; }

/* step 2: the channels beside the kinds of brand that fit */
.br-aud { display: grid; gap: 16px; }
@media (min-width: 900px) { .br-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.br-card { padding: 24px; }
@media (min-width: 1025px) { .br-card { padding: 30px; } }
.br-card > .h-card { margin-bottom: 10px; }
.br-ch li { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.6; color: var(--muted); }
/* the figure and its label share a line, and the label drops under the
   figure when the card is too narrow for both */
.br-ch-txt { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.br-ch-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--card-grey); }
.br-ch-icon svg { width: 22px; height: 22px; }
.br-ch bdi, .br-ch b { font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ink-strong); }
.br-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.br-fit { margin-top: 6px; }
.br-fit p { min-width: 0; color: var(--muted); font-size: 15px; }
.br-fit strong { display: block; font-size: 16px; font-weight: 700; color: var(--ink-strong); }
/* a phone gives the two plated cards' text a little more of the width */
@media (max-width: 479px) {
  .br-card { padding: 22px 18px; }
  .br-no .plate-in { padding-inline: 18px; }
}

/* Four formats, with compact two-by-two cards on phones. */
.br-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1100px) {
  .br-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.br-fmt { display: flex; flex-direction: column; }
.br-shot {
  display: grid; place-items: center; height: 150px; margin: 8px 8px 0; border-radius: 12px;
  background-color: #f7f8fa;
  background-image: radial-gradient(circle, rgba(14, 26, 44, 0.08) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.br-shot svg { width: 100%; max-width: 220px; height: 130px; }
.br-fmt-summary { display: none; }
@media (max-width: 639px) {
  .br-page #formats .sec-head { margin-bottom: 24px; }
  .br-formats { gap: 12px; }
  .br-formats > .plate { min-width: 0; padding: 6px; border-radius: 22px; }
  .br-shot { flex: none; height: 64px; margin: 6px 6px 0; border-radius: 10px; }
  .br-shot svg { height: 60px; }
  .br-fmt .br-fmt-copy { min-width: 0; padding: 12px 10px 16px; }
  .br-fmt .h-card { min-height: 3em; font-size: 16px; line-height: 1.5; }
  .br-fmt .p-card { font-size: 14px; line-height: 1.8; }
  .br-fmt-detail { display: none; }
  .br-fmt-summary { display: block; }
}
.br-fmt-copy { flex: 1; padding: 18px 22px 24px; }
.br-fmt-copy .h-card { margin-bottom: 6px; }
@media (min-width: 1100px) {
  .br-formats > .plate { padding: 8px; border-radius: 22px; }
  .br-shot { height: 90px; }
  .br-shot svg { height: 80px; }
  .br-fmt-copy { padding-top: 14px; }
  .br-fmt-copy .h-card { font-size: 19px; }
  .br-fmt-copy .p-card { font-size: 15px; }
}

/* The collaboration form stays within the fifth section of /brands. */
.br-form-shell { max-width: 880px; margin-inline: auto; }
.br-form-shell > .plate-in { overflow: visible; }
.br-collab { padding: clamp(22px, 4vw, 44px); scroll-margin-top: 16px; }
.br-form-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.br-form-progress span { height: 4px; border-radius: 100px; background: var(--card-grey); }
.br-form-progress .is-complete { background: var(--orange); }
.br-form-progress .is-current { background: var(--orange-light); }
.br-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 24px; }
.br-form-count { flex: none; color: var(--muted); font-size: 13px; margin: 0; }
.br-form-heading, .br-collab [data-field] { scroll-margin-top: 32px; }
.br-form-heading:focus { outline: none; }
.br-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px 18px; padding: 0; margin: 0; border: 0; min-width: 0; }
.br-collab .input { font-size: 16px; }
.br-budget { position: relative; }
.br-budget-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; cursor: pointer; background: var(--surface-soft); }
.br-budget-trigger > svg { width: 14px; height: 14px; flex: none; color: var(--muted); transition: rotate var(--dur-hover) var(--ease-hover); }
.br-budget-trigger[aria-expanded="true"] { border-color: var(--navy); box-shadow: none; }
.br-budget-trigger[aria-expanded="true"] > svg { rotate: 180deg; }
.br-budget-trigger:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.br-budget-placeholder { color: var(--muted); }
.br-budget-options {
  position: absolute; z-index: 10; inset-inline: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-e2);
  overflow-y: auto; overscroll-behavior: contain;
}
.br-budget-options[data-above] { top: auto; bottom: calc(100% + 8px); }
.br-budget-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 12px;
  border-radius: 12px; color: var(--ink-strong); font-size: 15px; line-height: 1.7; cursor: pointer;
}
.br-budget-option[data-active] { background: var(--bg); outline: 2px solid var(--navy); outline-offset: -2px; }
.br-budget-option[aria-selected="true"] { font-weight: 700; }
.br-budget-option svg { width: 18px; height: 18px; flex: none; color: var(--navy); visibility: hidden; }
.br-budget-option[aria-selected="true"] svg { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .br-budget-trigger > svg { transition: none; } }
.br-format-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.br-format-choices .cpick-opt { justify-content: flex-start; padding-inline: 16px; }
.br-collab .cpick-opt:has(:checked) { background: var(--bg); }
.br-choice-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--muted); border-radius: 5px; flex: none; }
.br-choice-check svg { width: 14px; height: 14px; visibility: hidden; }
.cpick-opt:has(:checked) .br-choice-check { background: var(--navy); border-color: var(--navy); color: #fff; }
.cpick-opt:has(:checked) .br-choice-check svg { visibility: visible; }
.br-choice-radio { border-radius: 50%; }
.br-field-hint, .br-field-error { font-size: 12.5px; line-height: 1.8; padding-inline: 4px; }
.br-field-hint { color: var(--muted); }
.br-field-error, .br-form-notice { color: var(--orange-text); }
.br-form-review { padding: 20px; border: 1px solid var(--card-grey); background: var(--bg); border-radius: 18px; }
.br-form-review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.br-form-review dt { color: var(--muted); font-size: 12px; }
.br-form-review dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-strong); overflow-wrap: anywhere; }
.br-form-review .doc-link { font-size: 13px; }
.br-form-notice { margin-top: 20px; font-size: 14px; }
.br-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.br-form-actions button[type="submit"] { margin-inline-start: auto; min-width: 140px; }
.br-collab button:disabled { cursor: default; }
.br-form-actions button:disabled { opacity: .65; }
.br-form-privacy { font-size: 12px; line-height: 1.9; color: var(--muted); margin-top: 20px; }
.br-form-done { min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.br-form-done .p-card { max-width: 440px; }
@media (max-width: 639px) {
  #collaboration .sec-head { margin-bottom: 20px; }
  #collaboration .sec-head .p-lead { font-size: 14px; line-height: 1.9; }
  .br-form-shell { padding: 8px; }
  .br-collab { padding: 12px 14px 16px; }
  .br-form-progress { gap: 6px; }
  .br-form-head { margin-block: 16px; }
  .br-form-heading { font-size: 20px; line-height: 1.6; }
  .br-form-count { font-size: 12px; }
  .br-form-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .br-collab .cfield { gap: 5px; }
  .br-collab .input { min-height: 46px; padding: 9px 14px; line-height: 1.65; }
  .br-collab .input-area { height: 110px; min-height: 110px; }
  .br-collab .input-area::placeholder { font-size: 14px; font-weight: 400; color: color-mix(in srgb, var(--muted) 85%, var(--white)); opacity: 1; }
  .br-collab .cphone { padding: 0; }
  .br-collab .cphone input { padding-block: 9px; }
  .br-collab .cpick-opt { min-height: 46px; padding: 8px 10px; font-size: 13px; line-height: 1.6; }
  .br-format-choices { gap: 8px; }
  .br-format-choices > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .br-field-hint, .br-field-error { font-size: 12px; line-height: 1.7; }
  .br-form-review { padding: 14px; }
  .br-form-review .doc-link { min-height: 44px; }
  .br-form-actions { gap: 8px; margin-top: 18px; }
  .br-form-actions .btn { min-height: 48px; padding: 10px 14px; font-size: 14px; }
  .br-form-actions button[type="submit"] { flex: 1; min-width: 0; }
  .br-form-privacy, .br-form-notice { margin-top: 12px; }
}
/* the website hint fits its field on the narrowest phones */
@media (max-width: 359px) { #brf-companyWebsite::placeholder { font-size: 14px; } }

/* =========================================================
   SERVICE PAGE (agents.html)
   The Smart Website sections the agents page borrows: the growth row (two
   cards and the pill whose lines run into both), and the tabbed automation
   showcase on its black board.
   ========================================================= */

/* ---------- automation or agent ---------- */
.vs { display: grid; gap: 12px; max-width: 1080px; margin-inline: auto; }
/* zero gap on purpose: the connector's lines end exactly on the card edges */
@media (min-width: 1025px) { .vs { grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr); gap: 0; } }
.vs-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 24px;
  box-shadow: 0 8px 16px 0 #e9e9e9;
}
.vs-copy { position: relative; margin-top: -32px; padding: 0 22px 26px; text-align: center; }
@media (min-width: 1025px) { .vs-copy { padding: 0 28px 30px; } }
.vs-copy .h-card { margin-bottom: 6px; }
.vs-eg {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-strong);
}
.vs-eg span { background: #f4f6f9; border-radius: 100px; padding: 2px 12px; line-height: 26px; }
.vs-eg svg { width: 14px; height: 14px; flex: none; color: var(--orange); }
.vs-art { display: none; }
@media (min-width: 1025px) { .vs-art { display: flex; align-items: center; } }

/* ---------- the showcase ---------- */
/* The Minutes automation board as it is: a black slab, dark sheen tabs, the
   selected one running into burnt orange, a soft orange light that follows
   the pointer, and a dark dotted n8n canvas. Sized so the heading, the tabs
   and the whole canvas fit in one desktop screen. */
.sc .sec-head { margin-bottom: 28px; }
@media (min-width: 1025px) { .sc .sec-head { margin-bottom: 32px; } }
/* narrower than the page, as Minutes keeps it, so the canvas stays short */
.sc-board { max-width: 1040px; margin-inline: auto; background: #000; border-radius: 24px; padding: 12px; }
@media (min-width: 768px) { .sc-board { padding: 20px; } }
@media (min-width: 1025px) { .sc-board { border-radius: 32px; padding: 24px; } }
.sc-tabs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: start; }
@media (min-width: 900px) { .sc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; } }
.sc-tab {
  position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start;
  padding: 14px; border-radius: 16px; cursor: pointer; text-align: start; color: #fff;
  background: linear-gradient(143deg, #3b3b3b 0%, #1e1e1e 100%);
  border: 1px solid #3b3b3b;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
@media (min-width: 900px) { .sc-tab { padding: 18px 16px; gap: 4px; } }
.sc-tab::before {
  content: ""; position: absolute; width: 400px; height: 400px; pointer-events: none;
  left: var(--mx, 50%); top: var(--my, 50%); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 110, 50, 0.4), transparent 64%);
  opacity: 0; transition: opacity 400ms var(--ease-hover);
}
@media (hover: hover) and (pointer: fine) { .sc-tab:hover::before { opacity: 1; } .sc-tab:hover { border-color: #525252; } }
.sc-tab[aria-selected="true"] { background: linear-gradient(143deg, #252525 29%, #904a1c 100%); border-color: #525252; }
.sc-tab > span { position: relative; display: block; }
.sc-tab-title { font-size: 15px; font-weight: 700; line-height: 1.5; }
.sc-tab-cap { font-size: 13px; line-height: 1.6; color: #a3a3a3; }
.sc-tab[aria-selected="true"] .sc-tab-cap { color: #e3cbbb; }
@media (min-width: 900px) { .sc-tab-title { font-size: 16px; } .sc-tab-cap { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .sc-tab, .sc-tab::before { transition: none; } }

.sc-panel { position: relative; margin-top: 10px; }
.sc-canvas {
  border-radius: 18px; padding: 14px 8px;
  background-color: #1c1c1c;
  background-image: radial-gradient(circle, #343434 1px, transparent 1.4px);
  background-size: 20px 20px;
}
@media (min-width: 900px) { .sc-canvas { border-radius: 22px; padding: 14px 18px 10px; } }
.sc-canvas .art svg { max-height: none; }
.sc-tall .art svg { max-width: 380px; margin-inline: auto; }
.sc-wide { display: none; }
@media (min-width: 900px) { .sc-wide { display: block; } .sc-tall { display: none; } }
.sc-note { position: relative; max-width: 880px; margin: 14px auto 4px; padding-inline: 8px; font-size: 14px; line-height: 1.9; color: #a3a3a3; text-align: center; }
/* each note is one line on a wide board; below that two lines are held for
   every note, so switching tabs never moves the page */
@media (min-width: 900px) { .sc-note { display: grid; align-content: center; min-height: 3.8em; font-size: 14px; margin: 12px auto 0; } }
@media (min-width: 1100px) { .sc-note { min-height: 0; } }

/* =========================================================
   ABOUT PAGE (about.html)
   The service hero with the portrait in the art column, the biography
   written out under it, and the shared closing card.
   ========================================================= */
.ab-portrait { width: 100%; max-width: 320px; margin: 12px auto 0; }
/* as on the homepage, the photo goes without the plate's grey shell; its
   padding and rim stay as empty space, so the photo keeps its size and place */
.ab-portrait .plate { background: none; border-color: transparent; }
.ab-portrait .plate-in { aspect-ratio: 1 / 1; background: #d9d3cc; }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
/* stacked, the portrait leads the hero, as the picture does on Minutes'
   content page */
@media (max-width: 959px) { .ab-portrait { order: -1; margin: 0 auto 24px; } }
@media (max-width: 600px) { .ab-portrait { max-width: 240px; } }
@media (min-width: 960px) {
  .ab-portrait { max-width: 400px; margin: 0 auto; }
  .ab-portrait .plate-in { aspect-ratio: 4 / 5; }
}
.ab-hero .p-lead { text-align: start; text-wrap: pretty; }
@media (min-width: 640px) { .ab-hero .p-lead { text-align: justify; } }
@media (min-width: 1025px) {
  .ab-hero { grid-template-columns: minmax(0, 1fr) 400px; }
  .ab-hero .p-lead { max-width: 75%; }
}
.ab-link { color: var(--ink-strong); font-weight: 700; white-space: nowrap; }

/* the story straight on the page, each stage under the name the contents
   card gives it, then the social profiles, in the section heading's column */
.ab-story { max-width: 760px; margin-inline: auto; }
.ab-text { display: grid; gap: 14px; }
.ab-text p { font-size: clamp(16px, 1.25vw, 18px); line-height: 2; color: var(--muted); }
@media (min-width: 640px) { .ab-text p { text-align: justify; } }
/* a stage's heading sits closer to its own paragraph than to the last one */
.ab-text h3 { scroll-margin-top: 24px; }
.ab-text h3:not(:first-child) { margin-top: 16px; }
.ab-text h3 + p { margin-top: -8px; }

/* the homepage's social cards, three in a row; a phone's third of a row
   can't hold a handle, so there each card takes a row of its own */
.ab-story .socials { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 559px) { .ab-story .socials { grid-template-columns: minmax(0, 1fr); } }

/* desktop only: the story's stages in a contents card at the start side,
   in view while the text scrolls past, as on Minutes Agency's long pages;
   each stage links to its heading. Smaller screens keep the single column. */
.ab-path { display: none; }
@media (min-width: 1025px) {
  .ab-story {
    max-width: none; display: grid; align-items: start; justify-content: center;
    grid-template-columns: clamp(248px, 21vw, 280px) minmax(0, 760px); column-gap: 48px;
  }
  .ab-story > .ab-text, .ab-story > .socials { grid-column: 2; }
  .ab-path {
    display: block; grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px;
    padding: 24px; background: var(--card-grey); border: 1px solid #e0e0e0; border-radius: 20px;
  }
}
.ab-path-title { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink-strong); margin-bottom: 12px; }
.ab-path ol { display: grid; gap: 4px; }
.ab-path li { display: flex; align-items: center; gap: 10px; }
.ab-path li::before { content: ""; flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 4px solid #e0e0e0; border-radius: 50%; }
.ab-path a { padding-block: 3px; font-size: 15px; line-height: 1.6; color: var(--muted); transition: color var(--dur-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .ab-path a:hover { color: var(--ink-strong); } }

.ab-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ab-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; }
@media (min-width: 1025px) { .ab-card { padding: 30px; } }
.ab-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--orange-lightest); color: var(--orange); margin-bottom: 18px; }
.ab-icon svg { width: 22px; height: 22px; }
.ab-card .h-card { margin-bottom: 6px; }
.ab-card .p-card { margin-bottom: 18px; }
.ab-card .p-card:last-child { margin-bottom: 0; }

/* =========================================================
   CONSULTATION PAGE (consultation.html)
   The price on a navy card and the booking rules beside it on the grey plate.
   ========================================================= */
/* Soft, single-surface cards inspired by the Minutes About page. The large
   decorative glyph sits at the reading-end corner, mirrored for Persian. */
.consult-card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  padding: 28px 26px 32px; border: 1px solid var(--hairline); border-radius: 24px;
  background: #fff; box-shadow: var(--shadow-e2);
}
.consult-card-cool { background: color-mix(in srgb, var(--navy-lightest) 60%, #fff); }
.consult-card-warm { background: var(--orange-lightest); }
.consult-card .h-card, .consult-card .p-card { position: relative; z-index: 1; }
.consult-card .h-card { margin-bottom: 16px; }
.consult-card-art {
  position: absolute; z-index: 0; inset-inline-end: -8px; bottom: -28px;
  width: 160px; height: 160px; color: #fff; opacity: .9; pointer-events: none;
  filter: drop-shadow(0 3px 0 var(--card-grey)) drop-shadow(0 8px 12px var(--hairline));
  transform: rotate(-12deg);
}
@media (min-width: 1025px) { .consult-card { padding: 32px 32px 36px; } }

.consult-booking, .book-calendar { scroll-margin-top: 24px; }
.book-calendar { max-width: 980px; margin: 36px auto 0; }
.book-calendar-intro { margin-bottom: 20px; }
.book-calendar-intro .p-card { margin-top: 8px; }
.book { display: grid; gap: 8px; max-width: 980px; margin-inline: auto; }
@media (min-width: 900px) { .book { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.book-price { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; background: var(--navy); color: #fff; border-radius: 20px; padding: 28px 24px 24px; }
.book-price::before { content: ""; position: absolute; inset: auto 0 -45% 0; height: 70%; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(241, 98, 4, 0.4), transparent 70%); pointer-events: none; }
.book-price > * { position: relative; }
.book-label { font-size: 14px; font-weight: 600; color: var(--navy-light); }
.book-num { display: flex; align-items: baseline; gap: 10px; font-size: 17px; color: var(--navy-light); }
.book-num bdi { font-size: clamp(44px, 5vw, 60px); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -0.02em; }
.book-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.book-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 14px; font-weight: 600; line-height: 26px; }
.book-facts svg { width: 16px; height: 16px; color: var(--orange-light); }
.book-price .btn { margin-top: auto; }
.book-notes { padding: 28px 24px; }
@media (min-width: 1025px) { .book-price { padding: 36px 34px 32px; } .book-notes { padding: 36px; } }
.book-notes .h-card { margin-bottom: 18px; }

/* The booking calendar (BookingCalendar): GoHighLevel's page framed at full
   length, as wide as the booking cards above. Under 982px wide the calendar
   keeps its compact layout instead of opening an empty band above its card.
   The frame's height follows the calendar; these starting heights match its
   first step, which grows at the frame widths the calendar lays itself out
   by. Until the calendar has drawn, a white card like its own holds the
   place; the calendar fades in over it and brings its own card. Not a scroll
   anchor: Chrome would otherwise move the page down with the growing details
   step, past its first fields. */
.bcal { max-width: 980px; margin-inline: auto; overflow-anchor: none; container-type: inline-size; }
.bcal-frame { --bcal-h: 511px; }
@container (min-width: 451px) { .bcal-frame { --bcal-h: 569px; } }
@container (min-width: 726px) { .bcal-frame { --bcal-h: 613px; } }
.bcal-frame {
  position: relative; border-radius: 20px; background-color: #fff; box-shadow: inset 0 0 0 1px #e0e0e0;
  transition: background-color var(--dur-panel) var(--ease-hover), box-shadow var(--dur-panel) var(--ease-hover);
}
.bcal-frame[data-ready] { background-color: transparent; box-shadow: none; }
/* the starting height holds the place until the calendar has drawn, from
   before the page's scripts run */
.bcal-frame:not([data-ready]) { min-height: var(--bcal-h); }
.bcal-frame iframe {
  display: block; width: 100%; height: var(--bcal-h); border: 0; border-radius: 20px;
  transition: opacity var(--dur-panel) var(--ease-hover);
}
.bcal-frame:not([data-ready]) iframe { opacity: 0; pointer-events: none; }
/* a calendar that doesn't report its height scrolls inside a taller frame */
.bcal-frame[data-free] iframe { height: max(var(--bcal-h), 80svh); }
.bcal-wait {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  text-align: center; font-size: 14px; line-height: 1.8; color: var(--muted);
  transition: opacity var(--dur-hover) var(--ease-hover);
}
.bcal-frame[data-ready] .bcal-wait { opacity: 0; visibility: hidden; }
/* without scripts nothing frames the calendar; the link under it opens it */
.no-js .bcal-frame { display: none; }
.bcal-alt { text-align: center; font-size: 14px; line-height: 1.8; color: var(--muted); }
.booking-confirmation { max-width: 980px; margin-inline: auto; }
.booking-confirmation-body { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 280px; padding: clamp(32px, 6vw, 64px) 24px; text-align: center; }
.booking-confirmation-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange-lightest); color: var(--orange); }
.booking-confirmation-icon svg { width: 28px; height: 28px; }
.booking-confirmation .h-sec { margin: 0; }
.booking-confirmation .btn { margin-top: 10px; }
/* Once booked, the time-picker instructions no longer apply. Focus lands on
   the non-interactive confirmation container so screen readers announce it. */
.book-calendar:has(.booking-confirmation) .book-calendar-intro { display: none; }
.bcal[tabindex="-1"]:focus { outline: none; }
.bcal-alt { margin-top: 14px; }
/* the failure message offers the same link; the line keeps its place */
.bcal-frame[data-failed] + .bcal-alt { visibility: hidden; }
.bcal-alt a, .bcal-wait a { font-weight: 700; color: var(--ink-strong); text-decoration: underline; text-underline-offset: 4px; }
/* a taller tap target than the line of text, with no change to the line */
.bcal-alt a, .bcal-wait a { padding-block: 4px; }
.checks { display: grid; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.85; color: var(--ink); }
.checks li > svg { flex: none; width: 24px; height: 24px; margin-top: 2px; padding: 5px; border-radius: 50%; background: var(--orange-lightest); color: var(--orange); }

/* ---------- pricing: the Minutes plan deck ----------
   Grey shell with a 2px white ring, a dot grid fading down from the top edge,
   a warm centre wash and a cursor glow; plan name swept through the orange
   gradient on hover; Lottie badge tile; white feature plate with orange dots.
   Three across from 900px, a swipe track with a plan picker below that. */
.pp-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.pp-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card-grey); border: 2px solid #fff; border-radius: 32px; padding: 10px;
  transition: transform 500ms ease;
}
.pp-card > * { position: relative; z-index: 1; }
.pp-card > .pp-fx { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; }
@media (min-width: 900px) { .pp-card { box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.05); } }
@media (min-width: 1200px) { .pp-card { padding: 15px; } }

.pp-dots {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.07) 0.9px, transparent 1.2px);
  background-size: 8px 8px; background-position: center 1px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, #000 14px, rgba(0, 0, 0, 0.35) 70px, transparent 200px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, #000 14px, rgba(0, 0, 0, 0.35) 70px, transparent 200px);
  transition: background-position .6s ease, opacity .6s ease, filter .6s ease;
}
.pp-wash {
  display: none; opacity: .8; mix-blend-mode: soft-light;
  background-image: radial-gradient(circle at center, rgba(255, 130, 80, 0.25) 0%, rgba(255, 130, 80, 0.1) 10%, transparent 18%);
}
.pp-glow {
  display: none; opacity: 0; transition: opacity .3s ease;
  background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 190, 150, 0.15), transparent 60%);
}
@media (min-width: 768px) {
  .pp-dots { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0.9px, transparent 1.2px); }
  .pp-wash { display: block; }
}

.pp-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 15px; }
.pp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-name {
  align-self: flex-start; padding-block: 2px;
  font-size: 20px; font-weight: 800; line-height: 1.45;
  background-image: linear-gradient(90deg, var(--ink-strong) 25%, var(--orange) 50%, var(--ink-strong) 75%);
  background-size: 400% 100%; background-position: 100% 50%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pp-loop { animation: pp-sweep 4s ease-in-out infinite; }
@keyframes pp-sweep { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
.pp-tag { font-size: 14px; line-height: 1.6; color: var(--muted); }
.pp-price { margin-top: 8px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; color: var(--ink-strong); }
.pp-price .pp-from { font-size: .7em; letter-spacing: 0; }
.sys-scope-note { padding: 6px 12px; font-size: 14px; line-height: 1.8; color: var(--muted); text-align: center; }
@media (min-width: 1200px) { .pp-name { font-size: 22px; } .pp-price { font-size: 26px; } }
@media (min-width: 1367px) { .pp-name { font-size: 24px; } .pp-price { font-size: 30px; } }

.pp-badge {
  position: relative; flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px; border: 2px solid #fff;
  background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
  box-shadow: 0 8px 12px 0 #c2c2c2;
}
.pp-badge::before { content: ""; position: absolute; inset: -2px; border-radius: 18px; background-repeat: no-repeat; background-size: cover; pointer-events: none; }
.pp-b1::before { background-image: url("assets/pricing/2025_07_Frame-151.png"); background-position: center; opacity: .7; }
.pp-b2::before { background-image: url("assets/pricing/2025_07_Frame-150-2.png"); background-position: bottom center; }
.pp-b3::before { background-image: url("assets/pricing/2025_07_Frame-194-1.png"); background-position: bottom center; opacity: .24; }
.pp-lottie { position: relative; width: var(--s); height: var(--s); }
.pp-b2 .pp-lottie, .pp-b3 .pp-lottie { filter: saturate(.9); }
.pp-fb, .pp-anim { position: absolute; inset: 0; transition: opacity .15s linear; }
.pp-fb { display: grid; place-items: center; font-size: min(26px, calc(var(--s) * 0.7)); line-height: 1; }
.pp-anim { opacity: 0; }
.pp-lottie.ready .pp-fb { opacity: 0; }
.pp-lottie.ready .pp-anim { opacity: 1; }

.pp-feats {
  flex: 1; display: flex; flex-direction: column; gap: 18px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 32px; padding: 20px 17px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.pp-feats li { display: flex; align-items: flex-start; gap: 8px; }
.pp-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; background: url("assets/pricing/2025_07_dotorange.webp") center / contain no-repeat; transition: filter .4s ease; }
.pp-feats p { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-feats strong { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink-strong); }
.pp-feats p > span { font-size: 14px; line-height: 1.75; color: #6b6b6b; text-wrap: pretty; }
.pp-feats b { font-weight: 700; color: var(--ink-strong); }
@media (min-width: 900px) { .pp-feats { gap: 14px; } }
@media (min-width: 1200px) { .pp-feats { gap: 18px; padding: 22px 20px; } }

.pp-cta .btn { width: 100%; height: 50px; padding-block: 0; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .pp-glow { display: block; }
  .pp-card:hover { transform: scale(1.012); }
  .pp-card:hover > .pp-glow { opacity: 1; }
  .pp-card:hover > .pp-dots { background-position: center -7px; opacity: .55; filter: blur(.5px); }
  .pp-card:hover .pp-name { animation: pp-sweep 2.5s linear infinite; }
  .pp-card:hover .pp-feats { transform: scale(1.012); box-shadow: 0 4px 8px #e0e0e0, 0 4px 8px #c2c2c250; }
  .pp-dot { filter: saturate(0); }
  .pp-card:hover .pp-dot { filter: none; }
}

/* below 900: a plan picker over a swipe track of compact cards */
.pp-picker { display: none; }
@media (max-width: 899px) {
  .pp-picker {
    display: flex; gap: 4px; max-width: 440px; margin: 0 auto 14px; padding: 4px;
    background: var(--card-grey); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 100px;
  }
  .pp-picker button {
    flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px;
    border: 1px solid transparent; border-radius: 100px; background: none; cursor: pointer;
    font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted);
    transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover);
  }
  .pp-picker button[aria-pressed="true"] {
    background: #fff; border-color: #e0e0e0; color: var(--ink-strong); font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--shadow-e1);
  }
  .pp-deck {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
    scroll-padding-inline: var(--gutter);
  }
  .pp-deck::-webkit-scrollbar { display: none; }
  .pp-deck > .pp-card { flex: 0 0 min(calc(100% - 24px), 420px); scroll-snap-align: center; }
  .pp-head { padding: 14px 12px 6px; }
  .pp-feats { gap: 10px; border-radius: 26px; padding: 16px 14px; }
  .pp-feats p { display: block; font-size: 14px; line-height: 1.75; }
  .pp-feats strong { font-size: 14px; font-weight: 700; }
  .pp-feats strong:not(:only-child)::after { content: ": "; }
  .pp-dot { width: 14px; height: 14px; margin-top: 5px; }
}

/* A single offer keeps the plan material, without a picker or swipe track. */
.pp-deck[data-single] {
  display: grid; grid-template-columns: minmax(0, 1fr); max-width: 920px;
  margin-inline: auto; padding: 0; overflow: visible;
}
@media (min-width: 768px) {
  .pp-deck[data-single] .pp-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
}

/* the add-ons panel: same shell, a lead column and a white list card */
.pp-wide { margin-top: 20px; }
.pp-wide-in { display: flex; flex-direction: column; padding: 10px 10px 4px; }
.pp-wide-head { display: flex; flex-direction: column; gap: 4px; }
.pp-bolt { width: 55px; height: 55px; margin-inline-start: -6px; }
.pp-wide-lead { font-size: 15px; line-height: 1.7; color: var(--muted); }
.pp-wide-box {
  flex: 1; min-width: 0; margin-top: 12px; display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 20px;
  font-size: 15px; line-height: 1.8; color: var(--muted);
}
.pp-addons li { display: flex; align-items: flex-start; gap: 8px; padding-block: 3px; }
.pp-addons svg { flex: none; width: 12px; height: 12px; margin-top: 8px; }
.pp-addons strong { font-weight: 700; color: var(--ink-strong); }
@media (min-width: 900px) {
  .pp-wide-in { flex-direction: row; align-items: center; gap: 28px; padding: 10px 20px; }
  .pp-wide-head { flex: 0 0 32%; }
  .pp-wide-box { margin-top: 0; padding: 32px 36px; }
}
@media (min-width: 1200px) {
  .pp-wide { padding: 26px; }
  .pp-wide-lead { font-size: 17px; }
  .pp-wide-box { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-card, .pp-dots, .pp-glow, .pp-feats, .pp-dot, .pp-fb, .pp-anim, .pp-picker button { transition: none; }
  .pp-loop, .pp-card:hover .pp-name { animation: none; }
  .pp-card:hover, .pp-card:hover .pp-feats { transform: none; }
}
.pp-addons bdi { font-weight: 600; color: var(--ink-strong); }

/* =========================================================
   LEGAL PAGES (privacy.html, terms.html)
   ========================================================= */
/* Minutes' document pages: the hero plate stripped to its title, then the copy
   in one narrow column on the page background. The plate keeps the hero card's
   material and drops its art column, height and side-weighted grid */
.svc-hero-card.doc-plate { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 50px 22px; }
@media (min-width: 768px) { .svc-hero-card.doc-plate { padding: 64px 50px; } }
.svc-hero-card.doc-plate::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 50% 35%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 85% at 50% 35%, #000, transparent 75%);
}
.doc-plate .svc-copy { text-align: center; }
.doc-plate .svc-copy .p-lead { max-width: 640px; margin: 0 auto; }
.doc-meta { margin-top: 14px; font-size: 14px; color: var(--muted); }

.doc { max-width: 800px; padding-block: 40px 72px; }
@media (min-width: 1025px) { .doc { padding-block: 56px 112px; } }

/* contents, numbered like the section titles and read down each column */
.doc-toc { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; padding: 20px; }
.doc-toc-title { font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--ink-strong); margin-bottom: 6px; }
.doc-toc ol { counter-reset: toc; }
.doc-toc li { counter-increment: toc; break-inside: avoid; }
.doc-toc a { display: flex; gap: 6px; padding-block: 5px; font-size: 15px; line-height: 1.8; color: var(--muted); transition: color var(--dur-hover) var(--ease-hover); }
.doc-toc a::before { content: counter(toc, persian) "."; flex: none; min-width: 1.5em; }
.doc-toc a:focus-visible { color: var(--ink-strong); }
@media (hover: hover) and (pointer: fine) { .doc-toc a:hover { color: var(--ink-strong); } }
@media (min-width: 640px) {
  .doc-toc { padding: 24px 28px; }
  .doc-toc ol { columns: 2; column-gap: 32px; }
}

.doc-sec { padding-top: 40px; font-size: 16px; line-height: 2; color: var(--muted); }
.doc-sec + .doc-sec { margin-top: 40px; border-top: 1px solid var(--hairline); }
@media (min-width: 1025px) { .doc-sec { font-size: 17px; } }
.doc-sec h2 { font-size: clamp(21px, 2vw, 25px); font-weight: 700; line-height: 1.6; color: var(--ink-strong); }
.doc-sec > * + * { margin-top: 16px; }
.doc-sec strong { font-weight: 700; color: var(--ink-strong); }
/* inline links as elsewhere on the site; «فرم تماس» is a button that opens the contact popup */
.doc-sec a, .doc-link { font-weight: 700; color: var(--ink-strong); }
.doc-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }

.doc-list { list-style: disc; padding-inline-start: 20px; }
.doc-list li + li { margin-top: 10px; }

.doc-cards { display: grid; gap: 12px; }
@media (min-width: 768px) { .doc-cards { grid-template-columns: 1fr 1fr; } }
.doc-card { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; padding: 18px 20px; font-size: 15px; line-height: 1.95; }
.doc-card h3 { font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--ink-strong); margin-bottom: 6px; }

/* the notes main sets in amber, toned to the navy tint the steps use */
.doc-note { background: var(--navy-lightest); border-radius: 20px; padding: 18px 20px; color: var(--ink); }
.doc-note > * + * { margin-top: 8px; }
.doc-note-title { font-weight: 700; color: var(--ink-strong); }

.doc-table { background: #fff; border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.9; }
.doc-table th, .doc-table td { padding: 14px 16px; text-align: start; vertical-align: top; }
.doc-table thead th { background: var(--bg); font-weight: 700; color: var(--ink-strong); }
.doc-table tbody tr { border-top: 1px solid var(--hairline); }
.doc-table tbody th { font-weight: 700; color: var(--ink-strong); }
/* the provider names stay on one line; the two prose columns share the rest */
@media (min-width: 640px) { .doc-table tbody th { white-space: nowrap; } }
/* phones restack each row as a block, the provider first and each value under
   its column name; the roles in the markup keep it a table to screen readers,
   which hear the hidden header row rather than these repeated labels */
@media (max-width: 639px) {
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .doc-table table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td { display: block; }
  .doc-table tbody tr { padding: 14px 16px; }
  .doc-table tbody tr:first-child { border-top: 0; }
  .doc-table tbody th, .doc-table td { padding: 0; }
  .doc-table td { margin-top: 6px; }
  .doc-table td::before {
    content: attr(data-label); content: attr(data-label) / "";
    display: block; font-size: 13px; font-weight: 700; color: var(--ink);
  }
}