/* ============================================
   Egypt Trains — Beta tester wiki
   Tokens mirror landing/css/styles.css + DESIGN_SYSTEM.md
   ============================================ */

:root {
  --primary-dark: #00796B;
  --primary-main: #26A69A;
  --primary-light: #4DB6AC;
  --primary-soft: #80CBC4;
  --accent-main: #FFB84D;
  --accent-dark: #D68910;

  --ink: #1A1A1A;
  --ink-2: #4A4A4A;
  --ink-3: #6B6B6B;
  --ink-4: #9E9E9E;

  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F4F2EE;
  --line: #E7E3DC;
  --line-2: #D9D4CB;

  --ok: #2E7D32;
  --ok-bg: #EDF6EE;
  --warn: #EF6C00;
  --warn-bg: #FDF2E6;
  --err: #C62828;
  --err-bg: #FBEDED;
  --info-bg: #EAF5F4;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,.07), 0 12px 32px rgba(0,0,0,.06);

  --topbar-h: 60px;
  --side-w: 244px;
  --toc-w: 210px;
  --maxw: 760px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 18px);
  /* The off-canvas mobile sidebar is translated outside the viewport. In RTL
     that grows the document to the right and the initial scroll position lands
     on the dead space, clipping content. `clip` (not `hidden`) contains it
     without creating a scroll container, so position:sticky still works. */
  overflow-x: clip;
}

body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--primary-dark); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; border-radius: 4px; }

/* ---------------- TOP BAR ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  background: rgba(250,249,246,.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  height: 100%; max-width: 1320px; margin: 0 auto;
  padding: 0 18px; display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; display: block; }
.brand-name { font-size: .98rem; }
.brand-tag {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em;
  background: var(--primary-main); color: #fff;
  padding: 2.5px 7px; border-radius: 100px;
}
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; }
.lang-toggle {
  font-family: inherit; font-weight: 700; font-size: .78rem;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 6px 13px; cursor: pointer; transition: .2s;
}
.lang-toggle:hover { border-color: var(--primary-main); color: var(--primary-dark); }
.menu-btn {
  display: none; background: none; border: 0; color: var(--ink-2);
  padding: 6px; cursor: pointer; border-radius: var(--r-sm);
}

/* ---------------- SHELL ---------------- */
.shell {
  max-width: 1320px; margin: 0 auto; padding: 0 18px;
  display: grid; gap: 40px;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--toc-w);
  align-items: start;
}

/* ---------------- SIDEBAR ---------------- */
.sidebar {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 30px 0 60px;
}
.side-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-4); margin: 20px 0 8px; padding-inline-start: 12px;
}
.side-label:first-child { margin-top: 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: .875rem; font-weight: 600;
  border-inline-start: 2.5px solid transparent;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.sidebar nav a.active {
  color: var(--primary-dark); background: var(--info-bg);
  border-inline-start-color: var(--primary-main);
}
.side-step i {
  font-style: normal; font-size: .66rem; font-weight: 800;
  width: 19px; height: 19px; flex: 0 0 19px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line-2);
}
.sidebar nav a.active .side-step i,
.side-step.active i { background: var(--primary-main); color: #fff; border-color: var(--primary-main); }
.sidebar-scrim { display: none; }

/* ---------------- MAIN ---------------- */
main { padding: 34px 0 80px; min-width: 0; max-width: var(--maxw); }

/* HERO */
.hero { padding-bottom: 12px; }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary-dark);
  background: var(--info-bg); border: 1px solid var(--primary-soft);
  padding: 5px 12px; border-radius: 100px; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.05rem); font-weight: 800;
  line-height: 1.22; letter-spacing: -.02em; margin-bottom: 16px;
}
.hero h1 em {
  display: block; font-style: normal;
  background: linear-gradient(120deg, var(--primary-main), var(--primary-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 62ch; }

.progress-card {
  margin: 26px 0 24px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.progress-head strong { font-size: 1.12rem; font-weight: 800; }
.progress-head strong #pCount { color: var(--primary-dark); font-size: 1.5rem; }
.progress-note { font-size: .76rem; color: var(--ink-4); font-weight: 600; }
.progress-track {
  height: 9px; background: var(--surface-2); border-radius: 100px;
  margin: 12px 0 9px; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary-main), var(--primary-light));
  border-radius: 100px; transition: width 1.1s cubic-bezier(.22,1,.36,1);
}
.progress-sub { font-size: .87rem; color: var(--ink-3); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 6px; }
.hero-meta { margin-top: 14px; font-size: .82rem; color: var(--ink-4); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: .92rem;
  padding: 11px 20px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1.5px); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary-main), var(--primary-dark));
  color: #fff; box-shadow: 0 3px 10px rgba(38,166,154,.32);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(38,166,154,.42); }
