/*!
 * THE SaaS GAME - approved campaign stylesheet.
 * Ported verbatim from the approved mockup. Review-only styles removed.
 * (c) Moraqmen
 */
/* ============================================================
   THE SaaS GAME — Workshop landing page (MOCKUP v2)
   Campaign compositions, not card grids.
   Single-theme by design: extension of the campaign artwork.
   ============================================================ */

:root{
  /* The approved design is a single light theme. Saying so explicitly opts the
     page out of the browser's automatic dark mode: on a phone set to dark,
     Chrome/Samsung Internet otherwise recolour the text to white while leaving
     the light card backgrounds alone, which makes the ticket unreadable at the
     door. `only light` is the strong form - it also blocks the algorithmic
     darkening, not just the prefers-color-scheme query. */
  color-scheme:only light;

  /* ---------- LIGHT WORKSHOP THEME ----------------------------------------
     Blue + green + white. The legacy variable NAMES are kept on purpose so
     every existing selector keeps working; only their VALUES flipped from the
     dark campaign palette to the light workshop palette. --ink/--panel are now
     surfaces, --bone is now the primary (dark) text colour. A few shades are a
     touch deeper than the brief so text clears WCAG AA on light backgrounds.
     ------------------------------------------------------------------------ */

  /* surfaces */
  --bg:#F7FBFA;
  --surface:#FFFFFF;
  --surface-blue:#EAF5FB;
  --surface-green:#E4F8EF;
  --surface-amber:#FFF6E3;
  --surface-danger:#FDECEA;

  /* legacy surface aliases */
  --ink:#FFFFFF;
  --ink-2:#F7FBFA;
  --panel:#FFFFFF;
  --panel-2:#EAF5FB;
  --line:#E4EFF4;
  --line-2:#D9E8EE;
  --border-strong:#C4DCE9;

  /* text */
  --bone:#17212B;
  --muted:#5A6875;
  --muted-2:#626F7A;

  /* blue */
  --blue:#0756C9;
  --blue-bright:#2385E8;
  --blue-deep:#073B8C;
  --text-blue:#073B8C;

  /* green — --green is the readable green used for text and for fills that
     carry white text; --green-bright / --green-vivid are decorative only */
  --green:#0F7F4C;
  --green-bright:#18AE69;
  --green-vivid:#2AC67B;
  --green-soft:#0B6E41;
  --green-deep:#0B6E41;
  --green-ink:#FFFFFF;

  /* semantic states */
  --amber:#8A5A00;
  --danger:#C4321F;
  --danger-ink:#9B2415;

  /* elevation + radius */
  --shadow-sm:0 8px 24px rgba(15,74,125,.06);
  --shadow-md:0 14px 36px rgba(15,74,125,.10);
  --shadow-lg:0 30px 80px -30px rgba(15,74,125,.35);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;

  --ar:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --en:"Archivo","Arial Black",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace;

  /* one container system for the whole page */
  --page-max:1220px;
  --page-gutter:clamp(20px,5vw,64px);
  --pad:var(--page-gutter);   /* legacy alias used by the sticky bar */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;background:var(--bg);color:var(--bone);
  font-family:var(--ar);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.2;font-weight:700;color:var(--text-blue)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:6px}

/* every section shares this geometry; full-bleed elements opt out explicitly */
.wrap{width:min(100% - var(--page-gutter) * 2,var(--page-max));margin-inline:auto}

/* ---- direction utilities -------------------------------------------------
   .ltr-text  : standalone English (display headings, data, labels)
   .rtl-text  : standalone Arabic
   .mixed-text: Arabic sentence carrying English terms — direction follows the
                first strong character, so each run keeps its own order
   .en/.mono  : inline English terms inside Arabic sentences. They stay INLINE
                (not inline-block) and are bidi-isolated, so they hold their
                logical position in the Arabic run and still wrap normally.
   -------------------------------------------------------------------------- */
.ltr-text{direction:ltr;unicode-bidi:isolate;text-align:left}
.rtl-text{direction:rtl;unicode-bidi:isolate;text-align:right}
.mixed-text{unicode-bidi:plaintext}
.en{font-family:var(--en);direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate}

/* .mark — small inline highlight (logo, labels). Safe at UI sizes. */
.mark{background:var(--green);color:var(--green-ink);padding:.02em .26em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* .mark--hl — display-scale highlight for campaign headlines.
   An inline background paints the font's whole content area (~1.36em in IBM
   Plex Sans Arabic), which is taller than a tight display line-height, so the
   green rectangle bled into the line above. As an inline-block the box height
   comes from its own line-height + padding instead, and the block margins buy
   clear air above and below without moving the baseline. One highlighted
   phrase = one line box; wrapped phrases get an explicit line per span. */
.mark--hl{display:inline-block;vertical-align:baseline;
  line-height:1.04;
  padding:.09em .18em .13em;
  /* the previous line's font box hangs ~(1.5 − line-height)/2 em below its line
     box, so the top margin has to clear that hang before it buys real air */
  margin-block:.30em .08em;
  box-decoration-break:slice;-webkit-box-decoration-break:slice}
@media(max-width:760px){
  .mark--hl{margin-block:.34em .10em;padding:.10em .16em .15em}
}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);direction:ltr;unicode-bidi:isolate}

/* bidi hardening: every standalone English element is isolated so the RTL
   paragraph direction can never reorder its words or punctuation */
.wordmark b,.wordmark .sub,.orbit,.chip,.chips__label,.node,.map__center b,
.map__center span,.map__q b,.map__list b,.map__list i,.rung__n,.rung__tag,
.jn__n,.jn__k,.persona__n,.persona h4,.out b,.trans__side .tag,.trans__arrow span,
.part__titles h2,.rail__c dt,.rail__c .big,.rail__c .old,.event__c dt,.tbd,
.ph-tag,.strike,.logo,.status,.ticket__top b,.ticket__top span,
.ticket__rows dt,.ticket__rows .ref,.field label,.pay__logo,
.pay__steps li::before,.file b,.file small,.file__ic,.review-bar span,
.review-bar button,.step-label,.sum dt,.sum__amt,.board__title,.cell__i,.seats__txt,
.final__meta,.map__hint,.sw,.ap-card h4,.ap-type small,.state small,.phone__wm,
.phone__sb,.phone__facts b,.phone__facts small,.phone__bar b{unicode-bidi:isolate}

/* values that may hold Arabic or English: direction follows the content */
.event__c dd,.ticket__rows dd,.rail__c dd{unicode-bidi:plaintext}

.section{padding-block:clamp(70px,10vw,140px);position:relative}
/* section rhythm: white by default, tinted blue / green blocks in between */
.section{background:var(--surface)}
.section--panel,.section--blue{background:var(--surface-blue)}
.section--green{background:var(--surface-green)}
.section--soft{background:var(--bg)}
.section--white{background:var(--surface)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(36px,6vw,68px);max-width:64ch}
.sec-head h2{font-size:clamp(28px,4.6vw,50px);line-height:1.25}
.sec-head p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.75}

.dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(35,133,232,.22) 1px,transparent 1.3px);background-size:13px 13px;
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(60% 70% at 100% 0%,#000 0%,transparent 70%);opacity:.8}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ar);font-weight:700;font-size:17px;padding:16px 28px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:transform .12s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease}
.btn--primary{background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);color:#fff;
  box-shadow:0 8px 22px -10px rgba(15,74,125,.55)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(15,74,125,.5);
  background:linear-gradient(135deg,#064AAE 0%,#0F7A4A 100%)}
.btn--primary:active{transform:translateY(0);background:linear-gradient(135deg,#053E92 0%,var(--green-deep) 100%)}
.btn--ghost{background:var(--surface);color:var(--blue);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--blue);background:var(--surface-blue);color:var(--blue-deep);
  transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--lg{font-size:19px;padding:20px 34px;border-radius:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:24px;height:70px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--en);font-weight:900;
  font-size:15px;direction:ltr}
.nav{display:flex;gap:26px;margin-inline-start:auto;font-size:15px;color:var(--muted)}
.nav a:hover{color:var(--blue)}
.head .btn{padding:11px 20px;font-size:15px}
@media(max-width:960px){.nav{display:none}.head .btn{margin-inline-start:auto}}

/* ============================================================
   HERO — poster composition
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,72px) clamp(30px,4vw,50px)}
/* soft abstract poster blob — decoration only, sits under the composition */
.hero__corner{position:absolute;inset-block-start:-220px;inset-inline-start:-220px;
  width:min(62vw,760px);aspect-ratio:1;opacity:1;pointer-events:none;
  background:radial-gradient(circle at 38% 38%,rgba(35,133,232,.20),rgba(42,198,123,.16) 52%,transparent 72%);
  border-radius:50%}

.hero__top{position:relative;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(26px,4vw,44px)}
.hero h1{font-size:clamp(28px,4.6vw,52px);line-height:1.28;max-width:20ch}
.hero h1 .quiet{color:var(--muted)}
.hero__flags{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted)}
.pill--live{border-color:rgba(24,174,105,.45);color:var(--green);background:var(--surface-green)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green-bright);
  box-shadow:0 0 0 4px rgba(24,174,105,.18)}

/* the stage: wordmark + orbiting concepts + connectors */
.stage{position:relative;width:100%;
  min-height:clamp(280px,38vw,470px);display:grid;place-items:center}
.stage__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage__svg line{stroke:var(--line-2);stroke-width:1;
  stroke-dasharray:3 5;opacity:0;animation:wire .9s ease-out forwards}
@keyframes wire{to{opacity:.85}}

.wordmark{position:relative;z-index:2;text-align:center;pointer-events:none}
.wordmark b{display:block;font-family:var(--en);font-weight:900;direction:ltr;
  font-size:clamp(46px,13.5vw,178px);line-height:.86;letter-spacing:-.035em;
  color:var(--text-blue);text-shadow:0 24px 60px rgba(15,74,125,.18)}
.wordmark b .g{color:var(--green)}
.wordmark .under{display:block;width:min(760px,92%);height:16px;margin:10px auto 0}
.wordmark .under path{fill:none;stroke:var(--green);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.2s .4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wordmark .sub{display:block;margin-top:16px;font-family:var(--mono);font-size:clamp(10px,1.4vw,14px);
  letter-spacing:.34em;color:var(--muted);direction:ltr}

.orbit{position:absolute;z-index:1;font-family:var(--mono);font-size:clamp(10px,1.15vw,14px);
  letter-spacing:.08em;color:var(--muted);direction:ltr;white-space:nowrap;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;box-shadow:var(--shadow-sm);
  padding:7px 14px;transform:translate(-50%,-50%);
  opacity:0;animation:pop .5s ease-out forwards}
.orbit--key{color:var(--green);border-color:rgba(24,174,105,.45);background:var(--surface-green)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:720px){.orbit{padding:5px 10px;font-size:10px}}
@media(max-width:520px){.orbit--hide{display:none}}

/* meta rail */
.rail{display:flex;flex-wrap:wrap;border-block:1px solid var(--line);margin-top:clamp(26px,4vw,44px)}
.rail__c{flex:1 1 190px;padding:18px 24px;border-inline-start:1px solid var(--line)}
.rail__c:first-child{border-inline-start:0;padding-inline-start:0}
.rail__c dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted-2);
  text-transform:uppercase;direction:ltr}
.rail__c dd{margin:7px 0 0;font-weight:600;font-size:17px}
.rail__c .big{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--green);direction:ltr}
.rail__c .old{font-family:var(--mono);font-size:15px;color:var(--muted-2);
  text-decoration:line-through;margin-inline-start:9px;direction:ltr}
/* the per-mode breakdown under the "from" figure — informative, not struck out */
.rail__c .alt{display:block;margin-top:5px;font-size:12.5px;color:var(--muted-2);font-weight:500}

.hero__cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:clamp(26px,4vw,40px)}
.hero__note{font-size:14px;color:var(--muted-2)}

/* ============================================================
   PROBLEM
   ============================================================ */
.chips{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:clamp(18px,3.5vw,38px) 0}
@media(max-width:760px){
  .chips{grid-template-columns:repeat(2,1fr)}
  /* the scatter offset is horizontal breathing room the phone doesn't have.
     The X offset lives in an inline custom property, so the transform itself is
     overridden here — keeping the vertical/rotational scatter, dropping the X. */
  .chips .chip{transform:translate(0,var(--y,0)) rotate(var(--r,0deg))}
}
.chip{font-family:var(--mono);font-size:clamp(12px,1.5vw,15px);text-align:center;
  padding:14px 8px;border-radius:11px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted-2);direction:ltr;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));
  transition:transform .85s cubic-bezier(.2,.8,.2,1),color .5s ease,border-color .5s ease}
.chips.snap .chip{transform:none;color:var(--bone);border-color:var(--line-2)}
.chips.snap .chip--key{color:var(--green);border-color:rgba(24,174,105,.5)}
.chips__label{position:absolute;inset-block-start:6px;inset-inline-start:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted-2);
  opacity:0;transition:opacity .5s ease .9s;direction:ltr}
.chips.snap .chips__label{opacity:1}

/* asymmetric but balanced: headline holds the start side, the supporting note
   anchors the end side. `ch` is set on the TEXT (not the box) so the measure is
   computed against the display size, never the inherited body size. */
.statement{margin-top:clamp(46px,7vw,90px);display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  gap:clamp(20px,4vw,56px);align-items:end}
/* Arabic ascenders/descenders need room — never tighter than ~1.2 at display size */
.statement p{font-size:clamp(30px,6.4vw,76px);font-weight:700;line-height:1.22;
  letter-spacing:-.01em;max-width:14ch}
.statement .dim{color:var(--muted-2)}
.statement .sub{font-size:clamp(15px,1.7vw,19px);font-weight:400;color:var(--muted);
  line-height:1.85;border-inline-start:2px solid var(--line-2);
  padding-inline-start:20px;max-width:38ch}
/* the full stop travels with the green block, never onto its own line */
.statement__mark{white-space:nowrap}

@media(max-width:860px){
  .statement{grid-template-columns:1fr;gap:26px;align-items:start}
  /* stacked: the headline gets the whole container instead of a 12ch column */
  .statement p{max-width:none;width:100%}
  .statement .sub{max-width:46ch}
}

/* mobile: fewer, stronger lines across nearly the full page gutter */
@media(max-width:760px){
  .statement{gap:28px}
  .statement p{font-size:clamp(34px,10vw,48px);line-height:1.14}
  .statement .sub{max-width:none;width:100%;font-size:15px;line-height:1.8}
}

/* Phones: hide the whole scattered-concepts board (label + every chip). It is a
   wide-canvas device that costs a lot of height on a narrow screen. `display:none`
   removes the element and its padding entirely; the only leftover would be the
   statement's top margin stacking on the section head's bottom margin, so that
   margin is dropped here too and the copy flows straight from the intro into the
   statement. Declared after every .statement rule so it wins the cascade — media
   queries add no specificity. The chips data stays editable in the admin and
   keeps rendering unchanged from 768px up. */
/* The concepts board no longer renders at any width; the statement follows the
   section intro directly, so its top margin is dropped to avoid a dead gap. */
.statement{margin-top:0}

/* ============================================================
   BEFORE / AFTER — transformation strip
   ============================================================ */
