/*
 * The public face of JadTags — landing, pricing, and the four steps of signup.
 *
 * DELIBERATELY DARK, AND ONLY DARK. The dashboard follows the viewer's theme
 * because somebody works in it all day; this surface is a pitch, and a pitch
 * that renders two different ways is two different pitches. Every colour below
 * is painted explicitly for that reason — nothing inherits a ground it did not
 * choose, and there is no prefers-color-scheme block to keep in sync.
 *
 * Two typefaces, both already vendored: Tajawal for display, where Arabic wants
 * weight and tight tracking, and Plex Arabic for everything read in sentences.
 * No Google Fonts, no CDN, no build step.
 */

/* ---- Display face ------------------------------------------------------- */

@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../vendor/fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../vendor/fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../vendor/fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../vendor/fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../vendor/fonts/tajawal-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../vendor/fonts/tajawal-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------- */

.sg-page {
  /* Grounds. Not neutral greys — every one carries the accent's green so the
     page reads as one material rather than black with a teal button on it. */
  --sg-ground:    #0A100E;
  --sg-ground-2:  #0E1512;
  --sg-surface:   #141E1B;
  --sg-surface-2: #1C2A26;

  --sg-line:      #1B2522;
  --sg-line-2:    #24322E;
  --sg-line-3:    #2B3A36;

  /* One accent, used everywhere something is actionable or alive. */
  --sg-mint:      #3ED9C0;
  --sg-mint-hi:   #5FE6D0;
  --sg-mint-deep: #17A48D;
  --sg-mint-ink:  #06100D;
  --sg-mint-dim:  #6FE3CE;

  /* And one warm note, for the single plan being recommended. Used in three
     places on the whole site; a second accent used more than that is a second
     accent, and then there is no accent. */
  --sg-amber:     #F2A24C;

  --sg-text:      #EDF3F0;
  --sg-text-2:    #A3B5AF;
  --sg-text-3:    #93A6A0;
  --sg-text-4:    #6F817C;

  --sg-display: 'Tajawal', 'Plex Arabic', system-ui, sans-serif;
  --sg-body: 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sg-r:    12px;
  --sg-r-lg: 18px;
  --sg-r-xl: 24px;

  background: var(--sg-ground);
  color: var(--sg-text);
  font-family: var(--sg-body);
  min-height: 100vh;
}

.sg-page ::selection { background: var(--sg-mint); color: var(--sg-mint-ink); }
/*
 * Only a BARE link is mint.
 *
 * `.sg-page a` is two class-selectors deep, which beats every single-class
 * component below it — so a rule written to colour prose links was silently
 * painting .sg-cta's label mint on a mint button, and the primary call to
 * action rendered as an empty green slab. `:not([class])` says the actual
 * intent: prose links are mint, and anything carrying a class paints itself.
 */
.sg-page a:not([class]) { color: var(--sg-mint); text-decoration: none; }
.sg-page a:not([class]):hover { color: var(--sg-mint-hi); }
.sg-page a { text-decoration: none; }

/* A visible focus ring, on the one colour that is always legible here. */
.sg-page :focus-visible { outline: 2px solid var(--sg-mint); outline-offset: 2px; border-radius: 4px; }

/* ---- Shell -------------------------------------------------------------- */

.sg-wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }
.sg-wrap-narrow { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }

/* Sticky and blurred: the call to action stays reachable through a long page,
   and the blur is what keeps it from reading as a bar stuck on top. */
