/* ============================================================
   MIRAAI 2026 — layout system, taken from the deck
   Loads AFTER styles.css and miraai-2026.css.
   Asymmetric grid, ruled surfaces, chapter tags, ghost numerals,
   full-bleed plates. Steel does the dark work; navy is the foot.
   ============================================================ */

:root{
  --wrap-v:1280px;
  --gutter:max(var(--pad), calc((100vw - var(--wrap-v)) / 2));
  --steel-deep:#0B3D57;
  --steel-soft:#3F7C99;
  --on-steel:#CBDDE5;
}

/* ---------- 1 · header: steel, white mark ---------- */
.vnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  background:var(--steel); color:#fff;
  padding:.85rem var(--gutter);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.vnav__brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:#fff; flex:0 0 auto;}
.vnav__brand img{height:26px; width:26px; display:block;}
/* the real lockup: mark and wordmark in one file, so no <b> beside it */
.vnav__brand img.lockup,.nav__brand img.lockup{height:25px; width:auto;}
.v-footer .vnav__brand img.lockup{height:22px;}
@media (max-width:520px){ .vnav__brand img.lockup,.nav__brand img.lockup{height:21px;} }
.vnav__brand b{font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.03em;}
.vnav__links{display:flex; gap:1.5rem; margin-left:auto; align-items:center;}
.vnav__links a{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-steel); text-decoration:none; white-space:nowrap; padding-bottom:.2em;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.vnav__links a:hover{color:#fff;}
.vnav__links a.is-current{color:#fff; border-bottom-color:var(--gold);}
.vnav .btn{margin-left:.6rem;}
.vnav__burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.4rem;}
.vnav__burger span{display:block; width:22px; height:2px; background:#fff; margin:5px 0;}

/* ---------- 2 · page shell ---------- */
body.v, .pg.v{background:var(--paper); color:var(--ink);}
.v-sec{padding-block:clamp(4.5rem, 8vw, 7.5rem); position:relative; overflow:hidden;}
.v-sec--plate{background:var(--paper-2);}
.v-sec--steel{background:var(--steel); color:#fff;}
.v-sec--navy{background:var(--navy); color:#fff;}
.v-wrap{max-width:var(--wrap-v); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:2;}

/* ---------- 3 · chapter tag, gold rule, ghost numeral ---------- */
.v-rule{display:block; width:56px; height:3px; background:var(--gold); margin-bottom:1.5rem;}
.v-tag{
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
}
.v-tag i{
  font-style:normal; background:var(--gold); color:var(--navy);
  padding:.25em .5em; border-radius:2px; font-weight:500; letter-spacing:.08em;
}
.v-sec--steel .v-tag,.v-sec--navy .v-tag{color:var(--gold);}
.v-ghost{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:700; letter-spacing:-.05em;
  font-size:clamp(6rem, 13vw, 13rem); line-height:.78;
  color:rgba(11,23,51,.055); right:3vw; top:1.2rem;
}
.v-sec--steel .v-ghost,.v-sec--navy .v-ghost{color:rgba(255,255,255,.055);}

/* ---------- 4 · the asymmetric split ---------- */
.v-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:start;}
.v-split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.v-split h2{margin:0; max-width:16ch; font-size:clamp(1.6rem, 2.5vw, 2.25rem);}
.v-body p{color:var(--ink-muted); max-width:62ch; font-size:1.0625rem;}
.v-body p + p{margin-top:1rem;}
.v-sec--steel .v-body p,.v-sec--navy .v-body p{color:var(--on-steel);}
.v-sec--steel h2,.v-sec--navy h2{color:#fff;}
.v-sec--steel h2 em,.v-sec--navy h2 em{color:var(--gold);}

/* ---------- 5 · hero ---------- */
.v-hero{display:grid; grid-template-columns:minmax(0,1fr) 42vw; align-items:stretch; background:var(--paper);}
.v-hero__text{padding:clamp(3.5rem,7vw,6rem) clamp(2rem,4vw,4rem) clamp(3rem,6vw,5rem) var(--gutter);}
.v-hero h1{margin:0; font-size:clamp(2.2rem, 3.9vw, 3.5rem); max-width:17ch;}
.v-hero__sub{margin-top:1.4rem; max-width:52ch; font-size:1.0625rem; color:var(--ink-muted);}
.v-hero__actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem;}
.v-hero__plate{position:relative; background:var(--steel); overflow:hidden; min-height:clamp(380px,52vh,620px);}
.v-hero__plate .hero__net{opacity:.75;}
.v-hero__plate img.v-watermark{
  position:absolute; width:118%; height:auto; right:-34%; bottom:-30%;
  opacity:.10; pointer-events:none; z-index:0;
}
.v-hero__plate .v-year{
  position:absolute; left:1.6rem; bottom:1.2rem; z-index:3;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em; color:rgba(255,255,255,.5);
}

/* ---------- 6 · the instrument legend bar ---------- */
.v-legend{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:2.6rem; max-width:440px;}
.v-legend a{text-decoration:none; display:block; padding-top:.7rem; border-top:4px solid;}
.v-legend a:nth-child(1){border-color:var(--gold);}
.v-legend a:nth-child(2){border-color:var(--steel);}
.v-legend a:nth-child(3){border-color:var(--pine);}
.v-legend span{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate-light); transition:color .15s ease;
}
.v-legend a:hover span{color:var(--ink);}

/* ---------- 7 · ruled figure row ---------- */
.v-figs{display:grid; grid-template-columns:repeat(3,1fr); margin-top:3rem; border-top:1px solid var(--ink);}
.v-figs--4{grid-template-columns:repeat(4,1fr);}
.v-figs > div{padding:1.6rem 1.4rem 0 0;}
.v-figs > div + div{border-left:1px solid var(--hair-faint); padding-left:1.4rem;}
/* the SOC/ISO cell runs long; let it sit smaller */
.v-figs b.v-figs__long{font-size:clamp(1.3rem,2.1vw,1.7rem);}
.v-figs b{
  display:block; font-family:var(--display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.02; color:var(--navy);
}
.v-figs > div:nth-child(2) b{color:var(--steel);}
.v-figs > div:nth-child(3) b{color:var(--gold-ink);}
.v-figs > div:nth-child(4) b{color:var(--pine);}
.v-figs span{
  display:block; margin-top:.7rem; font-size:.9rem; line-height:1.45; color:var(--ink-muted); max-width:30ch;
}
.v-figs em{
  display:block; margin-top:.35rem; font-style:normal;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-light);
}

/* ---------- 8 · media and caption rail ---------- */
.v-media{margin-top:0; position:relative;}
.v-media img,.v-media video{display:block; width:100%;}
.v-panel{border:1px solid var(--hair-dark); background:var(--paper-2);}
.v-sec--steel .v-panel{border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04);}
.v-panel iframe{width:100%; border:0; display:block; background:var(--navy);}
.v-cap{
  margin-top:.9rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate-light);
}
.v-sec--steel .v-cap{color:rgba(255,255,255,.78);}
.v-foot{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid var(--hair-faint);
}
.v-sec--steel .v-foot{border-top-color:rgba(255,255,255,.22);}
.v-foot .v-cap{margin:0; flex:1 1 20ch;}
.v-foot .btn{margin-left:auto;}

