/* ===================================================================
   ARTEMISIA MARKETS
   Brand palette and logo are the only things carried across from the
   firm's existing material: navy and gold from the letterhead, the mark
   from the logo. Amber is the one added colour and exists because a gold
   button is not loud enough to be a primary control, and because the
   price panel already owns red and green.
   =================================================================== */

/* The two families, self-hosted as WOFF2. These lived in fonts/fonts.css
   as TTFs; folded in here so the pages carry one stylesheet request, and
   the two faces the hero needs are preloaded from the page head. */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;
  src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npSTF-Qf1.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;
  src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npST3-Qf1.woff2) format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;
  src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npSQb_gf1.woff2) format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_m07NSg.woff2) format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_d0nNSg.woff2) format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_TknNSg.woff2) format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KUnNSg.woff2) format('woff2');
}

:root{
  --bg:#ffffff;
  --bg-alt:#f4f6f9;
  --card:#ffffff;
  --ink:#0c1220;
  --ink-soft:#414b5c;
  --muted:#6b7686;
  --rule:#e3e7ec;
  --rule-soft:#eef1f5;

  --navy:#0d1b3a;
  --navy-deep:#081226;
  --gold:#8a6d2f;
  --gold-soft:#c9b27a;
  /* PRIMARY ACCENT. Orange, reserved for calls to action that matter. */
  --amber:#e8801a;
  --amber-deep:#c96a0e;
  --amber-ink:#ffffff;
  /* SECONDARY ACCENT. The client area's own yellow, taken from its
     stylesheet at portal.artemisiamarkets.com:
        --gold-fill:#f7d32a  --gold-highlight:#fbe576
        --gold-fill-foreground:#0a1a2f  --gold-shadow:#8c6b2e
     Used for secondary controls and for highlighted words in body copy.
     Orange stays on the calls to action. */
  --yellow:#f7d32a;
  --yellow-deep:#dcba18;
  --yellow-ink:#0a1a2f;

  --up:#12a150;
  --down:#d93a2b;
  /* The notice overlay. */
  --coral-blue:#2f6f8f;

  --shadow-sm:0 2px 8px rgba(13,27,58,.07);
  --shadow-md:0 14px 34px -18px rgba(13,27,58,.3);
  --shadow-lg:0 40px 80px -40px rgba(8,18,38,.55);

  --shell:78rem;
  --pad:1.25rem;
  --r:18px;

  --display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
}
@media(min-width:640px){:root{--pad:2rem;}}
@media(min-width:1100px){:root{--pad:2.5rem;}}

[data-theme='dark']{
  --bg:#0b1120;
  --bg-alt:#101a2c;
  --card:#141e33;
  --ink:#eef2f8;
  --ink-soft:#c3ccda;
  --muted:#8794a8;
  --rule:#22304a;
  --rule-soft:#1a2438;

  --gold:#c9b27a;
  --amber:#f5942b;
  --amber-deep:#e8801a;
  --amber-ink:#12131a;
  /* Dark theme takes the client area's highlight rather than its fill. */
  --yellow:#fbe576;
  --yellow-deep:#f7d32a;
  --yellow-ink:#0a1a2f;

  --up:#2fc47a;
  --down:#f0604d;
  --coral-blue:#27607d;

  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow-md:0 14px 34px -18px rgba(0,0,0,.75);
  --shadow-lg:0 40px 80px -40px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box;}
/* The body already clips sideways, but a fixed element is not clipped by
   the body: it is laid out against the initial containing block, so the
   sticky bar was free to stretch a few pixels past the viewport and give
   a phone something to drag. `clip` rather than `hidden` on purpose --
   hidden would make the root a scroll container and take the masthead's
   position:sticky with it. */
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.7;
  overflow-x:clip;
  transition:background-color .25s ease,color .25s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}
/* Selection in the house colours rather than the operating system's blue. */
::selection{background:var(--amber);color:#fff;}
::-moz-selection{background:var(--amber);color:#fff;}
[data-theme='dark'] ::selection{background:var(--amber);color:#12131a;}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);}

/* ------------------------------------------------------------- type --- */
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;}
.hl{color:var(--amber);}
.h-hero{font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.05;letter-spacing:-.035em;}
.h-sec{font-size:clamp(1.75rem,3.1vw,2.6rem);text-wrap:balance;}
.h-card{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;}
.lede{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.65;color:var(--ink-soft);margin:1rem 0 0;max-width:46rem;}
.p{margin:.65rem 0 0;color:var(--ink-soft);font-size:.9375rem;}
.eyebrow{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .85rem;}
.centre{text-align:center;}
.centre .lede{margin-inline:auto;}

section{padding-block:clamp(3.25rem,6vw,5.5rem);}
.alt{background:var(--bg-alt);}
.page-head{padding-top:clamp(2.5rem,4.5vw,4rem);}

/* --------------------------------------------------------- controls --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.85rem 1.85rem;border:1px solid transparent;
  font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:.01em;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 8px 20px -10px var(--amber);}
/* A darker orange by itself is not a state anyone notices on an orange
   pill. It lifts and the glow under it opens up, which is the same
   language the cards use. */
.btn-amber:hover{background:var(--amber-deep);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px var(--amber);}
.btn-amber:active{transform:translateY(0);box-shadow:0 6px 14px -8px var(--amber);}
.btn-line{border-color:var(--rule);color:var(--ink);background:var(--card);}
.btn-line:hover{border-color:var(--ink);}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.btn-sm{padding:.55rem 1.2rem;font-size:.8125rem;}
.btn-xs{padding:.35rem .95rem;font-size:.75rem;}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem;}
.centre .actions{justify-content:center;}

/* ------------------------------------------------------ utility bar --- */
.util{background:var(--navy-deep);color:rgba(255,255,255,.5);font-size:.6875rem;
  border-bottom:1px solid rgba(255,255,255,.07);}
.util .shell{display:flex;align-items:flex-start;gap:2rem;padding-block:.7rem;}
.util-disc{display:grid;gap:.3rem;max-width:74rem;}
.util-disc p{margin:0;line-height:1.5;}
.util-jur{color:rgba(255,255,255,.5);}
.util-risk{color:rgba(255,255,255,.72);}
.util-right{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-shrink:0;padding-top:.1rem;}
.util a:hover{color:#fff;}
/* One knob that travels between the two icons, rather than a highlight
   that is painted on whichever icon happens to be current. The travel is
   one icon plus the gap between them. */
.tt{position:relative;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.2rem .4rem;}
.tt::before{content:'';position:absolute;left:.4rem;top:.2rem;
  width:1.35rem;height:1.35rem;border-radius:999px;
  background:rgba(255,255,255,.16);
  transition:transform .34s cubic-bezier(.22,1,.36,1),background-color .34s ease;}
[data-theme='dark'] .tt::before{transform:translateX(1.75rem);}
.tt span{position:relative;z-index:1;display:grid;place-items:center;
  width:1.35rem;height:1.35rem;border-radius:999px;opacity:.45;
  transition:opacity .28s ease;}
[data-theme='light'] .tt .tt-l{opacity:1;}
[data-theme='dark'] .tt .tt-d{opacity:1;}
@media(max-width:820px){.util-right{display:none;}}

/* The toggle lives in the masthead, which is sticky, so it stays reachable
   at any scroll depth. It sat in the utility bar and scrolled away. */
.head .tt{border-color:rgba(255,255,255,.28);flex-shrink:0;}
.head .tt:hover{border-color:rgba(255,255,255,.6);}
.head .tt::before{background:rgba(255,255,255,.2);}
/* Below 600px the toggle leaves the masthead to make room for the CTA and
   the menu button; the menu panel carries a "Switch theme" row instead, so
   the control is never lost. */
@media(max-width:600px){.head .tt{display:none;}}

/* --------------------------------------------------------- masthead ---
   Navy on both themes, because the firm's logo lockup sets ARTEMISIA in
   white and it is used as supplied rather than re-typeset. */
.head{position:sticky;top:0;z-index:50;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.1);}
.head .shell{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem;}
.brand{flex-shrink:0;display:block;}
.brand img{height:56px;width:auto;}
@media(max-width:600px){.brand img{height:42px;}}
.nav{display:none;gap:1.35rem;margin-left:auto;}
.nav a{font-size:.875rem;font-weight:500;color:rgba(255,255,255,.78);padding-block:.3rem;border-bottom:2px solid transparent;}
.nav a:hover{color:var(--gold-soft);}
.nav a.on{color:#fff;border-bottom-color:var(--amber);font-weight:600;}
.head-cta{display:flex;align-items:center;gap:.55rem;margin-left:auto;}
.head .btn-line{border-color:rgba(255,255,255,.32);color:#fff;background:transparent;}
.head .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1);}
@media(min-width:1380px){.nav{display:flex;}.head-cta{margin-left:0;}}
@media(max-width:560px){.head-cta .btn-line{display:none;}}

.mnav{position:relative;margin-left:.5rem;}
.mnav summary{list-style:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#fff;}
.mnav summary::-webkit-details-marker{display:none;}
.mnav-panel{position:absolute;right:0;top:calc(100% + .6rem);min-width:13rem;display:grid;gap:.1rem;
  max-width:calc(100vw - 2rem);max-height:calc(100dvh - var(--reg-h,0px) - 7rem);overflow-y:auto;
  background:var(--navy-deep);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.5rem;box-shadow:var(--shadow-md);}
/* In the light theme a navy panel hanging over cream reads as a piece of
   another site rather than as this page's menu, so it takes the page's
   own surface. The masthead above it stays navy either way. */
[data-theme='light'] .mnav-panel{
  background:var(--card);border-color:var(--rule);
  box-shadow:0 24px 48px -20px rgba(13,27,58,.35),0 4px 12px -6px rgba(13,27,58,.18);}
[data-theme='light'] .mnav-panel a,[data-theme='light'] .mnav-theme{color:var(--ink-soft);}
[data-theme='light'] .mnav-panel a:hover,[data-theme='light'] .mnav-theme:hover{
  background:var(--bg-alt);color:var(--amber);}
[data-theme='light'] .mnav-theme{border-top-color:var(--rule);}
.mnav-theme{display:block;width:100%;text-align:left;padding:.55rem .8rem;border-radius:9px;
  margin-top:.25rem;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 9px 9px;
  font-size:.9375rem;color:rgba(255,255,255,.85);}
.mnav-theme:hover{background:rgba(255,255,255,.09);color:var(--gold-soft);}
.mnav-panel a{padding:.55rem .8rem;border-radius:9px;font-size:.9375rem;color:rgba(255,255,255,.85);}
.mnav-panel a:hover{background:rgba(255,255,255,.09);color:var(--gold-soft);}

/* Where you are. A menu of eleven identical rows tells a reader nothing
   about which page they are on, so the current one is marked and the row
   carries a rule down its left edge. */
.mnav-panel a.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 var(--amber);}
[data-theme='light'] .mnav-panel a.on{background:var(--bg-alt);color:var(--ink);}

/* Log in is the one thing in the menu you do rather than read. */
.mnav-panel a.mnav-login{margin-top:.35rem;border-top:1px solid rgba(255,255,255,.12);
  border-radius:0;padding-top:.7rem;color:var(--amber);font-weight:700;}
.mnav-panel a.mnav-login:hover{background:rgba(232,128,26,.14);color:var(--amber);}
[data-theme='light'] .mnav-panel a.mnav-login{border-top-color:var(--rule);color:var(--amber);}
[data-theme='light'] .mnav-panel a.mnav-login:hover{background:rgba(232,128,26,.1);}
@media(min-width:1380px){.mnav{display:none;}}

/* ----------------------------------------------------------- ticker --- */
.ticker{background:var(--bg);border:0;overflow:hidden;position:relative;}
[data-theme='dark'] .ticker{
  background:linear-gradient(180deg,#8a6d2f 0%,#6b5322 100%);
}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:6rem;z-index:2;pointer-events:none;}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
[data-theme='dark'] .ticker::before{background:linear-gradient(90deg,#8a6d2f,transparent);}
[data-theme='dark'] .ticker::after{background:linear-gradient(270deg,#8a6d2f,transparent);}
.tk-track{display:flex;width:max-content;animation:tk 80s linear infinite;padding-block:.55rem;}
.tk-item{display:flex;align-items:baseline;gap:.5rem;padding-inline:1.15rem;white-space:nowrap;font-size:.75rem;border:0;}
.tk-item b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:.75rem;}
[data-theme='dark'] .tk-item b{color:#fff;}
.tk-item span{color:var(--muted);font-variant-numeric:tabular-nums;}
[data-theme='dark'] .tk-item span{color:rgba(255,255,255,.78);}
.tk-item i{font-style:normal;font-variant-numeric:tabular-nums;font-size:.6875rem;}
.tk-item i.q-up{color:var(--up);}
.tk-item i.q-dn{color:var(--down);}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- hero --- */
.hero{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;padding-block:clamp(3rem,5.5vw,4.75rem);}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(90rem 40rem at 15% -10%,rgba(232,128,26,.16),transparent 60%),
             radial-gradient(70rem 40rem at 95% 110%,rgba(201,178,122,.15),transparent 60%);}
.hero .shell{position:relative;}

/* Hero background film. The scrim is heavier on the left, where the copy
   sits, and the video never intercepts the pointer. */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block;}
.hero-video::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,18,38,.86) 0%,rgba(8,18,38,.55) 52%,rgba(8,18,38,.28) 100%);}
.hero-grid{display:grid;gap:2.75rem;align-items:center;}
.hero-slot{min-height:1px;}
@media(max-width:999px){.hero-slot{display:none;}}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem;}}
.hero h1{color:#fff;}
.hero-lede{font-size:clamp(1rem,1.35vw,1.125rem);line-height:1.65;color:rgba(255,255,255,.76);margin:1.25rem 0 0;max-width:31rem;}
.hero-fine{margin:1.5rem 0 0;font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.42);max-width:30rem;}
.hero-fine b{color:rgba(255,255,255,.7);font-weight:600;}