.sg-nav-bar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgb(10 16 14 / .82);
  border-bottom: 1px solid var(--sg-line);
}
.sg-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.sg-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sg-display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.01em; color: var(--sg-text);
}
.sg-brand:hover { color: var(--sg-text); }
.sg-brand span { color: var(--sg-mint); }
.sg-brand-mark {
  width: 1.9rem; height: 1.9rem; border-radius: .6rem; flex: none;
  background: linear-gradient(140deg, var(--sg-mint), var(--sg-mint-deep));
  display: grid; place-items: center;
  font-family: var(--sg-display); font-weight: 900; font-size: 1rem;
  color: var(--sg-mint-ink);
}
.sg-nav-links { display: flex; align-items: center; gap: .35rem; font-size: .92rem; }
.sg-nav-links a {
  color: var(--sg-text-3); font-weight: 500;
  padding: .5rem .75rem; border-radius: .6rem;
}
.sg-nav-links a:hover { color: var(--sg-text); background: var(--sg-surface); }
.sg-nav-links a.is-here { color: var(--sg-text); }

/* The nav's own call to action is a button that happens to live in the nav.
   Without this, the rule above repaints its label in the muted link colour and
   the one thing on the bar that must be read becomes the one thing that
   cannot be. */
.sg-nav-links a.sg-cta { color: var(--sg-mint-ink); }
.sg-nav-links a.sg-cta:hover { color: var(--sg-mint-ink); background: var(--sg-mint-hi); }

/* ---- Buttons ------------------------------------------------------------ */

.sg-cta, .sg-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sg-display); font-weight: 800; font-size: 1.02rem;
  padding: .95rem 1.9rem; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; text-align: center;
}
.sg-cta {
  background: var(--sg-mint); color: var(--sg-mint-ink);
  box-shadow: 0 10px 30px rgb(62 217 192 / .25);
}
.sg-cta:hover { background: var(--sg-mint-hi); color: var(--sg-mint-ink); }
.sg-cta-ghost { background: transparent; color: var(--sg-text); border-color: var(--sg-line-3); }
.sg-cta-ghost:hover { border-color: var(--sg-mint); color: var(--sg-mint); }
.sg-cta-sm { padding: .6rem 1.15rem; font-size: .9rem; border-radius: 11px; box-shadow: 0 6px 20px rgb(62 217 192 / .2); }

/* ---- Hero --------------------------------------------------------------- */

.sg-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--sg-line); }

/* Two washes, off-centre and unequal. A symmetrical glow reads as a template;
   these are placed where the eye lands first and where the phone sits. */
.sg-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 78% -10%, rgb(23 164 141 / .30), transparent 60%),
    radial-gradient(700px 380px at 10% 20%, rgb(242 162 76 / .10), transparent 62%);
}
.sg-hero-inner {
  position: relative; display: grid; gap: 3.5rem; align-items: center;
  grid-template-columns: 1.05fr .85fr;
  padding: 5rem 0 5.6rem;
}
.sg-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid #23423C; background: rgb(23 164 141 / .10);
  color: var(--sg-mint-dim); font-size: .82rem; font-weight: 600;
  margin-bottom: 1.6rem;
}
.sg-eyebrow::before {
  content: ''; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--sg-mint); flex: none;
}
.sg-hero h1 {
  font-family: var(--sg-display); font-weight: 900;
  font-size: clamp(2.35rem, 5.4vw, 3.9rem); line-height: 1.1;
  letter-spacing: -.03em; margin: 0 0 1.35rem; text-wrap: balance;
  color: var(--sg-text);
}
.sg-hero h1 em { font-style: normal; color: var(--sg-mint); }
.sg-hero-lede {
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.75;
  color: var(--sg-text-2); max-width: 33rem; margin: 0 0 2.1rem;
  text-wrap: pretty;
}
.sg-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sg-hero-trust { font-size: .85rem; color: var(--sg-text-4); margin: 0; }

/* ---- Sections ----------------------------------------------------------- */

.sg-section { padding: 5rem 0; border-bottom: 1px solid var(--sg-line); }
.sg-section:last-of-type { border-bottom: 0; }
.sg-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sg-mint); margin: 0 0 .8rem;
}
.sg-section h2 {
  font-family: var(--sg-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25;
  letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--sg-text);
  text-wrap: balance;
}
.sg-section > .sg-wrap > p, .sg-section-lede {
  color: var(--sg-text-2); max-width: 42rem; margin: 0 0 2.75rem;
  font-size: 1.02rem; line-height: 1.7;
}

