/* Shashah Shakeya public pages (spec §4, §4A, §5). Tokens come from /assets/subscription_manager/css/tokens.css.
   Logical properties only (RTL first); no inline styles anywhere (CSP style-src 'self'). */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Variable-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Variable-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Arabic'; font-weight: 100 900; font-display: swap;
  src: url('fonts/NotoSansArabic-Variable-Arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.6 Inter, 'Noto Sans Arabic', system-ui, sans-serif; }
html[lang='ar'] body { font-family: 'Noto Sans Arabic', Inter, system-ui, sans-serif; line-height: 1.7; }
img { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--brand-700); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 650; line-height: 1.4; }
.ltr { direction: ltr; unicode-bidi: isolate; }
/* An email inside a sentence: an inline isolate (not inline-block) so a long address wraps inside itself and the
   sentence's full stop stays on its line */
.ltr-wrap { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.wrap { inline-size: 100%; max-inline-size: 1248px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 24px; } }
.skip-link { position: absolute; inset-inline-start: 8px; inset-block-start: -64px; padding: 8px 12px; background: var(--brand-800); color: #fff; border-radius: 8px; z-index: 50; }
.skip-link:focus { inset-block-start: 8px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Buttons: one primary per region (spec §5.3) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 10px 20px; border-radius: 12px;
  border: 1px solid transparent; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; text-align: center; }
.btn--primary { background: var(--brand-700); color: #fff; }
.btn--primary:hover { background: var(--brand-800); }
.btn--secondary { background: var(--surface); color: var(--brand-700); border-color: var(--brand-700); }
.btn--secondary:hover { background: var(--brand-50); }
.btn--quiet { background: transparent; color: var(--brand-700); }
.btn--large { min-block-size: 48px; font-size: 16px; padding-inline: 22px; }
@media (min-width: 901px) { .btn--large { min-block-size: 52px; font-size: 16px; } }
.btn--block { inline-size: 100%; }
.btn--google { background: #fff; color: #1f1f1f; border-color: #747775; font-weight: 500; inline-size: 100%; }
.btn[disabled], .btn[aria-busy='true'] { opacity: .7; cursor: progress; }
.btn--dark-secondary { background: transparent; color: #fff; border-color: #fff; }

/* Header and brand (landing): brand at the start, the three anchors centred, quiet links and one compact button at the end.
   Sticky on a solid surface; the bottom border appears once the page scrolls (site.js toggles .is-scrolled). */
html { scroll-padding-block-start: 88px; }
.site-header { background: var(--surface); border-block-end: 1px solid var(--line); }
.site-header--sticky { position: sticky; inset-block-start: 0; z-index: 40; border-block-end-color: transparent; transition: border-color 160ms ease, box-shadow 160ms ease; }
.site-header--sticky.is-scrolled { border-block-end-color: var(--line); box-shadow: 0 1px 2px rgba(31, 61, 56, .05); }
.site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-block-size: 64px; }
.site-header__nav { display: none; }
.site-header__nav a, .site-header__login { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; text-underline-offset: 8px; }
.site-header__nav a:hover, .site-header__nav a:focus-visible, .site-header__login:hover, .site-header__login:focus-visible {
  text-decoration: underline 2px var(--brand-700); }
.site-header__actions { grid-column: -2; justify-self: end; display: flex; align-items: center; gap: 20px; } /* last column also without the nav (legal pages) */
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand img { flex: none; }
.lang-switch { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); font-weight: 500; }
.btn--compact { min-block-size: 44px; padding: 0 20px; font-size: 15px; }
.brand, .site-header .btn, .site-header__nav a, .site-header__login { white-space: nowrap; }
/* Tap targets of at least 44 px for every standalone link (spec §0A.6) */
.brand, .site-header__nav a, .site-header__login, .final__actions a:not(.btn), .offer-more a, .skip-link { min-block-size: 44px; display: inline-flex; align-items: center; }
/* Phones: logo, a compact language link, Log in and the trial button (spec §4 item 1, §5.6 R7), all on one line at 360 px */
@media (max-width: 559px) {
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 10px; }
  .site-header .lang-switch, .site-header__login { font-size: 13px; white-space: nowrap; }
  .btn--compact { padding-inline: 10px; font-size: 13px; }
}
/* Under 350 px the landing header has no room for three actions: its language link goes back to the footer only */
@media (max-width: 349px) { .site-header__actions:has(.site-header__login) .lang-switch { display: none; } }
@media (max-width: 480px) { .site-header .brand__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (min-width: 1024px) { .site-header__inner { min-block-size: 72px; } }
/* The owner's anchor labels are long: they show from 1200 px, centred between brand and actions, 32 px apart */
@media (min-width: 1200px) {
  .site-header__inner { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 32px; }
  .site-header__nav { display: flex; justify-self: center; gap: 32px; }
}

/* Landing page: "the counter" — the POS screen is the hero object, the offer is a printed receipt (spec §4) */
.page-landing { background: var(--bg); }
.icon { flex: none; }
.section { padding-block: 64px; }
.section__head { max-inline-size: 640px; margin-block-end: 40px; display: grid; gap: 12px; }
.section__head .eyebrow { color: var(--muted); font-size: 14px; font-weight: 600; }
.section__lead { color: var(--muted); font-size: 18px; }
@media (min-width: 1024px) { h2 { font-size: 36px; } .section { padding-block: 96px; } .section__head { margin-block-end: 40px; } }

/* Hero (spec §4 item 1): eyebrow, a big short headline, support line and actions beside an all-in-one POS monitor that
   stands on the shop counter. The counter is a full-bleed band (the grid's ::before) whose lit top edge is where the
   monitor's base rests; the printed receipt lies on the counter beside the stand, and the proof row is on the counter too. */
.hero { --cw: calc(100% - 32px); }
.hero__grid { display: grid; grid-template-columns: minmax(16px, 1fr) minmax(0, var(--cw)) minmax(16px, 1fr); padding-block-start: 32px;
  isolation: isolate; }
.hero__grid > * { grid-column: 2; min-inline-size: 0; }
.hero__text { grid-row: 1; display: grid; gap: 24px; align-content: center; margin-block-end: 28px; }
.hero__grid > .slip { grid-row: 2; margin-block-end: 40px; }
.monitor { grid-row: 3; }
.proof { grid-row: 4; }
.hero__grid::before { content: ""; grid-column: 1 / -1; grid-row: 4; background: var(--brand-800); box-shadow: inset 0 3px 0 var(--brand-700); z-index: -1; }
.hero__copy { display: grid; }
.eyebrow { color: var(--brand-700); font-weight: 650; font-size: 15px; }
.hero__title { margin-block-start: 12px; font-size: 36px; font-weight: 750; line-height: 1.12; overflow-wrap: normal; text-wrap: balance; }
html[lang='ar'] .hero__title { line-height: 1.2; }
html[lang='en'] .hero__title { letter-spacing: -.025em; }
/* One continuous underline per line (skip-ink off, so it doesn't break into bars around the letters) */
.hero__title .underline { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: .09em;
  text-underline-offset: .2em; text-decoration-skip-ink: none; }
.hero__support { margin-block-start: 16px; font-size: 16px; line-height: 1.7; color: var(--muted); max-inline-size: 46ch; text-wrap: pretty; }
.hero__actions { display: grid; gap: 12px; }
@media (min-width: 560px) { .hero__actions { display: flex; flex-wrap: wrap; } .hero__grid > .slip { max-inline-size: 400px; } }
@media (min-width: 768px) { .hero { --cw: min(1200px, 100% - 48px); } .hero__grid { padding-block-start: 56px; } }
/* From 901 px: text beside the monitor; the receipt lies on the counter beside the stand, the proof row under the text */
@media (min-width: 901px) {
  .hero { --share: .5; }
  .hero__grid { grid-template-columns: minmax(24px, 1fr) minmax(0, calc((var(--cw) - 56px) * (1 - var(--share)))) 56px
    minmax(0, calc((var(--cw) - 56px) * var(--share))) minmax(24px, 1fr); padding-block-start: 56px; }
  .hero__text { grid-column: 2; grid-row: 1; align-self: center; margin-block-end: 48px; }
  .monitor { grid-column: 4; grid-row: 1; align-self: end; }
  .proof { grid-column: 2; grid-row: 2; align-self: start; }
  .hero__grid::before { grid-row: 2; }
  .hero__grid > .slip { grid-column: 4; grid-row: 2; justify-self: end; align-self: start; inline-size: 284px; max-inline-size: 284px;
    margin-block: -28px 56px; margin-inline-end: 0; z-index: 2; }
  .hero__title { font-size: 48px; line-height: 1.1; }
  html[lang='ar'] .hero__title { line-height: 1.15; }
  .hero__support { margin-block-start: 20px; font-size: 18px; }
}
@media (min-width: 1280px) {
  .hero__grid { padding-block-start: 64px; }
  .hero__title { font-size: 56px; }
}

/* The monitor: the whole screenshot inside a dark bezel, a short neck and a flat base (pure CSS, no image) */
.monitor { position: relative; margin: 0; display: grid; justify-items: center; }
.monitor__bezel { inline-size: 100%; padding: 8px; border-radius: 14px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(31, 61, 56, .12), 0 24px 48px rgba(31, 61, 56, .24); }
.monitor__bezel img { inline-size: 100%; border-radius: 6px; }
.monitor__neck { inline-size: 16%; block-size: 22px; background: var(--ink); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.monitor__base { inline-size: 36%; block-size: 10px; border-radius: 10px 10px 2px 2px; background: var(--ink); }
@media (min-width: 768px) {
  .monitor__bezel { padding: 12px; border-radius: 18px; }
  .monitor__neck { block-size: 36px; }
  .monitor__base { block-size: 14px; border-radius: 14px 14px 3px 3px; }
}
/* The proof row on the counter */
.proof { list-style: none; margin: 0; padding: 24px 0 32px; display: grid; gap: 12px; color: var(--surface); }
.proof li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.proof .icon { color: var(--brand-50); margin-block-start: 3px; }
@media (min-width: 901px) { .proof { padding-block: 36px 64px; gap: 14px; font-size: 16px; } }

/* The receipt: one offer lockup component for every price placement (spec §4.1), printed on a thermal slip with the
   shop-name header, an amber stamp, dashed rules, the big total with VAT right under it, small-print terms, the end
   date, a decorative barcode and a torn edge. Lockup order and adjacency are the macro's, untouched. */
.offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.offer__label { font-size: 14px; font-weight: 650; color: var(--brand-700); }
.offer__price { font-size: 30px; font-weight: 750; line-height: 1.2; }
.offer__amount { white-space: nowrap; }
.offer__vat { font-weight: 650; }
.offer__product { margin-block-start: 8px; font-weight: 600; }
.offer__terms, .offer__ends { font-size: 14px; color: var(--muted); }
.offer--card { padding: 24px; }
.slip { --rule: color-mix(in srgb, var(--muted) 45%, transparent); --tooth: 7px; inline-size: 100%;
  filter: drop-shadow(0 1px 1px rgba(31, 61, 56, .14)) drop-shadow(0 10px 16px rgba(31, 61, 56, .18));
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--brand-800) 14%, transparent)) drop-shadow(0 10px 16px color-mix(in srgb, var(--brand-800) 18%, transparent)); }
.slip__paper { padding: 16px 20px calc(16px + var(--tooth)); border-radius: 4px 4px 0 0; background: var(--surface); text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) var(--tooth) repeat-x; }
.slip__head { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block-end: 12px; margin-block-end: 12px;
  border-block-end: 1px dashed var(--rule); font-size: 14px; font-weight: 700; color: var(--ink); }