.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 2rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.12);}
@media(min-width:560px){.counts{grid-template-columns:repeat(4,1fr);}}
.count b{display:block;font-family:var(--display);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums;}
.count span{display:block;margin-top:.45rem;font-size:.75rem;line-height:1.4;color:rgba(255,255,255,.5);}



/* ------------------------------------------------------ price panel --- */
.quotes{margin-top:-3.5rem;position:relative;z-index:5;}
.qbox{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-md);overflow:hidden;}
.qtabs{display:flex;gap:.25rem;overflow-x:auto;padding:.6rem .75rem 0;border-bottom:1px solid var(--rule);scrollbar-width:none;}
.qtabs::-webkit-scrollbar{display:none;}
.qtab{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:.7rem 1.05rem;border-bottom:2px solid transparent;white-space:nowrap;}
.qtab:hover{color:var(--ink);}
.qtab[aria-selected='true']{color:var(--amber);border-bottom-color:var(--amber);}
.qtable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.qtable th{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:.85rem 1.1rem;background:var(--bg-alt);}
.qtable th:first-child{text-align:left;}
.qtable th:last-child,.qtable td:last-child{text-align:center;}
.qtable td{padding:.8rem 1.1rem;text-align:right;border-top:1px solid var(--rule-soft);font-size:.9375rem;}
.qtable td:first-child{text-align:left;font-family:var(--display);font-weight:700;font-size:.875rem;}
.qtable tr:hover td{background:var(--bg-alt);}
.q-up{color:var(--up);}
.q-dn{color:var(--down);}
.qfoot{padding:.85rem 1.1rem;font-size:.6875rem;color:var(--muted);border-top:1px solid var(--rule-soft);background:var(--bg-alt);}
@media(max-width:700px){
  .qtable th:nth-child(3),.qtable td:nth-child(3){display:none;}
  .quotes{margin-top:-2rem;}
}

/* ---------------------------------------------------------- figures ---
   No card and no coloured bar. A hairline between the columns is enough
   separation, and the figure carries the weight on its own. */
.four{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:960px){.four{grid-template-columns:repeat(4,1fr);}}
.plate{display:block;padding:.25rem 1.75rem;text-align:left;width:100%;background:none;border:0;
  border-left:1px solid var(--rule);transition:opacity .16s;}
.plate:first-child{border-left:0;padding-left:0;}
@media(min-width:960px){.plate:first-child{padding-left:0;}}
@media(max-width:959px){.plate:nth-child(odd){border-left:0;padding-left:0;}}
.plate .fig{margin:0;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--amber);font-variant-numeric:tabular-nums;}
/* Rendered 3D marks, not line icons in a tinted square. They sit bare on
   the page and lift a little on hover, like the rest of the site. */
/* The asset-class mark sits behind its own label, large and faint, so the
   block is signed without an icon competing with the words. */
.glyphed{position:relative;}
.glyph{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:7.5rem;height:7.5rem;color:var(--amber);opacity:.16;pointer-events:none;
  transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
@media(max-width:960px){.glyph{width:6rem;height:6rem;}}
/* Below this the plates stack one to a row and are shorter than the mark
   is tall, so a 6rem mark hangs out of its own plate and over the one
   underneath. It is sized to sit inside the plate instead. */
@media(max-width:700px){.glyph{width:3.5rem;height:3.5rem;right:.15rem;}}
[data-theme='dark'] .glyph{opacity:.18;}
.glyphed h3,.glyphed p{position:relative;}
a.glyphed:hover .glyph,button.glyphed[aria-pressed='true'] .glyph{
  opacity:.3;transform:translateY(-50%) scale(1.08) rotate(-3deg);
}
@media(prefers-reduced-motion:reduce){.glyph{transition:none;}}

/* Instrument marks in a quote row: a pair shows both currencies, an index
   or a commodity shows its own badge. */
.sym{display:inline-flex;align-items:center;gap:.6rem;}
.sym-mk{display:inline-flex;flex-shrink:0;}
.sym-mk img{width:1.35rem;height:1.35rem;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--card);}
.sym-mk img+img{margin-left:-.5rem;}
.sym-one img{width:1.5rem;height:1.5rem;}
.plate h3{font-size:1rem;font-weight:800;margin-top:.9rem;}
.plate p{margin:.45rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--muted);}
a.plate:hover .fig,button.mtab:hover .fig{color:var(--amber-deep);}
.band .plate{border-left-color:rgba(255,255,255,.16);}
.band .plate h3{color:#fff;}
.band .plate p{color:rgba(255,255,255,.6);}
button.mtab{cursor:pointer;}
button.mtab h3{transition:color .16s;}
button.mtab[aria-pressed='true'] h3{color:var(--amber);}
button.mtab[aria-pressed='true'] .fig{position:relative;}

/* ------------------------------------------------------------ cards --- */
.grid{display:grid;gap:1.25rem;}
@media(min-width:720px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.g3{grid-template-columns:repeat(3,1fr);}.g4{grid-template-columns:repeat(4,1fr);}}
/* A column, so that however much prose a card carries its link still
   lands on the same line as its neighbours' rather than floating up
   under a short paragraph. */
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.6rem;}
/* Lift and shadow are set once, further down, where the raised state is
   cross-faded rather than repainted. Only the border belongs here. */
.card:hover{border-color:var(--gold-soft);}
.more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);}
.card .more{margin-top:auto;padding-top:1.1rem;align-self:flex-start;}
.card:hover .more{gap:.7rem;}

/* -------------------------------------------------------- dark band --- */
.band{background:var(--navy);color:#fff;}
.band h1,.band h2,.band h3{color:#fff;}
.band .lede,.band .p{color:rgba(255,255,255,.72);}
.band .eyebrow{color:var(--gold-soft);}
.band .ticks li{color:rgba(255,255,255,.78);}
.band .ticks b{color:#fff;}

.split{display:grid;gap:2.75rem;align-items:center;}
@media(min-width:1000px){.split{grid-template-columns:1fr 1.1fr;gap:4rem;}}
.split.flip>*:first-child{order:2;}
@media(max-width:999px){.split.flip>*:first-child{order:0;}}

.ticks{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem;}
.ticks li{position:relative;padding-left:1.9rem;font-size:.9375rem;color:var(--ink-soft);}
.ticks li::before{content:'';position:absolute;left:0;top:.5em;width:1.1rem;height:1.1rem;border-radius:999px;background:var(--amber);opacity:.16;}
.ticks li::after{content:'';position:absolute;left:.33rem;top:.78em;width:.42rem;height:.42rem;border-radius:999px;background:var(--amber);}
.ticks b{color:var(--ink);font-weight:600;}

/* --------------------------------------------------------- LP marks ---
   No tile, no border, no card. The marks sit on the page in their own
   colours at a size you can actually read, which is the only thing a
   logo row is for. They are contained inside a fixed box so that a wide
   wordmark and a square badge come out optically the same weight. */
.lp{margin-top:2.5rem;}
.lp h4{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 1.5rem;}
.lp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.5rem 2.75rem;}
.lp-mark{display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.lp-mark .mk{display:flex;align-items:center;justify-content:center;height:3.6rem;width:9.5rem;}
.lp-mark img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),filter .32s ease;}
.lp-mark:hover img{transform:scale(1.28) translateY(-6px);
  filter:drop-shadow(0 14px 22px rgba(13,27,58,.32));}
[data-theme='dark'] .lp-mark:hover img{filter:invert(1) hue-rotate(180deg) brightness(1.35) contrast(.92) drop-shadow(0 14px 22px rgba(0,0,0,.6));}
.lp-mark{transition:transform .32s cubic-bezier(.34,1.56,.64,1);}
.lp-mark:hover{transform:translateY(-2px);}
.lp-mark:hover .nm{color:var(--amber);}
.lp-mark .nm{transition:color .2s ease;}
.lp-mark .mk-type{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);}
.lp-mark .nm{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:var(--muted);}
@media(max-width:640px){
  .lp-row{gap:2rem 2.5rem;}
  .lp-mark .mk{height:2.9rem;width:8rem;}
}

/* -------------------------------------------------------- execution --- */
.flow{display:grid;gap:.75rem;margin-top:2.5rem;align-items:stretch;}
@media(min-width:820px){.flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;}}
.flow.flow-v{grid-template-columns:1fr;margin-top:0;}
.flow-node{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.05);padding:1.4rem;text-align:center;}
.flow-node b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;color:#fff;}
.flow-node span{display:block;margin-top:.4rem;font-size:.8125rem;color:rgba(255,255,255,.6);line-height:1.55;}
.flow-arrow{display:grid;place-items:center;color:var(--amber);transform:rotate(90deg);}
@media(min-width:820px){.flow:not(.flow-v) .flow-arrow{transform:none;}}
.no-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.85rem;}
@media(min-width:760px){.no-list{grid-template-columns:repeat(3,1fr);}}
.no-list li{border-left:2px solid var(--amber);padding:.15rem 0 .15rem 1rem;}
.no-list b{display:block;font-family:var(--display);font-weight:800;font-size:.9375rem;color:#fff;}
.no-list span{display:block;margin-top:.3rem;font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.65);}

/* --------------------------------------------- transparency report --- */
.tr-bar{display:flex;height:2.75rem;border-radius:10px;overflow:hidden;margin-top:2rem;box-shadow:var(--shadow-sm);}
.tr-bar span{display:grid;place-items:center;font-family:var(--display);font-size:.8125rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.tr-legend{display:grid;gap:1rem;margin-top:1.5rem;}
@media(min-width:760px){.tr-legend{grid-template-columns:repeat(4,1fr);}}
.tr-item{display:flex;align-items:center;gap:.85rem;border:1px solid var(--rule);border-radius:14px;padding:.9rem 1rem;background:var(--card);}
.tr-swatch{width:.65rem;height:2.4rem;border-radius:4px;flex-shrink:0;}
.tr-item b{display:block;font-family:var(--display);font-size:.875rem;font-weight:700;}
.tr-item i{display:block;font-style:normal;font-size:1.125rem;font-weight:800;font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--ink);}
.tr-item small{display:block;font-size:.75rem;color:var(--muted);}

/* --------------------------------------------------- spec + compare --- */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:38rem;}
.spec th{font-family:var(--display);font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:.7rem 1rem;border-bottom:1px solid var(--rule);}
.spec th:first-child{text-align:left;}
.spec td{padding:.65rem 1rem;text-align:right;font-size:.8125rem;color:var(--ink-soft);border-bottom:1px solid var(--rule-soft);}
.spec td:first-child{text-align:left;font-family:var(--display);font-weight:700;font-size:.8125rem;color:var(--ink);}
.spec tr:hover td{background:var(--bg-alt);}
.spec-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);margin-top:1.75rem;}
.spec-more{display:block;text-align:center;padding:.85rem;font-family:var(--display);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border-top:1px solid var(--rule-soft);background:var(--bg-alt);}

.cmp{width:100%;border-collapse:collapse;min-width:34rem;}
.cmp th{font-family:var(--display);font-size:.8125rem;font-weight:800;padding:1rem 1.15rem;text-align:center;border-bottom:1px solid var(--rule);}
.cmp th:first-child{text-align:left;font-size:.625rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.cmp th.us{color:var(--amber);}
.cmp td{padding:.9rem 1.15rem;text-align:center;font-size:.875rem;color:var(--muted);border-bottom:1px solid var(--rule-soft);}
.cmp td:first-child{text-align:left;color:var(--ink);font-weight:500;}
.cmp td.us{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--amber) 7%,transparent);}
.cmp-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);margin-top:2.25rem;}