/* ---- The three steps ---------------------------------------------------- */

.sg-flow {
  display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: sg-step;
}
.sg-flow li {
  counter-increment: sg-step;
  background: var(--sg-ground-2); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-lg); padding: 1.6rem 1.5rem;
}
.sg-flow li::before {
  content: counter(sg-step);
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; margin-bottom: 1.1rem;
  border-radius: .75rem;
  background: rgb(62 217 192 / .12); border: 1px solid #23423C;
  font-family: var(--sg-display); font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums; color: var(--sg-mint);
}
.sg-flow h3 {
  font-family: var(--sg-display); font-weight: 700; font-size: 1.15rem;
  color: var(--sg-text); margin: 0 0 .45rem;
}
.sg-flow p { font-size: .95rem; color: var(--sg-text-3); margin: 0; line-height: 1.7; }

/* ---- Feature tiles ------------------------------------------------------ */

.sg-tiles {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.sg-tile {
  background: var(--sg-ground-2); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-lg); padding: 1.45rem 1.4rem;
}
.sg-tile:hover { border-color: var(--sg-line-3); }
.sg-tile-icon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: 1rem;
  border-radius: .7rem; background: var(--sg-surface);
  border: 1px solid var(--sg-line-2); color: var(--sg-mint);
}
.sg-tile h3 {
  font-family: var(--sg-display); font-weight: 700; font-size: 1.05rem;
  color: var(--sg-text); margin: 0 0 .4rem;
}
.sg-tile p { font-size: .92rem; color: var(--sg-text-3); margin: 0; line-height: 1.68; }

/* ---- Plans -------------------------------------------------------------- */

.sg-period {
  display: inline-flex; gap: .25rem; padding: .3rem;
  background: var(--sg-surface); border: 1px solid var(--sg-line-2);
  border-radius: 999px; margin-bottom: 2rem;
}
.sg-period a {
  padding: .5rem 1.2rem; border-radius: 999px; font-size: .9rem;
  font-weight: 600; color: var(--sg-text-3);
}
.sg-period a.is-on { background: var(--sg-mint); color: var(--sg-mint-ink); }
.sg-period a.is-on:hover { color: var(--sg-mint-ink); }

.sg-plans {
  display: grid; gap: 1.1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.sg-plan {
  background: var(--sg-ground-2); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-xl); padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
}
/* Raised and outlined in the warm note — never a different fill. A card that
   looks like a different product reads as an upsell, not a recommendation. */
