/* OPPP (迈扩线上实战短课程): the listing and the session page, in the approved LINK landing-page look
   (05-10-2026): warm ivory and navy, large calm Chinese headings, real people, lists with thin lines,
   restrained motion that never hides content. Everything is scoped to .op so the shared site header and
   footer keep their own colours (the old page's bare `p{color}` rule darkened the footer to ~1.7:1). */
.op{
  --navy:#0B2447; --navy-2:#102E57; --paper:#F7F5F0; --ivory:#FCFAF7; --white:#FFFFFF;
  --ink:#173351; --muted:#56636F; --hair:rgba(11,36,71,.14);
  --accent:#466EBB;              /* blue on paper (brand.json soft-petal row) */
  --accent-navy:#7996CD;         /* blue on navy */
  --ok:#487C2E; --warn:#A9593F;  /* green / orange on paper: availability only */
  --on-navy:#FFFFFF; --on-navy-2:rgba(255,255,255,.84); --on-navy-3:rgba(255,255,255,.70);
  --body:'Plus Jakarta Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;
  --display:'Poppins','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --gut:clamp(20px,5.4vw,84px); --ease:cubic-bezier(.22,1,.36,1); --expo:cubic-bezier(.16,1,.3,1);
  display:block; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.75;
  overflow-x:clip; padding-top:var(--header-h,84px);
}
@media (max-width:900px){.op{padding-top:var(--header-h-mobile,68px)}}
.op [id]{scroll-margin-top:calc(var(--header-h,84px) + 16px)}
.op *,.op *::before,.op *::after{box-sizing:border-box}
.op h1,.op h2,.op h3,.op p,.op ol,.op ul,.op dl,.op dd,.op figure{margin:0;padding:0}
.op ol,.op ul{list-style:none}
.op img{display:block;max-width:100%}
:where(.op) a{color:inherit}
.op h1,.op h2,.op h3{font-family:var(--display);font-weight:700;color:var(--navy);text-wrap:balance;max-width:none}
.op h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.22;letter-spacing:.02em}
.op h2{font-size:clamp(1.65rem,3.1vw,2.45rem);line-height:1.3;letter-spacing:.015em}
.op h3{font-size:1.14rem;line-height:1.45}
html:not(.lang-zh) .op h1{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:0}
html:not(.lang-zh) .op h2{letter-spacing:0}
:where(.op) p{max-width:none;color:inherit}
.op :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.op .on-navy :focus-visible,.op .on-navy:focus-visible{outline-color:#fff}
.op .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.op [hidden]{display:none!important}

/* skip link (the shared header comes first in the page) */
.op-skip{position:absolute;left:12px;top:-60px;z-index:10001;background:#0B2447;color:#fff;padding:12px 18px;border-radius:999px;font:600 .95rem 'Plus Jakarta Sans',sans-serif;text-decoration:none;transition:top .2s}
.op-skip:focus{top:12px;outline:3px solid #7996CD;outline-offset:2px}

/* ── buttons: navy on ivory, ivory on navy; every one carries a drawn icon ── */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid var(--navy);
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.03em;text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .2s ease,color .2s ease;text-align:center}
.op-btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease)}
.op-btn--quiet{background:transparent;color:var(--navy)}
.op-btn--sm{min-height:44px;padding:0 18px;font-size:.92rem}
.on-navy .op-btn{background:var(--ivory);border-color:var(--ivory);color:var(--navy)}
.on-navy .op-btn--quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.op-btn[aria-disabled="true"],.op-btn:disabled{opacity:.55;cursor:not-allowed}
.op-btn:active{transform:translateY(1px)}
@media (hover:hover) and (pointer:fine){
  .op-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,36,71,.55)}
  .op-btn:hover svg.go{transform:translateX(3px)}
  .op-btn[href^="#"]:hover svg.go{transform:translateY(3px)}
  .on-navy .op-btn:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
}
.op-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.op-eyebrow{font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.14em;color:var(--muted);margin-bottom:16px}
.on-navy .op-eyebrow{color:var(--on-navy-2)}
.op-lede{font-size:1.14rem;line-height:1.85;margin-top:20px;max-width:32em}
.op-fine{font-size:.94rem;line-height:1.75;color:var(--muted);margin-top:16px;max-width:36em}
.on-navy .op-fine{color:var(--on-navy-3)}
.on-navy{color:var(--on-navy-2)}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}