/* ------------------------------------------------------- calculator --- */
.calc{display:grid;gap:2rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.75rem;box-shadow:var(--shadow-md);}
@media(min-width:900px){.calc{grid-template-columns:1fr 1.15fr;padding:2.25rem;gap:3rem;}}
.calc-lab{display:block;font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem;}
.seg{display:flex;flex-wrap:wrap;gap:.4rem;}
.seg button{border:1px solid var(--rule);border-radius:999px;padding:.45rem 1rem;font-family:var(--display);font-size:.8125rem;font-weight:700;color:var(--muted);transition:all .16s;}
.seg button:hover{border-color:var(--ink);color:var(--ink);}
.seg button[aria-pressed='true']{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);}
.calc input[type=range]{width:100%;accent-color:var(--amber);margin-top:.4rem;}
.calc-lots{font-family:var(--display);font-size:2.25rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin:0;}
.calc-out{display:grid;gap:.75rem;}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-radius:14px;background:var(--bg-alt);}
.calc-row.win{background:var(--amber);color:var(--amber-ink);}
.calc-row .k{font-family:var(--display);font-size:.8125rem;font-weight:700;}
.calc-row .v{font-family:var(--display);font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.calc-note{margin:1rem 0 0;font-size:.75rem;line-height:1.6;color:var(--muted);}

/* --------------------------------------------------------- accounts --- */
.acc{display:grid;gap:1.25rem;}
@media(min-width:820px){.acc{grid-template-columns:repeat(2,1fr);}}
.acc-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.9rem;position:relative;}
.acc-card.feat{border-color:var(--amber);box-shadow:var(--shadow-md);}
.acc-tag{position:absolute;top:1.9rem;right:1.9rem;font-family:var(--display);font-size:.625rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber);padding:.25rem .65rem;border-radius:999px;}
.acc-card h3{font-size:1.375rem;}
.acc-rows{list-style:none;margin:1.4rem 0 0;padding:0;}
.acc-rows li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--rule-soft);font-size:.875rem;color:var(--muted);}
.acc-rows li b{color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------- conditions --- */
.cond{display:grid;gap:1.25rem;}
@media(min-width:900px){.cond{grid-template-columns:1.25fr 1fr;}}
.cond-box{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.75rem;}
.cond-box h3{font-size:1rem;font-weight:800;margin-bottom:1.1rem;}
.kv{list-style:none;margin:0;padding:0;}
.kv li{display:flex;justify-content:space-between;gap:1.25rem;padding:.62rem 0;border-top:1px solid var(--rule-soft);font-size:.8125rem;color:var(--muted);}
.kv li:first-child{border-top:0;}
.kv b{color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem;}
.tags span{border:1px solid var(--rule);border-radius:999px;padding:.3rem .8rem;font-size:.75rem;font-weight:600;color:var(--ink-soft);}

/* ======================================================== devices ====
   Three separate objects, each with its own angle rather than one group
   rotation: the tablet on the left turned to face right, the laptop on the
   right turned to face left, and the handset square to the reader below
   the laptop. They lean toward the pointer, and drift when it is still.  */
.scene{
  position:relative;width:100%;aspect-ratio:16/11;isolation:isolate;
  perspective:2000px;perspective-origin:50% 45%;
}
.scene-glow{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:108%;height:88%;z-index:-2;
  background:radial-gradient(closest-side,rgba(232,128,26,.24),transparent 68%);
}
/* On navy the amber wash read as a stray patch of white screen; in dark it
   is barely-there warmth instead. */
[data-theme='dark'] .scene-glow{
  background:radial-gradient(closest-side,rgba(201,106,14,.09),transparent 62%);
  filter:blur(22px);
}
.scene::after{
  content:'';position:absolute;left:8%;right:8%;bottom:3%;height:26px;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent 74%);filter:blur(14px);
}
.dev{position:absolute;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1);}

.screen{display:block;position:relative;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85);}
.screen img{width:100%;height:auto;display:block;}/* height:auto is load-bearing: the device captures now carry width and
   height attributes for the aspect ratio, and without it the attribute
   height applies as a literal 1030px and the rig grows five screens tall. */
.screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 24%,
             transparent 44%,transparent 100%);}

/* --- laptop, right, facing left --------------------------------------- */
.dev-laptop{right:-5%;top:2%;width:76%;}
.laptop-lid{
  position:relative;border-radius:9px 9px 2px 2px;padding:4px 4px 9px;
  background:linear-gradient(152deg,#5b636f 0%,#3a414b 30%,#262c35 62%,#171b22 88%,#333a44 100%);
  box-shadow:0 46px 70px -32px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5);
}
.laptop-lid .screen{border-radius:3px;}
.laptop-cam{position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#0d1117;}
.laptop-deck{
  position:absolute;top:calc(100% - 2px);left:0;width:100%;height:96px;
  transform-origin:top center;transform:rotateX(75deg);
  border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#3d444f 0%,#2c323b 30%,#22272f 70%,#1a1f26 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 40px rgba(0,0,0,.5);
}
.laptop-keys{position:absolute;left:9%;right:9%;top:14%;height:44%;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 3px,transparent 3px 5.4%),
             repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 3px,transparent 3px 20%),#1b2027;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);opacity:.85;}
.laptop-pad{position:absolute;left:50%;transform:translateX(-50%);bottom:11%;
  width:26%;height:30%;border-radius:4px;
  background:linear-gradient(180deg,#333a44,#272d35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}

/* --- tablet, left, facing right --------------------------------------- */
.dev-tablet{left:-5%;top:14%;width:43%;}
.tablet{border-radius:13px;padding:5px;
  background:linear-gradient(150deg,#5b636f 0%,#3a414b 32%,#262c35 64%,#171b22 90%,#333a44 100%);
  box-shadow:0 40px 58px -26px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5);}
.tablet .screen{border-radius:9px;}

/* --- handset, below the laptop, square on ----------------------------- */
.dev-phone{right:17%;bottom:-4%;width:15.5%;}
.phone{position:relative;border-radius:17px;padding:3px;
  background:linear-gradient(150deg,#6a727e 0%,#3a414b 30%,#262c35 64%,#171b22 90%,#333a44 100%);
  box-shadow:0 32px 46px -20px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.5);}
.phone .screen{border-radius:15px;}
/* The pill cut into the top of the display. No maker's mark on it. */
.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:32%;height:8px;border-radius:6px;background:#05070b;z-index:3;}

/* --- motion ----------------------------------------------------------- */
@keyframes devIn{from{opacity:0;transform:translateY(46px) scale(.94);}to{opacity:1;}}
@keyframes fLaptop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fTablet{0%,100%{transform:translateY(0)}50%{transform:translateY(-19px)}}
@keyframes fPhone {0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* The angle lives on an inner wrapper so the float can own `transform`
   on the outer one without the two fighting. */
.dev > div:first-child{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1);}
/* The laptop is its own 3D scene. The deck used to fold through the page
   scene's perspective, whose origin sits nowhere near the laptop, so the
   fold sheared sideways by a different amount in every rig. A local
   perspective centred on the laptop makes the fold symmetric everywhere,
   and flattening keeps the outer scene from projecting it a second time. */
.laptop{transform-style:flat !important;perspective:1100px;perspective-origin:50% 30%;}
.dev-laptop > .laptop{position:relative;transform:rotateY(-17deg) rotateX(5deg);}
.dev-tablet > .tablet{transform:rotateY(17deg) rotateX(4deg) rotate(-2deg);}
.dev-phone  > .phone {transform:rotateY(-3deg) rotateX(3deg);}
.dev-laptop{animation:devIn 1s cubic-bezier(.22,1,.36,1) both, fLaptop 7.5s ease-in-out 1s infinite;}
.dev-tablet{animation:devIn 1s cubic-bezier(.22,1,.36,1) .1s both, fTablet 6.3s ease-in-out 1.1s infinite;}
.dev-phone {animation:devIn 1s cubic-bezier(.22,1,.36,1) .2s both, fPhone 5.5s ease-in-out 1.2s infinite;}

@media(max-width:900px){
  .scene{aspect-ratio:16/12;perspective:1500px;}
  .dev-laptop{width:84%;right:-6%;}
  .laptop-deck{height:84px;}
  .dev-tablet{width:46%;}
  .dev-phone{width:18%;right:15%;}
}
@media(prefers-reduced-motion:reduce){
  .dev-laptop,.dev-tablet,.dev-phone{animation:none;}
}

/* ====================================================== certificate ===
   An A4 sheet in landscape, turned three-quarters to face left, engraved
   rather than styled: guilloche ground, a double gold rule inside the edge,
   the house mark struck as a seal, particulars in two register columns, a
   rosette between two signature lines, and a SPECIMEN stamp across the
   face. Hovering lifts it and squares it up, as if picked up to be read. */
/* The sheet's half of the split is the wide half, so the A4 landscape has
   the room it needs without ever running over the text column. */
/* Desktop only: below 1000px the base .split is single-column and this
   override must not resurrect the columns — unguarded, it squeezed the
   sheet off the side of a phone. */
@media(min-width:1000px){.split:has(.cert-stage){grid-template-columns:.78fr 1.22fr;}}
.cert-stage{perspective:1300px;perspective-origin:62% 45%;padding:1.5rem 0;
  width:104%;margin-left:-4%;
  /* Entrance and float live here as plain translateY, so hover on the
     sheet itself never fights them. */
  animation:certIn 1s cubic-bezier(.22,1,.36,1) both,
            certFloat 9s ease-in-out 1s infinite;}
.cert{
  position:relative;margin:0;overflow:hidden;padding:9px;
  aspect-ratio:297 / 210;                        /* A4, landscape */
  background:linear-gradient(172deg,#112240 0%,#0a1730 48%,#050b18 100%);
  border:1px solid rgba(201,178,122,.6);border-radius:3px;
  box-shadow:0 54px 96px -44px rgba(0,0,0,.95),
             0 8px 22px -10px rgba(0,0,0,.6),
             inset 0 0 70px rgba(201,178,122,.06);
  transform:rotateY(-24deg) rotateX(4deg) rotate(-1.2deg);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease;
}
.cert-stage:hover .cert{
  transform:rotateY(-5deg) rotateX(1.5deg) rotate(-.4deg) translateY(-10px) scale(1.04);
  box-shadow:0 66px 110px -40px rgba(0,0,0,.98),0 10px 26px -8px rgba(0,0,0,.6),
             inset 0 0 80px rgba(201,178,122,.12);
}
@keyframes certIn{
  from{opacity:0;transform:translateY(42px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes certFloat{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-12px);}
}

.cert-guilloche{
  position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:
    repeating-linear-gradient(38deg,rgba(201,178,122,.12) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-38deg,rgba(201,178,122,.1) 0 1px,transparent 1px 8px),
    repeating-radial-gradient(circle at 50% 44%,rgba(201,178,122,.13) 0 1px,transparent 1px 13px);
  -webkit-mask-image:radial-gradient(135% 108% at 50% 50%,#000 34%,transparent 90%);
          mask-image:radial-gradient(135% 108% at 50% 50%,#000 34%,transparent 90%);
}

/* Double rule inside the edge, the way an engraved document is bordered. */
.cert-inner{
  position:absolute;inset:9px;padding:1.35rem 1.5rem 1rem;
  display:flex;flex-direction:column;
  border:1px solid rgba(201,178,122,.5);
  box-shadow:inset 0 0 0 3px rgba(5,11,24,.9),inset 0 0 0 4px rgba(201,178,122,.28);
}
.cert-inner::before,.cert-inner::after{content:'';position:absolute;width:18px;height:18px;pointer-events:none;}
.cert-inner::before{top:7px;left:7px;border-top:2px solid var(--gold-soft);border-left:2px solid var(--gold-soft);}
.cert-inner::after{bottom:7px;right:7px;border-bottom:2px solid var(--gold-soft);border-right:2px solid var(--gold-soft);}

.cert-top{display:flex;align-items:center;gap:.9rem;padding-bottom:.7rem;}
.cert-rule-top{height:0;border-top:1px solid rgba(201,178,122,.45);
  box-shadow:0 3px 0 -2px rgba(201,178,122,.3);margin-bottom:.9rem;}
.cert-seal{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.cert-titles{min-width:0;}
.cert-issuer{display:block;font-family:var(--display);font-size:.5rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);}
.cert-kind{margin-top:.22rem;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;color:#fff;}
.cert-sub{display:block;margin-top:.18rem;font-size:.5625rem;letter-spacing:.06em;
  color:rgba(255,255,255,.45);}

.cert-rows{flex:1;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 1.75rem;align-content:space-evenly;}
.cert-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.34rem 0;border-bottom:1px dotted rgba(201,178,122,.3);}
.cert-rows dt{margin:0;font-size:.625rem;color:rgba(255,255,255,.5);white-space:nowrap;}
.cert-rows dd{margin:0;font-family:var(--display);font-size:.625rem;font-weight:700;
  color:#fff;text-align:right;}

.cert-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-top:.5rem;}
.cert-sign{flex:1;max-width:11rem;display:block;}
.cert-sign-line{display:block;border-bottom:1px solid rgba(255,255,255,.32);height:1.1rem;}
.cert-sign-cap{display:block;margin-top:.25rem;font-size:.5rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.4);}
.cert-rosette{width:3.1rem;height:3.1rem;flex-shrink:0;color:rgba(201,178,122,.6);
  align-self:center;}
.cert-rosette svg{width:100%;height:100%;}

/* The specimen mark. A red band cut by the two edges of the sheet, so the
   certificate cannot be read as a live one: it carries no ISIN, no number
   and no signature. The band spans the corner square's diagonal exactly,
   which puts its ends on the top and right edges. Clipped with `clip-path`
   and not `overflow`, because the sheet is a preserve-3d parent and does
   not clip its children. */
.cert-stamp{position:absolute;pointer-events:none;user-select:none;z-index:4;}
.cert-stamp-ribbon{top:0;right:0;width:21%;aspect-ratio:1;clip-path:inset(0);}
.cert-stamp-ribbon span{
  position:absolute;display:block;width:141.42%;left:-20.71%;top:50%;
  transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(180deg,#e8503e,#b52a1d);
  color:#fff;text-align:center;padding:.26rem 0;
  font-family:var(--display);font-size:.5rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;text-indent:.24em;
  box-shadow:0 2px 9px rgba(0,0,0,.55);}

@media(max-width:760px){
  .cert-stage{width:auto;margin-left:0;animation:none;}
  .cert-stamp-ribbon{width:30%;}
  .cert{aspect-ratio:auto;transform:none;}
  .cert-stage:hover .cert{transform:none;}
  /* The engraving type is sized for a desktop sheet; on a phone the same
     sizes are 8-10px. Flat sheet, readable register. */
  .cert-issuer{font-size:.625rem;}
  .cert-sub{font-size:.6875rem;}
  .cert-rows dt,.cert-rows dd{font-size:.75rem;}
  .cert-sign-cap{font-size:.625rem;}
  .cert-inner{position:relative;inset:auto;padding:1.1rem 1rem;}
  .cert-rows{grid-template-columns:1fr;}
  .cert-foot{flex-wrap:wrap;gap:.75rem;}
}
@media(prefers-reduced-motion:reduce){
  .cert-stage{animation:none;}
}

/* ------------------------------------------------------------ steps --- */
.steps{display:grid;gap:1.25rem;}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);}}
.step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.75rem;}
.step-n{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;background:var(--amber);color:var(--amber-ink);
  font-family:var(--display);font-weight:800;font-size:1rem;margin-bottom:1.1rem;}

/* -------------------------------------------------------------- faq --- */
.faq{display:grid;gap:.65rem;margin-top:2.25rem;}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;display:flex;align-items:center;gap:1rem;font-family:var(--display);font-size:.9375rem;font-weight:700;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';margin-left:auto;font-size:1.35rem;font-weight:700;color:var(--amber);line-height:1;}
.faq details[open] summary::after{content:'\2212';}
.faq details[open]{border-color:var(--amber);}
.faq .a{padding:0 1.4rem 1.35rem;font-size:.9375rem;line-height:1.7;color:var(--ink-soft);margin:0;}

/* ------------------------------------------------------------ close --- */
.close{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;}
.close::before{content:'';position:absolute;inset:0;background:radial-gradient(60rem 30rem at 50% 130%,rgba(232,128,26,.22),transparent 65%);}
.close .shell{position:relative;}
.close h2{color:#fff;}
.close .lede{color:rgba(255,255,255,.72);}

/* ----------------------------------------------------------- footer --- */
.foot{background:var(--navy-deep);color:rgba(255,255,255,.6);font-size:.8125rem;border-top:1px solid rgba(255,255,255,.08);}
.foot .shell{padding-block:3.25rem;}
.foot-grid{display:grid;gap:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.1);}
@media(min-width:720px){.foot-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}}
.foot h4{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 1rem;}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.foot a:hover{color:#fff;}
.foot-addr{font-size:.75rem;line-height:1.75;margin:1rem 0 0;color:rgba(255,255,255,.58);}
.foot-addr a{color:var(--gold-soft);}
.legal{padding-top:2.25rem;display:grid;gap:1.35rem;}
.disc{max-width:64rem;}
.disc h5{margin:0 0 .35rem;font-family:var(--display);font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.disc p{margin:0;font-size:.75rem;line-height:1.65;color:rgba(255,255,255,.48);}
.disc-risk p{color:rgba(255,255,255,.78);}
.disc-fine,.disc-auth{margin:0;font-size:.6875rem;line-height:1.6;max-width:64rem;
  color:rgba(255,255,255,.4);}
.disc-auth{color:rgba(255,255,255,.6);}
.legal .rule{margin:0;border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem;
  font-size:.75rem;color:rgba(255,255,255,.5);}

/* ------------------------------------------------------ sticky bar --- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  background:var(--navy-deep);border-top:1px solid rgba(201,178,122,.3);box-shadow:0 -14px 40px -20px rgba(0,0,0,.7);}
.dock.on{transform:none;}
.dock .shell{display:flex;align-items:center;gap:1.25rem;padding-block:.8rem;}
.dock p{margin:0;color:rgba(255,255,255,.72);font-size:.8125rem;line-height:1.45;}
.dock p b{color:#fff;font-family:var(--display);font-weight:800;display:block;font-size:.9375rem;}
.dock .actions{margin:0 0 0 auto;flex-shrink:0;}
@media(max-width:700px){.dock p{display:none;}.dock .actions{margin-inline:auto;}}

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

/* ======================================================== motion =====
   One idea, used everywhere: content settles into place the first time it
   is seen, and never again. Nothing loops, nothing parallaxes, nothing
   moves while you are reading it. Elements are visible by default and only
   become hidden once the observer has claimed them, so the page still
   reads with JavaScript off. */
/* Purely additive. Nothing is hidden waiting to be revealed: without the
   class the element is simply visible, and with it the element animates in.
   The earlier version set opacity to zero and relied on the observer to
   put it back, which left whole rows blank whenever the observer missed
   one. Content must never depend on an animation having run. */
.js-reveal.in{animation:revealIn .7s cubic-bezier(.22,1,.36,1) both;}
/* No transform in `to`: with a `both` fill, ending on transform:none would
   pin any revealed element that carries its own resting transform flat,
   forever. Ending open-handed lets the underlying value show through. */
@keyframes revealIn{from{opacity:0;transform:translateY(18px)}to{opacity:1}}

/* The hero settles on load rather than on scroll, staggered down the column. */
.hero-grid > div > *{animation:rise .8s cubic-bezier(.22,1,.36,1) both;}
.hero-grid > div > *:nth-child(1){animation-delay:.05s}
.hero-grid > div > *:nth-child(2){animation-delay:.13s}
.hero-grid > div > *:nth-child(3){animation-delay:.21s}
.hero-grid > div > *:nth-child(4){animation-delay:.29s}
.hero-grid > div > *:nth-child(5){animation-delay:.37s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* The quote panel lifts a little as the pointer approaches a row. */
.qtable tbody tr{transition:background-color .16s ease;}

/* The transparency bar draws itself out from the left. */
.tr-bar span{animation:grow .9s cubic-bezier(.22,1,.36,1) both;transform-origin:left;}
.tr-bar span:nth-child(2){animation-delay:.08s}
.tr-bar span:nth-child(3){animation-delay:.16s}
.tr-bar span:nth-child(4){animation-delay:.24s}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}

/* The device rig tilts fractionally toward the pointer. */

@media(prefers-reduced-motion:reduce){
  .js-reveal.in{animation:none !important;}
  .hero-grid > div > *,.tr-bar span{animation:none;}
}

/* ==================================================== partner routes ===
   A selector rather than a table of terms. Three routes, one at a time,
   each numbered because they are alternatives and the number is the label
   the reader scans for. */
.routes{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--card);}
.routes-tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--bg-alt);}
.rt{flex:1;padding:.95rem .8rem;font-family:var(--display);font-size:.8125rem;font-weight:700;
  color:var(--muted);border-bottom:2px solid transparent;transition:color .16s,border-color .16s,background-color .16s;}