.slip .offer { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.slip .offer__label { justify-self: center; padding: 2px 10px; border-radius: 6px; background: var(--amber-50); color: var(--amber-700);
  border: 1px solid rgba(141, 96, 45, .35); border: 1px solid color-mix(in srgb, var(--amber-700) 35%, transparent); margin-block-end: 12px; }
.slip .offer__price { padding-block-start: 12px; border-block-start: 1px dashed var(--rule); font-size: 32px; line-height: 1.2; color: var(--ink); }
.slip .offer__vat { padding-block-end: 12px; }
.slip .offer__product, .slip .offer__terms { margin: 0; padding-block-start: 12px; border-block-start: 1px dashed var(--rule); }
.slip .offer__product + .offer__terms { border: 0; padding-block-start: 4px; }
.slip .offer__terms { font-size: 13px; line-height: 1.55; text-wrap: balance; }
.slip .offer__ends { margin-block-start: 8px; color: var(--ink); font-weight: 600; font-size: 14px; }
/* a decorative barcode, drawn with stripes (aria-hidden in the markup) */
.slip__barcode { block-size: 28px; margin: 14px auto 2px; inline-size: 70%; opacity: .75;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
@media (min-width: 901px) {
  .hero__grid > .slip { transform: rotate(-1.5deg); animation: slip-out 240ms ease-out both; }
  .hero__grid > .slip .slip__paper { padding: 14px 16px calc(14px + var(--tooth)); }
  .hero__grid > .slip .slip__head { padding-block-end: 8px; margin-block-end: 8px; }
  .hero__grid > .slip .offer__label { margin-block-end: 8px; }
  .hero__grid > .slip .offer__price { padding-block-start: 8px; font-size: 31px; }
  .hero__grid > .slip .offer__vat { padding-block-end: 8px; }
  .hero__grid > .slip .offer__terms { padding-block-start: 8px; font-size: 13px; line-height: 1.5; }
  .hero__grid > .slip .offer__ends { margin-block-start: 6px; font-size: 13px; }
  .hero__grid > .slip .slip__barcode { block-size: 18px; margin-block: 10px 0; }
  html[dir='ltr'] .hero__grid > .slip { transform: rotate(1.5deg); }
}
@keyframes slip-out { from { translate: 0 -12px; } }

/* The walkthrough (owner: #how and #benefits merged): five numbered stops of a day at the counter beside one fixed frame;
   a stop swaps the capture in the frame, the page never moves */
.how { background: var(--surface); }
.anchor-alias { display: block; block-size: 0; }
.steps { display: grid; gap: 24px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; border-block-start: 1px solid var(--line); }
.steps__list li { border-block-end: 1px solid var(--line); }
.steps__button { inline-size: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center;
  min-block-size: 60px; padding: 12px 16px; border: 0; border-inline-start: 3px solid transparent; background: transparent; font: inherit;
  color: var(--muted); text-align: start; cursor: pointer; }
.steps__button::before { counter-increment: step; content: counter(step); grid-row: 1; inline-size: 32px; block-size: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid currentColor; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[lang='ar'] .steps__button::before { content: counter(step, arabic-indic); }
.steps__title { grid-column: 2; font-size: 18px; font-weight: 650; }
.steps__text { grid-column: 2; display: none; font-size: 16px; color: var(--muted); }
.steps__button:hover { color: var(--ink); }
.steps__button[aria-pressed='true'] { color: var(--ink); background: var(--brand-50); border-inline-start-color: var(--brand-700); }
.steps__button[aria-pressed='true'] .steps__text { display: block; }
.steps__button[aria-pressed='true']::before { background: var(--brand-700); border-color: var(--brand-700); color: var(--surface); }
.steps__button:focus-visible { outline-offset: -3px; }
/* The demo video in a slim dark frame; the toggle pauses and plays it (shown by landing.js) */
.walk { position: relative; margin: 0; min-inline-size: 0; padding: 8px; border-radius: 16px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(31, 61, 56, .12), 0 20px 40px rgba(31, 61, 56, .2); }
.walk__video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; border-radius: 9px; background: var(--panel); }
.walk__toggle { position: absolute; inset-inline-end: 20px; inset-block-end: 20px; display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--brand-800); color: var(--surface);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(31, 61, 56, .25); }
.walk__toggle .icon { inline-size: 18px; block-size: 18px; fill: currentColor; }
.walk__toggle[aria-pressed='true'] .walk__play, .walk__toggle[aria-pressed='false'] .walk__pause { display: none; }
.walk__toggle:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; }

