/* ============================================================================
   landing.css - public marketing page (app/views/landing.php)
   Self-contained: the app's style.css is NOT loaded here, so the landing page
   can carry its own identity without inheriting the ERP shell's tokens.

   Palette: navy / white / cool grey. Light is the base; the ink theme
   redefines token VALUES twice - once for the OS preference (guarded so an
   explicit light choice still wins) and once for the [data-theme] stamp.
   ========================================================================== */

:root{
  --paper:#EDF1F6;
  --plate:#FFFFFF;
  --plate-2:#E4EAF2;
  --navy:#0C2340;
  --ink:#0C2340;
  --ink-2:#3D5474;
  --ink-3:#6B7F9B;
  --rule:#C9D4E2;
  --rule-soft:#DDE4EE;
  --blue:#1B5FA8;
  --blue-lift:#2A7AC9;
  --on-navy:#FFFFFF;
  --on-navy-2:#A9BDD6;
  --on-navy-3:#71879F;
  --navy-rule:#22456F;
  --cta-bg:#0C2340;
  --cta-fg:#FFFFFF;
  --rail:rgba(12,35,64,.10);
  --grain-opacity:.30;
  --wash-a:rgba(27,95,168,.13);
  --wash-b:rgba(12,35,64,.07);
  --plate-shadow:0 1px 0 rgba(12,35,64,.05), 0 20px 46px -24px rgba(12,35,64,.40);
  --focus:#1B5FA8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#081726;
    --plate:#0E2338;
    --plate-2:#142E48;
    --navy:#102A42;
    --ink:#F0F4F9;
    --ink-2:#B7C6DA;
    --ink-3:#7F94AE;
    --rule:#1F3B58;
    --rule-soft:#17304A;
    --blue:#5AA3E8;
    --blue-lift:#84BEF3;
    --navy-rule:#28496E;
    --cta-bg:#5AA3E8;
    --cta-fg:#04121F;
    --rail:rgba(240,244,249,.11);
    --grain-opacity:.16;
    --wash-a:rgba(90,163,232,.10);
    --wash-b:rgba(90,163,232,.05);
    --plate-shadow:0 1px 0 rgba(255,255,255,.03), 0 20px 46px -22px rgba(0,0,0,.75);
    --focus:#84BEF3;
  }
}
:root[data-theme="dark"]{
  --paper:#081726;
  --plate:#0E2338;
  --plate-2:#142E48;
  --navy:#102A42;
  --ink:#F0F4F9;
  --ink-2:#B7C6DA;
  --ink-3:#7F94AE;
  --rule:#1F3B58;
  --rule-soft:#17304A;
  --blue:#5AA3E8;
  --blue-lift:#84BEF3;
  --navy-rule:#28496E;
  --cta-bg:#5AA3E8;
  --cta-fg:#04121F;
  --rail:rgba(240,244,249,.11);
  --grain-opacity:.16;
  --wash-a:rgba(90,163,232,.10);
  --wash-b:rgba(90,163,232,.05);
  --plate-shadow:0 1px 0 rgba(255,255,255,.03), 0 20px 46px -22px rgba(0,0,0,.75);
  --focus:#84BEF3;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader","IBM Plex Sans Arabic","Iowan Old Style",Georgia,serif;
  font-size:17px;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
img{max-width:100%;}

/* ---------- ground: drafting rails, paper grain, section washes ----------
   Two hairlines marking the measure of the content column, the way a drafted
   sheet does - not a repeating grid, which competes with the screenshots. */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--grain-opacity);
  background-repeat:repeat;background-size:160px 160px;
}
.rails{position:fixed;inset:0;pointer-events:none;z-index:0;}
.rails i{position:absolute;top:0;bottom:0;width:1px;background:var(--rail);display:block;}
.rails i:nth-child(1){left:calc(50% - 570px);}
.rails i:nth-child(2){left:calc(50% + 570px);}
@media (max-width:1220px){.rails{display:none;}}

::selection{background:var(--navy);color:#FFFFFF;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px;}
.btn:focus-visible{border-radius:12px;}

/* ---------- type roles ---------- */
.disp{
  font-family:"Bricolage Grotesque","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
  font-weight:800;letter-spacing:-.022em;line-height:1.03;text-wrap:balance;margin:0;
}
.mono{font-family:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0;
}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0;}
.landing p{margin:0;}