/* ── hero: navy, the words on one side, the next session on the other ── */
.op-hero{position:relative;isolation:isolate;background:var(--navy);padding:clamp(56px,8vw,112px) var(--gut) clamp(64px,8vw,112px);overflow:hidden}
.op-hero__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,88px);align-items:center}
.op-hero .op-lede{color:var(--on-navy-2)}
.op-sig{position:absolute;left:-2%;bottom:6%;width:min(70vw,980px);height:auto;z-index:-1;pointer-events:none;overflow:visible;opacity:.9}
.op-sig path{fill:none;stroke-linecap:round}
.op-sig .s1{stroke:var(--accent-navy);stroke-width:2.6}
.op-sig .s2{stroke:var(--accent-navy);stroke-width:1;opacity:.45}
.op-sig circle{fill:var(--navy);stroke:var(--accent-navy);stroke-width:2.4}
.op-hero:not(.op-hero--photo) .op-sig{bottom:-12%}

/* hero with a real MICLOH class photograph behind a navy wash (computer only; a phone goes straight to the words and the session) */
.op-hero--photo{display:flex;align-items:center;min-height:clamp(520px,72vh,720px);padding-left:0;padding-right:0}
.op-hero__photo{position:absolute;inset:0 0 0 34%;z-index:-2}
.op-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.op-hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 36%,rgba(11,36,71,.88) 48%,rgba(11,36,71,.35) 74%,rgba(11,36,71,.15) 100%)}
.op-hero__words{width:100%;max-width:calc(600px + var(--gut));padding:0 0 0 var(--gut)}
.op-hero__words .op-fine{color:var(--on-navy-2)}
html.motion .op-hero__photo img{scale:1.12;transition:scale 2.6s var(--expo)}
html.motion .op-hero.in .op-hero__photo img{scale:1.02}

/* the next-session panel inside the hero */
.op-next{background:var(--ivory);color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,32px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.op-next .op-eyebrow{color:var(--muted);margin-bottom:10px}
.op-next h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.35}
.op-next .op-cta{margin-top:22px}
.op-next .op-cta .op-btn{flex:1 1 auto}

/* ── facts: plain rows with thin lines (no boxes) ── */
.op-facts{margin-top:18px}
.op-facts > div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--hair);align-items:baseline}
.op-facts > div:last-child{border-bottom:1px solid var(--hair)}
.op-facts dt{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--muted);letter-spacing:.02em}
.op-facts dd{font-size:1rem;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.op-facts dd small{display:block;font-size:.88rem;color:var(--muted);font-weight:400;margin-top:2px}
html:not(.lang-zh) .op-facts > div{grid-template-columns:8.4em minmax(0,1fr)}
.op-seats--ok{color:var(--ok)!important}
.op-seats--low{color:var(--warn)!important}
.op-seats--full{color:var(--muted)!important}
.op-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:.84rem;letter-spacing:.04em;padding:5px 12px;border-radius:999px;background:#EFF3F9;color:var(--navy)}
.op-tag svg{width:14px;height:14px}

/* ── sections ── */
.op-sec{padding:clamp(64px,8.5vw,120px) var(--gut);background:var(--paper)}
.op-sec--white{background:var(--white)}
.op-sec--navy{background:var(--navy)}
.op-wrap{max-width:1180px;margin:0 auto}
.op-head{max-width:36em;margin-bottom:clamp(28px,4vw,52px)}
.op-head .op-lede{margin-top:14px}

/* one session: a balanced feature, words + facts on one side, the action on the other */
.op-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start;background:var(--white);border-radius:26px;padding:clamp(24px,4vw,52px);box-shadow:0 1px 0 var(--hair),0 24px 60px -40px rgba(11,36,71,.35)}
.op-feature h3{font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.3}
.op-feature__aside{position:sticky;top:calc(var(--header-h,84px) + 16px);background:var(--paper);border-radius:20px;padding:clamp(20px,2.6vw,28px)}
.op-feature__aside .op-btn{width:100%}
.op-feature__aside p{font-size:.95rem;color:var(--muted);margin-top:12px}
/* several sessions: a grid */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:22px}
.op-card{display:flex;flex-direction:column;background:var(--white);border-radius:22px;padding:26px 24px 24px;box-shadow:0 1px 0 var(--hair),0 18px 44px -34px rgba(11,36,71,.4)}
.op-card h3{font-size:1.28rem;line-height:1.4;margin-top:6px}
.op-card .op-facts{flex:1}
.op-card .op-btn{margin-top:20px;width:100%}