.trans{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,4vw,48px);align-items:center}
@media(max-width:860px){.trans{grid-template-columns:1fr;gap:18px}}
.trans__side .tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--muted-2);direction:ltr;display:block;margin-bottom:20px}
.trans__side--to .tag{color:var(--green)}
.trans__side li{display:flex;align-items:center;gap:12px;padding-block:13px;
  border-block-end:1px solid var(--line);font-size:clamp(16px,2vw,21px)}
.trans__side--from li{color:var(--muted-2)}
.trans__side--from li span{text-decoration:line-through;text-decoration-color:var(--line-2)}
.trans__side--to li{color:var(--bone);font-weight:600}
.trans__side--to li::before{content:"✓";color:var(--green);font-weight:700;font-family:var(--mono)}
.trans__side--from li::before{content:"×";color:var(--line-2);font-family:var(--mono)}
.trans__arrow{display:grid;place-items:center;gap:12px;color:var(--green)}
.trans__arrow svg{width:clamp(40px,6vw,72px);height:auto}
.trans__arrow span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted-2);direction:ltr}
@media(max-width:860px){.trans__arrow svg{transform:rotate(-90deg)}}

/* ============================================================
   PART BLOCKS — shared heading
   ============================================================ */
.part__head{display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);
  margin-bottom:clamp(36px,5vw,64px)}
.part__num{font-family:var(--en);font-weight:900;font-size:clamp(70px,13vw,180px);line-height:.76;
  color:transparent;-webkit-text-stroke:2px var(--blue-bright);direction:ltr;flex:0 0 auto}
.part__num--solid{color:var(--green);-webkit-text-stroke:0}
.part__titles{padding-top:8px}
.part__titles h2{font-family:var(--en);font-weight:900;font-size:clamp(23px,4vw,46px);
  letter-spacing:-.015em;direction:ltr;text-align:start;line-height:1.05}
.part__titles p{color:var(--muted);margin-top:16px;max-width:56ch;font-size:clamp(15px,1.6vw,18px)}

/* ---------- SaaS System Map ---------- */
.map{position:relative}
.map__board{position:relative;aspect-ratio:16/9;min-height:420px;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 50%,rgba(35,133,232,.08),transparent 70%),var(--surface);
  box-shadow:var(--shadow-sm)}
.map__board::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:26px 26px;opacity:.55}
.map__svg{position:absolute;inset:0;width:100%;height:100%}
.map__svg line{stroke:var(--line-2);stroke-width:1;transition:stroke .3s ease,stroke-width .3s ease}
.map__svg line.hot{stroke:var(--green);stroke-width:1.6}
.node{position:absolute;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--en);font-weight:700;font-size:clamp(11px,1.15vw,15px);direction:ltr;
  padding:11px 18px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--blue-deep);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.node:hover{border-color:var(--blue-bright);color:var(--blue)}
.node[aria-selected="true"]{background:var(--green);color:var(--green-ink);border-color:var(--green);
  box-shadow:0 0 0 6px rgba(24,174,105,.16)}
.map__center{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);text-align:center;z-index:1;pointer-events:none}
.map__center b{font-family:var(--en);font-weight:900;font-size:clamp(15px,2.3vw,30px);
  color:#C7DCE8;letter-spacing:-.01em;direction:ltr;display:block;line-height:1.1}
.map__center span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color:var(--muted-2);direction:ltr}

.map__detail{margin-top:22px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);padding:clamp(20px,3vw,30px);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;min-height:132px}
@media(max-width:760px){.map__detail{grid-template-columns:1fr}}
.map__detail h4{font-family:var(--en);font-weight:700;font-size:19px;color:var(--blue);direction:ltr}
.map__detail p{color:var(--muted);margin-top:10px;font-size:16px;max-width:62ch}
.map__q{border-inline-start:2px solid var(--green);padding-inline-start:18px;
  font-size:15px;color:var(--bone);max-width:34ch}
.map__q b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--green);margin-bottom:6px;direction:ltr}
.map__hint{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);
  direction:ltr;margin-top:16px;text-align:center}

/* mobile fallback: stacked list */
.map__list{display:none;border-block-start:1px solid var(--line)}
.map__list button{width:100%;display:flex;align-items:center;gap:14px;text-align:start;
  padding:18px 0;border-block-end:1px solid var(--line);cursor:pointer}
.map__list b{font-family:var(--en);font-size:15px;color:var(--bone);direction:ltr}
.map__list i{font-family:var(--mono);font-size:11px;color:var(--muted-2);direction:ltr}
.map__list .plus{margin-inline-start:auto;color:var(--green);font-family:var(--mono)}
.map__list p{padding-block:0 18px;color:var(--muted);font-size:15px;border-block-end:1px solid var(--line)}
.map__list p[hidden]{display:none}
@media(max-width:860px){
  .map__board,.map__hint{display:none}
  .map__list{display:block}
  .map__detail{display:none}
}

/* ---------- Part 02: the ladder ---------- */
.ladder{position:relative;display:flex;flex-direction:column;gap:0}
.rung{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,36px);
  align-items:center;padding-block:clamp(20px,3vw,34px);border-block-end:1px solid var(--line);
  margin-inline-start:calc(var(--i,0) * clamp(0px,3.2vw,52px))}
.rung:last-child{border-block-end:0}
.rung__n{font-family:var(--en);font-weight:900;font-size:clamp(40px,8vw,104px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--line-2);direction:ltr;transition:-webkit-text-stroke-color .3s ease}
.rung:hover .rung__n{-webkit-text-stroke-color:var(--green)}
.rung--last .rung__n{color:var(--green);-webkit-text-stroke:0}
.rung__body h4{font-size:clamp(19px,2.6vw,28px)}
.rung__body p{color:var(--muted);margin-top:8px;font-size:clamp(15px,1.6vw,17px);max-width:52ch}
.rung__tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted-2);
  direction:ltr;display:block;margin-bottom:8px}
.rung--last .rung__tag{color:var(--green)}

/* Direction-independent layout: the grid itself is LTR so the English headline
   always occupies the left column and the Arabic copy the right one, whatever
   the page direction is. Each child then restores its own text direction. */
.slab{margin-top:clamp(34px,5vw,58px);
  background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);color:var(--green-ink);
  box-shadow:var(--shadow-md);
  border-radius:20px;padding:clamp(26px,4vw,52px);
  direction:ltr;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,52px);align-items:center}
.slab h3{font-family:var(--en);font-weight:900;
  font-size:clamp(22px,5.6vw,40px);
  direction:ltr;unicode-bidi:isolate;text-align:left;
  letter-spacing:-.02em;line-height:1.08;
  /* the global heading `balance` was forcing four short lines — this headline
     wants full measure, so it opts out and uses the whole column */
  text-wrap:wrap;max-width:none}
.slab p{direction:rtl;unicode-bidi:isolate;text-align:right;
  font-weight:600;font-size:16px;line-height:1.75;max-width:36ch;justify-self:end}
/* stack early: below this the left column gets too narrow for the headline to
   hold its line, which is what caused the four-line wrap at tablet widths */
@media(max-width:900px){
  .slab{grid-template-columns:1fr;gap:clamp(22px,6vw,32px);align-items:start}
  .slab h3{order:1;width:100%;font-size:clamp(23px,6.6vw,34px)}
  .slab p{order:2;width:100%;max-width:none;justify-self:stretch}
}

/* ---------- Journey 01–04 ---------- */
.journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,30px)}
@media(max-width:900px){.journey{grid-template-columns:1fr;gap:0}}
.jn{position:relative;padding-top:34px}
.jn::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;background:var(--line)}
.jn::after{content:"";position:absolute;inset-block-start:-4px;inset-inline-start:0;
  width:9px;height:9px;border-radius:50%;background:var(--green)}