/* ---------- shell ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px;}
.band{padding:88px 0;border-top:1px solid var(--rule);position:relative;overflow-x:clip;}
.coord{position:absolute;top:-1px;left:0;right:0;height:0;display:flex;justify-content:space-between;pointer-events:none;}
.coord span{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10px;letter-spacing:.14em;
  color:var(--ink-3);background:var(--paper);padding:0 10px;transform:translateY(-50%);
}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:44px;}
.head h2{font-size:clamp(30px,4vw,44px);}
.head .lede{font-size:18px;}

/* ============================================================ HERO */
.hero{position:relative;overflow:hidden;padding:0 0 76px;}
.hero::before{
  content:"";position:absolute;top:-360px;inset-inline-end:-300px;width:1100px;height:1100px;
  background:radial-gradient(circle,var(--wash-a) 0%,transparent 64%);
  pointer-events:none;
}
#pricing::before{
  content:"";position:absolute;top:-140px;inset-inline-start:-420px;width:1100px;height:1100px;
  background:radial-gradient(circle,var(--wash-b) 0%,transparent 62%);
  pointer-events:none;z-index:-1;
}
#industries::before{
  content:"";position:absolute;bottom:-260px;inset-inline-end:-380px;width:960px;height:960px;
  background:radial-gradient(circle,var(--wash-b) 0%,transparent 62%);
  pointer-events:none;z-index:-1;
}
.hero-inner{position:relative;padding-top:34px;}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:56px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
/* The mark carries the wordmark, so it is sized like a masthead logo rather
   than an icon. Two files: navy lettering on paper, white lettering on ink -
   one mark on the wrong ground loses its "EAGLES STORES" line entirely. */
.brand .mark{height:clamp(48px,5.2vw,68px);width:auto;display:block;}
.brand .mark-on-ink{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand .mark-on-paper{display:none;}
  :root:not([data-theme="light"]) .brand .mark-on-ink{display:block;}
}
:root[data-theme="dark"] .brand .mark-on-paper{display:none;}
:root[data-theme="dark"] .brand .mark-on-ink{display:block;}
.brand b{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;}
/* Sized against the mark, not against the small tracked labels elsewhere: at
   11px the descriptor read as a caption stuck to the logo rather than as the
   other half of the lockup. */
.brand .eyebrow{
  font-size:clamp(15px,1.5vw,19px);font-weight:600;letter-spacing:.2em;color:var(--ink);
}
.brand .sep{width:1px;height:clamp(26px,2.6vw,34px);background:var(--rule);}
.navlinks{display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
/* :not(.btn) matters. A plain nav link is a word with a rule under it; the
   Log in button is a button. Letting the link rule reach it repainted its
   label in link ink - dark type on the navy fill - and its 2px underline
   padding pushed the label off the button's vertical centre. */
.navlinks a:not(.btn){
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
}
.navlinks a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--blue);}

.hero-grid{display:grid;grid-template-columns:1fr;gap:38px;}
h1.disp{font-size:clamp(40px,6.2vw,76px);}
.hero-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tick{width:22px;height:1px;background:var(--blue);}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px;}

/* Buttons are the one place the drafted sheet relaxes: soft edges and a low
   shadow, so the call to action reads as something to press rather than
   another ruled box. */
.btn{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:13px;letter-spacing:.04em;
  text-decoration:none;padding:14px 26px;border:1px solid var(--cta-bg);border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  transition:transform .18s ease,background .18s ease,color .18s ease,
             border-color .18s ease,box-shadow .18s ease;
}
.btn-sm{padding:11px 20px;font-size:12px;border-radius:10px;}
.btn-solid{
  background:var(--cta-bg);color:var(--cta-fg);
  box-shadow:0 1px 2px rgba(12,35,64,.16), 0 8px 20px -10px rgba(12,35,64,.55);
}
.btn-solid:hover{
  background:var(--blue-lift);border-color:var(--blue-lift);color:#FFFFFF;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(27,95,168,.20), 0 16px 30px -12px rgba(27,95,168,.60);
}
.btn-solid:active{transform:translateY(0);box-shadow:0 1px 2px rgba(12,35,64,.18);}
.btn-ghost{border-color:var(--rule);color:var(--ink-2);background:transparent;}
.btn-ghost:hover{
  border-color:var(--cta-bg);color:var(--ink);transform:translateY(-2px);
  box-shadow:0 8px 18px -12px rgba(12,35,64,.55);
}
.btn-ghost:active{transform:translateY(0);box-shadow:none;}
:root[data-theme="dark"] .btn-solid{box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(90,163,232,.55);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-solid{box-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(90,163,232,.55);}
}

