/* --oe-col: this page's content column; the shared top bar row (common/header.php) takes the same width. */
:root{--oe-col:1168px}
/* /mobile — app marketing landing page. Blue/gold theme, self-contained. */
:root{
  --oe-navy:#101530; --oe-navy2:#101530; --oe-gold:#ecaf18; --oe-gold2:#ecaf18;
  --oe-ink:#101530; --oe-cream:#fbf8f1; --oe-line:#e7e0d2;
}
/* Page-level guard: the site header's off-canvas menu drawer sits at right:-280px,
   so any page without a body overflow-x clip can scroll sideways on mobile. */
/* This page loads only header.css/site.css/mobile.css — none reset the UA body
   margin (support.php et al. get it from their own `*{margin:0}`), so without
   this the default 8px body margin frames the whole page in white. */
body{margin:0;overflow-x:hidden;}
.mkt{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--oe-ink);background:#fff;overflow-x:hidden;}
.mkt h1,.mkt h2,.mkt h3,.mkt .mkt-eyebrow{font-family:'DM Sans',system-ui,sans-serif;}
.mkt-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* ── Hero ─────────────────────────────────────────── */
.mkt-hero{position:relative;box-sizing:border-box;max-width:1168px;margin:22px auto 0;border-radius:18px;background:
  radial-gradient(1200px 600px at 82% -10%, rgba(232,168,42,.22), transparent 60%),
  linear-gradient(160deg, var(--oe-navy) 0%, var(--oe-navy2) 100%);color:#fff;overflow:hidden;}
/* The art column is exactly the stage's width, so the copy runs up close to the devices (owner 09-28). */
.mkt-hero .mkt-wrap{display:grid;grid-template-columns:minmax(0,1fr) 484px;gap:28px;align-items:center;
  padding-top:40px;padding-bottom:40px;}
.mkt-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oe-gold);margin-bottom:16px;}
.mkt-eyebrow::before{content:"";width:26px;height:2px;background:var(--oe-gold);border-radius:2px;}
.mkt-hero h1{font-size:clamp(33px,4.8vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:0 0 16px;}
.mkt-hero h1 .g{color:var(--oe-gold);}
.mkt-lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.5;color:rgba(255,255,255,.82);max-width:none;margin:0 0 22px;}
.mkt-note{margin-top:14px;font-size:13px;color:rgba(255,255,255,.6);}

/* Store buttons — official App Store + Google Play artwork */
.mkt-stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.store-badge{display:inline-flex;text-decoration:none;transition:transform .14s ease, box-shadow .14s ease;
  border-radius:9px;}
.store-badge img{display:block;height:48px;width:auto;}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.32);}
.store-badge[aria-disabled="true"]{cursor:default;}
/* min-width:0 lets the grid tracks shrink below their content on narrow screens,
   so the fixed-width fan can't force the hero wider than the viewport. */
.mkt-hero-copy,.mkt-hero-art{min-width:0;}
/* Hero fanned deck */
/* No overflow clip here: the rotated phones are taller than this box, and the
   parent .mkt-hero (overflow:hidden) + body overflow-x already bound any bleed,
   so clipping here only lopped the screenshots' tops on mobile. */
.mkt-hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;align-self:stretch;}
/* The stage: the iPad leads, the two phones fan over its lower right corner. The
   stage box INCLUDES the phones' overhang, so centring the box in the column
   centres the whole group between the copy and the edge, top and bottom. */
.mkt-stage{position:relative;width:484px;height:366px;}
.oe-tablet{position:absolute;left:0;top:0;width:436px;aspect-ratio:1180/820;background:#1a1d24;border-radius:4.4%/6.3%;padding:2.2%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 28px rgba(255,255,255,.22),0 18px 48px rgba(255,255,255,.14);z-index:1;}
.oe-tablet-screen{position:relative;height:100%;border-radius:2.6%/3.7%;overflow:hidden;background:var(--oe-navy);}
.oe-tablet-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.mkt-fan{position:absolute;right:0;bottom:0;width:216px;height:272px;z-index:3;}
.mkt-fan .oe-phone{position:absolute;top:50%;left:50%;}
.mkt-fan .fan-back{width:120px;transform:translate(-84%,-48%) rotate(-9deg);z-index:1;}
.mkt-fan .fan-front{width:116px;transform:translate(-24%,-44%) rotate(7deg);z-index:2;}
/* No glow (owner 09-28): the frames carry a soft white drop shadow instead. */
.mkt-hero-glow{display:none;}

/* ── Phone frame (screenshots carry their own status bar) ── */
.oe-phone{position:relative;width:266px;aspect-ratio:1179/2556;background:#1a1d24;border-radius:9.5%/4.4%;
  padding:2.6%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 22px rgba(255,255,255,.26),0 14px 40px rgba(255,255,255,.16);z-index:1;flex:none;}
.oe-phone-screen{position:relative;height:100%;border-radius:8%/3.7%;overflow:hidden;background:var(--oe-navy);}
.oe-phone-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}

