/* Tallira home page. Ink on warm paper, the counter photographed, and the register's own paper and
   screens floating over it. One stylesheet serves the English and the Arabic page through logical
   properties; html[lang=ar] only swaps the face, the display weight, the tracking and the leading.
   Positions over a photograph are physical (left, right), because a photograph does not mirror. */

:root {
  color-scheme: light;
  --ground: #f2f2ef;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #3a3936;
  --muted: #6f6d67;
  --rule: #e3e1db;
  --rule-strong: #0b0b0b;
  --rule-control: #8f8c84;
  --brand: #2f6bd6;
  --error: #8a1f11;
  --selection: #cfdcf3;
  --font-en: Sora, "Segoe UI", system-ui, sans-serif;
  --font-ar: Alexandria, "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  --font: var(--font-en);
  --display-weight: 600;
  --track-lg: -0.025em;
  --track-sm: -0.01em;
  --lh: 1.55;
  --lh-display: 1.1;
  --gutter: 16px;
  --section: 64px;
  --radius-frame: 20px;
  --radius-card: 20px;
  --radius-ui: 14px;
  --lift: 0 24px 48px -22px rgba(11, 11, 11, 0.45), 0 2px 6px rgba(11, 11, 11, 0.08);
  --nav-h: 60px;
}

html[lang="ar"] {
  --font: var(--font-ar);
  --display-weight: 700;
  --track-lg: 0;
  --track-sm: 0;
  --lh: 1.8;
  --lh-display: 1.35;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 960px) {
  :root { --gutter: 48px; --section: 104px; --radius-frame: 24px; }
}

/* ---- base ---- */

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

html {
  background: var(--ground);
  scrollbar-color: var(--muted) var(--ground);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--ink);
  caret-color: var(--ink);
}

::selection { background: var(--selection); color: var(--ink); }

h1, h2, h3, p, dl, dd, figure, fieldset, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: var(--display-weight);
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1 { font-size: 2.1rem; letter-spacing: var(--track-lg); }
h2 { font-size: 1.75rem; letter-spacing: var(--track-lg); }
h3 { font-size: 1.125rem; letter-spacing: var(--track-sm); }

p { max-width: 65ch; }

a {
  color: inherit;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

img, svg { display: block; }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  translate: 0 -200%;
}

.skip:focus { translate: 0; }

.small {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---- the floating pill nav ---- */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding: 10px var(--gutter) 0;
  pointer-events: none;
}

.pill {
  pointer-events: auto;
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--nav-h);
  padding-block: 8px;
  padding-inline: 14px 8px;
  background: rgba(252, 252, 251, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  box-shadow: 0 12px 32px -16px rgba(11, 11, 11, 0.3), 0 1px 2px rgba(11, 11, 11, 0.06);
}

.home { display: block; flex: none; border-radius: 999px; }

.lockup { width: auto; }
.lockup-en { height: 19px; }
.lockup-ar { height: 25px; }
.lockup-bi { height: 28px; }

.nav-links {
  display: none;
  gap: 2px;
  margin-inline-start: 6px;
}

.nav-links a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-links a:hover { background: var(--ground); color: var(--ink); }

.nav-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-end .btn-sm { font-size: 0.875rem; padding: 0 14px; }
.nav-end .arrow { display: none; }

.lang { font-size: 0.9375rem; }
.lang:lang(ar) { font-family: var(--font-ar); }
.lang:lang(en) { font-family: var(--font-en); }

@media (min-width: 640px) {
  .pill { gap: 16px; padding-inline: 18px 10px; }
  .lockup-en { height: 22px; }
  .lockup-ar { height: 29.2px; }
  .nav-end { gap: 16px; }
  .nav-end .btn-sm { font-size: 0.9375rem; padding-inline: 18px 16px; }
  .nav-end .arrow { display: block; }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .pill { gap: 24px; padding-inline: 22px 10px; }
  .nav-end { gap: 20px; }
}