.rt:hover{color:var(--ink);}
.rt[aria-selected='true']{color:var(--amber);border-bottom-color:var(--amber);background:var(--card);}
.routes-body{position:relative;padding:1.9rem 1.75rem;}
.route{display:none;}
.route[data-on='true']{display:block;animation:routeIn .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes routeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.route-n{display:block;font-family:var(--display);font-size:2.25rem;font-weight:800;
  line-height:1;letter-spacing:-.04em;color:var(--amber);opacity:.28;}
.route h3{margin-top:.5rem;font-size:1.25rem;}
.route p{margin:.7rem 0 1.35rem;font-size:.9375rem;line-height:1.65;color:var(--ink-soft);}
@media(prefers-reduced-motion:reduce){.route[data-on='true']{animation:none;}}

/* ==================================================== secondary accent ===
   Orange carries the calls to action. This is the quieter tone, for the
   outline button and for a highlighted word inside body copy, so the page
   has two levels of emphasis rather than one shouting everywhere. */
.btn-yellow{background:var(--yellow);color:var(--yellow-ink);
  box-shadow:0 8px 20px -10px var(--yellow);}
.btn-yellow:hover{background:var(--yellow-deep);transform:translateY(-1px);}
.hl-y{color:var(--yellow);}
.eyebrow{color:var(--yellow);}
.lp h4{color:var(--yellow);}
.route-n{color:var(--yellow);}
.step-n{background:var(--yellow);color:var(--yellow-ink);}
.ticks b{color:var(--ink);}
.cert-issuer,.cert-no{color:var(--yellow);}

/* ================================================= regulatory overlay ===
   Floats over the site rather than occupying a band of it, and closes. */
.util{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:var(--coral-blue);color:rgba(255,255,255,.82);
  font-size:.6875rem;border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.util.gone{transform:translateY(-100%);opacity:0;pointer-events:none;}
.util .shell{display:flex;align-items:flex-start;gap:1.5rem;padding-block:.7rem;}
.util-disc{display:grid;gap:.3rem;max-width:74rem;}
.util-disc p{margin:0;line-height:1.5;}
.util-jur{color:rgba(255,255,255,.72);}
.util-risk{color:#fff;}
.util-x{
  margin-left:auto;flex-shrink:0;display:grid;place-items:center;
  width:2.75rem;height:2.75rem;border-radius:50%;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.3);transition:all .16s;
}
.util-x:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6);}
/* The overlay sits over the masthead, so the page starts below it until
   it is dismissed. */
body{padding-top:var(--reg-h,0px);transition:padding-top .35s cubic-bezier(.22,1,.36,1);}
.head{top:var(--reg-h,0px);transition:top .35s cubic-bezier(.22,1,.36,1);}
/* Anything reached by a link to its id has to clear the chrome that is
   parked over the top of the page, or it arrives with its own heading
   hidden behind the masthead and reads as having landed somewhere else.
   The band's height is already published as --reg-h; the masthead is the
   5.75rem. */
section[id]{scroll-margin-top:calc(var(--reg-h,0px) + 5.75rem);}
@media(max-width:700px){.util-disc{max-width:none;}}

/* ============================================ jurisdiction notice overlay ===
   The arrival notice. Sits above everything else on the page (the utility
   bar is z-90), centred over a dimmed navy backdrop, and cannot be dismissed
   except by its two buttons. Behaviour lives in site.js. Elevation follows
   the same recipe as the cards, so it sits on the same --lift scale. */
.jn{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:var(--pad);background:rgba(8,18,38,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:jn-in .25s ease;
}
.jn-panel{
  width:100%;max-width:34rem;max-height:calc(100dvh - 2.5rem);overflow-y:auto;
  background:var(--card);border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.25rem);outline:none;
  box-shadow:
    0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-30px * var(--lift)) rgba(13,27,58,.42),
    0 calc(6px * var(--lift))  calc(16px * var(--lift)) calc(-8px * var(--lift))  rgba(13,27,58,.16);
  animation:jn-rise .4s cubic-bezier(.22,1,.36,1);
}
[data-theme='dark'] .jn-panel{box-shadow:
  0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-28px * var(--lift)) rgba(0,0,0,.85),
  inset 0 0 0 1px rgba(255,255,255,.07);}
.jn-h{margin:0 0 1rem;font-family:var(--display);font-size:1.35rem;font-weight:800;
  letter-spacing:-.015em;line-height:1.3;}
.jn-panel p{margin:0 0 .9rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft);}
.jn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;
  margin-top:1.4rem;padding-top:1.25rem;border-top:1px solid var(--rule);}
/* Set quieter than the primary, but a real control and not a footnote: the
   third paragraph says "if you choose to continue", so there has to be
   something to choose instead. */
.jn-leave{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.875rem;
  color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:4px;transition:color .18s;
}
.jn-leave:hover{color:var(--ink);text-decoration-color:var(--ink);}
@keyframes jn-in{from{opacity:0;}}
@keyframes jn-rise{from{opacity:0;transform:translateY(14px);}}
@media(prefers-reduced-motion:reduce){.jn,.jn-panel{animation:none;}}

