/* The six-step System cards (v2). Every rule is scoped to .v2-method. */

/* v2 · The system (six steps) · scoped to .v2-method */
.v2-method{
    --v2m-ink:#1A202C;
    --v2m-ink-deep:#141B24;
    --v2m-paper:#FAF9F6;
    --v2m-gold:#D5B473;
    --v2m-gold-ink:#7C6432;
    --v2m-green:#45523E;
    --v2m-body:rgba(26,32,44,.72);
    --v2m-body-dark:rgba(250,249,246,.74);
    --v2m-ease:cubic-bezier(.22,1,.36,1);
    --v2m-shadow:0 24px 60px -32px rgba(26,32,44,.35);
    position:relative;
    z-index:0;
    width:100%;
    padding-block:clamp(88px,10vw,160px);
    background:
        radial-gradient(1200px 600px at 85% 0%, rgba(213,180,115,.10), transparent 60%),
        linear-gradient(180deg,#FAF9F6 0%,#F4F1EA 100%);
    border-bottom:1px solid rgba(26,32,44,.08);
    color:var(--v2m-ink);
    font-family:'Plus Jakarta Sans',sans-serif;
}
.v2-method *,.v2-method *::before,.v2-method *::after{box-sizing:border-box;}
.v2-method__shell{
    max-width:var(--shell-7xl,1280px);
    margin-inline:auto;
    padding-inline:clamp(20px,4vw,56px);
}
.v2-method__sr{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* Header ------------------------------------------------------------ */
.v2-method__header{
    display:grid;
    gap:clamp(20px,3vw,48px);
    align-items:end;
    margin-bottom:clamp(48px,5vw,80px);
}
@media (min-width:960px){
    .v2-method__header{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
}
.v2-method__eyebrow{
    display:flex;align-items:center;gap:12px;
    margin:0 0 20px;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
    text-transform:uppercase;letter-spacing:.18em;color:var(--v2m-gold-ink);
}
.v2-method__eyebrow-rule{width:32px;height:1px;background:var(--v2m-gold);}
.v2-method__h2{
    margin:0;
    font-family:'Playfair Display',serif;font-weight:600;
    font-size:clamp(34px,4.2vw,64px);line-height:1.05;letter-spacing:-.01em;
    color:var(--v2m-ink);
    max-width:16ch;
    text-wrap:balance;
}
.v2-method__lead{
    margin:0;
    max-width:62ch;
    font-size:clamp(16px,1.05vw,19px);line-height:1.6;
    color:var(--v2m-body);
}

/* Grid of cards --------------------------------------------------------- */
.v2-method__list{
    list-style:none;margin:0;padding:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(16px,2vw,32px);
}
@media (min-width:720px){
    .v2-method__list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1180px){
    .v2-method__list{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.v2-method__card{
    position:relative;
    display:flex;flex-direction:column;
    gap:16px;
    margin:0;
    padding:clamp(24px,2.4vw,40px);
    background:var(--v2m-paper);
    border:1px solid rgba(26,32,44,.08);
    border-radius:24px;
    box-shadow:var(--v2m-shadow);
    transition:transform .5s var(--v2m-ease);
}
@supports (grid-template-rows:subgrid){
    @media (min-width:720px){
        .v2-method__card{
            display:grid;
            grid-row:span 4;
            grid-template-rows:subgrid;
            row-gap:16px;
        }
    }
}
@media (hover:hover){
    .v2-method__card:hover{transform:translateY(-4px);}
}
.v2-method__head{display:flex;flex-direction:column;gap:12px;}
.v2-method__num{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
    letter-spacing:.18em;color:var(--v2m-gold-ink);
}
.v2-method__num::after{content:"";width:24px;height:1px;background:var(--v2m-gold);}
.v2-method__title{
    margin:0;
    font-family:'Playfair Display',serif;font-weight:600;
    font-size:clamp(20px,1.8vw,28px);line-height:1.2;
    color:var(--v2m-ink);
    text-wrap:balance;
}
.v2-method__text{
    margin:0;
    font-size:clamp(16px,1.1vw,17px);line-height:1.6;
    color:var(--v2m-body);
}
.v2-method__foot{display:flex;align-items:center;min-height:0;}
.v2-method__link{
    display:inline-flex;align-items:center;gap:10px;
    min-height:44px;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.14em;
    color:var(--v2m-gold-ink);text-decoration:none;
}
.v2-method__link i{font-size:12px;transition:transform .4s var(--v2m-ease);}
.v2-method__link:hover{color:var(--v2m-ink);}
.v2-method__link:hover i{transform:translateX(4px);}
.v2-method__link:focus-visible{outline:2px solid var(--v2m-gold-ink);outline-offset:4px;border-radius:4px;}

/* Illustration panel (shared by all six hosts) ------------------------- */
.v2-method .step-img-host{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:100%;
    aspect-ratio:16/10;
    padding:24px;
    border-radius:16px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(213,180,115,.10), transparent 60%),
        var(--v2m-ink-deep);
    color:rgba(250,249,246,.84);
    overflow:hidden;
    isolation:isolate;
}
@media (max-width:639px){
    .v2-method .step-img-host{aspect-ratio:4/3;}
}

/* Shared pill look */
.v2-method .mx1-k-pill,
.v2-method .mx2-k-pill,
.v2-method .mx3-k-pill{
    display:inline-flex;align-items:center;
    height:22px;padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(213,180,115,.45);
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;line-height:1;
    color:var(--v2m-gold);
    white-space:nowrap;
}

/* 01 · Profile card assembling ------------------------------------------- */
.v2-method .mx1-k-profile{
    width:min(100%,260px);
    padding:14px 16px;
    border-radius:14px;
    background:rgba(250,249,246,.05);
    border:1px solid rgba(250,249,246,.12);
}
.v2-method .mx1-k-top{
    display:flex;align-items:center;gap:10px;
    padding-bottom:12px;margin-bottom:12px;
    border-bottom:1px solid rgba(250,249,246,.10);
}
.v2-method .mx1-k-mark{
    display:grid;place-items:center;flex:none;
    width:26px;height:26px;border-radius:50%;
    background:var(--v2m-gold);color:var(--v2m-ink-deep);font-size:12px;
}
.v2-method .mx1-k-name{
    font-family:'Playfair Display',serif;font-weight:600;font-size:16px;
    color:var(--v2m-paper);white-space:nowrap;
}
.v2-method .mx1-k-pill{margin-left:auto;}
.v2-method .mx1-k-rows{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.v2-method .mx1-k-row{display:flex;align-items:center;gap:10px;}
.v2-method .mx1-k-tick{
    display:grid;place-items:center;flex:none;
    width:18px;height:18px;border-radius:50%;
    border:1px solid rgba(213,180,115,.7);
    background:rgba(213,180,115,.14);
    color:var(--v2m-gold);font-size:10px;
}
.v2-method .mx1-k-key{
    width:78px;flex:none;
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;
    color:rgba(250,249,246,.84);
}
.v2-method .mx1-k-bar{
    flex:1;height:4px;border-radius:999px;
    background:linear-gradient(90deg,rgba(213,180,115,.55),rgba(250,249,246,.12));
    transform-origin:left center;
}
.v2-method .step-img-host.is-playing .mx1-k-profile{animation:v2-method-rise .7s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx1-k-row{animation:v2-method-slide .6s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx1-k-bar{animation:v2-method-grow .8s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx1-k-tick{animation:v2-method-pop .5s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx1-k-row--1{animation-delay:.35s;}
.v2-method .step-img-host.is-playing .mx1-k-row--2{animation-delay:.6s;}
.v2-method .step-img-host.is-playing .mx1-k-row--3{animation-delay:.85s;}
.v2-method .step-img-host.is-playing .mx1-k-row--1 .mx1-k-bar{animation-delay:.55s;}
.v2-method .step-img-host.is-playing .mx1-k-row--2 .mx1-k-bar{animation-delay:.8s;}
.v2-method .step-img-host.is-playing .mx1-k-row--3 .mx1-k-bar{animation-delay:1.05s;}
.v2-method .step-img-host.is-playing .mx1-k-row--1 .mx1-k-tick{animation-delay:1.2s;}
.v2-method .step-img-host.is-playing .mx1-k-row--2 .mx1-k-tick{animation-delay:1.65s;}
.v2-method .step-img-host.is-playing .mx1-k-row--3 .mx1-k-tick{animation-delay:2.1s;}
.v2-method .step-img-host.is-playing .mx1-k-pill{animation:v2-method-fade .6s var(--v2m-ease) 2.5s both;}

/* 02 · Search field with questions -------------------------------------- */
.v2-method .mx2-k-stage{width:min(100%,280px);display:grid;gap:10px;}
.v2-method .mx2-k-field{
    display:flex;align-items:center;gap:10px;
    height:36px;padding:0 6px 0 14px;
    border-radius:999px;
    border:1px solid rgba(250,249,246,.18);
    background:rgba(250,249,246,.06);
}
.v2-method .mx2-k-glass{color:var(--v2m-gold);font-size:12px;}
.v2-method .mx2-k-logos{display:flex;gap:6px;}
.v2-method .mx2-k-logo{
    display:grid;place-items:center;
    width:22px;height:22px;border-radius:50%;
    background:var(--v2m-paper);
}
.v2-method .mx2-k-logo img{width:12px;height:12px;display:block;}
.v2-method .mx2-k-pill{margin-left:auto;}
.v2-method .mx2-k-qs{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.v2-method .mx2-k-q{
    display:flex;align-items:center;gap:10px;
    height:26px;padding:0 12px;
    border-radius:8px;
    background:rgba(250,249,246,.05);
    border:1px solid rgba(250,249,246,.08);
    font-size:13px;line-height:1;color:rgba(250,249,246,.86);
    white-space:nowrap;
}
.v2-method .mx2-k-q--1{border-color:rgba(213,180,115,.4);}
.v2-method .mx2-k-dot{width:6px;height:6px;border-radius:50%;background:var(--v2m-gold);flex:none;}
.v2-method .mx2-k-q--2 .mx2-k-dot,.v2-method .mx2-k-q--3 .mx2-k-dot{background:rgba(250,249,246,.4);}
.v2-method .step-img-host.is-playing .mx2-k-field{animation:v2-method-rise .6s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx2-k-logo{animation:v2-method-pop .5s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx2-k-logo--1{animation-delay:.3s;}
.v2-method .step-img-host.is-playing .mx2-k-logo--2{animation-delay:.45s;}
.v2-method .step-img-host.is-playing .mx2-k-logo--3{animation-delay:.6s;}
.v2-method .step-img-host.is-playing .mx2-k-q{animation:v2-method-drop .7s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx2-k-q--1{animation-delay:.9s;}
.v2-method .step-img-host.is-playing .mx2-k-q--2{animation-delay:1.35s;}
.v2-method .step-img-host.is-playing .mx2-k-q--3{animation-delay:1.8s;}
.v2-method .step-img-host.is-playing .mx2-k-pill{animation:v2-method-fade .6s var(--v2m-ease) 2.3s both;}

/* 03 · Coverage grid with a gold gap column ------------------------------ */
.v2-method .mx3-k-grid{
    width:min(100%,280px);
    display:grid;
    grid-template-columns:auto repeat(4,minmax(0,1fr));
    gap:7px 7px;
    align-items:center;
}
.v2-method .mx3-k-pill{justify-self:start;}
.v2-method .mx3-k-h{height:22px;}
.v2-method .mx3-k-h--gap{
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;color:var(--v2m-gold);
}
.v2-method .mx3-k-rival{
    padding-right:6px;
    font-family:'JetBrains Mono',monospace;font-size:12px;
    color:rgba(250,249,246,.7);white-space:nowrap;
}
.v2-method .mx3-k-c{position:relative;height:22px;border-radius:6px;}
.v2-method .mx3-k-c--f{background:rgba(250,249,246,.2);}
.v2-method .mx3-k-o1{background:rgba(250,249,246,.16);}
.v2-method .mx3-k-o2{background:rgba(250,249,246,.26);}
.v2-method .mx3-k-o3{background:rgba(250,249,246,.38);}
.v2-method .mx3-k-c--gap{border:1px dashed rgba(213,180,115,.8);}
.v2-method .mx3-k-c--gap::after{
    content:"";position:absolute;inset:-1px;border-radius:6px;
    background:rgba(213,180,115,.22);
    box-shadow:0 0 18px 2px rgba(213,180,115,.45);
}
.v2-method .step-img-host.is-playing .mx3-k-rival{animation:v2-method-fade .5s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx3-k-c--f{animation:v2-method-pop .5s var(--v2m-ease) both;}
.v2-method .step-img-host.is-playing .mx3-k-col1{animation-delay:.3s;}
.v2-method .step-img-host.is-playing .mx3-k-col2{animation-delay:.55s;}
.v2-method .step-img-host.is-playing .mx3-k-col4{animation-delay:.8s;}
.v2-method .step-img-host.is-playing .mx3-k-c--gap{animation:v2-method-fade .6s var(--v2m-ease) 1.2s both;}
.v2-method .step-img-host.is-playing .mx3-k-c--gap::after{animation:v2-method-glow 1s var(--v2m-ease) 1.7s both;}
.v2-method .step-img-host.is-playing .mx3-k-h--gap{animation:v2-method-drop .6s var(--v2m-ease) 2.1s both;}
.v2-method .step-img-host.is-playing .mx3-k-pill{animation:v2-method-fade .6s var(--v2m-ease) 2.4s both;}

/* Closing CTA ----------------------------------------------------------- */
.v2-method__cta{
    display:grid;
    gap:clamp(24px,3vw,48px);
    align-items:center;
    margin-top:clamp(48px,5vw,80px);
    padding:clamp(28px,3.4vw,56px);
    border-radius:24px;
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(213,180,115,.16), transparent 60%),
        var(--v2m-ink-deep);
    color:var(--v2m-paper);
    box-shadow:var(--v2m-shadow);
}
@media (min-width:960px){
    .v2-method__cta{grid-template-columns:minmax(0,1.3fr) auto;}
}
.v2-method__cta-title{
    margin:0 0 12px;
    font-family:'Playfair Display',serif;font-weight:600;
    font-size:clamp(28px,2.8vw,42px);line-height:1.1;letter-spacing:-.01em;
    color:var(--v2m-paper);
}
.v2-method__cta-text{
    margin:0;max-width:52ch;
    font-size:clamp(16px,1.05vw,18px);line-height:1.6;color:var(--v2m-body-dark);
}
.v2-method__facts{
    list-style:none;margin:20px 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px 24px;
}
.v2-method__facts li{
    display:flex;align-items:center;gap:10px;
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--v2m-gold);
}
.v2-method__facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v2m-gold);}
.v2-method__cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.v2-method__cta-actions .btn-atelier{justify-content:center;text-align:center;}
@media (max-width:959px){
    .v2-method__cta-actions{flex-direction:row;flex-wrap:wrap;}
}
@media (max-width:520px){
    .v2-method__cta-actions{flex-direction:column;}
    .v2-method__cta-actions .btn-atelier{width:100%;white-space:normal;}
}

/* Keyframes ------------------------------------------------------------- */
@keyframes v2-method-rise{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes v2-method-slide{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes v2-method-grow{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}
@keyframes v2-method-pop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
@keyframes v2-method-fade{from{opacity:0;}to{opacity:1;}}
@keyframes v2-method-drop{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
@keyframes v2-method-glow{from{opacity:0;transform:scale(.8);}to{opacity:1;transform:scale(1);}}

@media (prefers-reduced-motion:reduce){
    .v2-method .step-img-host *,
    .v2-method .step-img-host *::after{animation:none !important;}
    .v2-method__card,.v2-method__link i{transition:none;}
}
@media (max-width:719px){
    .v2-method__foot:empty{display:none;}
}


/* methodb: illustrations for System cards 04, 05, 06.
   Scoped under .v2-method .mxN-*. Resting state = finished picture; the
   sequence only runs under .step-img-host.is-playing (added by atelier.js). */

/* ---- shared panel (same recipe for 04, 05, 06) ---- */
.v2-method .mx4-panel,
.v2-method .mx5-panel,
.v2-method .mx6-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: #141B24;
  background-image: radial-gradient(120% 90% at 85% 0%, rgba(213,180,115,.10), rgba(213,180,115,0) 60%);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  container-type: inline-size;
  color: rgba(250,249,246,.74);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.v2-method .mx4-panel *, .v2-method .mx5-panel *, .v2-method .mx6-panel * { box-sizing: border-box; }
.v2-method .mx4-top, .v2-method .mx5-top, .v2-method .mx6-top { display: flex; justify-content: flex-start; flex: none; }
.v2-method .mx4-tag, .v2-method .mx5-tag, .v2-method .mx6-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: #D5B473;
  padding: 7px 12px;
  border: 1px solid rgba(213,180,115,.35);
  border-radius: 999px;
  white-space: nowrap;
}
.v2-method .mx4-stage, .v2-method .mx5-stage, .v2-method .mx6-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
}
@media (max-width: 639px) {
  .v2-method .mx4-panel, .v2-method .mx5-panel, .v2-method .mx6-panel { aspect-ratio: 4 / 3; }
}

/* ---- 04: four pages linked in order ---- */
.v2-method .mx4-stage { display: flex; align-items: center; }
.v2-method .mx4-pages {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 3cqi, 20px);
  position: relative; z-index: 1;
}
.v2-method .mx4-page {
  justify-self: center; width: 100%; max-width: 104px; aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: #1C2530;
  border: 1px solid rgba(250,249,246,.14);
  padding: clamp(8px, 2.4cqi, 14px);
  display: flex; flex-direction: column; gap: clamp(5px, 1.4cqi, 8px);
}
.v2-method .mx4-no {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(12px, 3cqi, 14px); font-weight: 600;
  line-height: 1; color: rgba(250,249,246,.86); margin-bottom: clamp(2px, 1cqi, 6px);
}
.v2-method .mx4-ln { display: block; height: 4px; border-radius: 4px; background: rgba(250,249,246,.16); }
.v2-method .mx4-ln--s { width: 62%; }
.v2-method .mx4-p4 {
  border-color: rgba(213,180,115,.75);
  background: #232A2B;
  box-shadow: 0 0 0 4px rgba(213,180,115,.10), 0 18px 40px -18px rgba(213,180,115,.55);
}
.v2-method .mx4-p4 .mx4-no { color: #D5B473; }
.v2-method .mx4-p4 .mx4-ln { background: rgba(213,180,115,.38); }
.v2-method .mx4-rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.v2-method .mx4-seg {
  position: absolute; top: 0; height: 2px; width: 25%;
  background: linear-gradient(90deg, rgba(213,180,115,.45), rgba(213,180,115,.9));
  transform-origin: left center;
}
.v2-method .mx4-seg1 { left: 12.5%; }
.v2-method .mx4-seg2 { left: 37.5%; }
.v2-method .mx4-seg3 { left: 62.5%; }

.v2-method .step-img-host.is-playing .mx4-page { animation: v2-methodb-rise .6s cubic-bezier(.22,1,.36,1) both; }
.v2-method .step-img-host.is-playing .mx4-seg { animation: v2-methodb-draw .45s cubic-bezier(.22,1,.36,1) both; }
.v2-method .step-img-host.is-playing .mx4-p1 { animation-delay: .15s; }
.v2-method .step-img-host.is-playing .mx4-seg1 { animation-delay: .6s; }
.v2-method .step-img-host.is-playing .mx4-p2 { animation-delay: .85s; }
.v2-method .step-img-host.is-playing .mx4-seg2 { animation-delay: 1.3s; }
.v2-method .step-img-host.is-playing .mx4-p3 { animation-delay: 1.55s; }
.v2-method .step-img-host.is-playing .mx4-seg3 { animation-delay: 2s; }
.v2-method .step-img-host.is-playing .mx4-p4 { animation: v2-methodb-land .8s cubic-bezier(.22,1,.36,1) 2.25s both; }

/* ---- 05: AI answer names the sample brand, Cited chip lands, Approved tick ---- */
.v2-method .mx5-stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 3.6cqi, 22px); }
.v2-method .mx5-bubble {
  position: relative; width: 100%; max-width: 440px;
  display: flex; align-items: flex-start; gap: clamp(10px, 3cqi, 16px);
  padding: clamp(14px, 4cqi, 22px);
  border-radius: 14px 14px 14px 4px;
  background: rgba(250,249,246,.06);
  border: 1px solid rgba(250,249,246,.12);
}
.v2-method .mx5-spark { flex: none; width: clamp(16px, 5cqi, 22px); height: auto; margin-top: 2px; }
.v2-method .mx5-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 2.4cqi, 12px); padding-right: clamp(4px, 4cqi, 24px); }
.v2-method .mx5-ln { display: block; height: 5px; border-radius: 5px; background: rgba(250,249,246,.18); flex: 1; }
.v2-method .mx5-ln--s { flex: none; width: 58%; }
.v2-method .mx5-l1 { flex: none; width: 100%; }
.v2-method .mx5-row { display: flex; align-items: center; gap: 8px; }
.v2-method .mx5-name {
  flex: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: clamp(12px, 3.6cqi, 15px); line-height: 1.2; color: #141B24;
  background: #D5B473; border-radius: 6px; padding: 4px 8px; white-space: nowrap;
}
.v2-method .mx5-chip {
  flex: none; align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: #D5B473; background: #2A2C2A; border: 1px solid rgba(213,180,115,.7);
  border-radius: 999px; padding: 6px 10px; white-space: nowrap;
}
.v2-method .mx5-ok { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
.v2-method .mx5-tick {
  width: 24px; height: 24px; border-radius: 50%; background: #45523E;
  border: 1px solid rgba(250,249,246,.25);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.v2-method .mx5-tick svg { width: 14px; height: 14px; }
.v2-method .mx5-ok-t { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,249,246,.86); }

.v2-method .step-img-host.is-playing .mx5-bubble { animation: v2-methodb-rise .7s cubic-bezier(.22,1,.36,1) .1s both; }
.v2-method .step-img-host.is-playing .mx5-l1,
.v2-method .step-img-host.is-playing .mx5-l2,
.v2-method .step-img-host.is-playing .mx5-l3 { animation: v2-methodb-fade .5s cubic-bezier(.22,1,.36,1) both; }
.v2-method .step-img-host.is-playing .mx5-l1 { animation-delay: .55s; }
.v2-method .step-img-host.is-playing .mx5-l2 { animation-delay: .75s; }
.v2-method .step-img-host.is-playing .mx5-l3 { animation-delay: .95s; }
.v2-method .step-img-host.is-playing .mx5-name { animation: v2-methodb-land .7s cubic-bezier(.22,1,.36,1) 1.3s both; }
.v2-method .step-img-host.is-playing .mx5-chip { animation: v2-methodb-drop .7s cubic-bezier(.22,1,.36,1) 1.85s both; }
.v2-method .step-img-host.is-playing .mx5-ok { animation: v2-methodb-rise .6s cubic-bezier(.22,1,.36,1) 2.4s both; }

/* ---- 06: rising line, one dip, ends on 47% ---- */
.v2-method .mx6-stage { display: flex; align-items: stretch; gap: clamp(16px, 5cqi, 32px); }
.v2-method .mx6-chart { position: relative; flex: 1 1 auto; min-width: 0; margin: 8px 8px 4px 0; }
.v2-method .mx6-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v2-method .mx6-grid { stroke: rgba(250,249,246,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v2-method .mx6-line { fill: none; stroke: #D5B473; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v2-method .mx6-cover {
  position: absolute; top: -8px; bottom: -4px; left: -2px; right: -10px;
  background: #141B24; transform-origin: right center; transform: scaleX(0);
}
.v2-method .mx6-dot {
  position: absolute; left: 100%; top: 14%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #D5B473; box-shadow: 0 0 0 5px rgba(213,180,115,.18);
}
.v2-method .mx6-fig { flex: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; max-width: 42%; }
.v2-method .mx6-num {
  font-family: 'Playfair Display', serif; font-weight: 600;
  font-size: clamp(40px, 15cqi, 76px); line-height: 1; letter-spacing: -.01em; color: #D5B473;
}
.v2-method .mx6-cap {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(250,249,246,.74);
}

.v2-method .step-img-host.is-playing .mx6-cover { animation: v2-methodb-wipe 1.8s cubic-bezier(.45,.05,.25,1) .2s both; }
.v2-method .step-img-host.is-playing .mx6-dot { animation: v2-methodb-land .6s cubic-bezier(.22,1,.36,1) 1.95s both; }
.v2-method .step-img-host.is-playing .mx6-num { animation: v2-methodb-rise .8s cubic-bezier(.22,1,.36,1) 2.15s both; }
.v2-method .step-img-host.is-playing .mx6-cap { animation: v2-methodb-fade .6s cubic-bezier(.22,1,.36,1) 2.45s both; }

/* ---- keyframes ---- */
@keyframes v2-methodb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v2-methodb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-methodb-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v2-methodb-land { 0% { opacity: 0; transform: scale(.86); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes v2-methodb-drop { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes v2-methodb-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .v2-method .step-img-host.is-playing [class*="mx4-"],
  .v2-method .step-img-host.is-playing [class*="mx5-"],
  .v2-method .step-img-host.is-playing [class*="mx6-"] { animation: none !important; }
}