:root{
  /* ── ヒーローのキービジュアル（§10.2.1）。背景２＝2枚目のポスターの背景。
     左＝夜明けの東京タワー／右＝竜巻と落雷。3344×1881 の原版から WebP を
     2段用意し、幅で読み分ける。§5.2 のとおりヒーロー画像は遅延読み込みしない。 ── */
  --kv: url('kv/hero_1400.webp');
  --kv-fallback: linear-gradient(104deg,#0d3a66 0%,#2f6ea8 45%,#4a1a63 52%,#1b0526 100%);

  /* ── 04 締めのキービジュアル。背景１＝1枚目のポスターの背景。
     左＝青空の東京タワー／右＝紫の雷とスカイツリー。--kv と同じ構造。 ── */
  --kv2: url('kv/storm_1400.webp');
  --kv2-fallback: linear-gradient(104deg,#123a63 0%,#2c5f92 42%,#4a1f70 58%,#1c0733 100%);
}

@media (min-width:1200px){
  :root{ --kv: url('kv/hero.webp'); --kv2: url('kv/storm.webp'); }
}

.hero{position:relative;min-height:100svh;display:flex;align-items:stretch;
  padding-top:var(--s6);overflow:hidden}

.heroKV{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--kv,var(--kv-fallback));background-size:cover;background-position:center}
/* 稲妻はキービジュアル画像が持つため、CSSでの擬似稲妻は廃止した。 */
/* 文字側（左）の可読性確保。キービジュアルは明るい夜明けの青のため、
   白文字がそのままでは沈む。左からごく暗いスクリムを敷く。 */
.heroKV::after{content:'';position:absolute;inset:0;
  /* 文字側（左）の可読性。キービジュアルの左は夜明けで明るく、ロゴタイプの帯に
     そのまま白文字を置くと沈む。実測でこの強度にすると帯の平均輝度が67/255まで
     下がり、白文字とのコントラスト比は約10.1（AAA）になる。 */
  background:linear-gradient(100deg,
    rgba(3,8,16,.78) 0%, rgba(3,8,16,.52) 40%, transparent 74%)}

/* ══════ パララックス（§20.7）。背景（キービジュアル）とテキストが時間差で
   動く視差をはっきり分かる程度に付ける。.hero 自身の view-timeline を使い、
   節がビューポートを通過する間、背景はゆっくり／文字はやや速く動かす
   （速度差が視差として読める程度に留め、酔わない範囲の移動量にする）。
   scale(1.12) は.maskRevealのパララックス（§12.1）と同じ考え方のブリードで、
   translateYで動かしても.hero側のoverflow:hiddenの内側に端が透けない余白を
   確保する（background-size:coverの計算自体は変えない）。
   非対応ブラウザ・prefers-reduced-motionでは静止（既存の共通@mediaが
   animationごと無効化する）。 ══════ */
@supports (animation-timeline: view()){
  .heroKV{animation:heroKVParallax linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
  .heroL{animation:heroLParallax linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
}
@keyframes heroKVParallax{
  from{transform:translateY(-4%) scale(1.12)}
  to{transform:translateY(4%) scale(1.12)}
}
@keyframes heroLParallax{ from{transform:translateY(calc(var(--s3) * -1))} to{transform:translateY(var(--s3))} }

/* 人物：ポスターと同じく、晴れと嵐の境界に背を向けて立たせる。
   下端を切って地面に接地させる。文字は左7カラムなので重ならない。 */
.heroFigure{position:absolute;right:6vw;bottom:0;z-index:1;pointer-events:none;
  height:min(66svh,640px);width:auto;
  filter:drop-shadow(0 0 var(--s5) rgba(0,0,0,.55))}
/* 不透明度が低すぎて後ろ姿が沈んでいた（実機で確認）。上げて見えるようにする。 */
@media(max-width:899px){ .heroFigure{right:-4vw;height:48svh;opacity:.9} }


/* ⚠️ スマホは画面が縦長なので、cover だと横方向が大きく切られる。
   background-position:center のままだと左側しか見えない（実機で確認）。
   絵の主題が右側にあるため、スマホでは右へ寄せて見せる。 */
@media(max-width:899px){
  .heroKV{background-position:78% center}
}
.heroL{position:relative;z-index:2;grid-column:1 / 8;min-width:0;align-self:center}
/* 左上のロゴは position:fixed のため、スマホではヒーローのロゴタイプと
   重なる。上に余白を取って逃がす。 */
@media(max-width:899px){ .heroL{padding-top:var(--s7)} }

.logo{position:relative;line-height:.92;
  font-size:clamp(var(--fs-d1),8.4vw,var(--fs-d3));margin-left:-.04em}
.logo span{display:block}
.logo .l2{padding-left:.09em}
/* グランジのかすれ（§10.4.1）。
   ⚠️ 擬似要素を矩形で重ねてはいけない。ロゴの箱ぜんたいが灰色の四角として
   浮き上がり、演出ではなく不具合に見える。ノイズは background-clip:text で
   「文字の内側」に閉じ込める。白ベタとノイズを multiply で合成し、白い文字に
   暗いかすれが入るポスターの見えを再現する。
   非対応ブラウザでは color:var(--t1) のまま素の白文字になる（劣化して崩れない）。 */
.logo{color:var(--t1)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(var(--t1),var(--t1));
    background-size:180px 180px, 100% 100%;
    background-blend-mode:multiply;
    -webkit-background-clip:text;background-clip:text;
    color:transparent}
}

.tagline{margin-top:var(--s3);font-size:clamp(var(--fs-h3),3.2vw,var(--fs-h1))}

.cta{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s2);
  align-items:flex-start}
/* 斜め塗りホバー（項目9）。詳細な設計判断は assets/site.css の該当コメントに
   まとめてある（同じ仕組みを .closeCta／.btnFill／.barPlay にも適用）。 */
.ctaMain{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s3) var(--s4);background:var(--accent);color:#fff;font-weight:700;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:color .2s var(--ease),transform .2s var(--ease)}
.ctaMain::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .32s var(--ease)}
.ctaMain:hover::before,.ctaMain:focus-visible::before,.ctaMain:active::before{
  clip-path:polygon(0 0,100% 0,calc(100% - 1.2em) 100%,0 100%)}