.jn:not(:first-child)::after{background:var(--line-2)}
.jn__n{font-family:var(--en);font-weight:900;font-size:clamp(44px,7vw,88px);line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px var(--green);direction:ltr;display:block}
.jn__k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--green);
  direction:ltr;display:block;margin-block:16px 10px}
.jn h4{font-size:20px}
.jn p{color:var(--muted);font-size:15px;margin-top:8px;line-height:1.7}
@media(max-width:900px){
  .jn{padding-block:26px 26px;padding-inline-start:0}
  .jn::before{inset-inline-end:auto;width:100%}
}
.not-this{margin-top:clamp(34px,5vw,54px);display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  font-size:15px;color:var(--muted)}
.strike{font-family:var(--mono);font-size:13px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);text-decoration:line-through;color:var(--muted-2);direction:ltr}

/* ---------- Personas (editorial rows) ---------- */
/* Explicit LTR grid so the page's RTL can never reverse the columns:
   number + English persona on the LEFT, Arabic description on the RIGHT.
   Fixed tracks (not `auto`) keep all three rows on identical boundaries. */
.persona{direction:ltr;
  display:grid;grid-template-columns:44px minmax(280px,.9fr) minmax(0,1.2fr);
  gap:clamp(16px,3vw,40px);align-items:center;
  padding-block:clamp(24px,3.6vw,40px);border-block-start:1px solid var(--line)}
.persona:last-of-type{border-block-end:1px solid var(--line)}
/* each column restores its own text direction */
.persona__n{direction:ltr;text-align:left}
.persona h4{direction:ltr;text-align:left;unicode-bidi:isolate}
.persona h4 small{direction:rtl;text-align:left}
.persona p{direction:rtl;text-align:right;unicode-bidi:plaintext}
@media(max-width:820px){
  .persona{grid-template-columns:44px minmax(0,1fr);gap:12px 16px;align-items:start}
  .persona p{grid-column:2}
}
.persona__n{font-family:var(--mono);font-size:13px;color:var(--muted-2);direction:ltr}
.persona h4{font-family:var(--en);font-weight:900;font-size:clamp(22px,4vw,44px);
  direction:ltr;letter-spacing:-.02em;line-height:1}
.persona h4 small{display:block;font-family:var(--ar);font-weight:600;font-size:15px;
  color:var(--muted);letter-spacing:0;margin-top:8px;direction:rtl}
.persona p{color:var(--muted);font-size:16.5px;line-height:1.75}
.persona-note{margin-top:26px;color:var(--muted-2);font-size:15.5px;max-width:70ch}

/* ---------- Outcomes ---------- */
.out-head{font-size:clamp(26px,5vw,56px);font-weight:700;line-height:1.2;margin-bottom:clamp(30px,4vw,50px)}
.out{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,5vw,70px)}
@media(max-width:760px){.out{grid-template-columns:1fr}}
.out li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  padding-block:clamp(16px,2.4vw,24px);border-block-end:1px solid var(--line)}
.out .tick{font-family:var(--mono);font-weight:700;color:var(--green);font-size:20px}
.out b{font-family:var(--en);font-weight:700;font-size:clamp(16px,2vw,21px);direction:ltr;display:block}
.out span{color:var(--muted);font-size:15px;display:block;margin-top:3px}

/* ---------- Speaker ---------- */
.spk{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.5vw,44px)}
@media(max-width:820px){.spk{grid-template-columns:1fr}}
.spk__c{display:flex;flex-direction:column;gap:20px}
.spk__ph{aspect-ratio:4/5;border-radius:18px;border:1px dashed var(--line-2);
  background:linear-gradient(180deg,rgba(24,174,105,.10),transparent 60%),
    repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--surface-blue) 12px 24px);
  display:grid;place-items:center;text-align:center;padding:20px}
.spk__ph span{font-family:var(--mono);font-size:12px;color:var(--muted-2);line-height:2;direction:ltr}
.ph-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--green);background:var(--surface-green);border:1px solid rgba(24,174,105,.32);
  border-radius:999px;padding:4px 10px;direction:ltr}
.spk__c h3{font-size:clamp(22px,3vw,30px);margin-top:12px}
.spk__role{color:var(--muted);font-size:16px;margin-top:4px}
.spk__c ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.spk__c li{display:flex;gap:10px;color:var(--muted);font-size:15.5px}
.spk__c li::before{content:"▪";color:var(--green)}
.placeholder{margin-top:26px;border:1px dashed var(--line-2);border-radius:12px;padding:14px 16px;
  font-size:14px;color:var(--muted-2);background:var(--surface-blue);max-width:80ch}

/* ---------- Event details ---------- */
.event{display:flex;flex-wrap:wrap;border-block:1px solid var(--line)}
.event__c{flex:1 1 220px;padding:26px 24px;border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.event__c:first-child{border-inline-start:0;padding-inline-start:0}
@media(max-width:820px){.event__c{flex-basis:100%;border-inline-start:0;padding-inline-start:0;
  border-block-end:1px solid var(--line)}.event__c:last-child{border-block-end:0}}
.event__c .ico{color:var(--green);width:22px;height:22px}
.event__c dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted-2);direction:ltr}
.event__c dd{margin:0;font-size:18px;font-weight:600}
.event__c small{color:var(--muted-2);font-size:13.5px;font-weight:400;display:block;margin-top:6px}
.tbd{font-family:var(--mono);font-size:11px;color:var(--amber);background:var(--surface-amber);
  border:1px solid rgba(232,179,58,.55);
  border-radius:6px;padding:2px 8px;direction:ltr;display:inline-block;margin-top:8px}

/* ---------- AI photo booth ----------
   Its own page, but built from the same tokens and the same .field / .drop /
   .btn parts as the booking sheet, so the two never drift apart visually. */
.booth{background:var(--surface-blue);position:relative;overflow:hidden;min-height:80vh}
.booth__col{width:min(100%,640px);margin-inline:auto;position:relative;z-index:1}
.booth__col .sec-head{max-width:none;text-align:center}
.booth__card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:clamp(22px,4vw,34px);margin-top:clamp(20px,3vw,30px)}
.booth__card .btn--lg{width:100%}
.booth__card .legal{margin-top:12px;text-align:center}

/* Chosen file: shown as the picture itself rather than a filename row — people
   need to see which photo they are about to send. */
.booth__preview{position:relative;border:1px solid var(--line-2);border-radius:13px;overflow:hidden;
  background:var(--ink-2);display:flex;justify-content:center}
.booth__preview img{display:block;max-width:100%;max-height:260px;object-fit:contain}
.booth__preview .file__x{position:absolute;inset-block-start:8px;inset-inline-end:8px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.drop.is-over{border-color:var(--green);background:var(--surface-green)}

.booth__result{text-align:center}
.booth__msg{color:var(--muted);font-size:15px;margin:12px 0 18px;line-height:1.7}
.booth__result img{display:block;width:100%;max-width:420px;margin:0 auto;border-radius:14px;
  border:1px solid var(--line-2);background:var(--ink-2)}
.booth__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.booth__left{margin-top:14px;font-size:13px;color:var(--muted-2)}
@media(max-width:520px){.booth__actions .btn{width:100%}}

/* ---------- FAQ ---------- */
/* the FAQ column is centered in the page; the Arabic inside it stays
   right-aligned. Container position and text alignment are separate concerns. */
.faq-col{width:min(100%,860px);margin-inline:auto}
.faq-col .sec-head{max-width:none}
.faq{border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;
  gap:16px;font-weight:600;font-size:17.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;color:var(--blue);font-family:var(--mono);
  font-size:22px;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-block:0 22px;color:var(--muted);font-size:16px;max-width:66ch}

/* ---------- Final CTA ---------- */
/* closing poster: fills the viewport, one centered composition.
   Block position (centered) and text direction (RTL) are separate concerns. */
.final{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);color:#fff;
  min-height:80vh;display:flex;align-items:center}