.sg-plan.is-featured {
  border-color: var(--sg-amber);
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}
.sg-plan-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sg-plan-name {
  font-family: var(--sg-display); font-weight: 700; font-size: 1.1rem;
  color: var(--sg-text); margin: 0;
}
.sg-plan-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--sg-amber); background: rgb(242 162 76 / .12);
  border: 1px solid rgb(242 162 76 / .3);
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap;
}
.sg-price {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sg-price-amount {
  font-family: var(--sg-display); font-weight: 800; font-size: 2.3rem;
  letter-spacing: -.02em; color: var(--sg-text); line-height: 1.1;
}
.sg-price-period { font-size: .9rem; color: var(--sg-text-4); }
.sg-price-note { font-size: .85rem; color: var(--sg-text-4); margin: 0; }

.sg-features { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sg-features li {
  display: flex; gap: .55rem; align-items: baseline;
  font-size: .93rem; line-height: 1.55; color: var(--sg-text-2);
}
.sg-features li::before { content: '✓'; color: var(--sg-mint); font-weight: 700; flex: none; }
.sg-features li.is-off { color: var(--sg-text-4); }
.sg-features li.is-off::before { content: '—'; color: var(--sg-text-4); }

.sg-plan-cta {
  display: block; text-align: center; margin-top: auto;
  padding: .85rem 1.2rem; border-radius: 14px;
  font-family: var(--sg-display); font-weight: 700; font-size: .98rem;
  background: var(--sg-mint); color: var(--sg-mint-ink);
}
.sg-plan-cta:hover { background: var(--sg-mint-hi); color: var(--sg-mint-ink); }
.sg-plan-cta.is-quiet {
  background: transparent; color: var(--sg-text);
  border: 1px solid var(--sg-line-3);
}
.sg-plan-cta.is-quiet:hover { border-color: var(--sg-mint); color: var(--sg-mint); background: transparent; }

/* ---- Panels and forms --------------------------------------------------- */

.sg-panel {
  background: var(--sg-ground-2); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-xl); padding: 1.8rem 1.6rem; margin-bottom: 1.1rem;
}
.sg-panel > h2 {
  font-family: var(--sg-display); font-weight: 700; font-size: 1.2rem;
  color: var(--sg-text); margin: 0 0 .35rem;
}
.sg-panel > h2 + p { color: var(--sg-text-4); font-size: .92rem; margin: 0 0 1.5rem; }

.sg-field { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.sg-field > label { font-size: .9rem; font-weight: 600; color: var(--sg-text-2); }
.sg-field input[type="text"],
.sg-field input[type="email"],
.sg-field select,
.sg-input {
  width: 100%; padding: .8rem .95rem;
  background: var(--sg-surface); color: var(--sg-text);
  border: 1px solid var(--sg-line-2); border-radius: var(--sg-r);
  font-family: inherit; font-size: .98rem;
}
.sg-field input:focus, .sg-field select:focus, .sg-input:focus {
  border-color: var(--sg-mint); outline: none;
}
.sg-field input::placeholder { color: var(--sg-text-4); }
.sg-hint { font-size: .84rem; color: var(--sg-text-4); margin: 0; line-height: 1.6; }
.sg-error { font-size: .86rem; color: #FF8A7A; margin: 0; }

/*
 * The choice tiles carry their own control.
 *
 * A native radio on this ground renders in the operating system's blue or
 * orange — the screenshots of the old page show exactly that, and it is the
 * single loudest thing on a page whose accent is mint. Hiding the input and
 * drawing the state on the tile keeps the keyboard behaviour and loses the
 * colour that was never ours.
 */
.sg-choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.sg-choice {
  position: relative; display: block; cursor: pointer;
  background: var(--sg-surface); border: 1px solid var(--sg-line-2);
  border-radius: var(--sg-r); padding: .85rem .95rem;
}
.sg-choice:hover { border-color: var(--sg-line-3); }
.sg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sg-choice-title { font-weight: 650; font-size: .95rem; color: var(--sg-text); display: block; }
.sg-choice-note { font-size: .82rem; color: var(--sg-text-4); display: block; margin-top: .15rem; }
.sg-choice:has(input:checked) {
  border-color: var(--sg-mint);
  background: rgb(62 217 192 / .08);
  box-shadow: inset 0 0 0 1px var(--sg-mint);
}
.sg-choice:has(input:checked) .sg-choice-title { color: var(--sg-mint); }
.sg-choice:has(input:focus-visible) { outline: 2px solid var(--sg-mint); outline-offset: 2px; }
/* One state, not two: the radio's own `disabled` attribute greys the tile,
   so there is no class for the script to keep in step with it. */
.sg-choice.is-disabled,
.sg-choice:has(input:disabled) { opacity: .45; cursor: not-allowed; border-style: dashed; }
.sg-choice:has(input:disabled):hover { border-color: var(--sg-line-2); }
.sg-choice-why { color: var(--sg-text-3, var(--sg-text-4)); font-style: italic; }

.sg-slug { display: flex; align-items: stretch; }
.sg-slug .sg-input { border-start-end-radius: 0; border-end-end-radius: 0; }
.sg-slug-suffix {
  display: flex; align-items: center; padding: 0 .9rem;
  background: var(--sg-surface-2); border: 1px solid var(--sg-line-2);
  border-inline-start: 0;
  border-start-start-radius: 0; border-end-start-radius: 0;
  border-start-end-radius: var(--sg-r); border-end-end-radius: var(--sg-r);
  font-size: .88rem; color: var(--sg-text-3); white-space: nowrap;
}

/* ---- Steps rail --------------------------------------------------------- */

/* An <ol>, so the order is real to a screen reader — but the list markers are
   dropped and replaced with a chevron between items. Left as a default list it
   renders "1. Your details. Confirm email. Pay." which reads as one run-on
   sentence rather than as four stops on a journey. */
.sg-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  font-size: .85rem; color: var(--sg-text-4);
}
.sg-steps li { display: flex; align-items: center; gap: .5rem; }
.sg-steps li:not(:last-child)::after {
  content: ''; width: .38rem; height: .38rem; flex: none;
  border-block-start: 1px solid currentColor; border-inline-end: 1px solid currentColor;
  transform: rotate(-135deg); opacity: .55;
}
/* The chevron points the way the language reads. */
[dir="ltr"] .sg-steps li:not(:last-child)::after { transform: rotate(45deg); }
.sg-steps .is-now { color: var(--sg-mint); font-weight: 650; }
.sg-steps .is-done { color: var(--sg-text-3); }

/* ---- Summary ------------------------------------------------------------ */

.sg-summary { display: grid; gap: .6rem; }
.sg-summary-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .93rem; font-variant-numeric: tabular-nums; color: var(--sg-text-2);
}
.sg-summary-row strong { color: var(--sg-text); font-weight: 650; }

/* ---- The band and the close --------------------------------------------- */

.sg-band {
  background: linear-gradient(150deg, var(--sg-surface), var(--sg-ground-2));
  border: 1px solid var(--sg-line-2);
  border-radius: var(--sg-r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.sg-band-pair { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sg-band-pair h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sg-text-4); margin: 0 0 .7rem;
}
.sg-band-pair p { margin: 0; line-height: 1.7; font-size: .98rem; color: var(--sg-text-2); }
.sg-band-pair .is-ours { color: var(--sg-mint); margin-top: .55rem; }

.sg-close { text-align: center; padding: 5rem 0; }
.sg-close h2 {
  font-family: var(--sg-display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 .7rem; color: var(--sg-text);
}
.sg-close p { color: var(--sg-text-2); margin: 0 0 2rem; }
.sg-close-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------- */

.sg-footer {
  border-top: 1px solid var(--sg-line); padding: 2.25rem 0;
  font-size: .88rem; color: var(--sg-text-4);
}
.sg-footer a { color: var(--sg-text-3); }
.sg-footer a:hover { color: var(--sg-mint); }

/* ---- Narrow ------------------------------------------------------------- */

@media (max-width: 56rem) {
  .sg-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.25rem 0 3.75rem; }
  .sg-section { padding: 3.5rem 0; }
  .sg-close { padding: 3.5rem 0; }
}

/*
 * On a phone the bar keeps the brand and the one button. The two text links
 * wrap onto a second line at this width, which turns a 3.5rem bar into a 5rem
 * one on every page — and both pages they point at are reachable from the
 * hero and from the closing block on every screen here.
 */
@media (max-width: 30rem) {
  .sg-nav-links a:not(.sg-cta) { display: none; }
  .sg-hero-actions .sg-cta, .sg-hero-actions .sg-cta-ghost { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .sg-cta, .sg-cta-ghost, .sg-plan-cta, .sg-tile, .sg-choice, .sg-nav-links a {
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .sg-cta:hover { transform: translateY(-1px); }
}

/* ---- The hero mockup ----------------------------------------------------- */

/*
 * A phone showing the actual product, and a QR card scanning into it.
 *
 * Drawn in CSS rather than shipped as a screenshot for two reasons that both
 * matter here: a screenshot of an Arabic menu is a 200KB image that goes stale
 * the first time the product changes, and it cannot be read by anybody using a
 * screen reader. This is markup — so it is text, it is 0 bytes over the wire,
 * and it always matches today's interface because it IS today's interface.
 */
.sg-mock { position: relative; display: flex; justify-content: center; }

.sg-phone {
  width: 17.5rem; height: 35rem; flex: none;
  border-radius: 2.6rem; background: #060B0A;
  border: 9px solid #1A2421;
  box-shadow: 0 40px 90px rgb(0 0 0 / .6);
  overflow: hidden; position: relative;
}
.sg-phone::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 4;
  width: 6.9rem; height: 1.5rem; background: #1A2421;
  border-radius: 0 0 .9rem .9rem;
}
.sg-phone-head { position: relative; height: 11.25rem; flex: none; background: linear-gradient(150deg, #1C2A26, #0E1512); }
.sg-phone-head::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(6 11 10 / .95), transparent 60%);
}
.sg-phone-title { position: absolute; inset-block-end: .9rem; inset-inline: 1rem; z-index: 2; }
.sg-phone-title strong {
  display: block; font-family: var(--sg-display); font-weight: 800;
  font-size: 1.25rem; color: #fff;
}
.sg-phone-title span { display: block; font-size: .75rem; color: var(--sg-text-2); margin-top: .2rem; }

.sg-phone-chips { display: flex; gap: .45rem; padding: .75rem .9rem; flex: none; overflow: hidden; }
.sg-phone-chips span {
  padding: .38rem .8rem; border-radius: 999px; white-space: nowrap;
  font-size: .72rem; font-weight: 600;
  background: var(--sg-surface); color: var(--sg-text-3);
}
.sg-phone-chips span.is-on { background: var(--sg-mint); color: var(--sg-mint-ink); font-weight: 700; }

.sg-phone-list { display: flex; flex-direction: column; gap: .55rem; padding: .15rem .9rem 1rem; }
.sg-phone-row {
  display: flex; gap: .7rem; align-items: center;
  background: var(--sg-ground-2); border: 1px solid var(--sg-line);
  border-radius: 1rem; padding: .55rem;
}
.sg-phone-thumb {
  width: 3.25rem; height: 3.25rem; border-radius: .7rem; flex: none;
  background: linear-gradient(150deg, var(--sg-surface-2), var(--sg-surface));
  border: 1px solid var(--sg-line-2);
}
/* One line each, clipped. A real menu row does this too — and without it the
   English notes wrap, the rows grow, and the fourth dish is sliced in half by
   the phone's bottom edge. */
.sg-phone-row > span:nth-child(2) { min-width: 0; overflow: hidden; }
.sg-phone-row b,
.sg-phone-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-phone-row b { font-weight: 700; font-size: .84rem; color: var(--sg-text); }
.sg-phone-row small { font-size: .69rem; color: var(--sg-text-4); margin-top: .12rem; }
.sg-phone-row .sg-phone-price {
  margin-inline-start: auto; font-family: var(--sg-display); font-weight: 700;
  font-size: .84rem; color: var(--sg-mint); font-variant-numeric: tabular-nums;
}

/* The QR card, floating clear of the phone's corner. */
.sg-qr {
  position: absolute; inset-block-start: -.9rem; inset-inline-end: -.9rem; z-index: 3;
  width: 7.4rem; padding: .85rem; border-radius: 1.25rem;
  background: var(--sg-ground-2); border: 1px solid var(--sg-line-2);
  box-shadow: 0 20px 50px rgb(0 0 0 / .5);
}
.sg-qr-code {
  position: relative; width: 5.6rem; height: 5.6rem; margin: 0 auto;
  border-radius: .6rem; background: var(--sg-text); overflow: hidden;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr);
  gap: 2px; padding: .5rem;
}
.sg-qr-code i { background: var(--sg-mint-ink); border-radius: 2px; }
.sg-qr-code i:nth-child(1) { grid-column: 1/3; grid-row: 1/3; }
.sg-qr-code i:nth-child(2) { grid-column: 6/8; grid-row: 1/3; }
.sg-qr-code i:nth-child(3) { grid-column: 1/3; grid-row: 6/8; }
.sg-qr-code i:nth-child(4) { grid-column: 4/5; grid-row: 4/5; }
.sg-qr-code i:nth-child(5) { grid-column: 5/6; grid-row: 2/3; }
.sg-qr-code i:nth-child(6) { grid-column: 3/4; grid-row: 5/6; }
.sg-qr-code i:nth-child(7) { grid-column: 6/7; grid-row: 5/6; }
.sg-qr-code i:nth-child(8) { grid-column: 4/5; grid-row: 7/8; }
.sg-qr-scan {
  position: absolute; inset-inline: 0; height: 2px; z-index: 2;
  background: var(--sg-mint); box-shadow: 0 0 14px var(--sg-mint);
}
.sg-qr p { margin: .55rem 0 0; text-align: center; font-size: .68rem; color: var(--sg-text-4); font-weight: 600; }

@keyframes sgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sgScan  { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(5.6rem); opacity: 0; } }

/* Motion is the last thing added and the first thing removed: the page says
   everything it needs to say standing still. */
@media (prefers-reduced-motion: no-preference) {
  .sg-qr { animation: sgFloat 6s ease-in-out infinite; }
  .sg-qr-scan { animation: sgScan 3.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-qr-scan { display: none; }
}

@media (max-width: 56rem) {
  .sg-mock { display: none; }
}

/* ---- Language switcher --------------------------------------------------- */

/*
 * A menu, not a row of pills.
 *
 * Ten languages laid side by side pushed the nav links onto three lines and
 * shoved the call to action off the screen — and a row of ten is not a
 * switcher, it is a wall to read before you can act.
 *
 * Built on <details>, so it opens, closes, takes the keyboard and closes on
 * Escape with no JavaScript on a page that has none.
 */
.sg-lang { position: relative; }

.sg-lang > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sg-line-2); color: var(--sg-text-3);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  list-style: none;
}
/* Safari draws its own triangle; both of these are needed to remove it. */
.sg-lang > summary::-webkit-details-marker { display: none; }
.sg-lang > summary::marker { content: ''; }
.sg-lang > summary:hover { color: var(--sg-text); border-color: var(--sg-line-3); }
.sg-lang[open] > summary { color: var(--sg-text); border-color: var(--sg-mint); }
.sg-lang > summary svg { color: var(--sg-mint); flex: none; }