@media (min-width: 960px) {
  .site-head { padding-block-start: 14px; }
  .lockup-en { height: 24px; }
  .lockup-ar { height: 32px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--ground);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.btn:hover { background: #2b2a28; color: var(--ground); }
.btn[disabled] { cursor: progress; opacity: 0.75; }

.btn-sm {
  min-height: 40px;
  padding-inline: 18px 16px;
  font-size: 0.9375rem;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-control);
}

.btn-outline:hover { background: var(--surface); color: var(--ink); }

.arrow { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

/* ---- hero: the split ---- */

.hero {
  display: grid;
  gap: 22px;
  padding-block: 36px 28px;
}

.hero-side > * + * { margin-block-start: 18px; }

.lede {
  font-size: 1.0625rem;
  color: var(--ink-2);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ic {
  flex: none;
  width: 1em;
  height: 1em;
  margin-block-start: 0.3em;
  color: var(--brand);
}

@media (max-width: 639.98px) {
  .cta .btn { flex: 1 1 100%; }
}

@media (min-width: 640px) {
  h1 { font-size: 2.75rem; }
  .hero { padding-block: 48px 32px; }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 56px;
    align-items: start;
    padding-block: 60px 40px;
  }
  .hero-side { padding-block-start: 14px; }
  .hero-side > * + * { margin-block-start: 22px; }
  h1 { font-size: 3.75rem; }
  .lede { font-size: 1.25rem; }
}

/* ---- the frame: the café, with the register's paper and screens over it ---- */

.frame { position: relative; }

.frame-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 30% 50%;
  border-radius: var(--radius-frame);
  background: var(--rule);
}

.frame figcaption {
  margin-block-start: 14px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* On a phone the Fatoora card overlaps the photo's lower edge inside the gutters; the receipt tape
   needs more width than a phone has, and the features below show the receipt anyway. */
.frame-cards {
  --tape-zoom: 0.68;
  position: relative;
  margin: -44px 12px 0;
}

@media (max-width: 759.98px) {
  .frame-cards .fc-status { width: auto; }
  .fc-receipt { display: none; }
}

@media (min-width: 760px) {
  .frame-photo { aspect-ratio: 1680 / 944; object-position: 50% 50%; }
  .frame-cards {
    position: absolute;
    inset: 0 0 auto;
    aspect-ratio: 1680 / 944;
    margin: 0;
    pointer-events: none;
  }
  .frame-cards > * { position: absolute; }
  /* Anchored to the receipt tape (300px wide at --tape-zoom), so it ends 16px short of it at any width. */
  .fc-status { right: calc(7% + 300px * var(--tape-zoom) + 16px); top: 7%; }
  .fc-receipt { right: 7%; top: 9%; }
}

/* Below 1120px the photo is too short for the full tape, so it prints smaller and stays on the counter. */
@media (min-width: 760px) and (max-width: 1119.98px) {
  .frame-cards { --tape-zoom: 0.5; }
}

/* ---- the register's own look, for the cards and vignettes (core/styles.css) ---- */

/* The register's screen is left-to-right with bilingual labels, on both pages; only the receipt is RTL. */
.fc, .ui {
  direction: ltr;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #0b0b0b;
  letter-spacing: 0;
  text-align: start;
}

.fc {
  width: 250px;
  padding: 14px 16px;
  background: #fcfcfb;
  border-radius: var(--radius-ui);
  box-shadow: var(--lift);
}

.fc-receipt { width: auto; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.fc-receipt .rcpt-wrap { width: 300px; zoom: var(--tape-zoom); }

.fc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fc-row b { font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }

.fc-sub {
  margin-block-start: 6px;
  font-size: 12.5px;
  color: #52514e;
  max-width: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.chip .dot, .net .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.ok { background: rgba(12, 163, 12, 0.12); color: #006300; }
.chip.ok .dot { background: #0ca30c; }
.chip.wait { background: rgba(250, 178, 25, 0.18); color: #7d5800; }
.chip.wait .dot { background: #fab219; }

.net {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.net .dot { width: 9px; height: 9px; background: #0ca30c; }
.net.off .dot { background: #fab219; }


.payrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-block-start: 6px;
}

.payrow span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 6px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.payrow small { font-weight: 500; font-size: 11.5px; }
.pay-card { background: #2468c8; }
.pay-cash { background: #bf4d1c; }

/* ---- the three steps ---- */

.steps {
  display: grid;
  gap: 6px;
  margin-block-start: 22px;
}

.steps li {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
}

.steps li.on {
  background: var(--surface);
  border: 1px solid var(--rule);
}

.steps .n {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.steps h3 { font-size: 1.0625rem; }
.steps p { font-size: 0.9375rem; color: var(--ink-2); }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block-start: 28px; }
  .steps li { padding: 22px 24px; }
}

/* ---- sections ---- */

.section {
  padding-block-start: var(--section);
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.how { scroll-margin-top: calc(var(--nav-h) + 28px); }

.section > h2 { margin-block-end: 28px; }

.section-intro {
  margin-block: -12px 32px;
  color: var(--ink-2);
}

/* ---- features: a bento of photo and register vignettes ---- */

.features {
  display: grid;
  gap: 14px;
}

.feat {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}

.feat p { font-size: 0.9375rem; color: var(--ink-2); }

.feat-visual {
  position: relative;
  margin: -22px -22px 10px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-block-end: 1px solid var(--rule);
  background: var(--ground);
}

.feat-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fc-over { position: absolute; left: 18px; bottom: 18px; width: auto; min-width: 180px; }

.feat-visual.ui {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px;
}

.ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fcfcfb;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 10px;
  font-size: 13px;
  color: #52514e;
}

.ui-head .net { color: #0b0b0b; }
.ui-meta { font-size: 12.5px; color: #52514e; white-space: nowrap; }
.ui-meta b { font-variant-numeric: tabular-nums; }

.ui-queue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fcfcfb;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 12px;
}

.ui-queue p { max-width: none; font-size: 13.5px; color: #0b0b0b; }
.ui-foot { font-size: 12.5px; color: #6f6d67; }

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 76px;
  padding: 10px 12px;
  background: #fcfcfb;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 14px;
}

.item .nm { font-weight: 600; font-size: 13.5px; }
.item .ar { font-size: 12px; color: #6f6d67; }
.item .pr { margin-block-start: auto; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.scan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 10px;
  font-size: 13px;
  color: #6f6d67;
  overflow: hidden;
  white-space: nowrap;
}

.scan svg { flex: none; width: 22px; height: 18px; color: #0b0b0b; }
.scan span { overflow: hidden; text-overflow: ellipsis; }

.stock {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fcfcfb;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.stock th, .stock td { padding: 8px 10px; text-align: start; }
.stock th { font-weight: 600; font-size: 11.5px; color: #6f6d67; border-block-end: 1px solid #e1e0d9; }
.stock td { border-block-end: 1px solid #e1e0d9; vertical-align: top; }
.stock tr:last-child td { border-block-end: 0; }
.stock td b { display: block; font-weight: 600; }
.stock td small { font-size: 11.5px; color: #6f6d67; }
.stock .bc { font-size: 12.5px; color: #52514e; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.stock .num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }
.stock .low { color: #d03b3b; }

.rcpt-fragment { width: 240px; margin-inline: auto; padding: 14px 12px 12px; }
.rcpt-fragment .box { margin-block-end: 0; }

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .feat { grid-column: span 3; }
}

@media (min-width: 960px) {
  .feat { grid-column: span 2; padding: 24px; }
  .feat-wide { grid-column: span 3; }
  .feat-visual { margin: -24px -24px 12px; }
  .feat-visual.ui { padding: 24px; }
}

/* ---- made for your counter: one container, a row per counter ---- */

.uses {
  padding: 4px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}

.use {
  display: grid;
  grid-template-areas: "thumb" "name" "list";
  gap: 14px;
  padding-block: 22px;
}

.use + .use { border-block-start: 1px solid var(--rule); }

.use-name { grid-area: name; }
.use-name p { margin-block-start: 4px; font-size: 0.9375rem; color: var(--muted); }
.use .checks { grid-area: list; display: grid; gap: 8px; }

.use-thumb {
  grid-area: thumb;
  width: 100%;
  height: auto;
  max-height: 340px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  background: var(--rule);
}

@media (min-width: 760px) {
  .uses { padding-inline: 32px; }
}

@media (min-width: 960px) {
  .use {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) 300px;
    grid-template-areas: "name list thumb";
    column-gap: 32px;
    align-items: center;
    padding-block: 28px;
  }
}

/* ---- the end of the day ---- */

.moment-copy { margin-block-end: 28px; }
.moment-copy h2 { margin-block-end: 14px; }
.moment-copy p { color: var(--ink-2); }

.moment-grid {
  display: grid;
  gap: 24px;
}

.moment-photo { position: relative; }

.moment-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-frame);
  background: var(--rule);
}

.moment-owner img { object-position: 60% 50%; }

.moment-photo figcaption {
  margin-block-start: 12px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.fc-report {
  width: auto;
  margin-block-start: 12px;
}

.fc-report .fc-row b { font-size: 14px; }

.rtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-block-start: 10px;
}

.rtile {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  background: #f2f2ef;
  border-radius: 10px;
}

.rtile .k { font-size: 11.5px; color: #6f6d67; }
.rtile .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.split {
  display: flex;
  height: 8px;
  margin-block-start: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.split-card { flex: 3214 1 0; background: #2468c8; }
.split-cash { flex: 905 1 0; background: #bf4d1c; }

.legend {
  display: flex;
  gap: 16px;
  margin-block-start: 8px;
  font-size: 12.5px;
  color: #52514e;
}

.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend b { font-variant-numeric: tabular-nums; color: #0b0b0b; }
.sw { width: 10px; height: 10px; border-radius: 3px; }
.sw-card { background: #2468c8; }
.sw-cash { background: #bf4d1c; }

/* From tablet width the report sits on the shelves in the photo's left third, clear of the owner's
   face and tablet; both photos stay whole (3:2) so the cashier and the departing customer both show. */
@media (min-width: 760px) {
  .moment-owner { display: grid; }
  .moment-owner > img, .moment-owner > .fc-report { grid-area: 1 / 1; }
  .fc-report { align-self: start; justify-self: left; width: clamp(156px, 33%, 240px); margin: 16px 0 0 16px; padding: 12px; }
  .fc-report .fc-row { flex-wrap: wrap; row-gap: 2px; }
  .fc-report .rtiles { grid-template-columns: 1fr; gap: 6px; }
  .fc-report .rtile:nth-child(n + 3) { display: none; }
  .fc-report .rtile { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 8px; }
  .fc-report .rtile .v { font-size: 13.5px; }
  .fc-report .legend { flex-direction: column; gap: 4px; }
}

@media (min-width: 1100px) {
  .moment-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---- the demo band ---- */

.band { padding-block-start: var(--section); }

.band-inner {
  display: grid;
  gap: 24px;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}

.band-copy h2 { margin-block-end: 12px; }
.band-copy p { color: var(--ink-2); }

.band-cta {
  display: grid;
  gap: 10px;
  justify-items: start;
}

@media (max-width: 639.98px) {
  .band-cta, .band-cta .btn { width: 100%; }
}

@media (min-width: 760px) {
  .band-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 48px;
    padding: 44px 48px;
  }
  .band-cta { justify-items: end; text-align: end; }
}

/* ---- questions ---- */

.faq-head { margin-block-end: 24px; }
.faq-head h2 { margin-block-end: 12px; }
.faq-head p { color: var(--ink-2); }

.faq { border-block: 1px solid var(--rule); }
.faq details + details { border-block-start: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  font-weight: var(--display-weight);
  font-size: 1.0625rem;
  letter-spacing: var(--track-sm);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker { display: none; }

.chev {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 150ms ease;
}

.faq details[open] .chev { transform: rotate(180deg); }

.faq details > p {
  padding-block-end: 22px;
  color: var(--ink-2);
}

@media (min-width: 960px) {
  .faq-section {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 48px;
    align-items: start;
  }
  .faq-head { position: sticky; top: calc(var(--nav-h) + 28px); margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chev, .btn, .nav-links a { transition: none; }
}

/* ---- the demo request: an order slip ---- */

.panel {
  min-height: 24rem;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 24px;
}

.panel-copy { margin-block-end: 28px; }
.panel-copy h2 { margin-block-end: 16px; }
.panel .section-intro { margin-block: 0; }

@media (max-width: 639.98px) {
  .panel {
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
    border-radius: 0;
  }
}

@media (min-width: 960px) {
  .panel {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 48px;
    padding: 44px 48px;
  }
  .panel-copy { margin: 0; }
  .form-grid { max-width: 560px; }
}

.form-grid {
  display: grid;
  gap: 22px;
}

.field { display: grid; gap: 8px; }

.field label, .choice legend { font-weight: 500; }

.hint, .field-error {
  font-size: 0.9375rem;
}

.hint { color: var(--muted); }
.field-error { color: var(--error); }
.field-error[hidden] { display: none; }

.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  border: 1px solid var(--rule-control);
  border-radius: 10px;
}

.field textarea { resize: vertical; }

.field [aria-invalid="true"] { border-color: var(--ink); }

.choice {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.choice legend { padding: 0; margin-block-end: 4px; }
.choice.invalid legend { color: var(--error); }

.option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  cursor: pointer;
}

.option input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
}

.opt-text { display: grid; gap: 2px; }
.desc { font-size: 0.9375rem; color: var(--muted); }

.hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The widget's slot and the status line take no room until they hold something: the widget loads
   late, and never under noscript. */
.turnstile:empty, .form-status:empty { display: none; }
.turnstile { min-height: 65px; }

.form-status {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.form-grid .btn { justify-self: start; }

@media (max-width: 639.98px) {
  .form-grid .btn { justify-self: stretch; }
}

.form-done {
  display: grid;
  gap: 12px;
  align-content: start;
}

.form-done h3 { font-size: 1.5rem; letter-spacing: var(--track-lg); }
.form-done p { color: var(--ink-2); }

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

.site-foot { margin-block-start: var(--section); }

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  border-block-start: 1px solid var(--rule);
  padding-block: 32px 44px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

/* ---- the receipt the register prints ----
   Same class names and structure as core/src/receipt.js, styled from core/styles.css .rcpt scaled
   for a screen. It keeps the register's own font stack and weight on purpose: it is the object the
   register prints, not a piece of the page's typography. Always right-to-left; .en lines are
   typeset left-to-right in their own right, as on paper. */

.rcpt-wrap { width: 300px; }

.rcpt {
  width: 100%;
  padding: 18px 14px 28px;
  background: #fff;
  color: #000;
  font: 700 13px/1.35 "Segoe UI", "Noto Naskh Arabic", system-ui, sans-serif;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 18px 40px -24px rgba(11, 11, 11, 0.35), 0 2px 6px rgba(11, 11, 11, 0.08);
}

.tear {
  position: relative;
  width: 100%;
  height: 10px;
  fill: #fff;
}

.rcpt .hd { text-align: center; }
.rcpt .nm { font-size: 15.5px; }
.rcpt .legal { font-size: 12.5px; }
.rcpt .en { font-family: "Segoe UI", system-ui, sans-serif; direction: ltr; unicode-bidi: isolate; }
.rcpt hr { border: 0; border-block-start: 1px dashed #000; margin: 5px 0; }
.rcpt .title { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 3px 0; }
.rcpt .title span { white-space: nowrap; }
.rcpt .row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.rcpt .row .big { font-size: 16.5px; }
.rcpt .box { border: 1px solid #000; border-radius: 3px; padding: 4px 6px; margin: 5px 0; }
.rcpt table.lines { width: 100%; border-collapse: collapse; margin: 5px 0; }
.rcpt table.lines th, .rcpt table.lines td { border-block-end: 1px solid #000; padding: 3px 2px; vertical-align: top; }
.rcpt table.lines th { text-align: center; font-weight: inherit; }
.rcpt table.lines th.d, .rcpt table.lines td.d { text-align: start; }
.rcpt table.lines td.n { text-align: center; white-space: nowrap; }
.rcpt table.lines .en { font-size: 11.5px; }
.rcpt .tot .grand { font-size: 15.5px; }
.rcpt .qr { display: flex; justify-content: center; margin: 8px 0 2px; }
.rcpt .qr svg { width: 128px; height: 128px; }
.rcpt .ft { text-align: center; margin-block-start: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .rcpt-wrap { animation: print 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes print {
    from { transform: translateY(28px); opacity: 0; }
  }
}