/* SATONOKO X beta-tester recruitment site (D-380).
   The same world as https://x.satonoko.studio/home: a white bar with the wordmark, a bright sky
   with leaf-covered portals, navy text, and coral + teal taken from the X mark. Light only. */
:root{
  color-scheme: light;
  --navy:#03214a;        /* wordmark letters */
  --ink:#153b56;         /* body text */
  --muted:#46606f;
  --teal:#00a8c4;        /* X mark (decoration) */
  --teal-ink:#08788a;    /* teal that passes contrast for text */
  --teal-deep:#066576;
  --coral:#f65a42;       /* X mark (decoration) */
  --coral-ink:#c23d27;
  --sky:#eaf6fc;
  --sky2:#f5fbfe;
  --line:#d3e6ef;
  --glass:rgba(255,255,255,.82);
  --shadow:0 22px 50px rgba(3,33,74,.14);
  --rim:linear-gradient(135deg,var(--coral) 0%,#ff9e8c 30%,#bfeff5 62%,var(--teal) 100%);
  --gutter:16px;
  --col:640px;           /* one content width: every card shares the same edges (1180px from 900px up) */
  font:16px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Yu Gothic UI","Segoe UI","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#fff}
body{margin:0;color:var(--ink);background:var(--sky2);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:var(--teal-ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b65a00;outline-offset:3px;border-radius:10px}
h1,h2,h3,p{margin:0}
p,li,h1,h2,h3,figcaption,summary{text-wrap:pretty;overflow-wrap:anywhere}
:lang(ja) p,:lang(ja) li,:lang(ja) h2,:lang(ja) h3,:lang(ja) figcaption,:lang(ja) summary{word-break:auto-phrase}
.nb{display:inline-block}
svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:10px;background:var(--navy);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
svg.ext{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;stroke-width:2.4}
/* inline text links: a taller hit area without changing the line */
.inline-link{padding-block:14px}

/* ---------- white top bar (as on /home) ---------- */
.bar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e4eef3}
.bar-in{max-width:1240px;margin:0 auto;padding:0 var(--gutter);height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;min-height:44px;border-radius:8px}
.brand img{width:150px;height:auto}
.bar-nav{display:flex;align-items:center;gap:14px}
.bar-link{display:none;min-height:44px;align-items:center;padding:0 4px;color:var(--navy);font-weight:600;font-size:14px;text-decoration:none;border-radius:8px}
.bar-link:hover{color:var(--teal-ink);text-decoration:underline}
.lang{display:flex;padding:0;border-radius:999px;background:#eef6fa;border:1px solid #dcebf2}
.lang a{min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;display:flex;align-items:center;justify-content:center;line-height:1}
.lang a[aria-current="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(3,33,74,.16),inset 0 0 0 1px #dcebf2}

/* ---------- glass card (the frosted white of the hero, reused for every section head) ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--shadow);
}
.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--teal-ink)}
.eyebrow-coral{color:var(--coral-ink)}
h2{color:var(--navy);font-size:clamp(21px,5.6vw,28px);line-height:1.4;font-weight:800}
h3{color:var(--navy);font-size:18px;line-height:1.45;font-weight:800}

/* ---------- 1. hero: sky and portals ---------- */
.stage{position:relative;z-index:2;isolation:isolate;background:linear-gradient(180deg,#d9eefa 0%,var(--sky) 55%,#e4f2fa 100%)}
/* Phone art height follows both the screen height and the width, so the whole recruit card (heading,
   perk + conditions, button, chips) stays on the first screen with room to spare: 100svh minus the
   bar, the tallest card (English, after 20:00 ~525px) and ~45px of room, never taller than 75vw,
   212..330px. 390x844 -> 274px, 412x915 -> 309px, 360x740 -> 212px, tablets -> 330px.
   Fallbacks: without clamp() a fixed 212px; without svh (Safari < 15.4, Chrome < 108) vh, which on
   phones is the tallest viewport (toolbars hidden), so it keeps 70px more room. */
.hero-art img{
  width:100%;object-fit:cover;object-position:50% 40%;
  height:212px;
  height:clamp(212px,min(calc(100vh - 640px),75vw),330px);
  height:clamp(212px,min(calc(100svh - 570px),75vw),330px);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%);
}
/* The card overlaps the art by 56px. On short screens, where the art sits at its 212px minimum, the
   card tucks up to 7px further over the art's faded foot (782px = 570 + 212), so the art box can
   be 212px while the card still ends 12px+ above the bottom of a 360x740 screen. */
.hero{position:relative;z-index:1;padding:0 var(--gutter) 20px;margin-top:-56px;margin-top:calc(-56px - clamp(0px,782px - 100svh,7px))}
.hero-card{padding:16px 18px 14px;max-width:var(--col);margin:0 auto}
.kicker{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--teal-ink)}
.kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;margin:0 8px 3px 0;vertical-align:middle;background:linear-gradient(90deg,var(--coral) 50%,var(--teal) 50%)}
h1{margin-top:4px;color:var(--navy);font-size:clamp(25px,7vw,30px);line-height:1.3;font-weight:800;letter-spacing:.01em}
:lang(en) h1{font-size:clamp(24px,6.8vw,28px);line-height:1.22;letter-spacing:0}
h1 em{font-style:normal;color:var(--teal-ink);background:linear-gradient(transparent 72%,rgba(0,168,196,.18) 72%,rgba(0,168,196,.18) 94%,transparent 94%)}
.intro{margin-top:7px;font-size:14.5px;line-height:1.7;color:var(--ink)}
:lang(en) .intro{font-size:14px;line-height:1.6}
.hero-act{margin-top:12px}
.clip-slot:empty{display:none}

/* perk chip: the mark beside one text column — β テスター特典 / Plus 1か月無料 / its conditions,
   all starting at the same left edge, the conditions under a hairline in the same box */
.perk-chip{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 9px;align-items:start;margin:0 0 10px;padding:8px 13px 9px 10px;border-radius:14px;
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--rim) border-box;
  box-shadow:0 6px 16px rgba(246,90,66,.10);
}
.perk-chip img{grid-row:1 / span 2;width:20px;height:auto;margin-top:2px}
.perk-chip-k{font-size:12px;font-weight:700;line-height:1.5;color:var(--coral-ink);letter-spacing:.02em}
.perk-chip-v{grid-column:2;font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.35}
/* the conditions always travel with the perk (sealed benefitConditions) */
.perk-chip-c{grid-column:2;margin-top:5px;padding-top:5px;border-top:1px dashed #e6d3cd;font-size:13px;font-weight:500;line-height:1.5;color:var(--muted)}
/* English perk name: when it wraps, balanced lines ("One month of AI / Partner Plan Plus, free")
   instead of "…AI Partner Plan / Plus, free" (the Japanese already breaks after "Plus" by phrase) */
:lang(en) .perk-chip-v,:lang(en) .perk-main,:lang(en) .perk-band-main{text-wrap:balance}

/* CTA: the sealed benefitApply + benefitConditions, quieter than a chip */
.perk-band{margin:0 auto 14px;max-width:520px;padding:10px 14px;border-radius:14px;text-align:left;
  border:1.5px solid transparent;background:linear-gradient(#fffaf8,#fffaf8) padding-box,var(--rim) border-box}
.perk-band-main{font-size:13.5px;font-weight:700;line-height:1.6;color:var(--navy)}
.perk-band-c{margin-top:4px;padding-top:4px;border-top:1px dashed #e6d3cd;font-size:13px;line-height:1.55;color:var(--muted)}

/* apply button: open = strong coral pill with arrow (white label on #cf442b..#a92f1a: 4.6:1 or better
   everywhere behind the label); closed = a calm date/status pill: content-wide, dashed outline, no
   shadow, clock icon — it reads as "opens at", not as a button (no href, aria-disabled set by site.js) */
.apply{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;padding:10px 20px;
  border-radius:999px;font-weight:800;font-size:17px;text-decoration:none;line-height:1.25;text-align:center;
  color:#fff;background:linear-gradient(135deg,#cf442b 0%,#c23d27 52%,#a92f1a 100%);
  box-shadow:0 12px 26px rgba(194,61,39,.30),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.apply svg{width:20px;height:20px;flex:none}
.apply .i-clock{display:none}
.apply:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(212,69,44,.36);filter:saturate(1.08)}
.apply[aria-disabled="true"]{
  cursor:default;width:fit-content;max-width:100%;margin-inline:auto;min-height:46px;padding:8px 20px 8px 16px;gap:8px;
  color:var(--teal-deep);background:#f1f9fb;border:1.5px dashed #8ccbd6;box-shadow:none;transform:none;filter:none;
  font-size:15.5px;font-weight:700;letter-spacing:.01em;
}
.apply[aria-disabled="true"] svg{width:18px;height:18px}
.apply[aria-disabled="true"] .i-clock{display:block}
.apply[aria-disabled="true"] .i-arrow{display:none}
.note{margin-top:6px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}

.chips{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid var(--line);font-size:12.5px;line-height:1.4;color:var(--navy);font-weight:600}
.chips svg{width:15px;height:15px;color:var(--teal-ink);flex:none}
/* owner 11/14: "free to use" stands out in the hero, before the paid plan copy further down */
.chips li.chip-free{background:linear-gradient(135deg,#0f8a9c,#0b6a7a);border-color:transparent;color:#fff;font-weight:800;box-shadow:0 6px 14px rgba(11,106,122,.28)}
.chips li.chip-free svg{color:#fff;stroke-width:3}

.more{display:inline-flex;align-items:center;gap:4px;margin-top:4px;min-height:44px;font-size:14px;font-weight:700;color:var(--teal-ink);text-decoration:none}
.more svg{width:16px;height:16px;flex:none}
.more:hover span{text-decoration:underline}
.more-pill{min-height:44px;padding:6px 16px 6px 18px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid #fff;box-shadow:0 8px 20px rgba(3,33,74,.10)}

/* ---------- the sky continues below the hero ---------- */
.sky{
  position:relative;isolation:isolate;overflow:hidden;padding-bottom:36px;
  background:
    radial-gradient(70% 300px at 8% 140px,rgba(255,255,255,.92),rgba(255,255,255,0) 70%),
    radial-gradient(60% 260px at 96% 820px,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(75% 300px at 20% 1500px,rgba(255,255,255,.8),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#e4f2fa 0%,#cfe7f6 18%,#c2e0f4 48%,#cbe6f6 72%,#dff0fa 100%);
}
.sky::before{ /* the same portals, softly out of focus, behind the clip */
  content:"";position:absolute;left:0;right:0;top:0;height:1100px;z-index:-2;
  background:url("assets/couple-wash-480.webp") center 35%/cover no-repeat;opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 55%,transparent 100%);
}
.sky::after{ /* the portals again, behind the second apply card */
  content:"";position:absolute;left:0;right:0;bottom:0;height:min(1000px,80%);z-index:-1;
  background:url("assets/portals-960.webp") center 40%/cover no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 60%,rgba(0,0,0,.85) 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 30%,#000 60%,rgba(0,0,0,.85) 100%);
}

/* ---------- 2. the LivLiv clip in an arch window ---------- */
/* order: the explanation ("β の期間の会話は文字のチャットです。…"), then the screen demo, then the
   plan details (voicePlans) — DOM order and visual order are the same at every width */
.voice{padding:22px var(--gutter) 30px}
.voice-in{max-width:var(--col);margin:0 auto;display:grid;gap:22px;justify-items:center}
.voice-text{width:100%;padding:20px 20px 18px;text-align:center}
.voice-text h2{margin-top:6px}
.voice-text p:not(.eyebrow){margin-top:10px;font-size:14.5px;line-height:1.8;text-align:left}
.voice-more{width:100%;padding:14px 20px 15px}
.voice-more p.voice-plans{font-size:13.5px;line-height:1.75;color:var(--muted)}
/* phones and tablets (< 900px): the explanation, the demo and the plan details share one glass panel,
   the plan details under a dashed rule, so they read as the end of the voice section rather than a
   stray card (the wide desktop does the same once the demo has moved up into the hero) */
@media (max-width:899px){
  .voice-in{
    gap:18px;padding-bottom:2px;
    background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
    border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--shadow);
  }
  .voice-in > .glass{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .voice-text{padding-bottom:0}
  .voice-in > .voice-more{justify-self:stretch;width:auto;margin:0 20px;padding:14px 0 18px;border-top:1px dashed #b4cfdb}
}

.portal{margin:0;display:grid;justify-items:center;gap:10px;--w:min(282px,74vw)}
.portal-tag{display:none}
.rim{
  padding:6px;border-radius:calc(var(--w) / 2 + 6px) calc(var(--w) / 2 + 6px) 30px 30px;
  background:var(--rim);
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 36px 8px rgba(120,226,240,.45),0 28px 56px rgba(3,33,74,.24);
}
/* The window shows source rows y≈62..622 of the 390x844 recording: from under its top bar down to
   just below the AI reply. The recording's own message field (y≈636..686) stays outside the arch. */
.window{
  position:relative;width:var(--w);aspect-ratio:346/560;overflow:hidden;
  border-radius:calc(var(--w) / 2) calc(var(--w) / 2) 24px 24px;background:#eef4f7;
}
.window video{position:absolute;width:112.72%;max-width:none;height:auto;aspect-ratio:390/844;left:-6.36%;top:calc(var(--w) * -0.1792);background:#eef4f7;cursor:pointer}
.bigplay{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
  border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.82);color:var(--navy);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(3,33,74,.25);
  display:flex;align-items:center;justify-content:center;transition:opacity .2s ease,transform .2s ease,visibility 0s;
}
.bigplay svg{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:3px}
.bigplay:hover{transform:translate(-50%,-50%) scale(1.05)}
.portal.is-playing .bigplay{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
/* controls sit under the arch, never on top of the recording */
.controls{display:flex;align-items:center;justify-content:center;gap:8px}
.ctl,.snd{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;line-height:1;color:var(--navy);
  background:rgba(255,255,255,.94);border:1px solid #fff;box-shadow:0 6px 16px rgba(3,33,74,.14);
}
.ctl{width:44px;padding:0}
.ctl svg{width:18px;height:18px;fill:currentColor;stroke:none}
.ctl .i-play{display:none}
.portal:not(.is-playing) .ctl{display:none} /* while paused, the big play button is the only play control */
.snd{padding:0 16px 0 13px}
.snd svg{width:20px;height:20px;color:var(--teal-ink)}
.snd .i-unmuted{display:none}
.snd.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.snd.is-on svg{color:#9eeaf3}
.snd.is-on .i-unmuted{display:block}
.snd.is-on .i-muted{display:none}
.portal figcaption{max-width:320px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.72);font-size:12px;line-height:1.6;color:var(--muted);text-align:center}

/* ---------- 3. perk ---------- */
.perk{padding:6px var(--gutter) 22px}
.perk-card{
  max-width:var(--col);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:20px 18px;border-radius:22px;border:2px solid transparent;
  background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) padding-box,var(--rim) border-box;
  box-shadow:0 18px 40px rgba(3,33,74,.12);
}
.perk-mark{width:44px;height:auto;margin-top:2px}
.perk-main{margin-top:2px;font-size:clamp(24px,6.6vw,32px);line-height:1.3}
.perk-text{margin-top:6px;font-size:14px;line-height:1.75}

/* ---------- 4. schedule ---------- */
.sched{padding:6px var(--gutter) 22px}
.sched-card{max-width:var(--col);margin:0 auto;padding:20px 16px 16px}
.sched-card h2{text-align:center}
.dates{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.dates li{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.dates .d{color:var(--navy);font-weight:800;font-size:18px;line-height:1.3}
.dates .d small{font-size:12.5px;font-weight:600;color:var(--muted)}
.dates .w{font-size:14px;font-weight:700;color:var(--ink)}
.dates li.now{border-color:#a6d9e1;background:linear-gradient(90deg,#e6f7fa,#fff)}
.dates li.now .d{color:var(--teal-deep)}
.small{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}

/* ---------- 5. second apply card ---------- */
.cta{padding:10px var(--gutter) 8px}
.cta-card{max-width:var(--col);margin:0 auto;padding:24px 18px 18px;text-align:center;background:rgba(255,255,255,.86)}
.cta-line{margin:8px auto 14px;max-width:460px;font-size:14.5px}
.cta-card .apply{max-width:420px;margin:0 auto}
.facts{list-style:none;margin:14px auto 0;max-width:560px;padding:12px 0 0;border-top:1px dashed var(--line);display:grid;gap:6px;text-align:left}
.facts li{position:relative;padding-left:18px;font-size:13px;line-height:1.7;color:var(--muted)}
.facts li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.after-cta{display:flex;justify-content:center;margin-top:18px}

/* ---------- phone apply bar ---------- */
.applybar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:9px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(3,33,74,.08);box-shadow:0 -10px 28px rgba(3,33,74,.12);
  transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;
}
.applybar.show{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
.applybar .apply{min-height:48px;font-size:16px;padding:8px 16px}

/* ---------- footer ---------- */
.foot{background:#fff;border-top:1px solid #e4eef3;padding:24px var(--gutter) calc(28px + env(safe-area-inset-bottom))}
.foot-in{max-width:var(--col);margin:0 auto}
.foot-brand{width:128px;height:auto;margin-bottom:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 16px;font-size:13px}
.foot nav a{color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.foot p{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;font-size:12.5px;color:var(--muted)}
.foot p a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- about page ---------- */
.stage-about .hero-art img{height:clamp(260px,40vh,360px);height:clamp(260px,40svh,360px);object-position:50% 82%;-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
.stage-about .hero{margin-top:-26px}
.about-card h1{font-size:clamp(26px,7.4vw,32px)}
.intro-lead{font-weight:700;color:var(--navy)}
/* note article: "SATONOKO X について、もっと知る →" / "はじめまして、SATONOKO Xです ↗" */
.more-ext{display:block;min-height:44px;margin-top:6px;padding:10px 0;font-size:14px;font-weight:700;line-height:1.55;color:var(--teal-ink);text-decoration:none}
.more-ext:hover .nb{text-decoration:underline}
/* route back to the recruitment page, inside the first screen on phones */
.to-apply{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;min-height:44px;padding:0 14px 0 18px;border-radius:999px;
  font-size:14.5px;font-weight:800;color:var(--coral-ink);text-decoration:none;
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--rim) border-box;
  box-shadow:0 6px 16px rgba(246,90,66,.12);
}
.to-apply svg{width:16px;height:16px;flex:none}
.to-apply:hover span{text-decoration:underline}

.can{padding:22px var(--gutter) 10px}
.can-in{max-width:var(--col);margin:0 auto;display:grid;gap:14px}
.sec-head{padding:14px 18px;text-align:center;justify-self:center;min-width:min(100%,320px)}
.feature{overflow:hidden}
.feature-art{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 62%}
.feature-text{padding:16px 18px 18px}
.feature-text p{margin-top:6px;font-size:14.5px;line-height:1.8}
.worlds{list-style:none;margin:0;padding:0 14px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.worlds figure{margin:0}
/* phones: 4:3 so each scene reads at ~105px wide; 3:2 again from 600px */
.worlds img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px rgba(3,33,74,.16)}
/* each name may spread 14px past its picture on both sides (into the gap and the empty space around
   the short names next to it), so "研究所からの脱出" / "Laboratory escape" stay on one line like the others */
.worlds figcaption{margin:8px -14px 0;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--navy);text-align:center;text-wrap:balance}
:lang(en) .worlds figcaption{font-size:13px}
.feature-note{display:grid;grid-template-columns:auto 1fr;align-items:start;padding-left:16px}
.feature-mark{width:40px;height:auto;margin-top:18px}
.feature-note .feature-text{padding-left:14px}

.pv{padding:10px var(--gutter) 22px}
.pv-card{max-width:var(--col);margin:0 auto;padding:20px 14px 16px;text-align:center}
.pv-frame{position:relative;max-width:860px;margin:14px auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b2340;box-shadow:0 16px 36px rgba(3,33,74,.22)}
.pv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pv-start{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0b2340;font:inherit}
.pv-start img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease}
.pv-start:hover img{transform:scale(1.02);filter:brightness(1.04)}
/* owner 11/14: the video's own YouTube thumbnail with the usual red play button */
.pv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:68px;height:48px;line-height:0}
.pv-play svg{width:100%;height:100%;stroke:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.pv-play-bg{fill:#f00;transition:fill .15s ease}
.pv-play-tri{fill:#fff}
.pv-start:hover .pv-play-bg,.pv-start:focus-visible .pv-play-bg{fill:#cc0000}
.pv-cap{margin-top:10px;font-size:13px;color:var(--muted)}

.join{padding:10px var(--gutter) 22px}
.join-card{max-width:var(--col);margin:0 auto;padding:20px 18px}
.join-card h2{text-align:center}
.join-cols{display:grid;gap:18px;margin-top:14px}
.who{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.who li{position:relative;padding-left:22px;font-size:14px;line-height:1.7}
.who li::before{content:"";position:absolute;left:3px;top:.45em;width:11px;height:6px;border-left:2.4px solid var(--teal-ink);border-bottom:2.4px solid var(--teal-ink);transform:rotate(-45deg)}
.steps{list-style:none;counter-reset:s;margin:8px 0 0;padding:0;display:grid;gap:10px}
.steps li{counter-increment:s;position:relative;padding:10px 12px 10px 48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;gap:2px}
.steps li::before{content:counter(s);position:absolute;left:12px;top:11px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--coral),var(--teal))}
.steps strong{color:var(--navy);font-size:15px}
.steps span{font-size:13.5px;line-height:1.7}

.faq{padding:10px var(--gutter) 22px}
.faq-card{max-width:var(--col);margin:0 auto;padding:20px 14px 12px}
.faq-card h2{text-align:center;margin-bottom:10px}
.faq details{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 6px;font-weight:700;color:var(--navy);font-size:15px;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2.4px solid var(--teal-ink);border-bottom:2.4px solid var(--teal-ink);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{padding:0 6px 14px;font-size:14px;line-height:1.8}

/* ---------- tablet ---------- */
@media (min-width:600px){
  .bar-link{display:inline-flex}
  .hero-card{padding:20px 24px 16px}
  .perk-card{padding:24px 26px;gap:18px}
  .perk-mark{width:56px}
  .sched-card{padding:24px 24px 18px}
  .dates{grid-template-columns:repeat(3,1fr)}
  .dates li{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .join-cols{grid-template-columns:1fr 1fr}
  .worlds{gap:12px;padding:0 18px 20px}
  .worlds img{aspect-ratio:3/2}
  .worlds figcaption{margin-inline:0}
  .feature-room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}
  .feature-room .feature-art{height:auto;aspect-ratio:4/3;object-position:50% 70%}
  .feature-room .feature-text{padding:22px 26px}
}

/* ---------- phones held sideways (short screens): small art, hero card in two columns ---------- */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  .hero-art img{height:130px;object-position:50% 44%}
  .hero{margin-top:-40px}
  .hero-card{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4px 22px;align-items:start}
  h1{font-size:26px}
  .hero-act{margin-top:4px}
  .stage-about .hero-art img{height:150px}
  .about-card{display:block}
}

/* ---------- desktop: full-bleed portals, glass card over the floor ---------- */
@media (min-width:900px){
  :root{--gutter:32px;--col:1180px}
  .applybar{display:none}
  .bar-in{height:68px;max-width:calc(var(--col) + 2 * var(--gutter))}
  .brand img{width:190px}
  .stage{min-height:clamp(620px,calc(100vh - 68px),900px);min-height:clamp(620px,calc(100svh - 68px),900px);display:flex;flex-direction:column;justify-content:flex-end}
  .hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
  .hero-art img{position:absolute;left:0;bottom:0;height:100%;height:max(100%,840px);object-position:50% 50%;-webkit-mask-image:none;mask-image:none}
  .stage::before{content:"";position:absolute;inset:auto 0 0 0;height:30%;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(228,242,250,.55) 55%,#e4f2fa 100%)}
  .hero{margin-top:0;padding:0 var(--gutter) 30px;width:100%}
  .hero-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,380px);gap:36px;align-items:center;padding:26px 34px 22px;border-radius:26px;background:rgba(255,255,255,.78)}
  h1{font-size:clamp(32px,3vw,42px);line-height:1.25}
  :lang(en) h1{font-size:clamp(30px,2.6vw,38px);line-height:1.22}
  .intro,:lang(en) .intro{font-size:15.5px;margin-top:10px}
  .hero-act{margin-top:0}
  .apply{min-height:58px;font-size:18px}
  .apply[aria-disabled="true"]{min-height:48px;font-size:16px}
  .hero-act .apply{width:100%;max-width:380px}
  .hero-act .apply[aria-disabled="true"]{width:fit-content;max-width:100%}

  .voice{padding:56px var(--gutter) 48px}
  /* explanation and details stacked on the left, the demo on the right spanning both rows:
     row by row it still reads explanation -> demo -> details */
  .voice-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text clip" "more clip";justify-items:stretch;align-items:center;gap:16px 56px}
  .voice-text{grid-area:text;align-self:end;text-align:left;padding:26px 28px 24px}
  .clip-home{grid-area:clip}
  .voice-more{grid-area:more;align-self:start;padding:18px 28px 20px}
  .voice-text p:not(.eyebrow){font-size:15px}
  .voice-more p.voice-plans{font-size:14px}
  .portal{--w:300px}
  .perk,.sched{padding:10px var(--gutter) 28px}
  .cta{padding:16px var(--gutter) 10px}
  /* second apply card: what to prepare and the perk on the left, the button and the facts on the right */
  .cta-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;align-items:center;padding:32px 40px 28px;text-align:left}
  .cta-line{margin:10px 0 16px;max-width:none}
  .perk-band{margin:0;max-width:none}
  .cta-card .apply{max-width:none}
  .facts{max-width:none}

  .stage-about{min-height:clamp(600px,calc(100vh - 68px),860px);min-height:clamp(600px,calc(100svh - 68px),860px)}
  .stage-about .hero-art img{height:100%;-webkit-mask-image:none;mask-image:none;object-position:50% 80%}
  .about-card{display:block;max-width:480px;margin:0;padding:28px 32px 24px}
  .stage-about .hero{max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto}
  .can{padding:56px var(--gutter) 20px}
  .feature-worlds{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:center}
  .feature-worlds .worlds{padding:20px 20px 20px 0}
  .feature-worlds .feature-text{padding:24px 26px}
  .pv,.join,.faq{padding:16px var(--gutter) 28px}
  .pv-card{padding:26px 30px 20px}
  .join-card,.faq-card{padding:26px 30px 20px}
}

/* ---------- wide desktop: the clip stands beside the call to action, rising from the card ---------- */
@media (min-width:1200px){
  /* The hero section is a two-row grid. The card fills the lower row; the clip has its own column
     (inside the card's right padding) spanning both rows and stands on the card's lower edge, so the
     upper row is exactly (clip height - card height) and the clip rises above the card by that much.
     No fixed offsets: a taller card (English, larger text) just lifts less of the clip above it. */
  .clip-in-hero .hero{
    --clip-col:252px;--card-pad:34px;
    display:grid;grid-template-columns:minmax(0,1fr) var(--clip-col) var(--card-pad);grid-template-rows:1fr auto;
    max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;
  }
  .clip-in-hero .hero-card{
    grid-column:1 / -1;grid-row:2;max-width:none;margin:0;
    /* at least 340px so the perk name stays on one line from 1200px (English too); 350px at most so
       the English h1 keeps two lines */
    grid-template-columns:minmax(0,1fr) clamp(340px,26vw,350px);gap:30px;
    padding-right:calc(var(--card-pad) + var(--clip-col) + 30px);
  }
  .clip-in-hero .clip-slot{grid-column:2;grid-row:1 / -1;align-self:end;min-width:0;margin-bottom:16px;position:relative;z-index:1}
  .clip-in-hero .clip-slot .portal{--w:calc(var(--clip-col) - 12px);gap:8px}
  /* the tag sits above the rim's glow (z-index) and uses the deeper teal: 5.8:1 or better behind the text */
  .clip-in-hero .clip-slot .portal-tag{display:block;position:relative;z-index:1;justify-self:center;max-width:100%;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11.5px;font-weight:700;color:var(--teal-deep);box-shadow:0 4px 12px rgba(3,33,74,.12);text-align:center;line-height:1.5;text-wrap:balance}
  .clip-in-hero .clip-slot .bigplay{width:60px;height:60px}
  .clip-in-hero .clip-slot figcaption{font-size:11px;line-height:1.5;padding:2px 8px;background:transparent}
  /* below the hero: the voice explanation and the perk side by side, schedule and apply under them,
     on the same 1180px column as the hero card */
  .clip-in-hero .sky{display:grid;grid-template-columns:repeat(2,minmax(0,calc((var(--col) - 24px) / 2)));justify-content:center;column-gap:24px;align-items:stretch;padding:48px var(--gutter) 36px}
  .clip-in-hero .sky > *{grid-column:1 / -1;padding-left:0;padding-right:0}
  /* owner 11/14: video -> perk -> X Voice (what Partner Plan Plus is), stacked full width */
  .clip-in-hero .sky > .perk,.clip-in-hero .sky > .voice{padding:0 0 26px}
  /* the clip is up in the hero: the explanation and the plan details read as one glass card */
  .clip-in-hero .voice-in{
    display:flex;flex-direction:column;justify-content:center;max-width:none;height:100%;
    background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
    border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--shadow);
  }
  .clip-in-hero .clip-home{display:none}
  .clip-in-hero .voice-in > .glass{background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .clip-in-hero .voice-in > .voice-text{padding-bottom:16px}
  .clip-in-hero .voice-in > .voice-more{width:auto;margin:0 28px;padding:14px 0 24px;border-top:1px dashed #b4cfdb}
  .clip-in-hero .perk-card{height:100%;max-width:none;align-content:center}
  .clip-in-hero .sched-card,.clip-in-hero .cta-card{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .apply,.bigplay,.portal.is-playing .bigplay,.applybar,.applybar.show,.pv-start img,.faq summary::after{transition:none}
  .apply:hover,.pv-start:hover img{transform:none}
  .bigplay:hover{transform:translate(-50%,-50%)} /* no scale-up; keeps the centring */
}

/* Windows High Contrast / forced colors: backgrounds and shadows are dropped, so the open coral CTA
   would read as plain link text. Give it a visible border so it still reads as a button; the closed
   status pill keeps its dashed border and shows as disabled. The PV play label and the current
   language have no border of their own, so they get one too (the other pills keep theirs). */
@media (forced-colors: active){
  .apply{border:2px solid LinkText}
  .apply[aria-disabled="true"]{border:1.5px dashed GrayText;color:GrayText}
  .pv-play,.lang a[aria-current="true"]{border:1px solid ButtonText}
}