.btn-ghost { background: var(--surface); color: var(--primary-dark); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--primary-main); background: var(--info-bg); }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-sm { padding: 7px 15px; font-size: .82rem; }
.ext { opacity: .85; }
[dir="rtl"] .ext { transform: scaleX(-1); }

/* DOC SECTIONS */
.doc { padding-top: 46px; }
.doc h2 {
  font-size: 1.62rem; font-weight: 800; letter-spacing: -.015em;
  margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.doc h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.doc h4 { font-size: .93rem; font-weight: 800; margin-bottom: 9px; }
.doc p { color: var(--ink-2); margin-bottom: 13px; max-width: 66ch; }
.doc p:last-child { margin-bottom: 0; }

/* CALLOUTS */
.callout {
  margin: 18px 0; padding: 15px 17px;
  border-radius: var(--r-md); border-inline-start: 3.5px solid var(--primary-main);
  background: var(--info-bg);
}
.callout strong { display: block; font-weight: 800; margin-bottom: 4px; font-size: .95rem; }
.callout p { color: var(--ink-2); margin: 0; font-size: .93rem; }
.callout.compact { margin: 14px 0 0; padding: 12px 15px; }
.callout-good { background: var(--ok-bg); border-inline-start-color: var(--ok); }
.callout-good strong { color: var(--ok); }
.callout-warn { background: var(--warn-bg); border-inline-start-color: var(--warn); }
.callout-warn strong { color: #b35300; }
.callout-info { background: var(--info-bg); border-inline-start-color: var(--primary-main); }
.callout-info strong { color: var(--primary-dark); }

/* CHECK LIST */
.check-list { list-style: none; margin: 14px 0; }
.check-list li {
  position: relative; padding-inline-start: 30px; margin-bottom: 9px;
  color: var(--ink-2); font-size: .96rem;
}
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .58em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--primary-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* STEPS */
.steps-title { margin-bottom: 8px; }
.step {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 18px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step-num {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary-main), var(--primary-dark));
  box-shadow: 0 3px 10px rgba(38,166,154,.3);
}
.step-body > .btn { margin-top: 6px; }
.sub-steps { margin: 12px 0 16px; padding-inline-start: 20px; }
.sub-steps li { color: var(--ink-2); margin-bottom: 7px; font-size: .95rem; }
.sub-steps li::marker { color: var(--primary-main); font-weight: 800; }
.fineprint { font-size: .78rem; color: var(--ink-4); margin-top: 9px; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84em; background: var(--surface-2);
  padding: 2.5px 7px; border-radius: 5px; color: var(--ink-2);
  border: 1px solid var(--line);
  /* isolate keeps the LTR url intact inside RTL copy without needing
     inline-block, which would refuse to wrap and overflow narrow phones */
  direction: ltr; unicode-bidi: isolate;
  max-width: 100%; overflow-wrap: anywhere;
}

/* SPLIT do/don't */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.split-col { padding: 15px 17px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.split-col ul { list-style: none; }
.split-col li { position: relative; padding-inline-start: 22px; font-size: .9rem; color: var(--ink-2); margin-bottom: 6px; }
.split-col li::before { position: absolute; inset-inline-start: 0; font-weight: 800; }
.split-bad { background: var(--err-bg); border-color: #F2D6D6; }
.split-bad h4 { color: var(--err); }
.split-bad li::before { content: "✕"; color: var(--err); }
.split-ok { background: var(--ok-bg); border-color: #D6E8D8; }
.split-ok h4 { color: var(--ok); }
.split-ok li::before { content: "✓"; color: var(--ok); }

/* CHANNELS */
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.channel {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: .2s; box-shadow: var(--shadow-1);
}
.channel:hover { text-decoration: none; border-color: var(--primary-main); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.channel-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
}
.channel-icon.wa { background: #25D366; }
.channel-icon.gg { background: var(--primary-main); }
.channel-text { display: flex; flex-direction: column; min-width: 0; }
.channel-text strong { font-size: .95rem; font-weight: 800; color: var(--ink); line-height: 1.4; }
.channel-text small { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }

/* SCREENSHOT GRID */
.shots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin: 22px 0 8px;
}
.shot { display: flex; flex-direction: column; }
.shot img {
  width: 100%; height: auto; aspect-ratio: 9/13;
  object-fit: cover; object-position: top center;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: var(--shadow-1);
  display: block; transition: transform .25s, box-shadow .25s;
}
.shot:hover img { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.shot figcaption { padding-top: 11px; }
.shot figcaption strong { display: block; font-size: .94rem; font-weight: 800; margin-bottom: 3px; }
.shot figcaption span { font-size: .84rem; color: var(--ink-3); line-height: 1.6; display: block; }

/* BLOCKQUOTE */
blockquote {
  margin: 18px 0; padding: 17px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3.5px solid var(--accent-main);
  border-radius: var(--r-md);
}
blockquote p {
  font-size: .97rem; color: var(--ink); font-style: italic;
  direction: ltr; text-align: left; margin-bottom: 9px;
}
blockquote cite { font-size: .79rem; color: var(--ink-4); font-style: normal; font-weight: 600; }

/* TABLE */
.rules-table {
  width: 100%; border-collapse: collapse; margin-top: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; font-size: .91rem;
}
.rules-table th {
  text-align: start; padding: 11px 15px; background: var(--surface-2);
  font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.rules-table td { padding: 11px 15px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table td:first-child { font-weight: 700; color: var(--ink); width: 42%; }

/* DETAILS / QA */
.qa {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden;
}
.qa summary {
  padding: 14px 17px; cursor: pointer; font-weight: 700; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: 11px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
  content: "+"; flex: 0 0 20px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--info-bg); color: var(--primary-dark);
  font-weight: 800; font-size: .95rem; line-height: 1;
}
.qa[open] summary::before { content: "−"; background: var(--primary-main); color: #fff; }
.qa[open] summary { border-bottom: 1px solid var(--line); }
.qa > div { padding: 14px 17px; }
.qa ol { padding-inline-start: 20px; }
.qa li { color: var(--ink-2); font-size: .93rem; margin-bottom: 7px; }
.qa li::marker { color: var(--primary-main); font-weight: 800; }

/* FINAL CTA */
.final-cta {
  margin-top: 56px; padding: 34px 30px; text-align: center;
  background: linear-gradient(145deg, var(--info-bg), var(--surface));
  border: 1px solid var(--primary-soft); border-radius: var(--r-xl);
}
.final-cta h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }
.final-cta p { color: var(--ink-2); margin-bottom: 20px; max-width: none; }
.final-cta .hero-cta { justify-content: center; }
.share-btn {
  margin-top: 16px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 700;
  color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px;
}

/* FOOTER */
.foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.foot p { font-size: .86rem; color: var(--ink-3); max-width: none; }
.foot-links { margin-top: 7px; font-size: .82rem; }
.foot-links a { color: var(--ink-3); }
.foot-links span { color: var(--ink-4); margin: 0 7px; }

/* ---------------- TOC ---------------- */
.toc {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 34px 0 60px;
}
.toc nav a {
  display: block; padding: 5px 0 5px 12px;
  border-inline-start: 2px solid var(--line);
  font-size: .81rem; color: var(--ink-3); line-height: 1.55;
}
.toc nav a:hover { color: var(--ink); text-decoration: none; }
.toc nav a.active { color: var(--primary-dark); border-inline-start-color: var(--primary-main); font-weight: 700; }

/* ---------------- MOBILE CTA ---------------- */
.mobile-cta {
  display: none;
  position: fixed; bottom: 0; inset-inline: 0; z-index: 90;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { width: 100%; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); gap: 34px; }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu-btn { display: block; }
  main { padding-bottom: 110px; }

  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 130;
    width: 274px; max-height: none; padding: 20px 16px;
    background: var(--surface); border-inline-end: 1px solid var(--line);
    transform: translateX(-102%); transition: transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow: var(--shadow-2);
  }
  [dir="rtl"] .sidebar { transform: translateX(102%); }
  .sidebar.open, [dir="rtl"] .sidebar.open { transform: translateX(0); }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 120;
    background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .28s;
  }
  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }

  .mobile-cta { display: block; }
  .topbar-cta { display: none; }

  .shots { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .split, .channels { grid-template-columns: 1fr; }
  .step { grid-template-columns: 38px minmax(0,1fr); gap: 14px; }
  .step-num { width: 38px; height: 38px; font-size: 1.02rem; }
  .final-cta { padding: 28px 20px; }
  .rules-table { font-size: .87rem; }
  .rules-table th, .rules-table td { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .shots { grid-template-columns: 1fr 1fr; gap: 12px; }
  .shot figcaption strong { font-size: .87rem; }
  .shot figcaption span { font-size: .78rem; }
  .hero h1 { font-size: 1.92rem; }
  .lede { font-size: .99rem; }
  .doc h2 { font-size: 1.38rem; }
  .btn-lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.alt-link { margin-top: 10px; font-size: .87rem; color: var(--ink-3); }
.alt-link a { font-weight: 700; }

/* ============ hero panel (store-screenshot style) ============ */
.hero-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 296px;
  gap: 30px; align-items: center;
  background: linear-gradient(160deg, #4CB6AB 0%, #017A6C 100%);
  border-radius: 26px; padding: 38px 38px 0;
  box-shadow: var(--shadow-2);
}
.hero-copy { padding-bottom: 38px; }
.hero-panel h1 {
  color: #fff;
  font-size: clamp(1.72rem, 3.5vw, 2.4rem); line-height: 1.26;
}
.hero-panel h1 em {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--accent-main);
}
.hero-panel .lede { color: rgba(255,255,255,.9); font-size: .99rem; }

.rating-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #123F39;
  font-weight: 800; font-size: .82rem;
  padding: 7px 14px; border-radius: 100px;
  margin-bottom: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.rating-pill .star { color: var(--accent-dark); }

.hero-panel .hero-cta { margin-top: 20px; }
.hero-panel .btn-primary { background: #fff; color: var(--primary-dark); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.hero-panel .btn-primary:hover { box-shadow: 0 7px 20px rgba(0,0,0,.24); }
.hero-panel .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero-panel .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero-panel .hero-meta { color: rgba(255,255,255,.72); }

/* --- device visual: cropped App Store panel, blended into the gradient --- */
.hero-mock { align-self: end; max-height: 400px; overflow: hidden; }
.hero-mock > .asc-shot { max-width: 100%; }
.asc-shot {
  display: block; width: 100%; height: auto;
  /* fade the image's own gradient into the CSS one so the seam never shows */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px);
  mask-image: linear-gradient(180deg, transparent 0, #000 90px);
}

@media (max-width: 1000px) {
  .hero-panel {
    display: flex; flex-direction: column;
    margin: -34px calc(50% - 50vw) 0;
    border-radius: 0 0 26px 26px;
    padding: 30px 24px 0;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100svh - var(--topbar-h));
    box-shadow: none;
  }
  .hero-copy { padding-bottom: 12px; }
  .hero-panel h1 { font-size: 2.04rem; }
  /* the visual takes whatever height the copy leaves and clips at the panel
     edge, so the device always enters from the top of its box instead of
     scaling the whole panel taller than the viewport */
  .hero-mock {
    flex: 1 1 auto; min-height: 150px; max-height: none;
    align-self: stretch; margin-top: auto;
    display: flex; justify-content: center; align-items: flex-start;
  }
  .asc-shot { width: min(100%, 430px); }
}