.final__inner{width:min(100%,1100px);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.final h2{width:min(100%,950px);max-width:none;margin-inline:auto;
  font-size:clamp(34px,6.4vw,88px);line-height:1.2;letter-spacing:-.015em;
  text-align:center}
.final h2 .mark--hl{padding-inline:.24em}
.final p{color:rgba(255,255,255,.9);width:min(100%,700px);margin-inline:auto;text-align:center;
  margin-block:clamp(22px,3vw,34px) clamp(30px,4vw,44px);
  font-size:clamp(17px,1.5vw,20px);max-width:none}
.final .btn{min-width:280px}
.final__meta{margin-top:clamp(24px,3vw,36px);font-family:var(--mono);font-size:12.5px;
  color:rgba(255,255,255,.78);direction:ltr;text-align:center}
@media(max-width:760px){
  .final{min-height:auto;padding-block:clamp(72px,14vw,88px) clamp(84px,16vw,100px)}
  .final h2{width:100%;font-size:clamp(36px,11.5vw,56px);line-height:1.24}
  .final p{width:100%}
  .final .btn{width:100%;max-width:360px;min-width:0}
}
.foot{background:var(--surface);border-top:1px solid var(--line-2);padding-block:34px;
  color:var(--muted-2);font-size:14px}
.foot__in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}

/* ---------- sticky mobile bar ---------- */
.sticky{position:fixed;inset-inline:0;inset-block-end:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line-2);box-shadow:0 -8px 24px rgba(15,74,125,.08);
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));display:none;align-items:center;gap:14px}
.sticky__p{display:flex;flex-direction:column;line-height:1.3}
.sticky__p b{font-family:var(--mono);color:var(--green);font-size:20px;direction:ltr}
.sticky__p small{color:var(--muted-2);font-size:11.5px}
.sticky .btn{margin-inline-start:auto;padding:13px 22px;font-size:15px}
@media(max-width:760px){.sticky{display:flex}body{padding-bottom:76px}}

/* ============================================================
   BOOKING FLOW (mockup — no backend)
   ============================================================ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(12px,4vw,48px);overflow-y:auto;background:rgba(5,35,65,.45);backdrop-filter:blur(6px)}
.modal[open]{display:flex}
.sheet{width:min(600px,100%);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.sheet__head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-block-end:1px solid var(--line)}
.sheet__head .logo{font-size:13px}
/* Close button: a fixed 42px square with the icon optically centred by the grid
   rather than by font metrics. flex:0 0 auto keeps the header height stable. */
.sheet__close{margin-inline-start:auto;flex:0 0 auto;
  width:42px;height:42px;padding:0;line-height:0;
  display:grid;place-items:center;
  border-radius:11px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.sheet__close svg{width:18px;height:18px;display:block}
.sheet__close:hover{color:var(--blue);border-color:var(--border-strong);background:var(--surface-blue)}
.sheet__close:active{background:#DCEDF8}
.sheet__close:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px;color:var(--blue)}
@media(max-width:520px){
  .sheet__close{width:44px;height:44px}
}

.steps{display:flex;gap:6px;padding:16px 22px 0}
.steps i{flex:1;height:3px;border-radius:99px;background:var(--line);transition:background .3s ease}
.steps i.on{background:var(--green)}
.step-label{padding:12px 22px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted-2);direction:ltr;display:flex;justify-content:space-between}
.step-label b{color:var(--blue)}

.sheet__body{padding:20px 22px 26px}
.sheet__body h3{font-size:23px;margin-bottom:8px}
.sheet__body .lede{color:var(--muted);font-size:15px;margin-bottom:22px}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);direction:ltr}
.field input{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;color:var(--bone);font-family:var(--ar);font-size:16px;transition:border-color .2s ease}
.field input::placeholder{color:var(--muted-2)}
.field input:focus{outline:none;border-color:var(--green)}
.field input[dir="ltr"]{font-family:var(--mono);font-size:15px}
.field .hint{font-size:12.5px;color:var(--muted-2)}

.sum{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:20px;background:var(--panel)}
.sum dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);direction:ltr}
.sum dd{margin:4px 0 0;font-size:15px;font-weight:600}
.sum__amt{direction:ltr;display:flex;align-items:baseline;gap:10px}
.sum .amt{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--green)}
.sum .was{font-family:var(--mono);font-size:14px;color:var(--muted-2);text-decoration:line-through}
.sum__coupon-line{color:var(--green);font-size:12.5px;font-weight:500;direction:ltr;text-align:end}
.sum__save{color:var(--green);font-size:12.5px;font-weight:600}

/* ---------- Plan chooser (modal step 01) ---------- */
.choice{margin-bottom:22px}
/* Unlike the other small labels in the sheet, these headings are Arabic, so
   they keep the Arabic face and the RTL flow of the sheet around them. */
.choice__h{display:block;font-family:var(--ar);font-size:13.5px;font-weight:600;
  letter-spacing:0;color:var(--muted);margin-bottom:10px}
.choice__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:430px){
  .choice__grid,.choice__grid--3{grid-template-columns:1fr}
  /* Stacked seat options would otherwise be three tall, mostly-empty rows and
     push the running total off screen. Laid out along the row instead. */
  .choice__grid--3 .opt--seat{flex-direction:row;align-items:center;flex-wrap:wrap;gap:9px}
  .choice__grid--3 .opt--seat .opt__badge{align-self:center}
  .choice__grid--3 .opt--seat .opt__price{margin-top:0;margin-inline-start:auto}
}
.choice__note{margin-top:10px;font-size:12.5px;color:var(--muted-2);line-height:1.6}

/* A radio in everything but tag name: exactly one is-on at a time, driven by
   aria-checked so the visual state and the accessible state cannot diverge. */
.opt{display:flex;flex-direction:column;gap:5px;text-align:start;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 15px;
  font-family:inherit;color:var(--bone);transition:border-color .2s ease,background .2s ease}
.opt:hover{border-color:var(--border-strong);background:var(--ink-2)}
.opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.opt.is-on{border-color:var(--green);background:var(--surface-green)}
.opt__en{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted-2);direction:ltr}
.opt__label{font-size:16px;font-weight:700}
.opt__note{font-size:12.5px;color:var(--muted);line-height:1.55}
.opt__price{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--green);
  direction:ltr;margin-top:2px}