/* ======================================================== elevation ===
   Surfaces come off the page instead of being drawn on it. No borders: a
   deep shadow in light, a lit rim and a coloured wash in dark, and a soft
   glow behind the larger panels so they read as backlit.

   `--lift` is the one number that controls how far forward everything
   sits, so the whole page can be tuned from here.                        */
:root{ --lift:1; }

.card,.step,.cond-box,.acc-card,.routes,.calc,.qbox,.spec-wrap,.cmp-wrap,
.price-wrap,.tr-item,.faq details,.plate-panel{
  border:0 !important;
  background:var(--card);
  box-shadow:
    0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-30px * var(--lift)) rgba(13,27,58,.42),
    0 calc(6px * var(--lift))  calc(16px * var(--lift)) calc(-8px * var(--lift))  rgba(13,27,58,.16);
}
[data-theme='dark'] .card,[data-theme='dark'] .step,[data-theme='dark'] .cond-box,
[data-theme='dark'] .acc-card,[data-theme='dark'] .routes,[data-theme='dark'] .calc,
[data-theme='dark'] .qbox,[data-theme='dark'] .spec-wrap,[data-theme='dark'] .cmp-wrap,
[data-theme='dark'] .price-wrap,[data-theme='dark'] .tr-item,[data-theme='dark'] .faq details{
  box-shadow:
    0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-28px * var(--lift)) rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.07);
}
.acc-card.feat{box-shadow:
  0 calc(40px * var(--lift)) calc(72px * var(--lift)) calc(-30px * var(--lift)) rgba(232,128,26,.4),
  0 6px 16px -8px rgba(13,27,58,.2);}

/* The light behind. A wash of the accent under the panel, wider than the
   panel itself, so the edge reads as lit rather than outlined. */
.lit{position:relative;}
.lit::before{
  content:'';position:absolute;left:4%;right:4%;top:10%;bottom:-6%;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 60%,rgba(232,128,26,.3),transparent 72%);
  filter:blur(34px);opacity:.75;
}
[data-theme='dark'] .lit::before{opacity:1;
  background:radial-gradient(60% 60% at 50% 60%,rgba(232,128,26,.34),transparent 72%);}

/* ============================================================ tilt ====
   The panel turns a few degrees toward the pointer. Small numbers on
   purpose: this should register as the surface being physical, not as the
   page moving under the reader.                                          */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.tilt-wrap{perspective:1400px;}

/* ------------------------------------------------- changing the theme ---
   Colours are switched by swapping one attribute on <html>, which repaints
   every surface on the same frame and reads as the page blinking. The
   transition is therefore granted to everything, but ONLY for as long as
   the switch takes: the class goes on immediately before the attribute
   changes and comes off a third of a second later, so no hover, scroll or
   animation anywhere else on the site ever pays for it.

   Longhands rather than the shorthand, and no !important: `html.theming
   body *` outranks the single-class rules that own these transitions the
   rest of the time. */
html.theming body,html.theming body *,html.theming body *::before,html.theming body *::after{
  transition-property:background-color,color,border-color,fill,stroke,box-shadow,opacity;
  transition-duration:.3s;
  transition-timing-function:ease;
}
/* Transform is deliberately not in that list: the price strip writes its
   own transform every frame, and handing it a third of a second of easing
   mid-switch would make it stutter. The one thing that does have to move
   is the toggle's knob, which outranks the blanket rule on class count. */
html.theming .tt::before{transition:transform .34s cubic-bezier(.22,1,.36,1),background-color .3s ease;}

@media(prefers-reduced-motion:reduce){
  html.theming body,html.theming body *,html.theming body *::before,html.theming body *::after{
    transition-duration:0s;
  }
}

/* ========================================================== cursor ====
   A dot with a wide, soft field around it. The native pointer is hidden
   only where a fine pointer exists, so touch and keyboard are untouched. */
@media (pointer:fine){
  html.cur-on,html.cur-on *{cursor:none !important;}
  html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:text !important;}
}
.cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;}
.cur-glow{
  position:absolute;left:0;top:0;width:34rem;height:34rem;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side,
    rgba(232,128,26,.16) 0%,rgba(232,128,26,.09) 26%,rgba(232,128,26,.04) 48%,transparent 72%);
  transition:opacity .3s ease;
}
.cur-dot{
  position:absolute;left:0;top:0;width:9px;height:9px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px rgba(232,128,26,.22),0 0 14px 2px rgba(232,128,26,.55);
  transition:width .18s ease,height .18s ease,background-color .18s ease;
}
.cur.on-link .cur-dot{width:26px;height:26px;background:rgba(232,128,26,.28);
  box-shadow:0 0 0 1px var(--amber),0 0 22px 4px rgba(232,128,26,.4);}
[data-theme='dark'] .cur-glow{
  background:radial-gradient(circle closest-side,
    rgba(245,148,43,.2) 0%,rgba(245,148,43,.11) 26%,rgba(245,148,43,.05) 48%,transparent 72%);
}
/* Fallbacks. Hiding the native pointer is only safe where ours is going to
   be painted; forced colours strips the dot's gradient and shadow, and a
   printed page has no pointer at all. Both hand it straight back. The
   script does the same check at runtime, but these hold even if it does
   not run. */
@media (forced-colors:active){
  html.cur-on,html.cur-on *{cursor:auto !important;}
  .cur{display:none !important;}
}
@media print{.cur{display:none !important;}}

/* ============================================ light and dark coherence ==
   Several liquidity marks are black artwork and vanish on the dark ground.
   They are inverted there, and the ones that are already light or that
   carry brand colour worth keeping are exempt.                            */
[data-theme='dark'] .lp-mark img{filter:invert(1) hue-rotate(180deg) brightness(1.35) contrast(.92);}
[data-theme='dark'] .lp-mark img[data-keep]{filter:none;}
/* A mark that ships its own reversed file shows that file instead of being
   inverted. Only one of the pair is ever in the flow, so the tile keeps its
   single-mark layout. */
.lp-mark .mk-d{display:none;}
[data-theme='dark'] .lp-mark .mk-l{display:none;}
[data-theme='dark'] .lp-mark .mk-d{display:block;}
[data-theme='dark'] .lp-mark:hover .mk-d{filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));}
[data-theme='dark'] .lp-mark .mk-type{color:var(--ink);}

@media(prefers-reduced-motion:reduce){
  .tilt{transition:none;}
  .cur{display:none;}
  html.cur-on,html.cur-on *{cursor:auto !important;}
}

/* ------------------------------------------------------- step artwork ---
   One drawing per card, showing what the step actually involves. Sits
   above the words rather than behind them: here the picture is the label. */
.step-art{display:block;width:100%;max-width:9.5rem;height:auto;
  color:var(--amber);opacity:.9;margin:.25rem 0 1.25rem;}
[data-theme='dark'] .step-art{opacity:.95;}
.step{display:flex;flex-direction:column;}
.step .step-n{order:-1;}

/* --------------------------------------------------- collapsible specs --- */
.spec-wrap.collapsed .spec tbody tr.x{display:none;}
.spec-wrap.open .spec tbody tr.x{display:table-row;}
/* The toggle sits AFTER the scroll wrapper (a control inside a sideways-
   scrolling container drifts out of view), so it dresses as its own bar. */
.spec-toggle{display:block;width:100%;padding:.9rem;margin-top:.6rem;
  font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);background:var(--bg-alt);
  border:1px solid var(--rule);border-radius:var(--r);transition:background-color .16s;}
.spec-more{display:block;margin-top:.8rem;}
.spec-toggle:hover{background:var(--card);}

/* Flow nodes carry a drawing of the stage, on the same footing as the
   step cards: the picture is the label, the words are the caption. */
.flow-art{display:block;width:100%;max-width:5.5rem;height:auto;margin:0 auto .9rem;
  color:var(--amber);opacity:.95;}

/* --------------------------------------------------------------- form --- */
.field{margin-bottom:1.1rem;}
.field label{display:block;margin-bottom:.4rem;font-family:var(--display);
  font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;border-radius:10px;background:var(--bg-alt);
  border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:.9375rem;
  transition:border-color .16s,background-color .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);background:var(--card);}
.field textarea{resize:vertical;min-height:7rem;}

/* The report animates in like the rest of the page: the bar draws out from
   the left, then each legend card arrives under its own segment. */
.tr-legend .tr-item{opacity:0;transform:translateY(14px);
  animation:trIn .6s cubic-bezier(.22,1,.36,1) forwards;}
.tr-legend .tr-item:nth-child(1){animation-delay:.55s}
.tr-legend .tr-item:nth-child(2){animation-delay:.66s}
.tr-legend .tr-item:nth-child(3){animation-delay:.77s}
.tr-legend .tr-item:nth-child(4){animation-delay:.88s}
@keyframes trIn{to{opacity:1;transform:none}}
.tr-item{transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease;}
.tr-item:hover{transform:translateY(-5px);}
.tr-swatch{transition:height .28s cubic-bezier(.34,1.56,.64,1);}
.tr-item:hover .tr-swatch{height:3rem;}
/* The segment lifts when its card is hovered, and vice versa. */
.tr-bar span{transition:filter .25s ease,transform .25s ease;transform-origin:center;}
.tr-bar:hover span{filter:saturate(.55) opacity(.72);}
.tr-bar span:hover{filter:none;transform:scaleY(1.14);}
@media(prefers-reduced-motion:reduce){
  .tr-legend .tr-item{opacity:1;transform:none;animation:none;}
  .tr-item:hover,.tr-bar span:hover{transform:none;}
}

/* ----------------------------------------------------- order types ---
   Not chips in outlined pills. A two-column list where each entry carries
   a mark for what the order does: up, down, a stop, a target. The mark is
   the information; the box was decoration. */
.otypes{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:0;grid-template-columns:1fr 1fr;}
.otypes li{position:relative;padding:.55rem 0 .55rem 1.5rem;font-size:.8125rem;
  color:var(--ink-soft);border-bottom:1px solid var(--rule-soft);}
.otypes li:nth-child(odd){padding-right:1.25rem;}
.otypes li svg{position:absolute;left:0;top:.72rem;width:.95rem;height:.95rem;}
.otypes li[data-d="up"] svg{color:var(--up);}
.otypes li[data-d="dn"] svg{color:var(--down);}
.otypes li[data-d="mkt"] svg{color:var(--yellow);}
.otypes li[data-d="stop"] svg{color:var(--down);}
.otypes li[data-d="tp"] svg{color:var(--up);}
.otypes li:last-child:nth-child(odd){grid-column:1 / -1;}

/* Key/value rows arrive in sequence once their panel is in view, which is
   the same gesture the rest of the page uses. */
.cond-box.in .kv li,.cond-box.in .otypes li{
  opacity:0;transform:translateX(-8px);animation:kvIn .45s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes kvIn{to{opacity:1;transform:none}}
.cond-box.in .kv li:nth-child(1),.cond-box.in .otypes li:nth-child(1){animation-delay:.04s}
.cond-box.in .kv li:nth-child(2),.cond-box.in .otypes li:nth-child(2){animation-delay:.08s}
.cond-box.in .kv li:nth-child(3),.cond-box.in .otypes li:nth-child(3){animation-delay:.12s}
.cond-box.in .kv li:nth-child(4),.cond-box.in .otypes li:nth-child(4){animation-delay:.16s}
.cond-box.in .kv li:nth-child(5),.cond-box.in .otypes li:nth-child(5){animation-delay:.20s}
.cond-box.in .kv li:nth-child(6),.cond-box.in .otypes li:nth-child(6){animation-delay:.24s}
.cond-box.in .kv li:nth-child(7),.cond-box.in .otypes li:nth-child(7){animation-delay:.28s}
.cond-box.in .kv li:nth-child(n+8){animation-delay:.32s}
.kv li{transition:color .18s ease;}
.kv li:hover{color:var(--ink);}
.kv li:hover b{color:var(--amber);}
@media(prefers-reduced-motion:reduce){
  .cond-box.in .kv li,.cond-box.in .otypes li{opacity:1;transform:none;animation:none;}
}

/* Route artwork, on the same footing as the step cards: the number marks
   which of the three you are reading, the drawing says what it is. */
.route-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.route-art{flex-shrink:0;width:6.5rem;height:auto;color:var(--amber);opacity:.9;}
.route[data-on='true'] .route-art{animation:artIn .55s cubic-bezier(.22,1,.36,1) .1s both;}
@keyframes artIn{from{opacity:0;transform:translateX(14px)}to{opacity:.9;transform:none}}
@media(max-width:520px){.route-art{width:5rem;}}
@media(prefers-reduced-motion:reduce){.route[data-on='true'] .route-art{animation:none;opacity:.9;}}

/* ================================================ elevation, dark bands ==
   A shadow is invisible against navy. Panels sitting on a dark band are
   raised with a lighter surface, a lit top edge and a glow underneath. */
.band .flow-node,.band .plate,.band .cond-box,.band .card,.close .flow-node{
  position:relative;border:0 !important;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.045) 100%);
  box-shadow:
    0 38px 64px -22px rgba(0,0,0,.92),
    0 10px 22px -10px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(2px);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease;
}
.band .flow-node::after,.band .plate::after{
  content:'';position:absolute;left:8%;right:8%;bottom:-14%;height:44%;z-index:-1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,128,26,.34),transparent 72%);
  filter:blur(22px);
}
.band .flow-node:hover,.band .plate:hover{
  transform:translateY(-6px);
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 100%);
  box-shadow:
    0 46px 74px -22px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.14);
}
/* The plate's hairline divider is redundant once it is a raised surface. */
.band .plate{border-left:0 !important;padding:1.5rem;}
.band .four{gap:1.1rem;}