.ctaMain:hover,.ctaMain:focus-visible,.ctaMain:active{color:var(--ground)}
.ctaMain b{font-size:var(--fs-h3);line-height:1.2}
.ctaMain i{font-style:normal;font-size:var(--fs-s);opacity:.86;line-height:1.2}
.ctaMain:hover i,.ctaMain:focus-visible i,.ctaMain:active i{opacity:1}
@media(hover:hover){ .ctaMain:hover{transform:translateY(-2px)} }
.ctaMain:focus-visible{outline:2px solid var(--t1);outline-offset:3px}
.stores{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* ⚠️ stretch にすると、バッジ画像の原寸（270x80）が基準になって隣の
   「App Store 準備中」の枠まで80pxへ引き伸ばされ、枠の中に空白が残った
   （実測で確認）。バッジ側を枠の高さに近い実寸で指定し、中央で揃える。 */
.storeLink{display:block;line-height:0}
.storeLink img{display:block;width:clamp(8rem, 12vw, 9.5rem);height:auto}
@media(hover:hover){ .storeLink:hover{filter:brightness(1.1)} }
.storeLink:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* 二次元コード。⚠️ 読み取れることが機能そのものなので、白の余白（静穏域）ごと
   出す。地が濃紺なので白場は四角のまま残し、角丸や枠で飾らない。 */
.heroQr{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s1)}
.storeQr{display:flex;flex-direction:column;align-items:center;gap:6px}
.storeQr img{display:block;width:clamp(3.9rem,6.4vw,4.8rem);height:auto;
  background:#fff;padding:4px}
.storeQrCap{font-size:var(--fs-xs);letter-spacing:var(--tr-label);
  color:var(--t3)}
.store{font-size:var(--fs-s);color:var(--t3);border:1px solid var(--border);
  padding:var(--s1) var(--s3);line-height:1.5}
.store em{font-style:normal;display:block;font-size:var(--fs-xs);
  letter-spacing:var(--tr-label);color:var(--t3)}

/* ══════ 04 締め（新設。§13。00 と同じキービジュアル構造でタグラインを再掲し、
   PLAY への大きな導線を1つだけ置く。全画面（min-height:100svh）。下部固定バー
   （§13.2）の高さぶんの下余白を padding-bottom で確保し、align-items:center が
   コンテンツをその分だけ上へ寄せる。これにより演出（全面余白そのものの効果）を
   下バーが潰さない。 ══════ */
.close{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--fs-h2) * 1.7 + var(--s3) * 2);padding-bottom:var(--s6);overflow:hidden}

.closeKV{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--kv2,var(--kv2-fallback));background-size:cover;background-position:center}
/* ⚠️ この指定は .closeKV の定義より後ろに置くこと。詳細度が同じ(0,1,0)なので、
   定義より前に書くと後勝ちで打ち消される（実際に効いていなかった）。
   スマホは縦長で cover の横方向が大きく切られるため、右へ寄せて見せる。 */
@media(max-width:899px){ .closeKV{background-position:100% center} }
/* 左スクリムは00と同じ考え方（§10.2.1・§11.4）。文字が乗る左側の輝度を落として
   可読性を確保する。 */
.closeKV::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(3,8,16,.78) 0%, rgba(3,8,16,.52) 40%, transparent 74%)}

/* パララックス（§20.7）。00 のヒーローと同じ考え方（scale(1.12)のブリード＋
   translateY）で、storm.webp（背景）とタグライン（文字）に速度差を付ける。 */
@supports (animation-timeline: view()){
  .closeKV{animation:closeKVParallax linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
  .closeL{animation:closeLParallax linear both;animation-timeline:view();
    animation-range:cover 0% cover 100%}
}
@keyframes closeKVParallax{
  from{transform:translateY(-4%) scale(1.12)}
  to{transform:translateY(4%) scale(1.12)}
}
@keyframes closeLParallax{ from{transform:translateY(calc(var(--s3) * -1))} to{transform:translateY(var(--s3))} }

/* §20.8：8:4だった旧比率を6:6ぶんさらに右へ寄せ、キービジュアルの見える
   面積を増やす（左エッジ＝カラム1は不変。崩すのは右側だけの原則どおり）。 */
.closeL{position:relative;z-index:2;grid-column:1 / 7;min-width:0}
/* タグラインの再掲。00 の .tagline（clamp上限 --fs-h1）より大きく出す。 */
.closeTag{font-size:clamp(var(--fs-d1),6.4vw,var(--fs-d3));line-height:var(--lh-d)}
/* ⚠️ 「失敗できる／災害はここだけ」の2行組みと、平仮名の縮小は、
   スマホだけでなく全幅で効かせること。PCでも改行が入らないと、
   「失敗でき／る災害は／ここだけ」のように語の途中で3行に割れる
   （実機で発生）。改行位置と字の大小は文の意味に属する組版であり、
   画面幅で変えるべきものではない。 */
.closeTag .tagKana{font-size:.66em}
.closeTag .tagBr{display:block}
/* 2026-08-16：実機で「失敗できる／災害はここだ／け」と3行に割れた報告への対処。
   ヘッドレスChromeの実測では 390〜1440px の全幅で2行に収まっており、原因は
   本文フォントの読み込み前に代替フォント（字幅が広い）で組まれて溢れる FOUT である。
   <br> があっても自動折返しは止まらないため、行を跨がせない指定を足して構造で封じる。
   最長行「災害はここだけ」は 2em＋5×.66em＝5.3em で、900px時に使える幅の78%。
   代替フォントが1割広くても収まるため、はみ出しは起きない。 */
.closeTag{white-space:nowrap}
/* 斜め塗りホバー（項目9。.ctaMain と同じ仕組み）。 */
.closeCta{position:relative;isolation:isolate;margin-top:var(--s5);display:inline-flex;align-items:center;
  padding:var(--s3) var(--s6);background:var(--accent);color:#fff;font-weight:700;
  font-size:var(--fs-h3);letter-spacing:var(--tr-label);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:color .2s var(--ease),transform .2s var(--ease)}
.closeCta::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .32s var(--ease)}
.closeCta:hover::before,.closeCta:focus-visible::before,.closeCta:active::before{
  clip-path:polygon(0 0,100% 0,calc(100% - 1.2em) 100%,0 100%)}
.closeCta:hover,.closeCta:focus-visible,.closeCta:active{color:var(--ground)}
@media(hover:hover){ .closeCta:hover{transform:translateY(-2px)} }
.closeCta:focus-visible{outline:2px solid var(--t1);outline-offset:3px}

/* .foot（フッター文字組）は assets/site.css の共通ユーティリティを使う。 */