/* states */
.op-state{background:var(--white);border-radius:24px;padding:clamp(28px,4vw,48px);max-width:760px}
.op-state h3{font-size:1.35rem}
.op-state p{margin-top:10px;color:var(--ink)}
.op-skel{border-radius:24px;background:var(--white);padding:clamp(24px,4vw,48px)}
.op-skel i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#ECE9E2 0%,#F5F3EE 50%,#ECE9E2 100%);background-size:200% 100%;margin-top:14px}
.op-skel i:nth-child(1){width:38%;height:12px;margin-top:0}
.op-skel i:nth-child(2){width:72%;height:26px}
.op-skel i:nth-child(3){width:56%}
.op-skel i:nth-child(4){width:64%}
@media (prefers-reduced-motion:no-preference){.op-skel i{animation:op-shimmer 1.6s linear infinite}}
@keyframes op-shimmer{to{background-position:-200% 0}}

/* numbered steps (how joining works) */
.op-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 34px;counter-reset:s;position:relative;padding-bottom:18px}
.op-steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.op-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.6;color:var(--accent);font-variant-numeric:tabular-nums;min-width:1.7em}
.op-steps b{font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--navy)}
.op-steps span{grid-column:2;font-size:.97rem;line-height:1.65;color:var(--ink)}
.op-steps::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform-origin:0 50%;opacity:.8}

/* a photo scene: the person on one side, the words on the other, a soft wash behind the words */
.op-scene{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,70vh,720px);background:var(--paper);overflow:hidden}
.op-scene > picture{position:absolute;inset:0;z-index:-2}
.op-scene > picture img{width:100%;height:100%;object-fit:cover;object-position:var(--focal-x,80%) var(--focal-y,30%)}
.op-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 34%,rgba(247,245,240,.86) 46%,rgba(247,245,240,0) 66%)}
.op-scene--right > picture img{object-position:var(--focal-x,20%) var(--focal-y,30%)}
.op-scene--right::before{background:linear-gradient(270deg,var(--paper) 0%,var(--paper) 34%,rgba(247,245,240,.86) 46%,rgba(247,245,240,0) 66%)}
.op-scene--right{justify-content:flex-end}
.op-scene__words{width:100%;max-width:calc(560px + var(--gut));padding:88px var(--gut)}
.op-scene--right .op-scene__words{padding-left:0}
.op-scene figcaption{font-size:.86rem;color:var(--muted);margin-top:22px}
/* the portrait sits on its own plain background, so it stands in a frame rather than behind a wash */
.op-portrait{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.op-portrait figure{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#E9E6DF}
.op-portrait figure img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.op-portrait figcaption{font-size:.86rem;color:var(--muted);margin-top:12px}
.op-creds{margin-top:22px}
.op-creds li{padding:14px 0;border-top:1px solid var(--hair);font-size:1rem}
.op-creds li:last-child{border-bottom:1px solid var(--hair)}
.op-creds b{font-family:var(--display);font-weight:600;color:var(--navy)}

/* next learning: plain rows */
.op-runs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:20px 0;border-top:1px solid var(--hair)}
.op-runs li:last-child{border-bottom:1px solid var(--hair)}
.op-runs b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--navy);line-height:1.45}
.op-runs span{display:block;font-size:.95rem;color:var(--muted);margin-top:4px}
.op-runs .op-related{font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.08em;color:var(--accent);margin-bottom:4px}