/* ============================================================ PLATE */
.plate{background:var(--plate);border:1px solid var(--rule);box-shadow:var(--plate-shadow);overflow:hidden;}
.plate img{display:block;width:100%;height:auto;}
.plate-cap{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--rule-soft);padding:11px 16px;
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:var(--plate-2);
}
.plate-cap b{color:var(--ink-2);font-weight:500;}
.landing figure{margin:0;}

/* ============================================================ CHAIN */
.chainband{background:var(--navy);color:var(--on-navy);padding:80px 0;position:relative;}
.chainband .eyebrow{color:var(--on-navy-3);}
.chainband h2{color:var(--on-navy);}
.chainband .lede{color:var(--on-navy-2);}
.chain{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border:1px solid var(--navy-rule);}
.leg{
  padding:24px 16px 26px;border-inline-end:1px solid var(--navy-rule);
  display:flex;flex-direction:column;gap:9px;position:relative;
  opacity:0;transform:translateY(10px);
}
.leg:last-child{border-inline-end:0;}
.leg .no{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10px;letter-spacing:.14em;color:var(--on-navy-3);}
.leg .nm{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em;color:var(--on-navy);}
.leg .dt{font-size:13px;line-height:1.45;color:var(--on-navy-2);font-weight:300;}
.leg::after{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--navy-rule);}
.leg .dot{
  position:absolute;inset-inline-start:16px;top:15px;width:5px;height:5px;border-radius:50%;
  background:#5AA3E8;transform:translateY(-2px);
}
.leg.end .dot{background:#FFFFFF;}
.leg.end .nm{color:#84BEF3;}
.chain.revealed .leg{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease;}
.chain.revealed .leg:nth-child(1){transition-delay:.00s}
.chain.revealed .leg:nth-child(2){transition-delay:.05s}
.chain.revealed .leg:nth-child(3){transition-delay:.10s}
.chain.revealed .leg:nth-child(4){transition-delay:.15s}
.chain.revealed .leg:nth-child(5){transition-delay:.20s}
.chain.revealed .leg:nth-child(6){transition-delay:.25s}
.chain.revealed .leg:nth-child(7){transition-delay:.30s}
.chain.revealed .leg:nth-child(8){transition-delay:.35s}
.chain.revealed .leg:nth-child(9){transition-delay:.40s}
.chainfoot{
  margin-top:22px;font-size:15px;color:var(--on-navy-2);max-width:74ch;
  border-inline-start:2px solid #5AA3E8;padding-inline-start:16px;
}
@media (prefers-reduced-motion: reduce){
  .leg{opacity:1;transform:none;}
  .chain.revealed .leg{transition:none;}
  .btn,.plate,.ind{transition:none !important;}
}

/* ============================================================ SOUNDINGS */
.soundings{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);background:var(--plate);}
.sound{padding:28px 22px;border-inline-end:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:6px;}
.sound:last-child{border-inline-end:0;}
.sound .n{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-weight:700;
  font-size:clamp(26px,3.6vw,38px);letter-spacing:-.03em;color:var(--navy);
}
:root[data-theme="dark"] .sound .n{color:var(--ink);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sound .n{color:var(--ink);}}
.sound .l{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.sound .s{font-size:14px;color:var(--ink-2);}

/* ============================================================ INDUSTRIES */
.inds{display:grid;grid-template-columns:1fr;border:1px solid var(--rule);background:var(--plate);}
.ind{
  padding:28px 26px 30px;border-bottom:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:10px;position:relative;
  border-inline-start:3px solid transparent;transition:border-color .2s ease,background .2s ease;
}
.ind:hover{border-inline-start-color:var(--blue);background:var(--plate-2);}
.ind h3{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.015em;margin:0;}
.ind p{font-size:15px;color:var(--ink-2);}
.ind .tagline{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.ind.soon{background:var(--plate-2);}
.ind.soon .tagline{color:var(--blue);}

/* ============================================================ FEATURE ROWS */
.rows{display:flex;flex-direction:column;gap:76px;}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center;}
.row-txt{display:flex;flex-direction:column;gap:14px;}
.row-txt h3{
  font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;
  font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance;
}
.row-txt p{color:var(--ink-2);max-width:52ch;}
.speclist{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid var(--rule-soft);}
.speclist div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;color:var(--ink-2);}
.speclist code{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:11px;color:var(--blue);letter-spacing:.04em;flex:0 0 auto;padding-top:3px;}

/* ============================================================ PRICING */
.tiers{display:grid;grid-template-columns:1fr;border:1px solid var(--rule);background:var(--plate);}
.tier{padding:34px 28px 32px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:20px;position:relative;}
.tier:last-child{border-bottom:0;}
.tier.feature{background:var(--plate-2);}
.tier-tag{
  position:absolute;top:0;inset-inline-end:0;background:var(--navy);color:#FFFFFF;
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 12px;
}
:root[data-theme="dark"] .tier-tag{background:var(--blue);color:#04121F;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tier-tag{background:var(--blue);color:#04121F;}}
.tier h3{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0;}
.tier .who{font-size:14.5px;color:var(--ink-3);margin-top:-12px;min-height:3.3em;}
.price{display:flex;align-items:baseline;gap:8px;}
.price .amt{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-weight:700;font-size:40px;letter-spacing:-.04em;color:var(--navy);}
:root[data-theme="dark"] .price .amt{color:var(--ink);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .price .amt{color:var(--ink);}}
.price .per{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:12px;color:var(--ink-3);letter-spacing:.06em;}
.price-alt{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;margin-top:-14px;}
.meters{display:flex;flex-direction:column;border-top:1px solid var(--rule-soft);}
.meters div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:14px;color:var(--ink-2);}
.meters b{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-weight:500;font-size:12.5px;color:var(--ink);}
.inc{display:flex;flex-direction:column;gap:7px;font-size:14.5px;color:var(--ink-2);}
.inc span{display:flex;gap:10px;align-items:flex-start;}
.inc span::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;background:var(--blue);}
.inc span.off{color:var(--ink-3);}
.inc span.off::before{background:var(--rule);}