/* Light theme, harder. The panels were reading as flat rectangles. */
:root{ --lift:1.35; }

/* Three of these four had no transition at all, so the lift snapped, and
   the shadow it swapped in blurs over a hundred pixels. Animating
   box-shadow means re-rasterising that blur on every frame, which is the
   one thing a card hover cannot afford.

   So: the card itself only ever moves, which the compositor handles on
   its own, and the raised shadow lives on a pseudo-element that is
   cross-faded with opacity. Both blurs are painted once and never again.
   The pseudo has no background of its own and an outer shadow is not
   drawn inside its own box, so it covers nothing.                       */
.card,.step,.cond-box,.acc-card{
  position:relative;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
/* The resting shadow stays on the card and is never touched, so the band
   variants and every other class sharing that rule are left alone. This
   one lies on top of it, which is why its alphas are lower than the
   figures it replaces: over the resting shadow they come out at the same
   place the old hover state did. */
.card::after,.step::after,.cond-box::after,.acc-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .28s ease;
  box-shadow:
    0 calc(48px * var(--lift)) calc(80px * var(--lift)) calc(-34px * var(--lift)) rgba(13,27,58,.22),
    0 8px 20px -10px rgba(13,27,58,.1);
}
.card:hover::after,.step:hover::after,.cond-box:hover::after,.acc-card:hover::after{opacity:1;}
.card:hover,.step:hover,.cond-box:hover,.acc-card:hover{transform:translateY(-5px);}

/* The featured account card is lit amber rather than navy, at rest and
   raised. */
.acc-card.feat::after{
  box-shadow:
    0 calc(52px * var(--lift)) calc(88px * var(--lift)) calc(-32px * var(--lift)) rgba(232,128,26,.24),
    0 8px 20px -10px rgba(13,27,58,.12);
}
[data-theme='dark'] .card::after,[data-theme='dark'] .step::after,
[data-theme='dark'] .cond-box::after,[data-theme='dark'] .acc-card::after{
  box-shadow:0 48px 84px -30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.075);
}
@media(prefers-reduced-motion:reduce){
  .band .flow-node:hover,.band .plate:hover,.card:hover,.step:hover,
  .cond-box:hover,.acc-card:hover{transform:none;}
  .card::after,.step::after,.cond-box::after,.acc-card::after{transition:none;}
}

/* Card artwork draws itself in when the card is first seen, then answers
   the pointer. Same gesture on the steps, the flow nodes and the routes. */
/* The drawing is an enhancement, never a precondition. Artwork is fully
   visible by default; the dash is applied only where the reveal class has
   actually landed, so a missed observer can never leave a card empty.
   It did, and that is why the icons kept disappearing. */
.in .step-art path,.in .step-art rect,.in .step-art circle,
.in .flow-art path,.in .flow-art rect,.in .flow-art circle,
.route[data-on='true'] .route-art path,.route[data-on='true'] .route-art rect,
.route[data-on='true'] .route-art circle{
  stroke-dasharray:420;
  animation:draw 1.15s cubic-bezier(.22,1,.36,1) both;
}
@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.in .step-art *:nth-child(2){animation-delay:.1s}
.in .step-art *:nth-child(3){animation-delay:.2s}
.in .step-art *:nth-child(4){animation-delay:.3s}
.in .step-art *:nth-child(5){animation-delay:.4s}
.step-art,.flow-art,.route-art{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.step:hover .step-art,.flow-node:hover .flow-art{transform:translateY(-5px) scale(1.05);}
@media(prefers-reduced-motion:reduce){
  .step-art path,.step-art rect,.step-art circle,
  .flow-art path,.flow-art rect,.flow-art circle,
  .route-art path,.route-art rect,.route-art circle{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;}
  .step:hover .step-art,.flow-node:hover .flow-art{transform:none;}
}

/* On the gold strip the up and down marks need their own values or they
   disappear into the ground. */
[data-theme='dark'] .tk-item i.q-up{color:#0f3d2a;}
[data-theme='dark'] .tk-item i.q-dn{color:#5c1410;}

/* ------------------------------------------------------------ documents --- */
.doc{display:block;position:relative;}
.doc-mk{display:block;width:2.4rem;height:2.4rem;color:var(--amber);margin-bottom:1rem;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.doc-mk svg{width:100%;height:100%;}
.doc:hover .doc-mk{transform:translateY(-4px) rotate(-4deg);}

/* ================================================== two-tone accents ====
   Orange is reserved for the calls to action that matter: open an account,
   try a demo, become a partner. Everything else that used to shout in
   orange now takes the quieter client-area yellow, so the page has a
   hierarchy instead of one colour used for everything.                    */

/* Card and section artwork. */
.step-art,.flow-art,.route-art,.doc-mk,.glyph{color:var(--yellow);}
.ticks li::before{background:var(--yellow);}
.ticks li::after{background:var(--yellow);}
.no-list li{border-left-color:var(--yellow);}
.plate::after{background:var(--yellow);}
.partner-box{border-left-color:var(--yellow);}
.more{color:var(--yellow);}
.spec-toggle{color:var(--yellow);}

/* Secondary controls. */
.qtab[aria-selected='true']{color:var(--yellow);border-bottom-color:var(--yellow);}
.rt[aria-selected='true']{color:var(--yellow);border-bottom-color:var(--yellow);}
.seg button[aria-pressed='true']{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);}
.calc-row.win{background:var(--yellow);color:var(--yellow-ink);}
button.mtab[aria-pressed='true'] h3{color:var(--yellow);}

/* The glow behind a lifted panel follows the yellow, not the orange. */
.lit::before{background:radial-gradient(60% 60% at 50% 60%,rgba(247,211,42,.34),transparent 72%);}
[data-theme='dark'] .lit::before{background:radial-gradient(60% 60% at 50% 60%,rgba(251,229,118,.32),transparent 72%);}
.band .flow-node::after,.band .plate::after{}
.band .flow-node::after{background:radial-gradient(closest-side,rgba(247,211,42,.34),transparent 72%);}

/* The pointer field, too: the cursor is not a call to action. */
.cur-dot{background:var(--yellow);
  box-shadow:0 0 0 3px rgba(247,211,42,.24),0 0 14px 2px rgba(247,211,42,.55);}
.cur.on-link .cur-dot{background:rgba(247,211,42,.3);
  box-shadow:0 0 0 1px var(--yellow),0 0 22px 4px rgba(247,211,42,.45);}
.cur-glow{background:radial-gradient(circle closest-side,
  rgba(247,211,42,.18) 0%,rgba(247,211,42,.1) 26%,rgba(247,211,42,.04) 48%,transparent 72%);}
[data-theme='dark'] .cur-glow{background:radial-gradient(circle closest-side,
  rgba(251,229,118,.2) 0%,rgba(251,229,118,.11) 26%,rgba(251,229,118,.05) 48%,transparent 72%);}

/* ============================================================= tools ====
   A second rig: the MetaTrader tablet on the left turned to face right, the
   PFArmour machine on the right, and a PFArmour tablet turned in toward it. */
.scene-tools{aspect-ratio:16/10;}
.rig-t{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(7deg);animation:rigTIn 1.1s cubic-bezier(.22,1,.36,1) both;}
@keyframes rigTIn{from{opacity:0;transform:rotateX(18deg) translateY(40px) scale(.94)}to{opacity:1}}

.dev-t-left{left:-4%;top:20%;width:34%;}
.dev-t-left > .tablet{transform:rotateY(20deg) rotateX(4deg) rotate(-3deg);}
.dev-t-lap{right:-4%;top:3%;width:62%;}
.dev-t-lap > .laptop{position:relative;transform:rotateY(-15deg) rotateX(5deg);}
.dev-t-right{right:2%;bottom:2%;width:28%;z-index:2;}
.dev-t-right > .tablet{transform:rotateY(-20deg) rotateX(4deg) rotate(2deg);}

.dev-t-left {animation:devIn 1s cubic-bezier(.22,1,.36,1) .1s both, fTablet 6.6s ease-in-out 1.1s infinite;}
.dev-t-lap  {animation:devIn 1s cubic-bezier(.22,1,.36,1) both,     fLaptop 7.8s ease-in-out 1s   infinite;}
.dev-t-right{animation:devIn 1s cubic-bezier(.22,1,.36,1) .2s both, fPhone  5.8s ease-in-out 1.2s infinite;}
@media(max-width:900px){
  .dev-t-left{width:38%;}
  .dev-t-lap{width:72%;}
  .dev-t-right{width:32%;}
}
@media(prefers-reduced-motion:reduce){
  .rig-t,.dev-t-left,.dev-t-lap,.dev-t-right{animation:none;}
}

/* The partner lockup and the third-party service cards. */
.tool-mk{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;}
.tool-mk img{height:2rem;width:auto;}
/* Only the Armour wordmark is white artwork needing a light-theme invert
   (scoped rule further down). A blanket invert here was stripping the
   MetaTrader and Telegram logos of their colours. */
.tool-tag{font-family:var(--display);font-size:.5625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow);
  padding:.25rem .6rem;border-radius:999px;white-space:nowrap;}
.tool-card{display:flex;flex-direction:column;}
.tool-ico{display:block;width:3rem;height:3rem;margin-bottom:1.1rem;color:var(--yellow);}
.tool-ico img,.tool-ico svg{width:100%;height:100%;object-fit:contain;}
.tool-card:hover .tool-ico{transform:translateY(-4px) scale(1.06);}
.tool-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}

/* The boundaries panel. Each line is a limit, so the marker is a rule that
   stops rather than a tick that approves. */
.bounds .eyebrow{margin-bottom:.5rem;}
.bound-list{list-style:none;margin:1.1rem 0 0;padding:0;}
.bound-list li{position:relative;padding:.7rem 0 .7rem 1.6rem;font-size:.875rem;
  line-height:1.55;color:var(--ink-soft);border-bottom:1px solid var(--rule-soft);}
.bound-list li:last-child{border-bottom:0;}
.bound-list li::before{content:'';position:absolute;left:0;top:1.15rem;
  width:.7rem;height:2px;border-radius:1px;background:var(--down);opacity:.75;}

/* ===================================================== market cards ====
   A row of instrument cards running like the quote strip: base and quote
   with their flags, the two sides of the price, the session move and a
   candle chart. Full width, and it stops when the pointer is on it so a
   card can actually be read.                                             */
.mcards{margin-top:2.75rem;overflow:hidden;position:relative;padding-block:1.25rem;}
.mcards::before,.mcards::after{content:'';position:absolute;top:0;bottom:0;width:7rem;z-index:3;pointer-events:none;}
.mcards::before{left:0;background:linear-gradient(90deg,var(--bg-alt),transparent);}
.mcards::after{right:0;background:linear-gradient(270deg,var(--bg-alt),transparent);}
.mcards-track{display:flex;gap:1.25rem;width:max-content;will-change:transform;}
/* The run and the hand are one motion, so the offset is written by the
   script rather than by a keyframe: a CSS animation cannot be caught
   mid-flight and pushed. Hover still stops it; a drag overrides it.     */
.mcards{cursor:grab;}
.mcards.mc-drag{cursor:grabbing;}
.mcards.mc-drag .mcard{transition:none;}
/* Sideways on this strip belongs to the drag; up and down still scrolls
   the page. In scroll mode the browser keeps both.                      */
.mcards:not(.mc-scroll){touch-action:pan-y;}
.mcards-track{user-select:none;-webkit-user-select:none;}
.mcards img{-webkit-user-drag:none;}

.mcard{
  flex:0 0 25rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1.25rem;
  background:var(--card);border-radius:var(--r);padding:1.25rem;
  box-shadow:0 34px 60px -30px rgba(13,27,58,.4),0 6px 16px -8px rgba(13,27,58,.16);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
[data-theme='dark'] .mcard{box-shadow:0 34px 60px -28px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.07);}
.mcard:hover{transform:translateY(-6px);}

.mc-side{display:grid;gap:.15rem;}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
.mc-code{font-family:var(--display);font-size:1rem;font-weight:800;letter-spacing:-.01em;}
.mc-name{font-size:.6875rem;color:var(--muted);}
.mc-flag{width:1.6rem;height:1.6rem;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 2px var(--card),0 2px 6px rgba(0,0,0,.2);}
.mc-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-top:.5rem;}
.mc-lbl span{font-size:.75rem;color:var(--muted);}
.mc-lbl b{font-family:var(--display);font-size:.9375rem;font-weight:800;font-variant-numeric:tabular-nums;}
.mc-rule{grid-column:1;border-top:1px solid var(--rule-soft);margin:.85rem 0;position:relative;}
.mc-swap{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-alt);color:var(--muted);}
.mc-swap svg{width:.8rem;height:.8rem;}