/* questions */
.op-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,88px);align-items:start}
.op-faq details{border-top:1px solid var(--hair)}
.op-faq details:last-of-type{border-bottom:1px solid var(--hair)}
.op-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--navy)}
.op-faq summary::-webkit-details-marker{display:none}
.op-faq summary svg{width:20px;height:20px;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.op-faq details[open] summary svg{transform:rotate(45deg)}
.op-faq details > div{padding:0 40px 22px 0;color:var(--ink);overflow:hidden}
.op-faq details > div p + p{margin-top:10px}

/* ── the session page ── */
.op-ev{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"facts reg" "more reg";grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,72px);row-gap:clamp(44px,6vw,72px);align-items:start}
.op-ev__facts{grid-area:facts}
.op-ev__more{grid-area:more}
.op-ev .op-reg{grid-area:reg;align-self:start}
.op-ev__more > section + section{margin-top:clamp(44px,6vw,72px)}
.op-ev h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.op-hero__facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:1.02rem;color:var(--on-navy)}
.op-hero__facts span{display:inline-flex;align-items:center;gap:8px}
.op-hero__facts svg{width:18px;height:18px;color:var(--accent-navy);flex:none}
.op-desc p + p{margin-top:14px}
.op-desc{font-size:1.05rem;white-space:normal}
.op-note{background:#EFF3F9;border-radius:16px;padding:16px 18px;font-size:.96rem;color:var(--ink);margin-top:18px}
.op-reg{position:sticky;top:calc(var(--header-h,84px) + 16px);background:var(--white);border-radius:24px;padding:clamp(22px,3vw,32px);box-shadow:0 1px 0 var(--hair),0 26px 60px -40px rgba(11,36,71,.45);scroll-margin-top:96px}
.op-reg h2{font-size:1.5rem}
.op-presenter{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center}
.op-presenter figure{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#E9E6DF}
.op-presenter figure img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.op-presenter b{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--navy);display:block}

/* form */
.op-form{margin-top:18px}
.op-field{margin-top:16px}
.op-field label,.op-fieldset legend{display:block;font-family:var(--display);font-weight:600;font-size:.94rem;color:var(--navy);margin-bottom:6px}
.op-field .req{color:var(--warn);margin-left:3px}
.op-field .opt{font-family:var(--body);font-weight:400;color:var(--muted);font-size:.86rem;margin-left:6px}
.op-input{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid #C9CFD8;border-radius:12px;background:#fff;color:var(--ink);font:400 1rem var(--body);transition:border-color .2s,box-shadow .2s}
select.op-input{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.op-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(70,110,187,.22)}
.op-input[aria-invalid="true"]{border-color:#B3261E}
.op-err{display:none;color:#B3261E;font-size:.9rem;margin-top:6px}
.op-err.on{display:block}
.op-fieldset{border:0;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--hair);min-width:0}
.op-fieldset legend{padding:0;font-size:1rem;margin-bottom:2px}
.op-fieldset > p{font-size:.9rem;color:var(--muted)}
.op-form .op-btn{width:100%;margin-top:22px}
.op-consent{font-size:.88rem;line-height:1.7;color:var(--muted);margin-top:14px}
.op-consent a{color:var(--accent)}
.op-alert{display:none;border-radius:14px;padding:14px 16px;background:#FBEDEA;color:#7A1F14;font-size:.95rem;margin-top:14px}
.op-alert.on{display:block}
.op-turnstile{margin-top:18px;min-height:0}
.op-done{text-align:left}
.op-done h3{font-size:1.3rem;margin-top:6px}
.op-done p{margin-top:10px}
.op-done .op-btn{width:100%;margin-top:18px}

/* ── phones and tablets: words first, then the photo; nothing scrolls sideways ── */
@media (max-width:899px){
  .op{font-size:16px}
  .op-hero__grid,.op-feature,.op-ev,.op-faq,.op-portrait{grid-template-columns:minmax(0,1fr)}
  .op-ev{grid-template-areas:"facts" "reg" "more";grid-template-rows:auto}
  .op-hero{padding-top:36px;padding-bottom:44px}
  /* a phone: the words first, then the photo below them, the subject kept in frame */
  .op-hero--photo{display:flex;flex-direction:column-reverse;min-height:0;padding:36px var(--gut) 0}
  .op-hero--photo::before{display:none}
  .op-hero__photo{position:static;display:block;margin:30px calc(-1 * var(--gut)) 0}
  .op-hero__photo img{aspect-ratio:16/10;height:auto;object-position:var(--hx,72%) 30%}
  .op-hero__words{max-width:none;padding:0}
  .op-shots{grid-template-columns:minmax(0,1fr)}
  .op-feature__aside,.op-reg{position:static}
  .op-steps{grid-template-columns:minmax(0,1fr)}
  .op-scene{display:flex;flex-direction:column-reverse;min-height:0}   /* a phone: the words first, then the photo */
  .op-scene::before{display:none}
  .op-scene > picture{position:static;display:block}
  .op-scene > picture img{aspect-ratio:4/3;height:auto}
  .op-scene__words,.op-scene--right .op-scene__words{max-width:none;padding:44px var(--gut) 52px}
  .op-portrait figure{max-width:420px;aspect-ratio:4/5}
  .op-cta .op-btn{width:100%}
  .op-faq details > div{padding-right:0}
  .op-sig{width:150%;left:-25%;bottom:-14px;opacity:.5}
  .op-sig circle{display:none}
}
@media (max-width:420px){
  .op-facts > div{grid-template-columns:4.6em minmax(0,1fr);gap:10px;padding:10px 0}
  html:not(.lang-zh) .op-facts > div{grid-template-columns:6.4em minmax(0,1fr)}
  .op-presenter{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .op-runs li{grid-template-columns:minmax(0,1fr)}
  .op-runs .op-btn{width:100%}
  .op h1{font-size:2rem}
  html:not(.lang-zh) .op h1{font-size:1.8rem}
}

/* ════ Motion: only under html.motion (set in <head> unless the visitor asked for less motion). A script
   failure removes the class, a scroll safety net reveals anything passed, so words are never left hidden. ════ */
html.motion .op [data-reveal]{opacity:0;translate:0 24px;filter:blur(5px);transition:opacity .85s var(--ease),translate 1s var(--expo),filter .85s var(--ease);transition-delay:min(calc(var(--d,0) * 85ms),600ms)}
html.motion .op [data-reveal].in{opacity:1;translate:0 0;filter:blur(0)}
html.motion .op-scene picture img,html.motion .op-portrait figure img{scale:1.1;transition:scale 2.2s var(--expo)}
html.motion .op-scene.in picture img,html.motion .op-portrait figure.in img{scale:1.02}
html.motion .op-sig path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--expo)}
html.motion .op-sig .s2{transition-delay:.35s}
html.motion .op-sig circle{opacity:0;transition:opacity .6s ease}
html.motion .op-sig circle:nth-of-type(1){transition-delay:.4s}
html.motion .op-sig circle:nth-of-type(2){transition-delay:1.1s}
html.motion .op-sig circle:nth-of-type(3){transition-delay:1.8s}
html.motion .op-sig.in path{stroke-dashoffset:0}
html.motion .op-sig.in circle{opacity:1}
html.motion .op-steps::after{transform:scaleX(0);transition:transform 1.6s var(--expo) .3s}
html.motion .op-steps.in::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.op-btn,.op-btn svg,.op-faq summary svg{transition:none}.op-skip{transition:none}}

/* The shared site header runs past the edge below ~400px on every page (site-wide, raised separately). On these two
   pages only, it is tightened so the menu, language and log-in stay on screen at 320px. */
@media (max-width:400px){
  .site-header__inner{gap:8px}
  .site-header__actions{gap:4px}
  .site-header__icon-btn[data-action="search"]{display:none}
  .site-header__logo{letter-spacing:.16em;gap:7px!important}
  .site-header__logo-zh{display:none!important}
  .site-header .lang-toggle{min-width:44px;padding:5px 9px}
  .site-header__login{padding:6px 4px;letter-spacing:.04em}
}

@media (max-width:340px){.op-facts > div,html:not(.lang-zh) .op-facts > div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* step pictures (how joining works) and the session's illustrations */
.op-steps figure{grid-column:1/-1;margin:0 0 16px;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#E9E6DF}
.op-steps figure img{width:100%;height:100%;object-fit:cover}
.op-illus-note{font-size:.88rem;color:var(--muted);margin-top:14px}
.op-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:16px;margin-top:22px}
.op-shots figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#E9E6DF}
.op-shots img{width:100%;height:100%;object-fit:cover}
.op-hero--photo .op-hero__photo img{object-position:var(--hx,72%) 30%}
/* a step with a picture: the picture on top, then the number with the title, then the words */
.op-steps li > figure{grid-row:1;grid-column:1 / -1}
.op-steps li:has(> figure)::before{grid-row:2;grid-column:1}
.op-steps li > b{grid-row:2;grid-column:2}
.op-steps li > span{grid-row:3;grid-column:2}
.op-steps li{align-content:start}
@media (max-width:899px){.op-hero--photo .op-sig{display:none}}
@media (max-width:360px){#hero-btn{padding:0 16px;font-size:.92rem;letter-spacing:.01em}#hero-btn span{white-space:nowrap}}

/* the presenter beside the session facts (Tony, 07-10-2026): a slim card on a wide screen, a compact row below the facts otherwise */
.op-facts-row{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.op-pres-card{background:var(--white);border-radius:20px;padding:18px;box-shadow:0 1px 0 var(--hair),0 18px 44px -34px rgba(11,36,71,.4)}
.op-pres-card .op-eyebrow{margin-bottom:12px}
.op-pres-card .op-presenter b{font-size:1.12rem}
@media (min-width:1200px){
  .op-facts-row:has(> .op-pres-card:not([hidden])){grid-template-columns:minmax(0,1fr) 220px}
  .op-pres-card{margin-top:18px}
  .op-pres-card .op-presenter{grid-template-columns:minmax(0,1fr);gap:14px}
  .op-pres-card .op-presenter figure{aspect-ratio:4/5;width:100%}
}

/* session page: the workforce group. The photo keeps its own 16:9 shape in the right part of the hero, so all six faces
   show at every width; the words sit in the left panel and over the empty wall, which fades to navy. Nothing is laid over the people. */
.op-hero--group{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:0;padding:0}
.op-hero--group::before{display:none}
.op-hero--group > .op-hero__photo,.op-hero--group > .op-hero__words{grid-area:1 / 1}
.op-hero--group .op-hero__photo{position:relative;inset:auto;z-index:0;justify-self:end;width:min(70vw,1244px);overflow:hidden}
.op-hero--group .op-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.op-hero--group .op-hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(11,36,71,0) 13%)}
.op-hero--group .op-hero__words{position:relative;z-index:2;max-width:calc(clamp(300px,30vw,520px) + var(--gut));padding:clamp(40px,5vw,72px) 0 clamp(40px,5vw,72px) var(--gut)}
.op-hero--group .op-sig{width:min(34vw,520px)}
@media (max-width:899px){
  .op-hero--group{display:flex;flex-direction:column-reverse;padding:36px var(--gut) 0}
  .op-hero--group .op-hero__photo{width:auto;margin:30px calc(-1 * var(--gut)) 0;justify-self:auto}
  .op-hero--group .op-hero__photo::after{display:none}
  .op-hero--group .op-hero__words{max-width:none;padding:0}
}

/* the shared footer's six columns push the page wider than the screen around 1024px in English (every page; fixed here for these two) */
@media (min-width:901px) and (max-width:1280px){.site-footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr))}}