.sg-lang-menu {
  position: absolute; z-index: 60;
  inset-block-start: calc(100% + .45rem); inset-inline-end: 0;
  min-width: 11rem; max-height: 60vh; overflow-y: auto;
  padding: .35rem; border-radius: var(--sg-r-lg);
  background: var(--sg-ground-2); border: 1px solid var(--sg-line-2);
  box-shadow: 0 20px 50px rgb(0 0 0 / .55);
  display: grid; gap: .1rem;
  /* Resolved ONCE, here, against the page's direction. */
  text-align: start;
}
.sg-lang-menu a {
  display: block; padding: .5rem .7rem; border-radius: .5rem;
  font-size: .9rem; font-weight: 500; color: var(--sg-text-2);

  /* Each name carries its own `dir` so it RENDERS correctly — and `isolate`
     keeps it from reordering its neighbours. But alignment is inherited from
     the menu, not resolved per item: `text-align: start` on the item itself
     pushes العربية and עברית to one edge and the Latin names to the other,
     and the column comes out ragged. */
  /* An ABSOLUTE value, per page direction. `start` — and `inherit`, which
     passes the keyword down unresolved — is resolved against each item's OWN
     `dir`, so العربية and עברית flew to the opposite edge from the Latin
     names and the column came out ragged. */
  text-align: left;
  unicode-bidi: isolate;
}
[dir="rtl"] .sg-lang-menu a { text-align: right; }
.sg-lang-menu a:hover { background: var(--sg-surface); color: var(--sg-text); }
.sg-lang-menu a.is-on { color: var(--sg-mint-ink); background: var(--sg-mint); font-weight: 650; }
.sg-lang-menu a.is-on:hover { color: var(--sg-mint-ink); background: var(--sg-mint); }

