body.mode-home .play-copy h1{font-size:clamp(31px,3.7vw,49px);max-width:820px;margin-inline:auto;line-height:1.12}
body.mode-home .play-copy h1>span{display:block;white-space:normal}
.hero-positioning{font-size:13px;color:#babbb1;max-width:54ch;margin:17px auto 0;line-height:1.7;padding-inline:10px}
.hero-positioning strong{color:#f2f0e7;font-weight:500}
.hero-direct{display:inline-flex;color:#dddcd0;font-size:12px;text-underline-offset:5px;min-height:44px;align-items:center;margin-left:22px}
.hero-complements{font-size:10px;color:#9c9e93;margin:15px auto 0;line-height:1.7}.hero-complements a{color:#c9c9bd;text-underline-offset:4px}
/* A quiet, illustrated guide using the existing OXXY palette. */
.first-step{padding:28px;background:#fffefa;border:1px solid #dfded5;border-radius:24px;color:#252c3b;margin:0 0 28px;line-height:1.55;box-shadow:0 10px 32px #232a3d06}
.first-intro{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.first-emblem{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:17px;background:#ffe15b;color:#32331e;box-shadow:inset 0 0 0 1px #b99d2420}
.first-emblem .first-icon{width:27px;height:27px}
.first-icon{width:23px;height:23px;flex:none}
.first-kicker{font-size:9px!important;font-weight:600;letter-spacing:.08em;color:#6d715d!important;margin:0 0 6px!important}
.first-step h3{font-size:28px;font-weight:500;letter-spacing:-.045em;line-height:1.15;margin:0;color:#252c3b}
.first-audience{font-size:13px;color:#626872;margin:0 0 24px;max-width:65ch}
.first-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;padding:22px 0;border-block:1px solid #e9e7df}
.first-fields label{display:grid;gap:8px;margin:0;font-size:12px;font-weight:500;color:#303849;align-content:start;min-width:0}
.first-fields label small{font-size:10px;font-weight:400;color:#70747b;line-height:1.5}
.first-fields select,.first-fields input{width:100%;min-width:0;min-height:48px;padding:12px;background:#f7f7f2;border:1px solid #d4d7cd;border-radius:12px;font:inherit;font-size:13px;color:#252c3b;transition:border-color .2s,background .2s,box-shadow .2s}
.first-fields :is(select,input):hover{border-color:#999f90}
.first-fields :is(select,input):focus{background:#fff;box-shadow:0 0 0 4px #f0d76625}
.first-fields input::placeholder{color:#747b83;font-size:12px}
.first-plan{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px}
.first-plan>div{min-width:0;padding:20px;border:1px solid #e9e7de;border-radius:16px;background:#f7f7f2}
.first-plan .first-idea{background:#fff1ad;border-color:#ecdc8e}
.first-plan .first-learn{background:#eef0ff;border-color:#dfe3f5}
.first-plan .first-keep{background:#eaf3eb;border-color:#d9e8dc}
.first-plan dt{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600;margin-bottom:12px;color:#303849}
.first-plan dd{font-size:13px;line-height:1.7;color:#565e69;margin:0}
.first-plan .first-idea dd{color:#53513a}
.first-plan>div.first-limits{grid-column:1/-1;background:transparent;border:0;border-top:1px solid #e9e7de;border-radius:0;padding:17px 2px 0}
.first-plan .first-limits dt{font-size:11px;margin-bottom:6px;color:#68705f}
.first-limits .first-icon{width:19px;height:19px}
.first-plan .first-limits dd{font-size:11px;color:#6e756b}
.first-method{padding:21px;background:#242c3d;color:#f6f4eb;border-radius:18px;margin-bottom:20px}
.first-method h4{font-size:15px;font-weight:500;letter-spacing:-.02em;margin:0 0 18px}
.first-method ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;font-size:11px;line-height:1.6;padding:0;margin:0}
.first-method li{position:relative;color:#d9deea}
.first-method li>span{display:grid;place-items:center;width:30px;height:30px;margin-bottom:12px;border-radius:50%;border:1px solid #657087;color:#ffe15b;font-size:11px}
.first-method li:not(:last-child)::after{content:'';position:absolute;top:15px;left:40px;right:0;height:1px;background:#50596b}
.first-step details{padding:15px 0;border-bottom:1px solid #e6e5dc}
.first-step summary{font-size:13px;font-weight:500;cursor:pointer;min-height:30px;line-height:1.7;transition:color .2s}
.first-step summary:hover{color:#74621d}
.first-step details p{font-size:12px!important;color:#59616a!important;line-height:1.7!important}
.first-support ul{list-style:none;padding:0;margin:17px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.first-support li{display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:10px;align-content:start;padding:14px;border:1px solid #e5e6dd;border-radius:13px;font-size:12px}
.first-support li>.first-icon{grid-row:1/3;margin-top:7px;color:#667454}
.first-support li a{display:inline-flex;min-height:34px;align-items:center;color:#303849;text-underline-offset:4px;font-weight:500}
.first-support li span{color:#626973;font-size:11px;line-height:1.6}
.first-step .first-future{font-size:11px!important;color:#737466!important}
.first-actions{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin:24px 0 16px}
.first-actions a{min-height:48px;display:inline-flex;align-items:center;justify-content:center;background:#ffe15b;color:#292d35;padding:12px 21px;border-radius:99px;text-decoration:none;font-size:13px;font-weight:500;transition:background .2s,transform .2s,box-shadow .2s}
.first-actions a:hover{background:#ffeb8b;transform:translateY(-2px);box-shadow:0 6px 15px #b1a05724}
.first-actions button{min-height:44px;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;color:#60666d;font:inherit;font-size:11px;cursor:pointer}
.first-step .first-storage{font-size:10px!important;line-height:1.7!important;color:#73797c!important;margin:0!important;max-width:85ch}
.first-step :is(input,select,button,a,summary):focus-visible,.hero-direct:focus-visible{outline:3px solid #74621d;outline-offset:4px}
/* Polish the existing home, image choices and original radar; no new radar data. */
body.mode-home .play-hero{background:radial-gradient(ellipse at 50% 24%,#d2bf3210,transparent 48%),#141414}
body.mode-home .play-copy h1{font-size:clamp(32px,3.8vw,52px);max-width:850px;text-wrap:balance}
.hero-positioning{margin-top:20px}
.hero-method{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 22px;margin:16px auto 0;padding:0;list-style:none;color:#d4d5ca;font-size:11px}
.hero-method li{display:flex;align-items:center;gap:7px}
.hero-method svg{width:17px;height:17px;flex:none;color:#e9d367}
body.mode-home .hero-guide{margin-top:26px}
body.mode-home .orb-invitation{border:1px solid #d8bf4155;border-radius:99px;background:#f3d64e12;padding:13px 21px;transition:background .2s,border-color .2s,transform .2s}
body.mode-home .orb-invitation:hover{border-color:#e5cf68;background:#f3d64e22;transform:translateY(-2px)}
body.mode-home .hero-direct{color:#dedfd4;font-size:12px}
body.mode-home .start-offer{box-shadow:0 5px 20px #29302105;transition:transform .25s,box-shadow .25s,border-color .25s}
body.mode-home .start-offer:hover{box-shadow:0 12px 28px #29302112}
body.mode-home .offer-photo{border-radius:14px;overflow:hidden}
body.mode-home .start-heading>span{padding:7px 12px;border:1px solid #d5d6cb;border-radius:99px}
body.mode-home .possibility-panel{background:radial-gradient(ellipse at 15% 20%,#f3d64e0a,transparent 50%),#171d28;box-shadow:0 16px 42px #20263713}
body.mode-home .possibility-visual{padding:10px 0}
body.mode-home .possibility-choice{border-radius:15px}
body.mode-home .possibility-choice img{border-radius:10px}
body.mode-home .possibility-cta{border-radius:12px;min-height:48px}
body.mode-home .possibility-links a{min-height:38px;display:inline-flex;align-items:center}
.explorer-pop .explorer-top{margin-bottom:28px}
.explorer-pop .explorer-progress{border:1px solid #dadbd3;border-radius:99px;padding:6px 11px;font-size:9px;letter-spacing:.03em}
.explorer-pop .explorer-choices button{border-radius:20px;box-shadow:0 5px 16px #20253409}
.explorer-pop .choice-copy{padding-top:23px;padding-bottom:25px}
.explorer-pop .explorer-choices b{transition:transform .25s}
.explorer-pop .explorer-choices button:hover b{transform:rotate(10deg)}
[data-explorer-step]:not([hidden]){animation:first-arrive .32s ease-out both}
@keyframes first-arrive{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 body.mode-home .play-copy h1{font-size:31px;max-width:360px;white-space:normal}
 .hero-positioning{font-size:12px;max-width:34ch}
 .hero-method{flex-direction:column;gap:7px;margin-top:17px;font-size:11px}
 .hero-complements{font-size:10px;max-width:34ch;margin-top:19px}
 .hero-direct{margin-left:14px}
 .first-step{padding:21px 18px;border-radius:20px}
 .first-intro{gap:11px;align-items:flex-start}
 .first-emblem{width:43px;height:43px;border-radius:14px}
 .first-emblem .first-icon{width:24px;height:24px}
 .first-kicker{font-size:8px!important;line-height:1.6}
 .first-step h3{font-size:25px}
 .first-fields{grid-template-columns:1fr;gap:17px;padding:19px 0}
 .first-fields input,.first-fields select{font-size:16px}
 .first-plan{gap:10px}
 .first-plan>div{padding:16px}
 .first-plan dt{font-size:12px;gap:9px;align-items:flex-start}
 .first-plan dd{font-size:12px}
 .first-method ol{grid-template-columns:1fr 1fr;gap:20px}
 .first-method li:nth-child(2)::after{display:none}
 .first-support ul{grid-template-columns:1fr}
 .first-support li a{min-height:44px}
 .first-actions a{width:100%;font-size:12px;padding-inline:15px}
 .first-actions{gap:5px;justify-content:center}
 .explorer-pop .explorer-choices button{border-radius:16px}
 body.mode-home .possibility-choice{padding:13px;gap:9px;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:start;min-height:122px}
 body.mode-home .possibility-choice img{display:block;width:35px;height:35px;grid-column:1;grid-row:1;border-radius:10px}
 body.mode-home .possibility-choice b{display:grid;grid-column:2;grid-row:1;width:22px;height:22px;font-size:13px}
 body.mode-home .possibility-choice>span{grid-column:1/-1}
 body.mode-home .possibility-choice strong{font-size:14px}
 body.mode-home .possibility-choice small{font-size:10px}
}
@media(max-width:480px){
 .first-plan{grid-template-columns:1fr}
 .first-plan dt{font-size:13px;align-items:center;margin-bottom:10px}
 .first-plan dd{font-size:13px}
 .first-step h3{font-size:23px}
 .first-intro{gap:10px}
 .first-emblem{width:38px;height:38px;border-radius:12px}
 .first-audience{font-size:12px;margin-bottom:18px}
 .first-step{padding:19px 14px}
 .first-fields{margin-bottom:18px}
 .first-method{padding:18px 16px}
 .first-method ol{font-size:11px;gap:17px}
 .first-method li>span{width:27px;height:27px;margin-bottom:9px}
 .first-method li:not(:last-child)::after{top:13px;left:34px}
 .first-kicker{font-size:7px!important;letter-spacing:.04em}
 body.mode-home .start-heading>span{font-size:9px;padding:6px 9px}
 body.mode-home .possibility-in-explorer .possibility-choice{padding:11px;min-height:130px}
 body.mode-home .possibility-in-explorer .possibility-choice strong{font-size:13px}
 .explorer-pop .explorer-progress{font-size:8px;padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){
 [data-explorer-step],.first-step *,.hero-method *,body.mode-home .orb-invitation,.explorer-pop .explorer-choices *{animation:none!important;transition:none!important}
 .first-actions a:hover,body.mode-home .orb-invitation:hover,.explorer-pop .explorer-choices button:hover b{transform:none}
}
/* Tablet widths keep a compact overview instead of stretching phone cards. */
@media(min-width:600px) and (max-width:760px){
 body.mode-home .play-copy h1{font-size:39px;max-width:660px}
 .hero-positioning{max-width:55ch}
 .hero-method{flex-direction:row;font-size:10px;gap:15px}
 .first-fields,.first-support ul{grid-template-columns:1fr 1fr}
 .first-fields select,.first-fields input{font-size:13px}
 .explorer-pop .need-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
 .explorer-pop .profile-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .explorer-pop .explorer-choices button,.explorer-pop .profile-choices button{grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:auto 1fr}
 .explorer-pop .choice-photo,.explorer-pop .profile-choices .choice-photo{grid-column:1/-1;aspect-ratio:4/3;height:auto;min-height:0}
 .explorer-pop .choice-copy{padding:18px 5px 21px 15px}
 .explorer-pop .choice-copy strong{font-size:21px}
 .explorer-pop .choice-copy small{font-size:10px}
 .explorer-pop .detail-title{max-width:none;font-size:36px}
}
@media(max-width:480px){
 .play-hero-inner{padding-top:24px}
 .play-orb{width:180px}
 .orb-stage{gap:12px}
 .play-copy{margin-top:15px}
 body.mode-home .play-copy h1{font-size:28px;max-width:340px}
 .hero-positioning{margin-top:14px}
 .hero-method{margin-top:13px;gap:5px}
 body.mode-home .hero-guide{margin-top:18px}
 body.mode-home .orb-invitation{margin-top:18px}
}