.mc-right{grid-column:2;grid-row:1 / span 3;display:grid;align-content:start;gap:.7rem;}
.mc-chip{display:inline-flex;align-items:center;gap:.3rem;align-self:start;
  padding:.25rem .6rem;border-radius:999px;font-size:.6875rem;font-weight:700;
  font-family:var(--display);font-variant-numeric:tabular-nums;}
.mc-chip.up{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up);}
.mc-chip.dn{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down);}
.mc-tf{display:flex;gap:.25rem;}
.mc-tf span{font-family:var(--display);font-size:.625rem;font-weight:700;padding:.2rem .55rem;
  border-radius:999px;color:var(--muted);}
.mc-tf span.on{background:var(--yellow);color:var(--yellow-ink);}
.mc-chart{width:100%;height:5.25rem;}
.mc-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--rule-soft);}
/* It is the one thing on the card you can click, so it has to say so. */
.mc-cta{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);
  font-size:.75rem;font-weight:700;color:var(--yellow);transition:color .18s ease;}
.mc-arw{display:inline-block;transition:transform .22s cubic-bezier(.22,1,.36,1);}
/* The card answering the pointer first, then the link itself answering
   harder. This order matters: both match when the pointer is on the link,
   and they carry the same weight, so the last one written wins. */
.mcard:hover .mc-arw{transform:translateX(2px);}
.mc-cta:hover{color:var(--amber);}
.mc-cta:hover .mc-arw{transform:translateX(4px);}
.mc-spec{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums;}

@media(max-width:560px){.mcard{flex-basis:21rem;}}

/* ==================================================== hero backdrop ====
   The hero photograph, traced. It sits across the full width behind the
   copy and draws itself in from the right, one tower at a time, then
   stays. Cream on navy, and quiet enough to read text over.             */
.hero{position:relative;}
.hero-sky{
  position:absolute;left:0;right:0;bottom:0;height:70%;z-index:0;
  pointer-events:none;display:block;overflow:hidden;opacity:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 1%,rgba(0,0,0,.2) 26%,#000 54%,#000 100%),
                     linear-gradient(0deg,#000 62%,rgba(0,0,0,.7) 92%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 1%,rgba(0,0,0,.2) 26%,#000 54%,#000 100%),
                     linear-gradient(0deg,#000 62%,rgba(0,0,0,.7) 92%,transparent 100%);
          mask-composite:intersect;
}
.hero-sky .skyline{width:100%;height:100%;display:block;}
.hero .shell{position:relative;z-index:1;}

.sk-o{stroke:#f6efe0;stroke-width:2.1;stroke-linejoin:round;opacity:.4;}
.sk-o.sk-m{opacity:.6;stroke-width:2.2;}
.sk-o.sk-r{opacity:.9;stroke-width:2.5;stroke:#fff8ea;}
.sk-thin{stroke-width:1.3;}
.sk-d{stroke:#f6efe0;stroke-width:.85;opacity:.18;}
.sk-d.sk-m{opacity:.3;}
.sk-d.sk-r{opacity:.5;stroke-width:1;}
/* Lit windows are filled panes, so they fade up rather than being uncovered
   as a stroke. The blur filter is what makes them read as light in glass
   instead of as squares on a plan. */
.sk-w{fill:#fff3dc;stroke:none;opacity:0;filter:url(#skGlow);
  animation:skGlow .53s ease-out forwards;
  animation-delay:calc(.27s + var(--i) * .033s);}
@keyframes skGlow{to{opacity:.3}}
.sk-w.sk-m{animation-name:skGlowM;}
.sk-w.sk-r{animation-name:skGlowR;fill:#fff8e8;}
@keyframes skGlowM{to{opacity:.5}}
@keyframes skGlowR{to{opacity:.82}}

/* Aviation lights on the taller roofs. They pulse, slowly and out of step,
   which is the one thing in the drawing that keeps moving. */
.sk-beacon{fill:#ffb057;opacity:0;filter:url(#skGlow);
  animation:skBeacon 3.4s ease-in-out infinite;
  animation-delay:calc(.62s + var(--i) * .085s);}
@keyframes skBeacon{0%,100%{opacity:.15}50%{opacity:.95}}

/* The draw. Every stroke starts hidden and is uncovered in sequence; --i
   is written by the generator and counts from the right-hand edge. */
.sk-o,.sk-d{stroke-dasharray:4200;stroke-dashoffset:4200;
  animation:skDraw .67s cubic-bezier(.33,1,.68,1) forwards;
  animation-delay:calc(.11s + var(--i) * .033s);}
@keyframes skDraw{to{stroke-dashoffset:0}}

@media(max-width:900px){.hero-sky{height:60%;opacity:.7;}}
@media(prefers-reduced-motion:reduce){
  .sk-o,.sk-d{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
  .sk-w{opacity:.22;animation:none;}
}

/* -------------------------------------------------- screen by theme ---
   Every device screen ships both colour schemes of the same MetaTrader
   capture. The pair is the same product, symbol, timeframe and panel set,
   so the toggle changes the terminal's theme and nothing else. */
/* `.screen img` is class+element, so a bare `.s-dark` loses to it and both
   screens rendered. Matched at the same depth, the swap wins. */
.screen img.s-dark{display:none;}
[data-theme='dark'] .screen img.s-light{display:none;}
[data-theme='dark'] .screen img.s-dark{display:block;}

/* Marks inside a specification table sit tight against the symbol. */
.spec .sym{gap:.5rem;}
.spec .sym-mk img{width:1.15rem;height:1.15rem;}
.spec .sym-mk img+img{margin-left:-.42rem;}
.spec .sym-one img{width:1.3rem;height:1.3rem;}
.mc-seg{flex-wrap:wrap;}

/* ======================================================== tool rows ====
   Every entry is the same shape: a mark, a heading, a paragraph and a
   register of particulars, with a visual opposite. That is what makes the
   four read as one list rather than as four different components. */
.tool-row{align-items:center;}
.tool-row + .tool-row{margin-top:3rem;}
.tool-mk{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;min-height:2.4rem;}
.tool-logo{height:2.1rem;width:auto;}
/* A linked mark is still just the mark: inline-flex so the anchor
   wraps the image tightly instead of sitting in a line box a few
   pixels taller than it. */
.tool-mk-link{display:inline-flex;align-items:center;transition:opacity .18s ease;}
.tool-mk-link:hover{opacity:.72;}
.tool-logo-sm{height:1.7rem;}
[data-theme='light'] img.tool-logo[src$="pfarmour-logo.svg"]{filter:invert(1) brightness(.32);}
/* The MetaQuotes wordmark is supplied in one colour only, near-black, which
   disappears on the dark ground. The dark file is the same asset with the
   type recoloured white; the globe and the orange 5 are untouched. */
img.tool-logo[src$="mt5-logo-dark.png"]{display:none;}
[data-theme='dark'] img.tool-logo[src$="mt5-logo.png"]{display:none;}
[data-theme='dark'] img.tool-logo[src$="mt5-logo-dark.png"]{display:block;}
.tool-tag{font-family:var(--display);font-size:.5625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow);
  padding:.25rem .6rem;border-radius:999px;white-space:nowrap;}
.tool-tag-quiet{background:none;color:var(--muted);border:1px solid var(--rule);}
.tool-kv{margin-top:1.4rem;max-width:30rem;}

/* The visual half of a row that has no device to show. */
.tool-vis{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5rem;padding:3rem 2rem;text-align:center;}
.tool-badge{display:grid;place-items:center;width:7rem;height:7rem;border-radius:50%;
  background:var(--card);box-shadow:0 30px 60px -26px rgba(13,27,58,.45);color:var(--yellow);}
[data-theme='dark'] .tool-badge{box-shadow:0 30px 60px -24px rgba(0,0,0,.85),
  inset 0 0 0 1px rgba(255,255,255,.08);}
.tool-badge img,.tool-badge svg{width:3.4rem;height:3.4rem;object-fit:contain;}
.tool-vis-note{margin:0;max-width:22rem;font-size:.8125rem;line-height:1.6;color:var(--muted);}

/* The boundaries run as one strip under the MAM block, not as a card. */
.bounds-strip{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule);}
.bound-row{display:grid;gap:0 2rem;grid-template-columns:1fr;}
@media(min-width:820px){.bound-row{grid-template-columns:repeat(2,1fr);}}

/* Bigger on the Tools page: this is the page about the software. */
.scene-tools{aspect-ratio:16/10;}
.scene-tools .dev-t-lap{right:-8%;top:0;width:88%;}
.scene-tools .dev-t-right{right:-2%;bottom:-4%;width:34%;}
.scene-tools .dev-t-left{left:-8%;top:14%;width:46%;}
@media(max-width:900px){
  .scene-tools .dev-t-lap{width:94%;}
  .scene-tools .dev-t-right{width:38%;}
  .scene-tools .dev-t-left{width:50%;}
}

/* ========================================================= 3D badge ====
   For a row with no device to show. A tile standing in space with real
   thickness: the face carries the mark, the layers behind it give the edge,
   and it arrives and floats on the same timing as the device rig.        */
.badge3d-stage{perspective:1500px;perspective-origin:50% 40%;
  display:flex;align-items:center;justify-content:center;padding:2rem 1rem;
  /* Entrance and float live HERE, as plain translateY, so they never touch
     the badge's own transform. Keeping all three motions on one element made
     hover fight the paused animation and stutter. */
  animation:b3dIn .9s cubic-bezier(.22,1,.36,1) both,
            b3dFloat 7s ease-in-out .9s infinite;}
.badge3d{
  position:relative;width:16rem;height:16rem;transform-style:preserve-3d;
  transform:rotateX(12deg) rotateY(-18deg);will-change:transform;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.badge3d-face{
  position:absolute;inset:0;border-radius:26%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--b3-hi) 0%,var(--b3-mid) 52%,var(--b3-lo) 100%);
  box-shadow:0 40px 70px -28px rgba(13,27,58,.55),
             inset 0 2px 0 rgba(255,255,255,.55),
             inset 0 -2px 0 rgba(0,0,0,.18);
}
[data-theme='dark'] .badge3d-face{box-shadow:0 40px 70px -26px rgba(0,0,0,.9),
  inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.3);}
.badge3d-face img{width:62%;height:62%;object-fit:contain;}
.badge3d-face svg{width:50%;height:50%;}
.badge3d-face img,.badge3d-face svg{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));}
.badge3d-face svg{color:#fff;}
/* The edge: copies of the face pushed back in Z, which is what gives the
   tile a side rather than a shadow pretending to be one. */
.badge3d-edge{position:absolute;inset:0;border-radius:26%;
  background:linear-gradient(150deg,var(--b3-mid),var(--b3-lo));}
.badge3d-edge:nth-of-type(1){transform:translateZ(-9px)  scale(.994);}
.badge3d-edge:nth-of-type(2){transform:translateZ(-18px) scale(.986);filter:brightness(.9);}
.badge3d-edge:nth-of-type(3){transform:translateZ(-27px) scale(.976);filter:brightness(.68);}
/* The light it throws on the page under it. */
.badge3d::after{content:'';position:absolute;left:6%;right:6%;bottom:-16%;height:46%;
  border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--b3-glow),transparent 72%);filter:blur(20px);}

@keyframes b3dIn{
  from{opacity:0;transform:translateY(38px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes b3dFloat{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-14px);}
}
.badge3d-stage:hover .badge3d{
  transform:rotateX(4deg) rotateY(-7deg) scale(1.06);}
.badge3d-stage:hover .badge3d-face{box-shadow:0 52px 84px -26px rgba(13,27,58,.6),
  inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.2);}