.opt__badge{align-self:flex-start;font-family:var(--ar);font-size:11px;letter-spacing:0;
  font-weight:700;color:var(--green);background:var(--surface);border:1px solid rgba(24,174,105,.35);
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.opt--seat{gap:4px}
/* Only two of the three seat options carry a badge, so without this the option
   without one pulls its price a row higher than its neighbours. The grid already
   stretches every card to the same height; pushing the price to the bottom of
   that height puts all three prices on one line whatever sits above them. */
.opt--seat .opt__price{margin-top:auto;padding-top:6px}

.coupon{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:20px;background:var(--panel)}
.coupon__row{display:flex;gap:10px}
.coupon__row input{flex:1;min-width:0;background:var(--ink-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;color:var(--bone);font-family:var(--mono);font-size:14px;transition:border-color .2s ease}
.coupon__row input::placeholder{color:var(--muted-2);font-family:var(--ar)}
.coupon__row input:focus{outline:none;border-color:var(--green)}
.coupon__row input.has-error{border-color:var(--danger)}
.coupon__row .btn{flex:0 0 auto;padding-inline:18px;font-size:14px}
.coupon__msg{margin-top:10px;font-size:12.5px;color:var(--danger)}
.coupon__msg.is-success{color:var(--green)}
.coupon__applied{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--bone)}
.coupon__applied b{color:var(--green);font-family:var(--mono);direction:ltr}
.coupon__remove{font-size:12.5px;color:var(--muted-2);cursor:pointer;text-decoration:underline;flex:0 0 auto}
.coupon__remove:hover{color:var(--danger)}

.pay{border:1px solid rgba(24,174,105,.28);border-radius:14px;padding:18px;background:var(--surface-green)}
.pay__top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pay__logo{font-family:var(--en);font-weight:900;font-size:15px;color:var(--green);direction:ltr}
.pay__steps{margin-top:18px;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.pay__steps li{display:flex;gap:12px;font-size:15px;color:var(--muted);counter-increment:s}
.pay__steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;
  color:var(--green);background:var(--surface);border:1px solid rgba(24,174,105,.3);border-radius:7px;
  width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto;direction:ltr}

.drop{border:1px dashed var(--line-2);border-radius:14px;padding:26px 18px;text-align:center;
  cursor:pointer;transition:border-color .2s ease,background .2s ease}
.drop:hover{border-color:var(--green-bright);background:var(--surface-green)}
.drop svg{width:26px;height:26px;color:var(--green);margin-bottom:8px}
.drop b{display:block;font-size:15px}
.drop span{font-family:var(--mono);font-size:11px;color:var(--muted-2);direction:ltr}
.file{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:12px;
  padding:12px 14px;background:var(--panel)}
.file__ic{width:34px;height:34px;border-radius:9px;background:var(--surface-green);color:var(--green);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;direction:ltr}
.file b{font-size:14px;display:block;direction:ltr;font-family:var(--mono)}
.file small{color:var(--muted-2);font-size:11.5px;font-family:var(--mono);direction:ltr}
.file__x{margin-inline-start:auto;color:var(--muted-2);cursor:pointer;font-size:18px}
.file__x:hover{color:var(--danger)}

.state-screen{text-align:center;padding-block:14px}
.state-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 20px;font-size:32px}
.state-ic--wait{border:2px solid rgba(232,179,58,.6);color:var(--amber);
  background:var(--surface-amber)}
.state-ic--ok{border:2px solid var(--green);color:var(--green-ink);background:var(--green)}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;border-radius:999px;padding:7px 14px;direction:ltr;margin-bottom:18px}
.status--wait{color:var(--amber);border:1px solid rgba(232,179,58,.55);background:var(--surface-amber)}
.status--ok{color:var(--green);border:1px solid rgba(24,174,105,.4);background:var(--surface-green)}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.state-screen h3{font-size:26px;margin-bottom:10px}
.state-screen p{color:var(--muted);font-size:15.5px;max-width:44ch;margin-inline:auto}

.ticket{margin-top:24px;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;text-align:start}
.ticket__top{background:var(--green);color:var(--green-ink);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.ticket__top b{font-family:var(--en);font-weight:900;font-size:14px;direction:ltr}
.ticket__top span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;direction:ltr}
.ticket__rows{padding:6px 18px 16px;background:var(--panel)}
.ticket__rows div{display:flex;justify-content:space-between;gap:14px;padding-block:12px;
  border-block-end:1px solid var(--line)}
.ticket__rows div:last-child{border-block-end:0}
.ticket__rows dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted-2);direction:ltr}
.ticket__rows dd{margin:0;font-size:15px;font-weight:600;text-align:end}
.ticket__rows .ref{font-family:var(--mono);color:var(--green);direction:ltr}

.sheet__foot{padding:18px 22px 24px;border-block-start:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px}
.sheet__foot .btn{width:100%}
.sheet__foot .back{font-size:14px;color:var(--muted-2);cursor:pointer;text-align:center}
.sheet__foot .back:hover{color:var(--blue)}
.legal{font-size:12.5px;color:var(--muted-2);text-align:center;line-height:1.7}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .wordmark .under path{stroke-dashoffset:0}
  .stage__svg line,.orbit{opacity:1;animation:none}
}

/* ---------- production additions (form validation + states) ---------- */
.field .msw-err{font-size:12.5px;color:var(--danger);min-height:0}
.field input.has-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(196,50,31,.10)}
.sheet__error{margin:0 22px 14px;padding:11px 14px;border-radius:10px;
  border:1px solid rgba(196,50,31,.35);background:var(--surface-danger);
  color:var(--danger-ink);font-size:14px}
.sheet__error[hidden]{display:none}
.msw-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ticket__rows dd{unicode-bidi:plaintext}
.spk__c img{width:100%;height:100%;object-fit:cover;display:block}
.spk__photo{aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--panel)}
.msw-note-inline{font-size:14px;color:var(--muted-2)}

/* ---------- speakers: every field centred on the card axis ----------------
   Alignment and direction are separate concerns: the blocks are centred, while
   `unicode-bidi:plaintext` lets each value keep the reading direction of its
   own content (English name -> LTR, Arabic role/bio -> RTL). Applies to any
   speaker added later from the admin, not just the current ones. */
.spk__c{align-items:center;text-align:center}
.spk__c > *{width:100%}
.spk__body{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.spk__c h3{text-align:center;unicode-bidi:plaintext;margin-inline:auto;max-width:24ch}
.spk__role,.spk__company{color:var(--muted);font-size:16px;text-align:center;
  unicode-bidi:plaintext;margin-inline:auto;max-width:32ch}
.spk__company{margin-top:2px}
.spk__bio{color:var(--muted);font-size:16px;margin-top:10px;line-height:1.75;
  text-align:center;unicode-bidi:plaintext;margin-inline:auto;max-width:42ch}
.spk__c ul{align-items:center;width:100%;max-width:38ch;margin-inline:auto}
.spk__c li{justify-content:center;text-align:center;unicode-bidi:plaintext}
.spk__c .ph-tag{margin-inline:auto}
@media(max-width:760px){
  .spk__c h3,.spk__role,.spk__company{max-width:100%}
  .spk__bio,.spk__c ul{max-width:44ch}
}

/* ---------- Experience heading: one line on phones ----------------------
   The section head keeps its normal measure everywhere else; only this
   heading is tuned down on mobile so the sentence reads as a single line
   inside the existing page gutter. No nowrap: the heading is admin-editable,
   so a longer sentence must be allowed to wrap rather than overflow. */
@media(max-width:767px){
  #experience .sec-head{max-width:none;width:100%}
  /* 4.6vw keeps the sentence on one line down to 360px even when the web font
     has not loaded and the wider Segoe UI fallback is used. */
  #experience .sec-head h2{font-size:clamp(16px,4.6vw,22px);line-height:1.4;
    letter-spacing:-.005em}
}

/* ---------- support row + payment link (both admin-configurable) ---------
   Secondary by design: a hairline row that reads as help, not as an action
   competing with the primary booking CTA. The link uses the campaign's own
   signal green rather than any external brand colour. */
.support{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 8px;margin:0 0 18px;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--surface-blue);
  color:var(--muted);font-size:14px;line-height:1.7;text-align:center}
.support__link{display:inline-flex;align-items:center;gap:7px;
  color:var(--green);font-weight:600;min-height:40px;padding:4px 6px;border-radius:8px}
.support__link:hover{text-decoration:underline}
.support__link svg{width:15px;height:15px;flex:0 0 auto}
.state-screen .support{margin:22px 0 0}

/* full-width payment CTA inside the InstaPay block */
.pay__cta{width:100%;margin-top:16px}
.pay__cta svg{width:17px;height:17px;flex:0 0 auto}

@media(max-width:430px){
  .support{font-size:13.5px;padding:11px 12px;gap:3px 6px}
  .pay__cta{padding-inline:18px}
}