/* ============================================================ TABLE */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--plate);}
.landing table{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px;}
.landing th,.landing td{padding:12px 18px;text-align:start;border-bottom:1px solid var(--rule-soft);}
.landing thead th{
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;font-weight:500;background:var(--navy);border-bottom:1px solid var(--navy);
}
.landing tbody th{font-weight:400;color:var(--ink-2);}
.landing td{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:13px;color:var(--ink);}
.landing td.no{color:var(--ink-3);}
.landing tbody tr:last-child th,.landing tbody tr:last-child td{border-bottom:0;}
.landing tr.rule-row th,.landing tr.rule-row td{background:var(--plate-2);}

/* ============================================================ CARDS */
.two{display:grid;grid-template-columns:1fr;gap:28px;}
.card{border:1px solid var(--rule);background:var(--plate);padding:28px;display:flex;flex-direction:column;gap:16px;}
.card h4{font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;font-size:18px;margin:0;letter-spacing:-.01em;}
.kv{display:flex;flex-direction:column;border-top:1px solid var(--rule-soft);}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;color:var(--ink-2);}
.kv b{font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-weight:500;font-size:13px;color:var(--ink);white-space:nowrap;}
.note{font-size:14px;color:var(--ink-3);max-width:56ch;}

/* ============================================================ CLOSE */
.close{background:var(--navy);color:#FFFFFF;padding:56px 40px;display:flex;flex-direction:column;gap:22px;border:1px solid var(--navy);}
.close h2{
  font-family:"Bricolage Grotesque","IBM Plex Sans Arabic",sans-serif;font-weight:800;
  font-size:clamp(28px,4.4vw,46px);letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance;
}
.close .eyebrow{color:var(--on-navy-3);}
.close p{color:var(--on-navy-2);max-width:58ch;}
.close .btn-solid{background:#FFFFFF;color:var(--navy);border-color:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.22), 0 16px 30px -14px rgba(0,0,0,.60);}
.close .btn-solid:hover{background:var(--blue-lift);border-color:var(--blue-lift);color:#04121F;}
.close .btn-ghost{border-color:var(--navy-rule);color:var(--on-navy-2);}
.close .btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF;}

.landing footer{padding:40px 0 60px;border-top:1px solid var(--rule);}
.foot{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:"JetBrains Mono","IBM Plex Sans Arabic",monospace;font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase;
}
.foot a{text-decoration:none;}
.foot a:hover{color:var(--ink);}

/* ============================================================ RESPONSIVE */
@media (min-width:700px){
  .inds{grid-template-columns:1fr 1fr;}
  .ind{border-inline-end:1px solid var(--rule-soft);}
  .ind:nth-child(2n){border-inline-end:0;}
}
@media (min-width:760px){.two{grid-template-columns:1fr 1fr;}}
@media (min-width:960px){
  .inds{grid-template-columns:repeat(3,1fr);}
  .ind:nth-child(2n){border-inline-end:1px solid var(--rule-soft);}
  .ind:nth-child(3n){border-inline-end:0;}
  .tiers{grid-template-columns:repeat(3,1fr);}
  .tier{border-bottom:0;border-inline-end:1px solid var(--rule);}
  .tier:last-child{border-inline-end:0;}
  .row{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;}
  .row.flip .row-txt{order:2;}
  .row.flip .row-fig{order:1;}
}
@media (max-width:900px){
  .chain{grid-template-columns:repeat(3,1fr);}
  .leg{border-bottom:1px solid var(--navy-rule);}
  .soundings{grid-template-columns:repeat(2,1fr);}
  .sound:nth-child(-n+2){border-bottom:1px solid var(--rule-soft);}
  .sound:nth-child(2n){border-inline-end:0;}
}
@media (max-width:560px){
  .chain{grid-template-columns:1fr;}
  .leg{border-inline-end:0;}
  body{font-size:16px;}
  .band{padding:64px 0;}
  .chainband{padding:64px 0;}
  .close{padding:40px 26px;}
  .masthead{padding-bottom:40px;}
  .brand{gap:12px;}
}

/* ============================================================ RTL
   Arabic is cursive: letter-spacing breaks the joins between letters, so the
   tracked mono labels and the tightened display type both have to relax. The
   layout itself is already mirrored by logical properties above. */
[dir="rtl"] .disp,
[dir="rtl"] .mono,
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .brand b,
[dir="rtl"] .navlinks a,
[dir="rtl"] .coord span,
[dir="rtl"] .plate-cap,
[dir="rtl"] .leg .no,
[dir="rtl"] .leg .nm,
[dir="rtl"] .sound .n,
[dir="rtl"] .sound .l,
[dir="rtl"] .ind .tagline,
[dir="rtl"] .ind h3,
[dir="rtl"] .row-txt h3,
[dir="rtl"] .speclist code,
[dir="rtl"] .tier-tag,
[dir="rtl"] .tier h3,
[dir="rtl"] .price .amt,
[dir="rtl"] .price .per,
[dir="rtl"] .price-alt,
[dir="rtl"] .meters b,
[dir="rtl"] .card h4,
[dir="rtl"] .kv b,
[dir="rtl"] .landing thead th,
[dir="rtl"] .landing td,
[dir="rtl"] .close h2,
[dir="rtl"] .foot{letter-spacing:normal;}

/* uppercase does nothing for Arabic but does mangle any Latin run inside a
   translated label, so leave the casing alone in RTL */
[dir="rtl"] .eyebrow,
[dir="rtl"] .plate-cap,
[dir="rtl"] .sound .l,
[dir="rtl"] .ind .tagline,
[dir="rtl"] .tier-tag,
[dir="rtl"] .landing thead th,
[dir="rtl"] .foot{text-transform:none;}

/* Arabic sits lower and needs a touch more line height than the Latin setting */
[dir="rtl"] .disp{line-height:1.22;}
[dir="rtl"] .leg .nm{line-height:1.45;}
[dir="rtl"] body{font-weight:400;}