/* Telegram takes its own blue; the firm's own services take the house yellow. */
.b3-telegram{--b3-hi:#41bce7;--b3-mid:#2aabe2;--b3-lo:#1b8fc4;--b3-glow:rgba(42,171,226,.45);}
.b3-house{--b3-hi:#fbe576;--b3-mid:#f7d32a;--b3-lo:#d9b407;--b3-glow:rgba(247,211,42,.5);}
.b3-house .badge3d-face svg{color:var(--yellow-ink);}

/* The circular logo fills the tile rather than sitting inside it. */
.b3-telegram .badge3d-face img{width:88%;height:88%;}
@media(max-width:900px){.badge3d{width:12rem;height:12rem;}}
@media(prefers-reduced-motion:reduce){
  .badge3d-stage{animation:none;}
  .badge3d-stage:hover .badge3d{transform:rotateX(12deg) rotateY(-18deg);}
}

/* ---- 3. the platform logo was rendering too small ------------------- */
.tool-logo{height:2.9rem;}
.tool-logo-sm{height:2.3rem;}

/* The Armour rig is a laptop and a handset, so the handset takes the slot
   the tablet had. */
.scene-tools .dev-t-phone{right:2%;bottom:-6%;width:17%;}
.scene-tools .dev-t-phone > .phone{transform:rotateY(-12deg) rotateX(4deg) rotate(2deg);}
.dev-t-phone{animation:devIn 1s cubic-bezier(.22,1,.36,1) .2s both, fPhone 5.8s ease-in-out 1.2s infinite;}
@media(max-width:900px){.scene-tools .dev-t-phone{width:20%;}}

/* One colour per partner route, so the three read as three things. */
.b3-blue{--b3-hi:#5fa0c4;--b3-mid:#2f6f8f;--b3-lo:#1e5570;--b3-glow:rgba(47,111,143,.5);}
.b3-red {--b3-hi:#e8776a;--b3-mid:#d0402f;--b3-lo:#a52d1f;--b3-glow:rgba(208,64,47,.5);}
.b3-blue .badge3d-face svg,.b3-red .badge3d-face svg{color:#fff;}

/* ================================================== mobile (phones) ====
   The rules that make the site work below tablet width. Grouped here
   deliberately: everything phone-specific in one place, coarsest first. */

/* --- masthead fits a phone: brand capped, CTA compacted, burger pinned -- */
@media(max-width:600px){
  .head .shell{gap:.7rem;}
  .brand{min-width:0;}
  .brand img{height:36px;max-width:38vw;object-fit:contain;object-position:left center;}
  .head-cta{gap:.45rem;}
  .head-cta .btn{padding:.55rem .85rem;font-size:.75rem;}
  .mnav{margin-left:0;flex-shrink:0;}
}
@media(max-width:400px){
  .head .shell{gap:.5rem;}
  .brand img{max-width:33vw;}
  .head-cta .btn{padding:.5rem .7rem;font-size:.6875rem;}
}

/* --- market cards: swipe strip instead of marquee (set by JS) ---------- */
.mc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scrollbar-width:thin;}
.mc-scroll::before,.mc-scroll::after{display:none;} /* no fades over a scrollbar */
.mc-scroll .mcards-track{width:max-content;padding-inline:.25rem;transform:none;}
.mc-scroll .mcard{scroll-snap-align:center;}
@media(max-width:400px){.mcard{flex-basis:19rem;}}

/* --- regulatory overlay: compact, scrollable guard, no reflow jank ----- */
@media(max-width:700px){
  .util{max-height:38vh;overflow-y:auto;}
  .util .shell{padding-block:.55rem;gap:.9rem;}
  .util-disc p{font-size:.625rem;line-height:1.45;}
}
@media(max-width:900px){
  body{transition:none;}
  .head{transition:none;}
}

/* --- sticky dock: one tight row, clear of the home indicator ----------- */
.dock{padding-bottom:env(safe-area-inset-bottom);}
@media(max-width:560px){
  .dock .shell{padding-block:.6rem;}
  .dock .actions{gap:.5rem;flex-wrap:nowrap;}
  .dock .actions .btn{padding:.6rem .9rem;font-size:.75rem;white-space:nowrap;}
}

/* --- tables: the sideways scroll announces itself ---------------------- */
@media(max-width:700px){
  .spec-wrap,.cmp-wrap{
    background-image:
      linear-gradient(90deg,var(--card),transparent 24px),
      linear-gradient(270deg,var(--card),transparent 24px),
      linear-gradient(90deg,rgba(13,27,58,.22),transparent 16px),
      linear-gradient(270deg,rgba(13,27,58,.22),transparent 16px);
    background-position:left,right,left,right;
    background-size:24px 100%,24px 100%,16px 100%,16px 100%;
    background-repeat:no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  .spec th{font-size:.6875rem;}
}
@media(max-width:430px){
  .qtable th,.qtable td{padding:.7rem .55rem;}
  .qtable .btn{padding:.45rem .7rem;font-size:.6875rem;}
}

/* --- layouts that never adapted ---------------------------------------- */
@media(max-width:560px){
  .otypes{grid-template-columns:1fr;}
  .routes-tabs{flex-direction:column;}
  .tool-mk{flex-wrap:wrap;}
  .tool-logo{max-width:60vw;}
  .tr-bar span{font-size:0;} /* the legend carries the names */
  .ticker::before,.ticker::after{width:3rem;}
  .mcards::before,.mcards::after{width:3rem;}
}
/* One to a row here, so the hairline that separates columns has nothing
   left to separate: without this every second plate keeps a rule and an
   indent it no longer has a neighbour for. */
@media(max-width:480px){
  .four{grid-template-columns:1fr;}
  .plate{border-left:0;padding-left:0;}
}

/* --- device rigs: contained, proportional ------------------------------ */
@media(max-width:560px){
  .scene-tools .dev-t-lap{right:0;width:92%;}
  .scene-tools .dev-t-left{left:0;width:40%;}
  .scene-tools .dev-t-right{right:0;width:32%;}
  .scene-tools .dev-t-phone{right:0;bottom:-2%;width:19%;}
  .laptop-deck{height:52px;}
}

/* --- hero stats over the skyline line-art ------------------------------
   A soft dark halo behind figure and caption both, so the copy carries at
   any point of the drawing. The drawing itself is untouched. */
.hero .count b{text-shadow:0 2px 14px rgba(6,13,28,.95),0 0 7px rgba(6,13,28,.9),0 0 2px rgba(6,13,28,.9);}
/* The caption sits on its own soft dark plate: a navy ground under the
   text, feathered outward by the box-shadow so it reads as shadow, not as
   a box. Painted behind the span only — the drawing is not touched. */
.hero .count span{color:rgba(255,255,255,.88);
  width:fit-content;padding:.1rem .35rem;margin-left:-.35rem;border-radius:6px;
  background:rgba(6,13,28,.72);
  box-shadow:0 0 16px 10px rgba(6,13,28,.72);
  text-shadow:0 1px 8px rgba(6,13,28,.95);}

/* --- footer links become real tap targets ------------------------------ */
@media(max-width:900px){
  .foot a{display:inline-block;padding-block:.3rem;}
}

/* --- animation budget on phones: entrances stay, idle loops stop ------- */
@media(max-width:900px){
  .badge3d-stage{animation:b3dIn .9s cubic-bezier(.22,1,.36,1) both;}
  .cert-stage{animation:certIn 1s cubic-bezier(.22,1,.36,1) both;}
  .dev-laptop,.dev-tablet,.dev-phone{animation:devIn 1s cubic-bezier(.22,1,.36,1) both;}
  .dev-t-lap,.dev-t-left,.dev-t-right,.dev-t-phone{animation:devIn 1s cubic-bezier(.22,1,.36,1) both;}
  .band .flow-node{backdrop-filter:none;}
  .cert,.badge3d,.tilt{will-change:auto;}
}
@media(max-width:560px){
  .sk-beacon{animation:none;opacity:.55;}
}

/* ============================================ mobile debug round two ====
   From the device-emulated sweep: real-iOS behaviours the width-only pass
   could not see. */

/* iOS Safari zooms the whole page when a focused field is under 16px and
   does not zoom back out. Form fields meet the threshold on touch widths. */
@media(max-width:900px){
  .field input,.field select,.field textarea{font-size:1rem;}
}

/* The open menu owns the touch: page scroll locks, and the panel's own
   scroll does not chain to the document when it runs out. */
html.menu-open{overflow:hidden;}
.mnav-panel{overscroll-behavior:contain;}

/* Contract tables keep their identity while scrolled: the symbol column
   holds the left edge. */
@media(max-width:700px){
  .spec th:first-child,.spec td:first-child{
    position:sticky;left:0;z-index:2;background:var(--card);
    box-shadow:6px 0 10px -7px rgba(13,27,58,.3);}
  .spec thead th:first-child{background:var(--bg-alt);}
  /* Auto table layout was giving this column less than the pair of marks
     and the symbol beside them need, and the symbol ran out past its own
     cell. The table already scrolls sideways here, so the column can just
     have the width it needs. */
  .spec th:first-child,.spec td:first-child{min-width:8.75rem;white-space:nowrap;}
}

/* The banner exit and the body reflow now happen together: both instant
   on mobile, so content no longer jumps under a still-sliding banner. */
@media(max-width:900px){
  .util{transition:opacity .2s ease;}
}

/* Red and green deltas were unreadable on the dark theme's gold band. */
[data-theme='dark'] .tk-item i.q-up{color:#14532d;}
[data-theme='dark'] .tk-item i.q-dn{color:#7f1d1d;}

/* Trade buttons reach tap height without regaining width. */
@media(max-width:430px){
  .qtable .btn{min-height:2.6rem;}
}

/* Four pills as a 2x2 block instead of a wrap with an orphan. */
@media(max-width:560px){
  .mc-seg{display:grid;grid-template-columns:1fr 1fr;}
}

/* No dark twin exists for the MetaTrader handset screen in the MetaQuotes
   kit, so in dark the light screenshot is inverted with its hues rotated
   back: white ground goes near-black, candles and accents keep their colour
   family. Scoped to `.dev-phone`, the MetaTrader handset. The Armour handset
   in `.dev-t-phone` is a capture of an app that has no light theme at all,
   so it is already dark and inverting it turned it white. */
[data-theme='dark'] .dev-phone .phone .screen img{
  filter:invert(1) hue-rotate(180deg) brightness(1.04) contrast(.96);}

/* ==================================================== mobile pass, 19/08 ===
   Measured on the live site at 360x640 and 390x844. Everything here is
   phone-specific; nothing above this line changes. */

/* --- the regulatory band stops floating on a phone ----------------------
   As a fixed overlay it took 154px of a 640px screen before a word of the
   site, and the offset it wrote into --reg-h is what left the masthead
   parked below the top edge whenever that value went stale. In the flow it
   scrolls away by itself, the masthead sticks to 0, and the type goes back
   up to a size a person can read. */
@media(max-width:700px){
  .util{position:static;max-height:none;overflow:visible;
    box-shadow:none;transition:none;}
  .util.gone{display:none;}
  .util .shell{padding-block:.75rem;gap:.75rem;}
  .util-disc p{font-size:.75rem;line-height:1.5;}
  body{padding-top:0;}
  .head{top:0;}
}

/* --- the arrival notice becomes a sheet ---------------------------------
   The panel was sized for a desktop dialog and had no phone rules at all:
   at 360x640 its 791px of text was clipped to 600 and both controls sat
   below the fold, inside a nested scroller whose bar fades out on a phone.
   The sheet fills the screen, the text scrolls, and the actions stay on
   the glass. The full-screen blur goes with it -- it was the most
   expensive paint on the first frame a phone ever draws. */
@media(max-width:700px){
  .jn{padding:0;align-items:stretch;justify-content:stretch;
    background:rgba(8,18,38,.94);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .jn-panel{width:100%;max-width:none;height:100dvh;max-height:100dvh;
    border-radius:0;padding:1.35rem 1.15rem 0;overscroll-behavior:contain;}
  .jn-h{font-size:1.2rem;}
  .jn-panel p{font-size:.875rem;}
  .jn-actions{position:sticky;bottom:0;z-index:1;margin:1.25rem -1.15rem 0;
    padding:.9rem 1.15rem calc(.9rem + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--rule);gap:.75rem 1.25rem;}
  .jn-actions .btn,.jn-leave{min-height:2.75rem;display:inline-flex;align-items:center;}
}

/* --- 44px is the floor for anything a thumb has to hit ------------------
   Measured at 390: the market-card link was 87x20, footer links 32px tall,
   the segment pills 38. The footer's row gap comes down by the amount the
   padding adds, so the column keeps its height. */
@media(max-width:900px){
  .foot ul{gap:.15rem;}
  .foot ul a{display:inline-block;padding-block:.6rem;}
  .foot-addr a{display:inline-block;padding-block:.6rem;}
  .calc input[type=range]{height:2.75rem;}
  .mc-cta{display:inline-flex;align-items:center;min-height:2.75rem;}
  .seg button{min-height:2.75rem;}
  .rt{min-height:2.75rem;}
  .head-cta .btn{min-height:2.75rem;display:inline-flex;align-items:center;}
  .brand{display:inline-flex;align-items:center;min-height:2.75rem;}
  .util-x{width:2.75rem;height:2.75rem;}
}
/* The rule above restores a display value to `.head-cta .btn`, which is the
   same specificity as the rule that hides the outline button on a narrow
   masthead. Re-assert the hide, or Log in comes back and pushes the burger
   off the right edge. */
@media(max-width:560px){
  .head-cta .btn-line{display:none;}
}