/* ── Features ─────────────────────────────────────── */
.mkt-features{background:var(--oe-cream);padding:40px 0 44px;}
.mkt-head{text-align:center;max-width:none;margin:0 auto 24px;}
.mkt-head h2{font-size:clamp(24px,2.8vw,32px);white-space:nowrap;font-weight:800;letter-spacing:-.02em;color:var(--oe-navy);margin:0 0 10px;}
.mkt-head p{font-size:16.5px;line-height:1.5;color:#5a6172;margin:0;}
.mkt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.mkt-card{background:#fff;border:1px solid var(--oe-line);border-radius:16px;padding:18px 18px 20px;
  box-shadow:0 1px 0 rgba(1,31,73,.03);}
.mkt-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--oe-navy),var(--oe-navy2));margin-bottom:14px;}
.mkt-ic svg{width:24px;height:24px;stroke:var(--oe-gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mkt-card h3{font-size:17.5px;font-weight:700;color:var(--oe-navy);margin:0 0 7px;letter-spacing:-.01em;}
.mkt-card p{font-size:14.5px;line-height:1.5;color:#5a6172;margin:0;}

/* ── Coming-soon modal ────────────────────────────── */
.mkt-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.mkt-modal[hidden]{display:none;}
.mkt-modal-backdrop{position:absolute;inset:0;background:rgba(1,15,40,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.mkt-modal-card{position:relative;z-index:1;width:100%;max-width:380px;background:#fff;border-radius:20px;
  padding:34px 30px 30px;text-align:center;box-shadow:0 30px 80px rgba(1,15,40,.5);animation:mktPop .22s ease;}
@keyframes mktPop{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.mkt-modal-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:#9aa3b2;cursor:pointer;padding:4px;}
.mkt-modal-x:hover{color:var(--oe-navy);}
.mkt-modal-spark{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--oe-navy),var(--oe-navy2));color:var(--oe-gold);}
.mkt-modal-spark svg{width:28px;height:28px;}
.mkt-modal-card h2{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--oe-navy);margin:0 0 10px;}
.mkt-modal-card p{font-size:15px;line-height:1.5;color:#5a6172;margin:0 0 22px;}
.mkt-modal-ok{background:linear-gradient(120deg,var(--oe-gold),var(--oe-gold2));color:var(--oe-navy);font-family:'DM Sans',sans-serif;
  font-weight:700;font-size:15px;border:0;border-radius:12px;padding:11px 28px;cursor:pointer;transition:transform .12s ease;}
.mkt-modal-ok:hover{transform:translateY(-1px);}

/* ── Passport band ─────────────────────────── */
/* Navy between the cream features and the gold CTA, so the page keeps its
   navy / cream / navy / gold rhythm and the band reads as its own promo. */
.mkt-pass{position:relative;background:
  radial-gradient(900px 500px at 18% -20%, rgba(232,168,42,.20), transparent 62%),
  linear-gradient(200deg, var(--oe-navy) 0%, var(--oe-navy2) 100%);color:#fff;overflow:hidden;}
.mkt-pass .mkt-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;
  padding-top:40px;padding-bottom:40px;}
.mkt-pass-copy,.mkt-pass-art{min-width:0;}
.mkt-pass h2{font-size:clamp(25px,3.4vw,36px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;}
.mkt-pass h2 .g{color:var(--oe-gold);}
.mkt-pass .mkt-lead{max-width:44ch;margin-bottom:18px;}
.mkt-pass-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;}
.mkt-pass-list li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.86);}
.mkt-pass-list li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--oe-gold);box-shadow:0 0 0 3px rgba(232,168,42,.18);}
.mkt-pass-btn{display:inline-block;background:linear-gradient(120deg,var(--oe-gold),var(--oe-gold2));color:var(--oe-navy);
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:15.5px;text-decoration:none;
  border-radius:12px;padding:12px 26px;transition:transform .14s ease, box-shadow .14s ease;}
.mkt-pass-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.32);}
.mkt-pass-art{display:flex;justify-content:center;align-items:center;}
.mkt-pass-art svg{width:min(300px,72%);height:auto;transform:rotate(-8deg);filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));}

/* ── CTA band ─────────────────────────────────────── */
.mkt-cta{background:linear-gradient(120deg,var(--oe-gold),var(--oe-gold2));padding:38px 0;text-align:center;}
.mkt-cta h2{font-size:clamp(25px,3.4vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--oe-navy);margin:0 0 10px;}
.mkt-cta p{font-size:16.5px;color:rgba(1,31,73,.78);margin:0 0 24px;font-weight:600;}
.mkt-cta .mkt-stores{justify-content:center;}

@media(max-width:1168px){.mkt-hero{margin-top:0;border-radius:0}}
@media(max-width:900px){
  .mkt-head h2{white-space:normal;}
  .mkt-hero .mkt-wrap{grid-template-columns:1fr;text-align:center;gap:22px;padding-top:46px;padding-bottom:46px;}
  .mkt-eyebrow{justify-content:center;}
  .mkt-lead{max-width:none;margin-left:auto;margin-right:auto;}
  .mkt-stores{justify-content:center;}
  .mkt-hero-art{order:2;min-height:0;padding-bottom:0;}
  .mkt-eyebrow{text-align:center;}
  .mkt-stage{width:min(484px,100%);height:auto;aspect-ratio:484/366;}
  .oe-tablet{width:90%;top:0;}
  .mkt-fan{width:44%;height:74%;right:0;bottom:0;}
  .mkt-fan .fan-back{width:56%;}
  .mkt-fan .fan-front{width:54%;}
  .mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mkt-pass .mkt-wrap{grid-template-columns:1fr;text-align:center;gap:24px;padding-top:44px;padding-bottom:44px;}
  .mkt-pass .mkt-lead{max-width:none;margin-left:auto;margin-right:auto;}
  /* Centered block, not inline-grid: inline-grid let the button sit on the
     same line as the list instead of below it. */
  .mkt-pass-list{width:fit-content;margin-left:auto;margin-right:auto;text-align:left;}
  .mkt-pass-art svg{width:min(230px,58vw);}
}
@media(max-width:560px){
  .mkt-grid{grid-template-columns:1fr;}
  .mkt-card{max-width:none;}
  .mkt-pass-art svg{width:min(200px,54vw);}
  .mkt-pass-list li{font-size:15px;}
}