/* ---------- 9 · films, three across, edge to edge ---------- */
.v-films{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.22);}
.v-films figure{margin:0; background:var(--steel-deep); position:relative;}
.v-films video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; cursor:pointer;}
.v-films figcaption{
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.v-films figcaption i{font-style:normal; color:var(--gold);}

/* ---------- 10 · people ---------- */
.v-people{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); margin-top:3rem; border-top:1px solid var(--ink); padding-top:2.2rem;}
.v-people img{
  width:104px; height:104px; object-fit:cover; object-position:50% 18%; display:block;
  border-radius:50%; border:1px solid var(--hair-dark); box-shadow:0 0 0 5px var(--paper-2);
  margin-bottom:1.3rem; filter:saturate(.95);
}
.v-sec--plate .v-people img{box-shadow:0 0 0 5px var(--paper);}
.v-people h3{margin-top:0; font-size:1.1rem;}
.v-people .role{
  margin:.3rem 0 .6rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}
.v-people p{font-size:.95rem; color:var(--ink-muted);}

/* ---------- 11 · the foot ---------- */
.v-end{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.v-end h2{color:#fff; max-width:18ch;}
.v-end h2 em{color:var(--gold);}
.v-end p{color:var(--slate); max-width:56ch; margin-top:1rem;}
.v-end img.v-watermark{position:absolute; width:520px; right:-120px; top:-140px; opacity:.06; pointer-events:none;}
.v-footer{background:var(--navy); border-top:1px solid rgba(255,255,255,.16); padding:2.2rem 0 2rem;}
.v-footer .v-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.v-footer .vnav__brand b{font-size:1.1rem;}
.v-footer small{font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; color:var(--slate);}
.v-footer a{color:var(--slate); text-decoration:none;}
.v-footer a:hover{color:#fff;}

/* ---------- 12 · responsive ---------- */
@media (max-width:1100px){
  .vnav__links{display:none;}
  .vnav__burger{display:block;}
  .v-hero{grid-template-columns:1fr;}
  .v-hero__text{padding-inline:var(--pad);}
  .v-hero__plate{min-height:300px;}
}
@media (max-width:860px){
  .v-split,.v-split--even{grid-template-columns:1fr; gap:1.6rem;}
  .v-split h2{max-width:18ch;}
  .v-figs,.v-figs--4{grid-template-columns:1fr;}
  .v-figs > div + div{border-left:0; border-top:1px solid var(--hair-faint); padding-left:0; padding-top:1.4rem;}
  .v-films{grid-template-columns:1fr;}
  .v-people{grid-template-columns:1fr; max-width:420px;}
  .v-legend{max-width:none;}
}

/* full-width media inside a section, under the split */
.v-wide{margin-top:2.6rem;}
.v-wide .phone{margin:0 auto; max-width:900px;}

/* ---------- 13 · legacy pages pick up the deck's section rule ---------- */
.band .eyebrow{position:relative; padding-top:1.9rem; display:block;}
.band .eyebrow::before{content:""; position:absolute; top:0; left:0; width:56px; height:3px; background:var(--gold);}
.band--deep .eyebrow::before{background:var(--gold);}

/* legacy nav markup, restyled as the steel header */
.nav{background:var(--steel); border-bottom:1px solid rgba(255,255,255,.16); backdrop-filter:none;}
.nav__brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:#fff;}
.nav__brand img{height:26px; width:26px;}
.nav__brand b{font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.03em; color:#fff;}
.nav__links a{color:var(--on-steel);}
.nav__links a:hover{color:#fff;}
.nav__links a.is-current{color:#fff; border-bottom:2px solid var(--gold);}
.nav__drawer{background:var(--steel);}

/* ---------- 3 · the language switch ---------- */
.lang{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-steel); text-decoration:none; white-space:nowrap;
  border:1px solid rgba(255,255,255,.35); border-radius:2px; padding:.45em .7em;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lang:hover{background:#fff; color:var(--steel); border-color:#fff;}
.vnav .lang{margin-inline-start:1.1rem;}
@media (max-width:1100px){ .vnav .lang{margin-inline-start:auto;} }


/* ---------- 14 · films: make it obvious they are videos ---------- */
/* the badge sits over the video, which is 16:9 at full width above the caption */
.v-films figure::before,
.triptych__grid figure::before,
.films figure::before{
  content:""; position:absolute; left:50%; top:calc((100% - 2.9rem) / 2);
  width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  background:rgba(11,23,51,.55); border:1px solid rgba(255,255,255,.75);
  pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.v-films figure::after,
.triptych__grid figure::after,
.films figure::after{
  content:""; position:absolute; left:50%; top:calc((100% - 2.9rem) / 2);
  margin:-10px 0 0 -6px; width:0; height:0;
  border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent;
  pointer-events:none; transition:opacity .18s ease;
}
.v-films figure:hover::before,
.triptych__grid figure:hover::before,
.films figure:hover::before{background:rgba(11,23,51,.72); transform:scale(1.06);}
.v-films figure.is-playing::before,.v-films figure.is-playing::after,
.triptych__grid figure.is-playing::before,.triptych__grid figure.is-playing::after,
.films figure.is-playing::before,.films figure.is-playing::after{opacity:0;}

/* the toggle shows Arabic on English pages */
.lang[lang="ar"]{font-family:var(--arabic); letter-spacing:0; font-size:.78rem;}

/* ---------- 15 · the steel header's mobile drawer ---------- */
.vnav__burger{border-radius:2px;}
.vnav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.vnav__burger.is-open span:nth-child(2){opacity:0;}
.vnav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.vnav__burger span{transition:transform .2s ease, opacity .2s ease;}
.vnav__drawer{
  position:sticky; top:58px; z-index:49; background:var(--steel-deep); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; gap:1.05rem; padding:1.5rem var(--gutter) 1.9rem;
}
.vnav__drawer[hidden]{display:none;}
.vnav__drawer a{text-decoration:none; font-weight:500; color:#fff; font-size:1.05rem;}
.vnav__drawer a.is-current{color:var(--gold);}
.vnav__drawer .btn{align-self:flex-start; margin-top:.4rem;}
/* the links hide at 1100px, so the drawer has to take over there —
   not at 860, which left a band where the burger did nothing */
@media (min-width:1101px){ .vnav__drawer{display:none !important;} }
/* on a phone the header keeps the brand, the language toggle and the burger;
   the demo button lives in the drawer, where there is room for it */
@media (max-width:860px){
  .vnav{gap:.9rem;}
  .vnav > .btn{display:none;}
  .vnav__burger{margin-left:auto; margin-inline-start:auto;}
  .vnav .lang{margin-inline-start:0;}
}

/* ---------- 16 · outlined buttons on the 2026 dark surfaces ----------
   styles.css lights .btn--ghost up inside .band--navy / .band--deep only.
   The deck layout introduced its own dark surfaces, so the outlined button
   was rendering ink-on-navy and disappearing. Per the design system: white
   text on navy, and the outline fills on hover. */
.v-sec--steel .btn--ghost,
.v-sec--navy  .btn--ghost,
.v-end        .btn--ghost,
.v-footer     .btn--ghost,
.vnav         .btn--ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.55);
}
.v-sec--steel .btn--ghost:hover,
.v-sec--navy  .btn--ghost:hover,
.v-end        .btn--ghost:hover,
.v-footer     .btn--ghost:hover,
.vnav         .btn--ghost:hover{
  background:#fff; color:var(--navy); border-color:#fff;
}
/* a solid ink button would vanish on those same surfaces */
.v-sec--steel .btn--ink,
.v-sec--navy  .btn--ink,
.v-end        .btn--ink{
  background:#fff; color:var(--navy); border-color:#fff;
}
.v-sec--steel .btn--ink:hover,
.v-sec--navy  .btn--ink:hover,
.v-end        .btn--ink:hover{
  background:var(--gold); color:var(--navy); border-color:var(--gold);
}

/* ---------- 17 · inks that were written for navy, on grounds that are now light ----------
   The 2026 restyle repainted .band--navy from navy to plate, and redefined
   --slate from #5A6378 (6.1:1 on light) to #9FB0C4 (7.4:1 on navy, 1.8:1 on
   light). Every consumer written for the old ground silently failed. These
   rules put each ink back on a ground it can be read against; none of them
   change a colour the design system defines, they only pick the right token. */

/* --slate follows the ground it sits on. Set the light value once on body so
   it inherits everywhere, then restore the on-navy value on the dark surfaces
   themselves — never on a generic wrapper, which would otherwise out-specify
   the dark surface it sits inside. */
body{ --slate:var(--slate-light); }
.band--deep,.v-sec--steel,.v-sec--navy,.v-end,.v-footer,.vnav,
.pager__link,.partner,.flow__node--navy,.study__id,.phone,.v-films,.films,
.band--deep *,.v-sec--steel *,.v-end *,.v-footer *{
  --slate:#9FB0C4;
}

/* .band--navy is a light plate now: gold is a fill, never an ink on light */
.band--navy .eyebrow,.band--navy .diamond{color:var(--gold-ink);}
.band--navy h1 em,.band--navy h2 em,.band--navy h3 em{color:var(--gold-ink);}
.band--navy .lede,.band--navy .hero__sub{color:var(--ink-muted);}
.band--navy .btn--ghost{color:var(--ink); border-color:var(--ink);}
.band--navy .btn--ghost:hover{background:var(--ink); color:#fff;}
.band--navy.pager .pager__link{color:var(--paper);}

/* the release accent was 4.1:1 on plate */
.band .state--rel h3,.state--rel h3{color:#8F4E1E;}
.band .state--rel .state__dot,.state--rel .state__dot{border-color:#8F4E1E;}

.v-sec--plate .v-cap,.v-sec:not(.v-sec--steel):not(.v-end) .v-cap{color:var(--slate-light);}

/* the last three inks pinned to the wrong ground */
.card--navy p,.card--navy li,.card--navy .fine{color:#9FB0C4;}
.band--deep .panel,.v-sec--steel .panel,.v-end .panel{--slate:#9FB0C4;}

/* ============================================================
   18 · rounded surfaces — the demo frames
   The four embedded demos already round their own interiors
   (the reasoning demo's stage is 20px, the behavior network
   runs 6–8px), but the frame the page draws around the iframe
   was square, so a rounded demo sat inside a hard-edged box.
   overflow:hidden is what actually clips the iframe: an iframe
   cannot round its own outer edge from the parent document.
   ============================================================ */
:root{ --radius:12px; }
.panel,.v-panel{ border-radius:var(--radius); overflow:hidden; }

/* ============================================================
   19 · rounded surfaces — the page cards
   This is the block that overrides the design system. Section 4
   of miraai-2026.css pins every card surface to border-radius:0,
   and foundations.md says "square corners". Delete this one
   block to put the whole site back to square; nothing else here
   depends on it.
   Media-bearing surfaces need overflow:hidden as well, or the
   image squares off the corner it sits in.

   Only surfaces that stand alone are rounded. A cell that is
   butted against its neighbours and divided by a hairline is not
   a card, and rounding one notches the join: `.pipeline li` and
   `.state` both sit in a 1px-gap grid over a hairline ground, so
   they stay square. `.flow__node` is rounded because its nodes
   are separate boxes with an arrow in the gap between them.
   `.cert` carries no border or fill at all, so a radius on it
   would do nothing but risk clipping the mark.
   ============================================================ */
.card,.figure,.flow__node{ border-radius:var(--radius); }
.figure{ overflow:hidden; }

/* ============================================================
   20 · headings in Source Serif 4
   MIR-DS-001 §04 sets documents in Source Serif 4 700 and screen
   in Schibsted Grotesk 700. Tariq moved the website onto the
   serif on 18 Sep, so --display is redefined here rather than in
   the 2026 sheet, which is never edited.
   The serif is never tracked — §04: negative tracking closes its
   counters. Every negative letter-spacing the grotesque wanted is
   zeroed with it, or the headings set tight and muddy. That is
   why this block is longer than a one-line token swap.
   Arabic is untouched: miraai-rtl.css puts IBM Plex Sans Arabic
   in front of everything, because neither heading face has Arabic.
   ============================================================ */
:root{ --display:"Source Serif 4","Source Serif Pro",Georgia,serif; }
h1,h2,h3,.subhead,.study__name,.eco__item h3,.journey__step h3,.person h3,.pager__link,
.v-ghost,.v-figs b,.vnav__brand b,.nav__brand b{ letter-spacing:0; }

/* ============================================================
   21 · the heading highlight in gold
   Tariq, 18 Sep: the accent word is gold, not gold ink.
   This reverses rule 1 of MIR-DS-001 ("gold never sets text on a
   light ground") and reinstates the pair the standards retire by
   name: #F3B443 on #E7E9E4 measures 1.50:1. Delete this block to
   put the accent word back to gold ink at 5.5:1.
   Small gold-ink type — eyebrows, crumbs, roles, labels — is NOT
   touched here; the change is scoped to the emphasized word in a
   heading, which is what "highlighted" meant.
   ============================================================ */
h1 em,h2 em,h3 em,.subhead em,
.band--navy h1 em,.band--navy h2 em,.band--navy h3 em{ color:var(--gold); }

/* ============================================================
   §22  FIVE-STEP PIPELINE — LABEL ALIGNMENT
   The science method row runs to five cells, so the longest
   phase label wraps to two lines while the others do not, and
   the headings below them stop lining up. Reserve two lines for
   the label on the five-cell row only; the four-cell rows on the
   other pages are untouched.
   ============================================================ */
.pipeline:not(.pipeline--four) .pipeline__phase{ display:block; min-height:2.4em; }
@media (max-width:1100px){ .pipeline:not(.pipeline--four) .pipeline__phase{ min-height:0; } }

/* ============================================================
   §23  REASONING ANIMATION — FRAME HEIGHT
   The home page's reasoning animation, 25% shorter than it was
   (600 → 450). The animation crops its own empty bands to match.
   Below 820px its telemetry column stacks under the test, so the
   frame keeps the taller height there.
   ============================================================ */
.v-panel iframe.demo-reason{height:450px;}
@media (max-width:820px){ .v-panel iframe.demo-reason{height:600px;} }