/* Tapping anywhere else closes it — a full-screen sheet behind the menu is the
   only way to get that without script. */
.sg-lang[open] > summary::after {
  content: ''; position: fixed; inset: 0; z-index: 55; cursor: default;
}

@media (max-width: 30rem) {
  .sg-lang > summary span { display: none; }
  .sg-lang > summary { padding: .45rem .55rem; }
}

/* ---- Legal documents ----------------------------------------------------- */

/*
 * Read, not skimmed. A narrow measure, generous leading and numbered clauses —
 * somebody asking a question about a document like this says "section 5", so
 * the sections carry numbers a person can point at.
 */
.sg-legal-title {
  font-family: var(--sg-display); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2;
  letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--sg-text);
}
.sg-legal { max-width: 42rem; }
.sg-legal h2 {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--sg-display); font-weight: 700;
  font-size: 1.12rem; color: var(--sg-text);
  margin: 2.5rem 0 .8rem; scroll-margin-top: 5rem;
}
.sg-legal h2 span {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: .55rem; background: rgb(62 217 192 / .12);
  border: 1px solid #23423C;
  font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--sg-mint);
}
.sg-legal p {
  color: var(--sg-text-2); line-height: 1.85; margin: 0 0 .9rem;
  font-size: .98rem; text-wrap: pretty;
}
.sg-legal p:last-child { margin-bottom: 0; }
/* The seller's postal address, under the contact line. Upright rather than
   italic, which is <address>'s browser default and reads as an aside — this
   is the one line on the page a regulator looks for. */