/* v6 骨格。開幕・hero・締めの既存演出は上の移植ルールを使う。 */
body{font-variant-numeric:tabular-nums}
.v6-update{display:flex;align-items:baseline;gap:var(--s3);border-block:1px solid var(--border);padding-block:var(--s2);color:var(--t1)}
.v6-update time{flex:none;font:400 .75rem/1.8 'Archivo',sans-serif;font-variant-numeric:tabular-nums}
.v6-update span{font-size:var(--fs-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v6-placeholder{min-height:70svh;display:flex;align-items:center;border-top:1px solid var(--border);background:var(--ground)}
.v6-placeholder h2{font:800 clamp(28px,4.5vw,64px)/1.4 'Shippori Mincho B1',serif}
.v6-placeholder p{margin-top:var(--s3);font-size:var(--fs-s);color:var(--t1)}
.v6-home .try-scene{box-sizing:border-box;scroll-margin-top:0}
.v6-home .try-choice::before{content:none}
.v6-home .try-forecast,.v6-home .try-prompt,.v6-home .try-result{text-shadow:none}
.close .stores{margin-top:var(--s3)}
.close .heroQr{margin-top:var(--s3)}

/* 02: two full surfaces; all rules stay local to this section. */
.v6-ways{position:relative;height:100svh;min-height:788px;background:var(--ground);overflow:hidden;display:flex;flex-direction:column}
.v6-ways .ways-heading{padding-block:var(--s5);margin-block:0}
.v6-ways .ways-heading h2{font-size:clamp(28px,4.5vw,64px);line-height:1.4}
.v6-ways .wayFull{--ways-split:50%;position:relative;display:grid;grid-template-columns:var(--ways-split) 1fr;flex:1;min-height:0;transition:grid-template-columns .65s var(--ease)}
.v6-ways .wayFullHalf{position:relative;display:block;overflow:hidden;min-width:0;padding:clamp(32px,4.5vw,72px);color:#fff;text-decoration:none;transition:transform .85s var(--ease)}
.v6-ways .wayFullHalf--vs{background:#E60B00;--way-angle:-4deg;--way-enter:-100%}
.v6-ways .wayFullHalf--coop{background:#002A6C;--way-angle:4deg;--way-enter:100%}
.v6-ways .wayInner{position:relative;z-index:1}
.v6-ways .wayMode{margin:0;font-size:clamp(32px,4.5vw,64px);line-height:1.25;white-space:nowrap}
.v6-ways .waySub{margin-top:var(--s2);font-size:clamp(14px,1.35vw,20px);line-height:1.6;white-space:nowrap}
.v6-ways .wayCount{display:flex;flex-wrap:nowrap;align-items:center;gap:.65em;margin-top:var(--s3);font-size:clamp(16px,1.6vw,24px);line-height:1.3;white-space:nowrap}
.v6-ways .wayCountGroup{display:inline-flex;align-items:center;gap:.2em;flex:none}
.v6-ways .wayCount small{font-size:.5em;margin-left:.3em;align-self:flex-end}
.v6-ways .wayIcon{width:1em;height:1em;flex:none}
.v6-ways .wayArtWord{position:absolute;inset:24px 24px 24px auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.015em;font-size:clamp(64px,7.3vw,112px);line-height:.94;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42);pointer-events:none}
@media(min-width:601px){
  /* Four letters span the same height as six letters with the original gap. */
  .v6-ways .wayFullHalf--coop .wayArtWord{gap:calc((2 * .94em + 5 * .015em) / 3)}
}
.v6-ways .way-phone{position:absolute;width:clamp(240px,21vw,330px);height:auto;max-width:none;left:17%;top:max(300px,calc(100% - 365px));transform:rotate(var(--way-angle));transition:transform .65s var(--ease),translate .85s var(--ease),opacity .85s var(--ease)}
.v6-ways .wayCross{position:absolute;z-index:2;pointer-events:none;left:var(--ways-split);top:50%;translate:-50% -50%;width:calc(clamp(32px,4.5vw,64px) * 1.4);height:auto;transition:left .65s var(--ease)}
.v6-ways .wayCross line{stroke:#fff;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .65s var(--ease) .65s}
.v6-ways .wayCross line + line{transition-delay:.85s}
.v6-ways .wayFullHalf:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.v6-ways.ways-animated:not(.ways-in) .wayFullHalf{transform:translateX(var(--way-enter))}
.v6-ways.ways-animated:not(.ways-in) .wayCross line{stroke-dashoffset:1}
.v6-ways.ways-animated:not(.ways-in) .way-phone{translate:0 100px;opacity:0}
.v6-ways.ways-animated.ways-in .way-phone{transition-delay:0s,.35s,.35s}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
  html:not([data-motion-lite]) .v6-ways .wayFull:has(.wayFullHalf--vs:hover){--ways-split:58%}
  html:not([data-motion-lite]) .v6-ways .wayFull:has(.wayFullHalf--coop:hover){--ways-split:42%}
  html:not([data-motion-lite]) .v6-ways .wayFullHalf:hover .way-phone{transform:translateY(-18px) rotate(var(--way-angle))}
}
html[data-motion-lite] .v6-ways .wayFullHalf{transform:none!important}
html[data-motion-lite] .v6-ways .way-phone{translate:none!important;opacity:1!important}
html[data-motion-lite] .v6-ways .wayCross line{stroke-dashoffset:0!important}
html[data-motion-lite] .v6-ways *{transition:none!important}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) .v6-ways .wayFull{--ways-split:50%!important}
  html:not([data-motion="on"]) .v6-ways .wayFullHalf{transform:none!important}
  html:not([data-motion="on"]) .v6-ways .way-phone{transform:none!important;translate:none!important;opacity:1!important}
  html:not([data-motion="on"]) .v6-ways .wayCross line{stroke-dashoffset:0!important}
  html:not([data-motion="on"]) .v6-ways *{transition:none!important}
}
@media(max-width:600px){
  .v6-ways .ways-heading{padding-top:88px;padding-bottom:24px}
  .v6-ways .ways-heading h2{font-size:clamp(24px,6.4vw,36px);white-space:nowrap}
  .v6-ways .wayFull{grid-template-columns:1fr;grid-template-rows:1fr 1fr;min-height:max(640px,calc(100svh - 148px))}
  .v6-ways .wayFullHalf{padding:28px 24px}
  .v6-ways .wayMode{font-size:36px}
  .v6-ways .waySub{font-size:14px}
  .v6-ways .wayCount{font-size:16px;margin-top:20px;gap:.5em}
  .v6-ways .way-phone{width:160px;left:auto;right:-20px;top:auto;bottom:-140px}
  .v6-ways .wayArtWord{inset:16px 16px 16px auto;font-size:53px}
  .v6-ways .wayCross{left:50%;top:50%;width:44px}
  .v6-ways .wayFullHalf--vs{--way-enter:-100%}
  .v6-ways .wayFullHalf--coop{--way-enter:100%}
}

/* 固定ロゴとPLAYバーが、体験の見出し・選択肢に重ならない余白。 */
@media(max-width:600px){
  .v6-home .try-scene{padding-top:100px;padding-bottom:112px}
}
/* 対戦の写真は「あなた」の半分だけに切った短い画像なので、スマホでは下にはみ出す量を減らす */
@media(max-width:600px){.v6-ways .wayFullHalf--vs .way-phone{bottom:-40px}}

/* 03: static first; only supported desktop timelines get the sticky journey. */
.v6-deck{position:relative;background:var(--ground)}
.v6-deck .deck-heading{width:fit-content;padding-block:var(--s5);margin-block:0}
.v6-deck .deck-heading h2{font-size:clamp(28px,4.5vw,64px);line-height:1.4}
.v6-deck .deck-window{overflow:clip}
.v6-deck .deck-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1280px;margin:0 auto;padding:0 var(--pad) var(--s6);list-style:none;gap:var(--s4)}
.v6-deck .deck-step{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.v6-deck .deck-step:not(:last-child)::after{content:"";position:absolute;top:76px;right:calc(var(--s4) / -2 - 20px);width:40px;height:1px;background:var(--t1);opacity:.35}
.v6-deck .deck-type{position:relative;isolation:isolate;flex:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.v6-deck .deck-bg{position:absolute;z-index:-1;left:50%;top:50%;width:132%;height:auto;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.v6-deck .deck-bg text{font-family:Anton,Impact,'Arial Narrow',sans-serif;font-size:300px;fill:#204c79}
.v6-deck .deck-bg text.o{fill:none;stroke:#31577d;stroke-width:1.2}
.v6-deck .deck-label{margin-top:var(--s2);font-size:var(--fs-s);letter-spacing:var(--tr-label)}
.v6-deck .deck-verb{margin:var(--s1) 0 0;font:600 clamp(64px,6.5vw,104px)/1.3 'Shippori Mincho B1',serif;letter-spacing:var(--tr-jp-accent);color:#eef3f9}
.v6-deck .deck-phone{display:block;width:min(100%,200px);height:auto;border:0;border-radius:0;box-shadow:none}
.v6-deck .result_save-phone{aspect-ratio:1/1.05;height:auto;object-fit:cover;object-position:50% 50%;margin-block:auto}
@supports (animation-timeline:view()){
  @media(min-width:901px){
    html:not([data-motion-lite]) .v6-deck{height:300svh;view-timeline-name:--deck;view-timeline-axis:block}
    html:not([data-motion-lite]) .v6-deck .deck-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column}
    html:not([data-motion-lite]) .v6-deck .deck-window{flex:1;min-height:0;display:flex;align-items:center}
    html:not([data-motion-lite]) .v6-deck .deck-track{display:flex;flex:none;gap:0;width:210vw;max-width:none;margin:0 0 0 15vw;padding:0 0 var(--s5);animation:deck-travel linear both;animation-timeline:--deck;animation-range:contain 0% contain 100%}
    html:not([data-motion-lite]) .v6-deck .deck-step{flex:0 0 70vw;flex-direction:row;justify-content:center;gap:clamp(40px,7vw,120px)}
    html:not([data-motion-lite]) .v6-deck .deck-step:not(:last-child)::after{top:50%;right:-32px;width:64px}
    html:not([data-motion-lite]) .v6-deck .deck-type{text-align:center}
    html:not([data-motion-lite]) .v6-deck .deck-verb{font-size:clamp(88px,9vw,160px);animation:deck-first linear both;animation-timeline:--deck;animation-range:contain 0% contain 100%}
    html:not([data-motion-lite]) .v6-deck .deck-step:nth-child(2) .deck-verb{animation-name:deck-second}
    html:not([data-motion-lite]) .v6-deck .deck-step:nth-child(3) .deck-verb{animation-name:deck-third}
    html:not([data-motion-lite]) .v6-deck .deck-phone{width:auto;height:min(54svh,540px);max-width:30vw;object-fit:contain}
    html:not([data-motion-lite]) .v6-deck .result_save-phone{width:min(32vw,400px);height:min(44svh,420px);object-fit:cover;margin-block:0}
  }
}
@keyframes deck-travel{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(-70vw)}90%,100%{transform:translateX(-140vw)}}
@keyframes deck-first{0%,27.49%{opacity:1}27.5%,100%{opacity:.22}}
@keyframes deck-second{0%,27.49%{opacity:.22}27.5%,72.49%{opacity:1}72.5%,100%{opacity:.22}}
@keyframes deck-third{0%,72.49%{opacity:.22}72.5%,100%{opacity:1}}
/* The OS preference wins unless the v5 inspection override is explicit. */
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) .v6-deck{height:auto;view-timeline-name:none}
  html:not([data-motion="on"]) .v6-deck .deck-sticky{position:static;height:auto;display:block}
  html:not([data-motion="on"]) .v6-deck .deck-window{display:block}
  html:not([data-motion="on"]) .v6-deck .deck-track{display:grid;width:auto;max-width:1280px;margin:0 auto;padding:0 var(--pad) var(--s6);gap:var(--s4);animation:none}
  html:not([data-motion="on"]) .v6-deck .deck-step{flex-direction:column;gap:var(--s3)}
  html:not([data-motion="on"]) .v6-deck .deck-step:not(:last-child)::after{top:76px;right:calc(var(--s4) / -2 - 20px);width:40px}
  html:not([data-motion="on"]) .v6-deck .deck-type{text-align:center}
  html:not([data-motion="on"]) .v6-deck .deck-verb{font-size:clamp(64px,6.5vw,104px);animation:none;opacity:1}
  html:not([data-motion="on"]) .v6-deck .deck-phone{width:min(100%,200px);height:auto;max-width:none}
  html:not([data-motion="on"]) .v6-deck .result_save-phone{object-fit:cover;margin-block:auto}
  html:not([data-motion="on"]) .v6-deck *{transition:none!important}
}
@media(max-width:900px){
  .v6-deck .deck-track{grid-template-columns:1fr;gap:var(--s6)}
  .v6-deck .deck-step{gap:var(--s3)}
  .v6-deck .deck-step:not(:last-child)::after{top:auto;bottom:calc(var(--s6) / -2);right:calc(50% - 24px);width:48px}
  .v6-deck .deck-phone{width:min(64vw,240px)}
  .v6-deck .result_save-phone{width:min(80vw,340px);margin-block:0}
  html:not([data-motion-lite]) .v6-deck.deck-reveal .deck-type,
  html:not([data-motion-lite]) .v6-deck.deck-reveal .deck-phone{transition:transform .85s var(--ease),opacity .85s var(--ease)}
  html:not([data-motion-lite]) .v6-deck.deck-reveal .deck-step:not(.deck-in) .deck-type,
  html:not([data-motion-lite]) .v6-deck.deck-reveal .deck-step:not(.deck-in) .deck-phone{transform:translateY(48px);opacity:0}
  html:not([data-motion-lite]) .v6-deck.deck-reveal .deck-phone{transition-delay:.18s}
}
@media(max-width:600px){
  .v6-deck .deck-heading{padding-top:88px;padding-bottom:24px}
  .v6-deck .deck-heading h2{font-size:clamp(24px,6.4vw,36px);white-space:nowrap}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) .v6-deck .deck-step:not(:last-child)::after{top:auto;bottom:calc(var(--s6) / -2);right:calc(50% - 24px);width:48px}
  html:not([data-motion="on"]) .v6-deck .deck-phone{width:min(64vw,240px)}
  html:not([data-motion="on"]) .v6-deck .result_save-phone{width:min(80vw,340px);margin-block:0}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) .v6-deck.deck-reveal .deck-type,
  html:not([data-motion="on"]) .v6-deck.deck-reveal .deck-phone{transform:none!important;opacity:1!important}
}

/* v6 revision: one hero, with a settled white Bodoni title. */
.hero .heroL{animation:none;transform:none}
.hero-title{position:relative;margin:0;font:400 clamp(72px,8.2vw,122px)/.88 'Bodoni Moda','Bodoni MT',Didot,serif;letter-spacing:.015em;color:#eef3f9}
.hero-title span{display:block}
.hero-title .hero-fill>span+span,.hero-title .hero-rim>span+span{margin-top:14px}
.hero-rim{position:absolute;inset:0;opacity:0;color:transparent;-webkit-text-stroke:1px #e4efff;pointer-events:none}
.hero-rim>span:first-child{text-shadow:0 0 5px #c47f8c,0 0 17px #c471854f}
.hero-rim>span+span{text-shadow:0 0 5px #8ca8d2,0 0 17px #668fc24f}
.hero-black{position:absolute;inset:0;z-index:2;background:#020811;opacity:0;pointer-events:none}
.hero-caption{position:absolute;z-index:3;left:50%;top:47%;translate:-50% -50%;font-size:23px;font-weight:400;letter-spacing:.45em;text-indent:.45em;white-space:nowrap;opacity:0;pointer-events:none}
.hero-pending .hero-black{opacity:.94}
.hero-pending .hero-title,.hero-pending .hero .tagline,.hero-pending .hero .cta{opacity:0}
.hero-compare{position:absolute;z-index:3;right:24px;bottom:20px;display:flex;gap:14px}
.hero-compare button{padding:5px 0;border:0;background:none;color:#b9c8d9;font:400 12px/1.5 'Zen Kaku Gothic New',sans-serif;cursor:pointer}
.hero-compare button[aria-pressed="true"]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.hero-compare button:focus-visible{outline:1px solid #eef3f9;outline-offset:4px}
/* Generic device: no model-specific silhouette, notch or logo. */
.v6-phone{position:relative;box-sizing:border-box;flex:none;background:#090e15;border-radius:25px;padding:12px 7px 10px;overflow:hidden;box-shadow:0 12px 28px #0005}
.v6-phone::before{content:'';position:absolute;z-index:1;top:5px;left:40%;width:20%;height:3px;background:#343c48;border-radius:3px}
.v6-phone::after{content:'';position:absolute;bottom:4px;left:37%;width:26%;height:2px;background:#626c79;border-radius:3px}
.v6-phone img{display:block;width:100%;height:100%;object-fit:contain;object-position:top;background:#0c1119;border-radius:18px}
.v6-ways .way-phone{position:absolute;left:28%;top:245px;bottom:auto;width:clamp(240px,19vw,280px);height:auto;aspect-ratio:780/1320;transform:none;max-width:none}
.v6-ways .way-phone img{object-fit:cover}
.v6-ways .coop_battle-phone img{object-fit:contain}
.v6-ways .wayArtWord{inset:24px 24px 24px auto}
.v6-ways .wayFullHalf--vs .wayArtWord{left:24px;right:auto}
.v6-ways .wayArtWord>span,.v6-ways .wayArtWord>span:last-child{font-size:1em;line-height:.94;flex:none}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 html:not([data-motion-lite]) .v6-ways .wayFullHalf:hover .way-phone{transform:translateY(-12px)}
}
/* Match all three phone dimensions, including static/reduced layouts. */
.v6-deck .deck-phone,html:not([data-motion-lite]) .v6-deck .deck-phone,html:not([data-motion="on"]) .v6-deck .deck-phone{width:230px;height:460px;max-width:none;aspect-ratio:auto;margin-block:0;object-fit:initial;border:0;border-radius:25px;box-shadow:0 12px 28px #0005}
.v6-deck .deck-phone img{object-fit:contain}
#s05{position:relative;isolation:isolate;overflow:hidden}
#s05>.wrap{position:relative;z-index:1}
.continue-geometry{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:900px){
 .hero-title{font-size:65px;line-height:.92}
 .hero .tagline{font-size:19px;margin-top:25px;white-space:nowrap}
 .hero .cta{margin-top:35px}
 .hero .heroQr{display:none}
 .hero-caption{font-size:14px;letter-spacing:.35em}
 .v6-deck .deck-phone,html:not([data-motion-lite]) .v6-deck .deck-phone,html:not([data-motion="on"]) .v6-deck .deck-phone{width:260px;height:500px}
}
@media(max-width:600px){
 .hero .heroL{padding-top:0;align-self:start;grid-column:1/-1;margin-top:27svh}
 .hero .wrap{align-self:stretch}
 .hero-compare{right:20px;bottom:16px}
 .v6-ways .wayFullHalf{padding:28px 24px}
 .v6-ways .wayMode{font-size:30px}
 .v6-ways .waySub{font-size:12px}
 .v6-ways .wayCount{font-size:14px}
 .v6-ways .way-phone,.v6-ways .wayFullHalf--vs .way-phone{width:156px;height:264px;left:auto;right:10px;top:94px;bottom:auto;border-radius:19px}
 .v6-ways .wayArtWord{inset:18px 12px 18px auto;font-size:44px}
 .v6-ways .wayFullHalf--vs .wayArtWord{left:12px;right:auto;top:150px;bottom:8px;font-size:27px}
 .v6-ways .wayFullHalf--vs .way-phone{right:14px}
 .v6-ways .wayFullHalf--coop .way-phone{right:65px}
}

@media(min-width:601px){.v6-ways .wayFullHalf--vs .wayInner{margin-left:64px}}

/* Keep fine Bodoni strokes visible in every title layer. */
.hero-title,.hero-title *{font-optical-sizing:none;font-variation-settings:'opsz' 24}

/* HOME additions; shared navigation also serves ABOUT and NEWS. */
.navMenuType{display:grid;place-items:center;background:#002A6C;color:#fff;font:600 15px/1 'Archivo',sans-serif;letter-spacing:.08em;border-radius:0;box-shadow:none}
.v6-about{padding-block:clamp(72px,8vw,128px);background:var(--ground);border-bottom:1px solid var(--border)}
.about-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(30px,4vw,64px);align-items:center}
.about-grid>*{min-width:0}
.about-bridge{display:block;width:100%;height:auto;overflow:visible}
.about-eyebrow{font-size:12px;margin-bottom:22px}
.about-copy h2{font-size:clamp(28px,2.65vw,42px);line-height:1.5;letter-spacing:.025em}
.about-copy h2 span{display:inline-block}
.about-lead{margin-top:24px;font-size:clamp(16px,1.25vw,19px);line-height:1.9}
.about-body{margin-top:22px;font-size:15px;line-height:2}
.about-facts{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 26px;margin:28px 0}
.about-facts>span{white-space:nowrap}
.about-facts b{font:400 clamp(30px,3vw,44px)/1 'Archivo',sans-serif;letter-spacing:-.04em}
.about-facts small{font-size:13px}
.about-free{font-size:14px}
.v6-text-link{display:inline-block;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:5px;text-decoration:none}
.v6-text-link span{margin-left:20px}
/* Four large screens on the existing green surface. */
.v6-create{position:relative;overflow:hidden;background:#0E6B3A;color:#fff}
.v6-create .wayFullCreate{position:relative;display:block;padding-block:32px;padding-left:100px}
.v6-create header{position:relative;z-index:1;margin-bottom:28px;pointer-events:none}
.create-surface-link{position:absolute;inset:0;z-index:1}
.create-surface-link:focus-visible{outline:2px solid white;outline-offset:-8px}
@media(min-width:901px){.v6-create header{margin-left:104px}}
.v6-create h2{font-size:clamp(28px,3.1vw,48px);line-height:1.4;white-space:nowrap}
.create-sub{font-size:14px;line-height:1.9;margin-top:8px;text-wrap:pretty}
.create-sub span{display:inline-block}
.create-word{position:absolute;inset:24px auto 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.015em;font-size:clamp(64px,7.3vw,112px);line-height:.94;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42);pointer-events:none}
.create-word>span{font-size:1em;line-height:.94;flex:none}
.v6-create .labList{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;min-width:0}
.v6-create .labItem{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:0;border:0;text-decoration:none;color:inherit;min-width:0}
.v6-create .lab-phone{order:-1;width:100%;max-width:240px;aspect-ratio:1/1.6;height:auto}
.v6-create .lab-phone img{object-fit:cover;object-position:top}
.labName{font-size:25px;line-height:1.5;white-space:nowrap;margin:0}
.labText{margin-top:8px;font-size:14px;line-height:1.9;text-wrap:pretty}
.labItem:hover .labName,.labItem:focus-visible .labName{text-decoration:underline;text-underline-offset:6px}
.labItem:focus-visible{outline:2px solid white;outline-offset:5px}
.v6-subpage .bottomBar{opacity:1}
.v6-subpage{background:var(--ground)}
@media(max-width:900px){
 .about-grid{grid-template-columns:1fr;gap:28px}
 .v6-about{padding-block:48px 64px}
 .about-bridge{max-width:550px;margin:auto}
 .about-copy h2{font-size:30px}
 .about-copy h2 span{display:block}
 .about-lead{font-size:16px}
 .about-body{font-size:14px;text-wrap:pretty}
 .about-facts{gap:16px 24px}
 .about-free{flex-basis:100%}
 .v6-create .wayFullCreate{padding:40px var(--pad) 42px}
 .v6-create header{margin-bottom:24px}
 .v6-create h2{font-size:32px}
 .create-word{inset:16px 12px 16px auto;font-size:53px;opacity:.4}
 .v6-create .labList{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;scroll-padding-left:4px}
 .v6-create .labItem{flex:0 0 80%;max-width:280px;scroll-snap-align:start;gap:16px}
 .v6-create .lab-phone{width:100%;max-width:260px}
 .labName{font-size:26px}
 .labText{font-size:14px;max-width:36em}
}

/* The game title itself spans the knowledge/action gap on both pages. */
@view-transition{navigation:auto}
.knowledge-bridge{position:relative;display:grid;grid-template-columns:auto minmax(8px,1fr) auto minmax(8px,1fr) auto;align-items:center;gap:8px;padding-block:38px 26px;view-transition-name:knowledge-bridge;color:#fff}
.bridge-edge{font-size:clamp(17px,1.65vw,25px);white-space:nowrap}
.bridge-title{font:400 clamp(22px,2.2vw,34px)/1.15 'Bodoni Moda',serif;font-optical-sizing:none;font-variation-settings:'opsz' 24;white-space:nowrap;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.bridge-line{height:1.5px;background:#fff;transform-origin:left;transition:transform .6s var(--ease)}
.bridge-title+.bridge-line{transform-origin:right}
.bridge-title{view-transition-name:knowledge-title}
.bridge-edge:first-child{view-transition-name:knowledge-known}
.bridge-title+.bridge-line+.bridge-edge{view-transition-name:knowledge-action}
.bridge-edge+.bridge-line{view-transition-name:knowledge-left-line}
.bridge-title+.bridge-line{view-transition-name:knowledge-right-line}
.bridge-once{position:absolute;top:0;left:0;right:0;text-align:center;font-size:13px;color:#E60B00;opacity:.35;transition:opacity .6s var(--ease) .4s}
.bridge-armed:not(.bridge-in) .bridge-title{transform:translateY(28px);opacity:0}
.bridge-armed:not(.bridge-in) .bridge-line{transform:scaleX(.15)}
.bridge-armed:not(.bridge-in) .bridge-once{opacity:1}
.about-experience{min-width:0}
.bridge-phone{width:214px;height:342px;margin:8px auto 24px}
.bridge-phone img{position:absolute;inset:12px 7px 10px;width:calc(100% - 14px);height:calc(100% - 22px);object-fit:contain;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.bridge-phone img.is-active{opacity:1}
.learning-cycle{position:relative;height:140px}
.cycle-track{position:absolute;inset:0 0 auto;width:100%;height:94px;overflow:visible}
.cycle-track path,.learning-loop path{fill:none;stroke:#ffffff70;stroke-width:1.5;vector-effect:non-scaling-stroke}
.cycle-dot{fill:#E60B00}
.cycle-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;padding-top:0}
.cycle-steps button{appearance:none;background:none;border:0;color:#ffffff8c;font:inherit;cursor:pointer;text-align:center;padding:0 2px;min-width:0}
.cycle-steps button>span{display:inline-block;font-family:'Shippori Mincho B1',serif;font-size:25px;line-height:1.2;white-space:nowrap;transform:translateY(-16px)}
.cycle-steps button[aria-pressed="true"]{color:white}
.cycle-steps small{display:block;margin-top:64px;font-size:11px;line-height:1.7;text-wrap:pretty;word-break:keep-all;overflow-wrap:normal}
.cycle-steps button:focus-visible{outline:1px solid white;outline-offset:4px}
::view-transition-group(knowledge-bridge),::view-transition-group(knowledge-title),::view-transition-group(knowledge-known),::view-transition-group(knowledge-action),::view-transition-group(knowledge-left-line),::view-transition-group(knowledge-right-line){animation-duration:.6s;animation-timing-function:var(--ease)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:none}
@media(min-width:901px){.v6-about{padding-block:60px}}
@media(max-width:900px){
 .knowledge-bridge{gap:5px;padding-block:30px 20px}
 .bridge-edge{font-size:17px}
 .bridge-title{font-size:clamp(20px,4.5vw,30px)}
 .bridge-once{font-size:11px}
 .bridge-phone{width:210px;height:336px;margin-block:6px 18px}
 .learning-cycle{height:140px}
 .cycle-steps button>span{font-size:23px}
 .cycle-steps small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .knowledge-bridge{view-transition-name:none}
 .knowledge-bridge *{view-transition-name:none!important}
 .bridge-title,.bridge-line,.bridge-once,.bridge-phone img{transition:none!important}
 .bridge-armed:not(.bridge-in) .bridge-title{transform:none;opacity:1}
 .bridge-armed:not(.bridge-in) .bridge-line{transform:none}
 .bridge-armed:not(.bridge-in) .bridge-once{opacity:.35}
}
html[data-motion-lite] .bridge-title,html[data-motion-lite] .bridge-line,html[data-motion-lite] .bridge-phone img{transition:none}
html[data-motion-lite] .knowledge-bridge{view-transition-name:none}
html[data-motion-lite] .knowledge-bridge *{view-transition-name:none!important}

/* Review 4: returning visitors, asymmetric teams, and room for the four screens. */
.v6-home #s-news{padding-block:36px 40px}
.v6-home #s-news .news-heading{margin-bottom:20px}
.v6-home #s-news .news-heading h2{font-size:64px}
.v6-home #s-news .news-row{padding-block:14px}
.v6-home #s-news .news-row time{margin-bottom:3px}
.v6-home #s-news .news-more{margin-top:20px}
.wayStructure{margin-top:16px;font-size:clamp(14px,1.4vw,20px);font-weight:700;white-space:nowrap}
.v6-ways .wayCount{margin-top:12px}
.coop-phones{position:relative;width:min(96%,560px);height:455px;margin:30px auto 0;z-index:2}
.coop-city-pair{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 5px}
.coop-city{width:34%;height:315px;margin-top:16px}
.coop-phones .v6-phone img{object-fit:cover;object-position:top;width:100%;height:100%}
.coop-city-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:15px}
.coop-nature{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:39%;margin:0;text-align:center}
.coop-nature .v6-phone{width:100%;height:350px;border:2px solid #E60B00}
.coop-nature figcaption{font-size:15px;margin-top:10px}
.v6-create .wayFullCreate{padding:112px var(--pad) 88px}
.v6-create header{margin:0 0 36px}
.v6-create .labList{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.v6-create .labItem{flex-direction:row;align-items:center;gap:24px}
.v6-create .lab-phone{width:280px;max-width:none;height:360px;aspect-ratio:auto}
.v6-create .lab-copy{min-width:0}
.v6-create .labName{font-size:clamp(22px,2vw,30px);white-space:normal;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
.v6-create .labText{font-size:15px;line-height:1.9}
.v6-create .create-word{opacity:.35;z-index:0}
@media(min-width:601px){.v6-ways .wayFullHalf--coop{padding-bottom:40px}.v6-ways .wayFull{min-height:770px}}
@media(min-width:601px) and (max-width:1100px){.v6-create .labList{gap:32px 24px}.v6-create .labItem{gap:16px}.v6-create .lab-phone{width:280px}.v6-create .labName{font-size:22px}}
@media(max-width:900px) and (min-width:601px){.v6-create .labItem{flex-direction:column;align-items:flex-start}.v6-create .lab-phone{width:100%;max-width:320px}.coop-phones{height:400px}.coop-city{height:265px}.coop-nature .v6-phone{height:300px}}
@media(max-width:600px){
 .v6-home #s-news{padding-block:40px}.v6-home #s-news .news-heading h2{font-size:56px}
 .v6-ways .wayFull{grid-template-rows:auto auto;min-height:0}
 .v6-ways .wayFullHalf--vs{min-height:390px}
 .v6-ways .wayFullHalf--coop{padding:28px 20px 32px;min-height:0}
 .wayStructure{font-size:14px;margin-top:12px}
 .coop-phones{display:flex;align-items:flex-start;gap:10px;width:100%;height:auto;margin-top:28px}
 .coop-city-pair{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;order:1;width:66%;min-width:0}
 .coop-city{width:100%;height:205px;margin:0;border-radius:14px;padding:9px 4px 6px}
 .coop-city-label{position:static;grid-column:1/-1;font-size:13px}
 .coop-nature{position:static;transform:none;width:34%;margin:0;min-width:0}
 .coop-nature .v6-phone{height:205px;border-radius:14px;padding:9px 4px 6px}
 .coop-nature figcaption{font-size:13px;margin-top:10px}
 .v6-create .wayFullCreate{padding:48px var(--pad)}
 .v6-create .labList{gap:22px}
 .v6-create .labItem{flex:0 0 78%;max-width:none;flex-direction:column;align-items:flex-start;gap:20px}
 .v6-create .lab-phone{width:100%;max-width:none;height:410px}
 .v6-create .labName{font-size:26px}
}

.v6-ways{height:auto;min-height:0}
@media(min-width:601px){
 .coop-phones{height:488px}
 .coop-city-label{bottom:0}
 .v6-ways .wayFullHalf--vs .way-phone{top:300px}
}

@media(max-width:600px){.v6-ways .wayCross{top:390px}}
/* R5: one device silhouette. Screens crop without resampling their proportions. */
.v6-phone{aspect-ratio:9/19.5}
.v6-phone img{object-fit:cover;object-position:50% 0%;font-size:0}
.v6-ways .wayFullHalf--vs .way-phone{width:230px;height:auto;aspect-ratio:9/19.5;top:285px;left:33%}
.v6-ways .way-phone img,.v6-deck .deck-phone img{object-fit:cover;object-position:50% 40%}
.v6-deck .deck-phone,html:not([data-motion-lite]) .v6-deck .deck-phone,html:not([data-motion="on"]) .v6-deck .deck-phone{width:230px;height:auto;aspect-ratio:9/19.5}
.coop-phones{width:min(100%,510px);height:505px;margin-top:28px}
.coop-city-pair{inset:0;padding:0;align-items:flex-start}
.coop-city{width:33%;height:auto;aspect-ratio:9/19.5;margin:0}
.coop-city-label{top:calc(100% - 128px);bottom:auto;font-size:16px}
.coop-nature{top:90px;width:35%;z-index:2}
.coop-nature .v6-phone{height:auto;aspect-ratio:9/19.5;border:2px solid #E60B00}
.coop-nature figcaption{margin-top:12px;font-size:16px}
.coop-phones .v6-phone img{object-position:50% 28%}
.coop-nature .v6-phone img{object-position:50% 0%}
.v6-create .lab-phone{width:204px;max-width:none;height:auto;aspect-ratio:9/19.5}
.v6-create .labItem{gap:28px}
.v6-create .labList{gap:48px}
.v6-create .lab-copy{flex:1}
.v6-create .labName{font-size:clamp(27px,2.3vw,36px);line-height:1.5;letter-spacing:.01em;word-break:normal;overflow-wrap:normal}
.v6-create .labText{font-size:16px;line-height:1.85;text-wrap:pretty}
.about-facts{font-family:inherit;font-size:16px}
.about-facts b{font-family:inherit;font-size:clamp(34px,3vw,46px);font-weight:500;letter-spacing:0;font-variant-numeric:normal}
.about-facts small{font-size:1em}
.about-copy h2{font-size:clamp(34px,3.1vw,48px);letter-spacing:.01em}
.about-copy p{letter-spacing:.015em;text-wrap:pretty}
/* Six real policy cards close the dashed road, one interval at a time. */
.card-road.knowledge-bridge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:66% 2px 1fr;align-items:center;gap:0;height:360px;padding:0;position:relative;view-transition-name:knowledge-bridge}
.card-road .road-known,.card-road .road-action{position:static;grid-row:2;font-size:clamp(26px,2.5vw,38px);line-height:1.3;letter-spacing:.01em;white-space:nowrap}
.road-known{left:0}.road-action{right:0;opacity:var(--road-action,.4)}
.road-track{display:flex;position:relative;grid-row:2;min-width:0;height:2px}
.road-span{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 6px)}
.road-solid{display:block;position:absolute;inset:0;background:white;transform:scaleX(var(--placed,0));transform-origin:left}
.road-span img{position:absolute;width:80%;height:auto;left:10%;top:0;opacity:var(--drop,0);transform:translateY(calc(-50% - (1 - var(--drop,0))*140px));box-shadow:0 8px 16px #0004}
.bridge-complete{--road-action:1}.bridge-complete .road-span{--drop:1;--placed:1}
.v6-about.road-scroll{height:180svh;padding:0}
.road-scroll .about-grid{position:sticky;top:0;min-height:100svh;padding-block:64px}
@media(min-width:601px){
 .v6-ways .wayFull{min-height:830px}
 .coop-city-label{top:auto;bottom:100px}
}
@media(max-width:1100px) and (min-width:601px){
 .v6-create .labItem{gap:18px}.v6-create .lab-phone{width:180px}
 .v6-ways .wayFullHalf--vs .way-phone{left:28%}
}
@media(max-width:900px){
 .about-grid{gap:12px}.card-road.knowledge-bridge{height:280px;max-width:600px;margin:auto;width:100%}
 .road-scroll .about-grid{align-content:center;padding-block:70px 40px}
 .v6-create .lab-phone{width:220px;max-width:100%}
}
@media(max-width:600px){
 .v6-ways .wayFullHalf--vs{min-height:470px}
 .v6-ways .wayFullHalf--vs .way-phone{width:150px;height:auto;aspect-ratio:9/19.5;top:112px;left:auto;right:24px}
 .v6-ways .wayFullHalf--coop{padding-bottom:28px}
 .coop-phones{display:block;width:100%;height:390px;margin-top:24px}
 .coop-city-pair{position:absolute;display:flex;inset:0;width:100%;padding:0;gap:0}
 .coop-city{width:32%;height:auto;aspect-ratio:9/19.5;margin:0}
 .coop-nature{position:absolute;left:50%;top:79px;transform:translateX(-50%);width:36%;margin:0}
 .coop-nature .v6-phone{height:auto;aspect-ratio:9/19.5}
 .coop-city-label{position:absolute;top:244px;bottom:auto;font-size:14px}
 .coop-nature figcaption{font-size:14px;margin-top:12px}
 .v6-ways .wayCross{top:470px}
 .v6-create .lab-phone{width:240px;height:auto;aspect-ratio:9/19.5;max-width:100%}
 .v6-create .labList{gap:26px}.v6-create .labItem{flex:0 0 85%;gap:22px}
 .v6-create .labName{font-size:30px}.v6-create .labText{font-size:16px}
 .card-road.knowledge-bridge{height:210px}
 .card-road .road-known,.card-road .road-action{font-size:18px}
 .card-road.knowledge-bridge{grid-template-rows:64% 2px 1fr}.road-span:nth-child(n+5){display:none}
 .road-span img{width:74%;left:13%}
 .about-copy h2{font-size:34px;line-height:1.45}.about-lead{margin-top:18px}
 .about-body{margin-top:16px}.about-facts{margin:20px 0}
 .about-grid{gap:8px}.v6-about{padding-block:36px 44px}
 .road-scroll .about-grid{padding-block:72px 40px;align-content:center}
}
@media(prefers-reduced-motion:reduce){.road-span{--drop:1!important;--placed:1!important}.road-action{opacity:1!important}}
html[data-motion-lite] .road-span{--drop:1;--placed:1}
html[data-motion-lite] .road-action{opacity:1}
/* Keep the two team captions outside every screen silhouette. */
.coop-phones{height:560px}
.coop-city-label{top:525px;bottom:auto;z-index:3}
@media(min-width:601px){.v6-ways .wayFull{min-height:900px}.v6-ways .wayFullHalf--vs .way-phone{top:310px}}
@media(max-width:600px){.coop-phones{height:415px}.coop-city-label{top:390px}}
/* Native view timeline; the JS driver is only for browsers without it. */
@property --road-p{syntax:'<number>';inherits:true;initial-value:0}
@keyframes road-progress{from{--road-p:0}to{--road-p:1}}
.road-native{view-timeline-name:--knowledge-road;view-timeline-axis:block}
.road-native .card-road{--count:6;animation:road-progress linear both;animation-timeline:--knowledge-road;animation-range:contain 0% contain 100%}
.road-native .road-span{--drop:clamp(0,calc(var(--road-p) * var(--count) - var(--i)),1);--placed:clamp(0,calc((var(--drop) - .8) * 5),1)}
.road-native .road-action{opacity:calc(.4 + .6 * clamp(0,calc((var(--road-p) - .85) / .15),1))}
.road-scroll .about-grid{transform:translateZ(0)}
@media(max-width:600px){
 .road-native .card-road{--count:4}
 .v6-create .lab-copy{order:-2}
 .v6-create .lab-phone{width:230px}
 .v6-create .labList{align-items:flex-start}
 .v6-create .lab-copy{min-height:112px}
}
/* Uniform zooms focus the rear screens on each city's HP and policy hand. */
.coop-city img{transform:scale(1.85);transform-origin:0% 0%}
.coop-city+.coop-city img{transform-origin:100% 0%}
.coop-nature .v6-phone img{transform:scale(1.3);transform-origin:50% 36%;object-position:50% 36%}

.v6-create .labText span{display:inline-block}
.coop-phones .v6-screen{width:100%;height:100%;overflow:hidden;border-radius:18px;background:#0c1119}

/* R7: captions follow the rear devices in the same grid. */
.coop-city-pair{display:grid;grid-template-columns:33% 33%;align-content:start;row-gap:12px}
.coop-city-pair .coop-city{width:100%}
.coop-city-label{position:static;grid-column:1/-1;display:flex;justify-content:space-between;line-height:1.5}
.coop-city-label>span{width:33%;white-space:nowrap}
@media(max-width:600px){
 .coop-city-pair{display:grid;grid-template-columns:32% 32%;gap:12px 0}
 .coop-city-label>span{width:32%}
}