/* Desktop: every stop shows its sentence; the list sits beside the frame with equal height */
@media (min-width: 1024px) {
  .steps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; }
  .steps > .walk { grid-column: 2; grid-row: 1; } /* first in the markup (on phones the frame sits above the stops), beside them here */
  .steps__list { grid-column: 1; grid-row: 1; }
  .steps__text { display: block; }
  .steps__button { padding-block: 12px; }
}

/* Offline band (spec §4 item 4; owner: the "needs internet" list and the local-network note are removed): the headline and
   the D15 sentences beside the four things that keep working without internet */
.band { --rule: color-mix(in srgb, var(--surface) 22%, transparent); --soft: color-mix(in srgb, var(--surface) 84%, var(--brand-800));
  --quiet: color-mix(in srgb, var(--surface) 70%, var(--brand-800)); background: var(--brand-800); color: var(--surface); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .slip { --rule: rgba(95, 111, 105, .45); } .band { --rule: rgba(251, 252, 252, .22); --soft: #d8dddd; --quiet: #b9c3c1; } }
.band a { color: var(--surface); }
.offline { display: grid; gap: 32px; }
.offline__head { display: grid; gap: 16px; align-content: start; }
.offline__title { font-size: 28px; line-height: 1.2; }
.offline__head p { color: var(--soft); font-size: 16px; max-inline-size: 52ch; }
.offline__keeps h3 { font-size: 16px; color: var(--brand-50); margin-block-end: 16px; }
.offline__keeps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.offline__keeps li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; font-weight: 600; }
.offline__keeps .icon { inline-size: 28px; block-size: 28px; padding: 4px; border-radius: 50%; background: var(--brand-700); color: var(--surface); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; inline-size: 28px; text-align: center; font-size: 24px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
@media (min-width: 1024px) {
  .offline { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 80px; align-items: center; }
  .offline__title { font-size: 36px; }
  .offline__head p { font-size: 18px; }
  .offline__keeps { padding: 32px; border-radius: 16px; border: 1px solid var(--rule); }
}

/* Offer + FAQ (spec §4 item 5): the receipt again, the second and last price */
.offer-band { background: var(--bg); }
.offer-grid { display: grid; gap: 48px; align-items: start; }
.offer-grid > * { min-inline-size: 0; }
.offer-grid__main { display: grid; gap: 24px; align-content: start; }
.slip--card { max-inline-size: 440px; }
.slip--card .slip__paper { padding: 20px 16px calc(20px + var(--tooth)); }
.slip--card .offer__price { font-size: clamp(30px, 9vw, 44px); }
@media (min-width: 768px) { .slip--card .slip__paper { padding: 28px 32px calc(28px + var(--tooth)); } .slip--card .slip__head { font-size: 15px; } }
.offer--ask { max-inline-size: 440px; }
.offer-actions { display: grid; gap: 12px; }
.offer-more { font-weight: 600; }
.faq h3 { margin-block-end: 8px; }
.faq details:first-of-type { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px;
  padding-block: 10px; font-size: 18px; font-weight: 650; cursor: pointer; }
.faq details p { padding-block-end: 20px; color: var(--muted); max-inline-size: 62ch; }
@media (min-width: 768px) { .offer-actions { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) { .offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
@media (min-width: 1280px) { .offer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }

/* Final CTA + footer (spec §4 item 6) */
.final-band { border-block-start: 1px solid var(--line); }
.final { display: grid; gap: 24px; justify-items: center; text-align: center; }
.final__text { display: grid; gap: 8px; }
.final__text p { color: var(--muted); font-size: 18px; }
.final__actions { display: grid; gap: 16px; justify-items: center; }
/* Footer: brand, one wrapping row of links (44 px targets), the credit line */
.site-footer { border-block-start: 1px solid var(--line); background: var(--bg); padding-block: 32px; }
.site-footer__inner { display: grid; gap: 16px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer__links a { min-block-size: 44px; display: inline-flex; align-items: center; }
/* An action that reads as a link ("Change cookie choice") */
.link-button { min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--brand-700); font: inherit;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-footer__made { color: var(--muted); font-size: 14px; }
.site-footer__made a { font-weight: 600; }

/* Auth pages (spec §4.2): one centred card ≤ 440 px */
.page-auth { background: var(--bg); }
.auth-header { display: flex; align-items: center; justify-content: space-between; min-block-size: 64px; }
.auth-main { padding: 8px 16px 32px; display: grid; justify-items: center; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
.auth-card { inline-size: 100%; max-inline-size: 440px; padding: 24px 16px; display: grid; gap: 16px; }
.auth-card h1 { font-size: 28px; font-weight: 700; line-height: 1.25; }
.auth-below { max-inline-size: 440px; text-align: center; color: var(--muted); }
.auth-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding-block: 16px 32px; font-size: 14px; }
@media (min-width: 768px) { .auth-card { padding: 32px; } .auth-card h1 { font-size: 32px; } }

/* Forms (spec §2.2 R13) */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .field__label { font-weight: 600; }
.field__hint { font-size: 14px; color: var(--muted); }
.field input { inline-size: 100%; min-block-size: 48px; padding: 10px 14px; border: 1px solid #b9c6c1; border-radius: 12px;
  font: inherit; color: var(--ink); background: #fff; }
.field input[dir='ltr'] { text-align: left; }
.field input::placeholder { color: #8a9892; opacity: 1; }
.field input:focus { outline: 3px solid var(--brand-700); outline-offset: 1px; }
.field input[aria-invalid='true'] { border-color: var(--danger-700); }
.field__error { color: var(--danger-700); font-weight: 600; font-size: 14px; }
.password { display: flex; gap: 8px; }
.password input { flex: 1; min-inline-size: 0; }
.password__toggle { flex: none; min-inline-size: 72px; padding-inline: 14px; }
.password__icon { display: inline-flex; }
.password__toggle[aria-pressed="true"] .password__icon--show,
.password__toggle[aria-pressed="false"] .password__icon--hide { display: none; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { inline-size: 22px; block-size: 22px; margin-block-start: 3px; flex: none; accent-color: var(--brand-700); }
.notice { font-size: 14px; color: var(--muted); }
.separator { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.separator::before, .separator::after { content: ''; flex: 1; block-size: 1px; background: var(--line); }
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.error-summary { border: 2px solid var(--danger-700); border-radius: 12px; padding: 12px 16px; background: var(--danger-50); }
.error-summary__title { font-size: 17px; font-weight: 700; margin-block-end: 4px; }
.error-summary__list { margin: 0; padding-inline-start: 20px; }
.error-summary a { color: var(--danger-700); font-weight: 600; }
.status { padding: 12px 16px; border-radius: 12px; background: var(--info-50); color: var(--info-700); }
.status--ok { background: var(--brand-50); color: var(--brand-800); }
.dev-note { padding: 12px; border: 1px dashed var(--amber-700); border-radius: 12px; background: var(--amber-50); word-break: break-all; }

/* One-time code screens (sign-up, team invite, personal code): one big input of six letter-spaced Latin digits */
.code-input { font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .42em;
  text-align: center; min-block-size: 60px; padding-inline: 14px 0; font-variant-numeric: tabular-nums; }
.field input.code-input[dir='ltr'] { text-align: center; }
.code-input::placeholder { letter-spacing: .42em; color: #c3cec9; }
.code-sent { line-height: 1.6; margin-block-end: -8px; }
.code-to { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 10px 14px; border-radius: 12px; background: var(--bg); }
.code-to strong { font-weight: 700; min-inline-size: 0; }
.code-to a { font-weight: 600; white-space: nowrap; }
.code-note { font-size: 14px; }
.code-resend { display: grid; gap: 8px; }
.code-resend__again { display: grid; gap: 6px; text-align: center; }
.code-resend__again .field__hint { min-block-size: 1.4em; }

/* Sign-up progress: three numbered steps joined by a thin line (the line is decoration, the list is the meaning) */
.stages { list-style: none; margin: 0; padding: 0; display: flex; }
.stages__item { position: relative; flex: 1; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--muted); }
.stages__item::before, .stages__item::after { content: ''; position: absolute; inset-block-start: 11px; block-size: 2px; background: #cfd9d5; }
.stages__item::before { inset-inline-start: 0; inset-inline-end: calc(50% + 17px); }
.stages__item::after { inset-inline-start: calc(50% + 17px); inset-inline-end: 0; }
.stages__item:first-child::before, .stages__item:last-child::after { display: none; }
.stages__item.is-done::after, .stages__item.is-done::before, .stages__item.is-current::before { background: var(--brand-700); }
.stages__dot { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid #b9c6c1; background: var(--surface); box-sizing: border-box; }
.stages__dot .icon { inline-size: 14px; block-size: 14px; stroke-width: 3; }
.stages__item.is-current { color: var(--ink); font-weight: 600; }
.stages__item.is-current .stages__dot { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.stages__item.is-done .stages__dot { border-color: var(--brand-700); color: var(--brand-700); }
@media (min-width: 600px) { .stages__item { font-size: 14px; } }

/* /start (spec §4A, owner D12): form first. Phones: headline, a one-line price and step 1 in the first screen.
   From 960 px: the form card on the start side beside the headline, the price and the framed till screen. */
.page-start { background: var(--surface); }
.start-wrap { inline-size: 100%; max-inline-size: 480px; margin-inline: auto; padding-inline: 16px; }
.start-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 56px; }
.start-header .brand { gap: 8px; font-size: 16px; }
.start-header .brand img { inline-size: 32px; block-size: 32px; }
.start-header__actions { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.start-header .lang-switch, .start-header__login { min-block-size: 44px; display: inline-flex; align-items: center; white-space: nowrap; color: var(--brand-700); font-weight: 600; }
.start-header .lang-switch { color: var(--ink); font-weight: 500; }
.start-top { display: grid; gap: 16px; padding-block: 4px 32px; }
.start-top.is-form-first .start-form { order: -1; }
.start-top.is-form-first .start-intro { padding-block-start: 24px; border-block-start: 1px solid var(--line); }
.start-intro { display: grid; gap: 6px; align-content: start; }
.start-intro h1 { font-size: 30px; font-weight: 750; line-height: 1.2; }
.start-intro__support { color: var(--muted); font-size: 16px; }
.offer--strip { margin-block-start: 6px; padding: 8px 10px; gap: 0; border-radius: 10px; background: var(--amber-50); border: 1px solid color-mix(in srgb, var(--amber-700) 25%, transparent); }
/* One line down to 345 px. Every item carries its dot in front (::before); the line is pulled 14 px towards the start
   and that strip is clipped, so the item that starts any line (first or wrapped) loses its dot and no line ends with one */
.offer--strip .offer__line { display: flex; flex-wrap: wrap; align-items: baseline; margin-inline-start: -14px; clip-path: inset(0 0 0 14px);
  font-size: clamp(12.5px, 3.75vw, 14px); font-weight: 600; }
html[dir='rtl'] .offer--strip .offer__line { clip-path: inset(0 14px 0 0); }
.offer--strip .offer__line > span { white-space: nowrap; }
.offer--strip .offer__line > span::before { content: '\00b7' / ''; display: inline-block; inline-size: 14px; text-align: center; color: var(--amber-700); }
.offer--strip .offer__amount { font-size: clamp(14.5px, 4.4vw, 16px); font-weight: 750; }
.offer--strip .offer__vat { font-size: 13px; font-weight: 500; color: var(--muted); }
.start-shot { display: none; margin: 0; }
.start-card { display: grid; gap: 12px; }
.start-card > [data-step], .recovery { display: grid; gap: 12px; }
.start-card__title, .recovery h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
[data-step="1"] > .start-card__title { display: none; }
.start-form__fields { gap: 12px; }
.start-form .form--signup { gap: 20px; }
.start-form .auth-below { max-inline-size: none; }
.start-free { margin-block-start: -4px; text-align: center; font-size: 13px; color: var(--muted); }
.hello { display: grid; gap: 2px; font-size: 17px; font-weight: 600; }
.hello .muted { font-size: 15px; font-weight: 400; }
.start-actions { display: grid; gap: 4px; }
.start-unavailable { display: grid; gap: 12px; }
/* /start/done (D17): a calm success card; no form */
.done { padding-block: 8px 40px; }
.done__card { max-inline-size: 520px; margin-inline: auto; justify-items: center; text-align: center; }
.done__card h1 { font-size: 28px; font-weight: 750; line-height: 1.25; }
.done__card .stages { inline-size: 100%; }
.done__mark { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); }
.done__mark .icon { inline-size: 30px; block-size: 30px; stroke-width: 2.25; }
.done__lead { font-size: 18px; color: var(--ink); }
.done__next { display: grid; gap: 8px; inline-size: 100%; text-align: start; }
.done__next h2 { font-size: 17px; font-weight: 700; }
.done__next ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; color: var(--muted); font-size: 16px; }
.done__card .btn { inline-size: 100%; }
html[lang='ar'] .done__next ol { list-style-type: arabic-indic; }
.start-section { padding-block: 40px; }
.start-section h2 { font-size: 24px; line-height: 1.3; margin-block-end: 16px; }
.start-section--tint { background: var(--bg); }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.features li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; font-weight: 600; }
.features .icon { color: var(--brand-700); margin-block-start: 3px; }
.walkthrough { display: grid; gap: 16px; }
.walkthrough h2 { margin: 0; }
.walkthrough .walk { padding: 6px; border-radius: 12px; }
.walkthrough .steps__title { font-size: 16px; }
.start-offline { display: grid; gap: 12px; max-inline-size: 760px; }
.start-offline h2 { margin: 0; }
.start-offline p { color: var(--muted); }
@media (min-width: 600px) {
  .start-card { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
  .start-top { padding-block-start: 16px; }
}
@media (min-width: 960px) {
  .start-wrap { max-inline-size: 1200px; padding-inline: 24px; }
  .start-header__inner { min-block-size: 64px; }
  .start-header .brand { font-size: 18px; }
  .start-header__actions { gap: 20px; font-size: 15px; }
  .start-top { grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "form intro"; column-gap: 64px; align-items: start; padding-block: 24px 56px; }
  .start-top.is-form-first .start-form { order: 0; }
  .start-top.is-form-first .start-intro { padding-block-start: 12px; border: 0; }
  .start-form { grid-area: form; }
  .start-intro { grid-area: intro; gap: 10px; padding-block-start: 12px; position: sticky; inset-block-start: 16px; } /* stays in view beside the long step 2 */
  .start-intro h1 { font-size: 52px; line-height: 1.1; }
  .start-intro__support { font-size: 19px; }
  .offer--strip { justify-self: start; margin-block: 6px 14px; padding: 10px 16px; }
  .offer--strip .offer__line { font-size: 16px; }
  .offer--strip .offer__amount { font-size: 20px; }
  .start-shot { display: block; padding: 10px; border-radius: 16px; background: var(--ink); box-shadow: 0 18px 40px rgba(31, 61, 56, .18); }
  .start-shot__img { display: block; inline-size: 100%; block-size: auto; border-radius: 7px; }
  [data-step="1"] > .start-card__title { display: block; }
  .start-section { padding-block: 64px; }
  .start-section h2 { font-size: 30px; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .walkthrough { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; }
  .walkthrough h2 { grid-column: 1 / -1; }
}
.sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; padding: 8px 16px; background: var(--surface);
  border-block-start: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(31, 61, 56, .08); }
.sticky-cta .btn { min-block-size: 48px; max-inline-size: 448px; margin-inline: auto; display: flex; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(31, 61, 56, .45); }
.sheet { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 41; max-block-size: 92vh; overflow-y: auto; padding: 16px;
  background: var(--surface); border-radius: 16px 16px 0 0; }
.sheet > * { max-inline-size: 448px; margin-inline: auto; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.sheet__head h2 { font-size: 20px; }
.sheet [data-step="1"] { display: grid; gap: 16px; }
.sheet .start-card__title { display: none; }
.consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; padding: 16px; background: var(--surface);
  border-block-start: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(31, 61, 56, .12); }
.consent__inner { max-inline-size: 480px; margin-inline: auto; display: grid; gap: 12px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.done { padding-block: 48px; display: grid; gap: 16px; text-align: center; justify-items: center; }
.done__mark { inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center; font-size: 30px; font-weight: 700; }
body.has-sticky { padding-block-end: 72px; }

/* Legal pages */
.legal { max-inline-size: 760px; display: grid; gap: 16px; padding-block: 32px 48px; }
.legal h1 { font-size: 32px; font-weight: 700; }
.legal h2 { font-size: 22px; margin-block-start: 16px; }
.legal ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.legal__text { white-space: pre-wrap; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
/* /terms: one language, a contents list (sticky side column from 1100 px), the first section as a summary box */
.legal__body { display: grid; gap: 16px; min-inline-size: 0; }
.legal__note { font-size: 14px; color: var(--muted); padding-inline-start: 12px; border-inline-start: 3px solid var(--line); }
.legal__content { max-inline-size: 66ch; font-size: 17px; line-height: 1.75; }
html[lang='ar'] .legal__content { max-inline-size: 35em; line-height: 1.8; }
.legal__content h2 { font-size: 20px; line-height: 1.4; margin-block: 32px 8px; scroll-margin-block-start: 16px; }
.legal__content p { margin-block: 0 12px; }
.legal__content ul { margin-block: 0 16px; gap: 8px; }
.legal__content > :first-child { margin-block-start: 0; }
.legal__summary { padding: 16px 20px; border-radius: 12px; background: var(--brand-50); margin-block-end: 8px; }
.legal__summary h2 { margin-block-start: 0; font-size: 18px; color: var(--brand-800); }
.legal__summary > :last-child { margin-block-end: 0; }
.legal__summary ul { padding-inline-start: 18px; }
@media (max-width: 559px) { .legal__summary { padding: 14px 16px; } }
.legal__contents { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.45; }
.legal .legal__contents-title { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.legal__contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legal__contents a { color: var(--ink); text-decoration: none; }
.legal__contents a:hover, .legal__contents a:focus-visible { color: var(--brand-700); text-decoration: underline; }
@media (min-width: 1100px) {
  .legal--contents { max-inline-size: 992px; grid-template-columns: minmax(0, 660px) 220px; column-gap: 64px; }
  .legal--contents > * { grid-column: 1; }
  .legal--contents > .legal__contents { grid-column: 2; grid-row: 3; align-self: start; position: sticky; inset-block-start: 24px;
    max-block-size: calc(100vh - 48px); overflow-y: auto; padding: 0; padding-inline-start: 16px; border: 0; border-radius: 0;
    border-inline-start: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .auth-header, .auth-footer, .skip-link { display: none; } }

/* /signup (spec §4.2): grouped fields, chips and a segmented control; side panel from 960 px */
.page-signup .auth-card, .page-details .auth-card { max-inline-size: 520px; gap: 20px; }
.page-signup .auth-below { max-inline-size: 520px; }
.form--signup { gap: 24px; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.group { display: grid; gap: 18px; }
.group__title { padding: 0; margin-block-end: 14px; inline-size: 100%; font-size: 17px; font-weight: 700; color: var(--brand-800);
  padding-block-end: 8px; border-block-end: 1px solid var(--line); }
.group .field { gap: 8px; }
.group > .field .field__hint { order: 3; margin-block-start: -2px; }
.field.pick { display: grid; gap: 10px; }
.field.pick > legend { padding: 0; margin-block-end: 10px; }
.field.pick:focus { outline: none; }
.quiet { font-weight: 400; font-size: 14px; color: var(--muted); margin-inline-start: 6px; }
.chipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip, .seg__item { position: relative; display: block; cursor: pointer; }
.chip input, .seg__item input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip__body { position: relative; display: flex; align-items: center; gap: 6px; min-block-size: 56px; padding: 8px; border: 1px solid #b9c6c1;
  border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; line-height: 1.35; transition: border-color .12s, background-color .12s; }
.chip__icon { flex: none; inline-size: 20px; block-size: 20px; color: var(--muted); }
.chip__label { min-inline-size: 0; overflow-wrap: break-word; font-size: 14px; }
.chip__check { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; inline-size: 20px; block-size: 20px; padding: 3px; border-radius: 50%;
  background: var(--brand-700); color: #fff; opacity: 0; }
.chip:hover .chip__body { border-color: var(--brand-700); }
.chip input:checked + .chip__body { border-color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-700); background: var(--brand-50); }
.chip input:checked + .chip__body .chip__icon { color: var(--brand-700); }
.chip input:checked + .chip__body .chip__check { opacity: 1; }
.chip input:focus-visible + .chip__body, .seg__item input:focus-visible + .seg__body { outline: 3px solid var(--brand-700); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg__body { display: flex; align-items: center; justify-content: center; min-block-size: 48px; padding: 6px 8px; border: 1px solid #b9c6c1; background: #fff;
  font-weight: 600; font-size: 15px; text-align: center; line-height: 1.3; }
.seg__item + .seg__item .seg__body { margin-inline-start: -1px; }
.seg__item:first-child .seg__body { border-start-start-radius: 12px; border-end-start-radius: 12px; }
.seg__item:last-child .seg__body { border-start-end-radius: 12px; border-end-end-radius: 12px; }
.seg__item:hover .seg__body { background: var(--brand-50); }
.seg__item input:checked + .seg__body { position: relative; background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.pick[aria-invalid='true'] .chip__body { border-color: var(--danger-700); }
.btn--tall { min-block-size: 52px; }
.group .field:has(.field__error:not([hidden])) .field__hint { display: none; }
.error-summary[data-compact] .error-summary__title { margin-block-end: 0; }
.signup-side { display: none; }
@media (max-width: 599.98px) {
  /* phones: no card, the form sits on the page and uses its full width; tighter rhythm */
  .page-signup, .page-details, .page-invite { background: var(--surface); }
  .page-signup .auth-card, .page-details .auth-card, .page-invite .auth-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 16px; }
  .page-signup .auth-main, .page-details .auth-main, .page-invite .auth-main { padding-block-start: 0; }
  .form--signup { gap: 24px; }
  .group { gap: 16px; }
  .group .field { gap: 4px; }
  .group .field > label, .field.pick > .field__label { margin-block-end: 2px; }
  .group__title { font-size: 16px; font-weight: 650; border: 0; padding-block-end: 0; margin-block-end: 12px; }
  .field.pick { gap: 4px; }
  .field.pick > legend { margin-block-end: 6px; }
  .chip__body { padding-inline-end: 34px; }
  .chip__check { inset-block-start: 50%; inset-inline-start: auto; inset-inline-end: 8px; margin-block-start: -10px; }
  .error-summary[data-compact] .error-summary__list { display: none; }
}
@media (min-width: 600px) {
  .chip__icon { inline-size: 24px; block-size: 24px; }
  .chipgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chip__body { flex-direction: column; justify-content: center; gap: 6px; min-block-size: 88px; padding: 12px 6px; text-align: center; }
  .chip__label { font-size: 14px; }
}
@media (min-width: 960px) {
  .page-signup .auth-main { grid-template-columns: 480px 380px; grid-template-areas: "card side" "below ."; justify-content: center; align-items: start;
    column-gap: 56px; padding-block-start: 16px; }
  .page-signup .auth-card { grid-area: card; max-inline-size: none; padding: 32px; }
  .page-signup .auth-below { grid-area: below; max-inline-size: none; }
  .page-signup .stages { display: none; }
  .signup-side { grid-area: side; display: grid; gap: 28px; align-content: start; padding-block-start: 24px; }
}
.signup-side .offer__price { font-size: 26px; }
.signup-side__title { font-size: 17px; font-weight: 700; color: var(--brand-800); }
.next { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: next; }
.next li { position: relative; display: grid; gap: 2px; padding-inline-start: 44px; counter-increment: next; }
.next li::before { content: counter(next); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-800); font-weight: 700; border: 1px solid var(--brand-700); }
html[lang='ar'] .next li::before { content: counter(next, arabic-indic); }
.next span { color: var(--muted); font-size: 15px; }
.signed-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.signed-in .btn { inline-size: auto; flex: none; min-inline-size: 0; min-block-size: 36px; padding: 4px 0; font-size: 14px; }
/* /start: the form card is 440 px wide at most, so the business types stay two per row (as on phones) */
.start-card .chipgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.start-card .chip__body { flex-direction: row; justify-content: flex-start; min-block-size: 56px; padding: 8px; padding-inline-end: 34px; text-align: start; }
.start-card .chip__check { inset-block-start: 50%; inset-inline-start: auto; inset-inline-end: 8px; margin-block-start: -10px; }
.invite { display: grid; gap: 12px; }
.invite__google { display: grid; gap: 12px; margin-block-start: 4px; }