.sg-legal-address {
  font-style: normal; margin: .75rem 0 0; line-height: 1.7;
  color: var(--sg-text-3); font-size: .92rem;
}

.sg-legal-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sg-line); }

/* ---- The consent row ----------------------------------------------------- */

/*
 * A real, visible checkbox. The plan tiles hide their input and draw the state
 * on the tile, which works because the tile IS the control — this row has no
 * tile, so the same treatment left an agreement nobody could see they had
 * given. The native box is still what the keyboard and the screen reader use.
 */
.sg-consent {
  display: flex; align-items: flex-start; gap: .7rem;
  cursor: pointer; font-size: .93rem; color: var(--sg-text-2); line-height: 1.6;
}
.sg-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sg-consent-box {
  flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem;
  border: 1px solid var(--sg-line-3); border-radius: .35rem;
  background: var(--sg-surface); position: relative;
}
.sg-consent:hover .sg-consent-box { border-color: var(--sg-mint); }
.sg-consent input:checked + .sg-consent-box {
  background: var(--sg-mint); border-color: var(--sg-mint);
}
/* The tick, drawn rather than typed: a ✓ glyph sits differently in every font
   and drifts off-centre at this size. */
.sg-consent input:checked + .sg-consent-box::after {
  content: ''; position: absolute;
  inset-inline-start: .34rem; inset-block-start: .12rem;
  width: .32rem; height: .6rem;
  border: solid var(--sg-mint-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sg-consent input:focus-visible + .sg-consent-box {
  outline: 2px solid var(--sg-mint); outline-offset: 2px;
}
.sg-consent a { color: var(--sg-mint); text-decoration: underline; text-underline-offset: 2px; }