/* rate-limit countdown: digits stay LTR inside the Arabic warning */
.msw-count{direction:ltr;unicode-bidi:isolate;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================
   MODAL COMFORT PASS
   Same identity, calmer surfaces. The palette is re-declared as
   custom properties on the modal (and on the shared state/ticket
   blocks used by the confirmation page), so the landing page
   keeps the approved contrast untouched.
   ============================================================ */
.modal,
.state-screen{
  --ink:#FFFFFF;        /* sheet ground */
  --ink-2:#F7FBFA;
  --panel:#FFFFFF;      /* inner panels */
  --panel-2:#EAF5FB;
  --line:#E4EFF4;       /* hairlines, not outlines */
  --line-2:#D9E8EE;
  --muted:#5A6875;      /* secondary text */
  --muted-2:#626F7A;    /* tertiary / help text */
}

/* ---------- structure: fewer hard edges ---------- */
.modal{background:rgba(5,35,65,.45)}
.sheet{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.sheet__head{padding:20px 24px}
.sheet__body{padding:22px 24px 26px}
.sheet__foot{padding:20px 24px 24px;gap:14px}
.steps{padding:16px 24px 0}
.step-label{padding:14px 24px 0}
.sheet__error{margin:14px 24px 0}

/* ---------- typography rhythm ---------- */
.sheet__body h3{font-size:22px;letter-spacing:-.01em}
.sheet__body .lede{color:var(--muted);margin-bottom:24px}
.field{margin-bottom:18px;gap:9px}
.field label{color:var(--text-blue)}
.field .hint{color:var(--muted-2)}

/* ---------- inputs: softer, and immune to autofill's blue wash ---------- */
.field input{background:var(--surface);border-color:var(--border-strong);min-height:48px;border-radius:12px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.field input::placeholder{color:var(--muted-2)}
.field input:hover{border-color:#A9CBE0}
.field input:focus{border-color:var(--blue-bright);background:var(--surface);outline:none;
  box-shadow:0 0 0 3px rgba(35,133,232,.12)}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--bone);
}

/* ---------- payment panel: green as a tint, not a surface ---------- */
.pay{border-color:rgba(24,174,105,.24);background:var(--surface-green);padding:20px}
.pay__top{margin-bottom:16px}
.pay__steps li{color:var(--muted)}
.pay__steps li::before{border-color:rgba(24,174,105,.3)}
.sum{background:var(--surface-blue);border-color:#CFE4F0}

/* ---------- upload ---------- */
.drop{border:1.5px dashed #9FCFEA;background:var(--surface-blue);color:var(--blue-deep)}
.drop:hover{border-color:var(--green-bright);background:var(--surface-green)}
.drop span{color:var(--muted-2)}
.file{background:var(--surface-blue);border-color:#CFE4F0}

/* ---------- pending state: calm, not alarming ---------- */
.state-ic--wait{border:2px solid rgba(232,179,58,.6);background:var(--surface-amber);color:var(--amber)}
.status--wait{color:var(--amber);border-color:rgba(232,179,58,.55);background:var(--surface-amber)}
.status--ok{border-color:rgba(24,174,105,.4);background:var(--surface-green)}
.state-screen p{color:var(--muted)}

/* ---------- ticket ---------- */
/* The ticket is a light panel, but it sits inside the gradient CTA block whose
   colour is white. The row values carry no colour of their own, so the text
   colour belongs with the background that makes it necessary - otherwise every
   value inherits white and disappears. `.ref` and the scan-page states set
   their own colour on the element, so they still win over this. */
.ticket{border-color:var(--line)}
.ticket__rows{background:var(--surface-blue);color:var(--bone)}
.ticket__rows div{border-block-end-color:var(--line)}

/* ---------- support: secondary by design, and centred as one line ---------- */
.support{display:block;width:100%;margin-inline:auto;
  direction:rtl;text-align:center;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-blue);color:var(--muted);
  font-size:14px;line-height:1.9}
.support__link{display:inline-flex;align-items:center;vertical-align:middle;gap:7px;
  color:var(--green);font-weight:600;min-height:40px;padding:2px 6px;border-radius:8px}
.support__link:hover{color:var(--green-deep);text-decoration:underline}
.sheet__body > .support:first-child{margin-bottom:22px}
/* `auto` on the inline sides, or the 44ch measure inherited from
   `.state-screen p` leaves the block flush against the RTL edge. */
.state-screen .support{margin:24px auto 0;max-width:none}

/* ---------- footer actions stay quieter than the primary CTA ---------- */
.sheet__foot .btn--ghost{border-color:var(--border-strong);color:var(--blue)}
.sheet__foot .btn--ghost:hover{border-color:var(--blue);color:var(--blue-deep);background:var(--surface-blue)}
.sheet__foot .back{color:var(--muted-2)}
.legal{color:var(--muted-2)}

@media(max-width:430px){
  .sheet__head,.sheet__body,.sheet__foot,.steps,.step-label{padding-inline:18px}
  .sheet__error{margin-inline:18px}
  .support{padding:12px 14px;font-size:13.5px}
}

/* ---------- BEFORE column: readable, still the weaker half of the pair ----
   Only the BEFORE side is touched. On the light theme it reads at ≈4.7:1 on the
   tinted section while AFTER sits at ≈14.7:1 in the main dark text colour — so
   the hierarchy is unchanged and the text is simply legible. The × marker is
   deliberately lighter than the text (≈3.8:1, a non-text mark that duplicates
   the strikethrough). */
.trans__side--from li{color:#616E79}
.trans__side--from li span{text-decoration-color:#8B99A3;text-decoration-thickness:1px}
.trans__side--from li::before{color:#6F7D88}
.trans__side--from .tag{color:#616E79}


/* ============================================================
   LIGHT WORKSHOP THEME — component pass
   Everything above keeps its original structure; this layer only
   re-dresses surfaces, borders, elevation and accent colours for
   the light blue/green identity. No layout or behaviour changes.
   ============================================================ */

/* ---------- hero: soft poster ground ---------- */
.hero{
  background:
    radial-gradient(70% 60% at 88% 0%,rgba(42,198,123,.10),transparent 62%),
    linear-gradient(180deg,var(--surface-blue) 0%,rgba(234,245,251,0) 64%),
    var(--bg)}
.stage__svg line{stroke:#BFD8E6}
.wordmark .under path{stroke:var(--green-bright)}

/* ---------- editorial accents ---------- */
.statement .sub{border-inline-start-color:var(--blue-bright)}

/* ---------- cards ---------- */
.map__detail{background:var(--surface);border-color:var(--line-2);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}

/* ---------- green slab keeps white type on its own gradient ---------- */
.slab h3{color:inherit}

/* ---------- speakers ---------- */
.spk__photo{border-color:var(--line-2);background:var(--surface-blue);box-shadow:var(--shadow-sm)}
.spk__c h3::after{content:"";display:block;width:44px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green-bright));margin:12px auto 0}

/* ---------- event details: info cards, alternating blue / green ---------
   The row keeps the same flex structure and the same wrap behaviour; only the
   separators become card edges. The 820px stack is re-declared below because
   this block sits after the original media query. */
.event{border-block:0;gap:14px}
.event__c{flex:1 1 200px;border-inline-start:0;border:1px solid var(--line-2);
  border-radius:var(--radius-md);background:var(--surface-blue);
  padding:22px;box-shadow:var(--shadow-sm)}
.event__c:first-child{padding-inline-start:22px}
.event__c:nth-child(even){background:var(--surface-green)}
.event__c .ico{color:var(--blue)}
.event__c:nth-child(even) .ico{color:var(--green)}
@media(max-width:820px){
  .event__c,.event__c:first-child{flex-basis:100%;padding-inline-start:22px}
  .event__c:last-child{border-block-end:1px solid var(--line-2)}
}

/* ---------- FAQ: white cards, blue questions ---------- */
.faq{border-block-start:0;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:background .2s ease,border-color .2s ease}
.faq details[open]{background:var(--surface-blue);border-color:var(--border-strong)}
.faq summary{padding:20px 22px;color:var(--text-blue)}
.faq details[open] summary::after{color:var(--green)}
.faq p{padding:0 22px 20px;color:var(--muted)}

/* ---------- final CTA: the one gradient block on the page ---------- */
.final .dots{background-image:radial-gradient(rgba(255,255,255,.34) 1px,transparent 1.3px)}
.final h2{color:#fff}
.final h2 .mark--hl{background:#fff;color:var(--blue)}
.final .btn--primary{background:#fff;color:var(--blue);
  box-shadow:0 10px 26px -12px rgba(4,26,48,.45)}
.final .btn--primary:hover{background:#fff;color:var(--blue-deep);transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(4,26,48,.5)}
.final .btn--primary:active{background:#F2F7FC;color:var(--blue-deep);transform:translateY(0)}
.final .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.final .btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;box-shadow:none}
.final :focus-visible{outline-color:#fff}

/* confirmation page: the ticket sits on a white card so it stays readable
   on top of the gradient */
.final .state-screen{background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-lg)}
.final .state-screen h3{color:var(--text-blue)}
.final .state-screen p{color:var(--muted)}
.final .state-screen .btn--primary{background:linear-gradient(135deg,var(--blue) 0%,var(--green) 100%);
  color:#fff;box-shadow:0 8px 22px -10px rgba(15,74,125,.55)}
.final .state-screen .btn--ghost{background:var(--surface);color:var(--blue);
  border-color:var(--border-strong)}

/* ---------- booking modal: remaining surfaces ---------- */
.steps i{background:#DCE9F0}
.coupon{background:var(--surface-green);border-color:rgba(24,174,105,.22)}
.coupon__row input{background:var(--surface);border-color:var(--border-strong);color:var(--bone)}
.coupon__row input:focus{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(35,133,232,.12)}
.coupon__applied{color:var(--bone)}
.drop b{color:var(--text-blue)}
.drop{min-height:0;border-radius:14px}

/* `.file` and `.coupon__applied` set display:flex, which overrides the plain
   `hidden` attribute the JS toggles — so both rows painted even while empty.
   Pre-existing, and far more obvious on the light theme. Visual fix only: the
   JS keeps driving the same `hidden` attribute. */
.file[hidden],
.coupon__applied[hidden]{display:none}

/* ============================================================
   MICRO TRANSITIONS — section reveals
   Opt-in by design: the hidden start state only applies once the
   script adds `.msw-anim` to <html>. With JS off, blocked, or
   erroring — and under prefers-reduced-motion, where the class is
   never added — every section renders exactly as it does now,
   fully visible. Nothing here changes layout: only opacity and a
   vertical translate, so no element can create horizontal overflow.
   ============================================================ */
.msw-anim .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform}
.msw-anim .reveal.is-in{opacity:1;transform:none;will-change:auto}

/* Rows and cards travel a shorter distance than full-width blocks —
   a long list sliding 18px each reads as movement, not as arrival.
   `:not(.is-in)` is load-bearing: this block sits after the `.is-in` rule and
   carries the same specificity, so without it these rows would keep the 12px
   offset for good instead of settling back to their real position. */
.msw-anim .out li.reveal:not(.is-in),
.msw-anim .faq details.reveal:not(.is-in),
.msw-anim .event__c.reveal:not(.is-in),
.msw-anim .rung.reveal:not(.is-in){transform:translateY(12px)}

/* The reduced-motion block above already neutralises every transition;
   this keeps the reveal state safe even if the class is somehow applied. */
@media(prefers-reduced-motion:reduce){
  .msw-anim .reveal{opacity:1;transform:none}
}

/* ============================================================
   SaaS GAME MAP — intro sequence
   Only active while the script has `.is-intro` on the board. The
   node state itself is untouched: the intro drives the same
   select() a click drives, so aria-selected, the detail panel and
   the `.hot` line flags are all the existing state machine's.
   What this layer does is narrow the LINE emphasis for the length
   of the intro — select() marks every line touching the selected
   node, and lighting seven of them per hop would turn the whole
   graph green instead of tracing a path around it.
   ============================================================ */

/* the `.hot` fan is held at rest colour while the intro runs... */
.map__board.is-intro .map__svg line.hot{stroke:var(--line-2);stroke-width:1}

/* ...and only the perimeter edge for the current hop reads as green.
   `!important` is needed on opacity alone: drawMap() writes .85/.4 as an
   inline style on every line, which a class cannot otherwise beat. */
.map__board.is-intro .map__svg line.edge-on{
  stroke:var(--green);stroke-width:2;opacity:1!important}
.map__board.is-intro .map__svg line{
  transition:stroke .26s ease,stroke-width .26s ease,opacity .26s ease}

/* Active node keeps its existing green treatment and gains a soft glow for
   the duration of the walk — the ring it already has, plus a low drop. */
.map__board.is-intro .node{transition:border-color .26s ease,color .26s ease,
  background .26s ease,box-shadow .26s ease}
.map__board.is-intro .node[aria-selected="true"]{
  box-shadow:0 0 0 5px rgba(24,174,105,.10),0 8px 24px rgba(24,174,105,.20)}

/* The board is display:none below 860px (the accordion takes over), so the
   intro never runs there. This is a safety net for the narrow band where the
   board is shown on a short viewport: same sequence, quieter glow. */
@media(max-width:1024px){
  .map__board.is-intro .node[aria-selected="true"]{
    box-shadow:0 0 0 4px rgba(24,174,105,.09),0 6px 16px rgba(24,174,105,.14)}
}


/* ---------- QR ticket scan page ------------------------------------------
   Same shapes as the confirmation screen; only the refused state and the code
   itself are new, so a scan at the door looks like the rest of the campaign. */
.state-ic--bad{border:2px solid rgba(196,50,31,.45);color:var(--danger);background:var(--surface-danger)}
.status--bad{color:var(--danger);border:1px solid rgba(196,50,31,.4);background:var(--surface-danger)}
/* Beats `.final .state-screen p`, which would otherwise grey this line out. */
.final .state-screen p.msw-scan__flash{margin-top:14px;font-weight:600;color:var(--green)}
.msw-scan__ok{color:var(--green)}
.msw-scan__bad{color:var(--danger)}
.msw-scan__door{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.msw-scan__hint{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.msw-scan__qr{margin-top:26px}
.msw-scan__qr svg{width:min(200px,58vw);height:auto;display:block;margin-inline:auto;
  border:10px solid #fff;border-radius:14px;box-shadow:var(--shadow-sm)}
.msw-scan__qr p{margin-top:10px;font-size:13.5px;color:var(--muted-2)}

/* ---------- phone field: country code + number ---------------------------
   One control to the eye: the select and the input sit in a single bordered
   row, so the pair reads as the phone field rather than as two fields. The
   select is capped so a long country name cannot push the number out. */
.phone{display:flex;gap:8px;align-items:stretch}
.phone__cc{flex:0 0 auto;width:min(42%,190px);direction:ltr;
  font-family:var(--mono);font-size:13px;
  border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);
  color:var(--bone);padding:0 10px;cursor:pointer;
  text-overflow:ellipsis}
.phone__cc:focus{border-color:var(--blue-bright);outline:none;
  box-shadow:0 0 0 3px rgba(35,133,232,.12)}
.phone .field input,
.phone input{flex:1 1 auto;min-width:0}
@media(max-width:420px){.phone__cc{width:40%;font-size:12px}}