/* MKT-V222-HOME-01 v1 patch (DRAFT, ready for human review, not approved). Load AFTER /assets/v222/v222.css on index.html
   (sections 1, 2, 3, 4) and on every page with the shared footer (sections 2, 3). Sections are independent. */

/* ===== 1. Steps circle loop: #idea-plan-create-check-improve-share ===== */
#idea-plan-create-check-improve-share .loop{display:grid;grid-template-columns:440px 230px;justify-content:center;align-items:center;gap:56px;margin-top:-64px}
#idea-plan-create-check-improve-share .loop-ring{position:relative;width:440px;height:440px}
#idea-plan-create-check-improve-share .loop-ring>svg{position:absolute;inset:0;width:100%;height:100%}
#idea-plan-create-check-improve-share .loop-center{position:absolute;left:50%;top:50%;width:236px;height:236px;margin:-118px 0 0 -118px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(20,32,74,.06)}
#idea-plan-create-check-improve-share .loop-spark{position:absolute;left:220px;top:50px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#F57E20;box-shadow:0 0 0 6px rgba(245,126,32,.18);pointer-events:none;z-index:2}
#idea-plan-create-check-improve-share ol.loop-steps{position:absolute;inset:0;list-style:none;margin:0;padding:0;counter-reset:none}
#idea-plan-create-check-improve-share .loop-steps li{position:static;margin:0;padding:0;background:none;border:0;box-shadow:none}
#idea-plan-create-check-improve-share .loop-steps li:focus{outline:none}
#idea-plan-create-check-improve-share .loop-steps .st-h{position:absolute;z-index:3;width:104px;margin:-22px 0 0 -52px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;border-radius:14px;padding:0 0 4px}
#idea-plan-create-check-improve-share .loop-steps li:focus-visible .st-h{outline:3px solid #253679;outline-offset:4px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(1) .st-h{left:220px;top:50px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(2) .st-h{left:367.2px;top:135px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(3) .st-h{left:367.2px;top:305px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(4) .st-h{left:220px;top:390px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(5) .st-h{left:72.8px;top:305px}
#idea-plan-create-check-improve-share .loop-steps li:nth-child(6) .st-h{left:72.8px;top:135px}
#idea-plan-create-check-improve-share .loop-steps .st-n{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #253679;color:#253679;display:grid;place-items:center;font:700 16px/1 var(--font-d,inherit);transition:background-color .3s,border-color .3s,color .3s}
#idea-plan-create-check-improve-share .loop-steps li.is-on .st-n,
#idea-plan-create-check-improve-share .loop:not(.is-live) .loop-steps li:first-child .st-n{background:#F57E20;border-color:#14204A;color:#14204A}
#idea-plan-create-check-improve-share .loop-steps b{display:block;font:800 16px/1.2 var(--font-d,inherit);color:#14204A}
#idea-plan-create-check-improve-share .loop-steps p{position:absolute;z-index:1;left:50%;top:50%;width:184px;margin:0;transform:translate(-50%,-50%);text-align:center;font-size:16px;line-height:1.45;color:#14204A;opacity:0;transition:none;pointer-events:none}
#idea-plan-create-check-improve-share .loop-steps li.is-on p,
#idea-plan-create-check-improve-share .loop:not(.is-live) .loop-steps li:first-child p{opacity:1}
#idea-plan-create-check-improve-share .loop-steps li.is-on p{transition:opacity .35s}
#idea-plan-create-check-improve-share .loop-toggle{position:absolute;left:0;bottom:0;z-index:4;width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid #C9D0E0;background:#fff;color:#14204A;display:grid;place-items:center;cursor:pointer}
#idea-plan-create-check-improve-share .loop-toggle:hover{border-color:#253679}
#idea-plan-create-check-improve-share .loop-toggle:focus-visible{outline:3px solid #253679;outline-offset:3px}
#idea-plan-create-check-improve-share .loop-toggle svg{width:16px;height:16px;fill:currentColor}
#idea-plan-create-check-improve-share .loop-toggle .i-play{display:none}
#idea-plan-create-check-improve-share .loop-toggle.is-paused .i-play{display:block}
#idea-plan-create-check-improve-share .loop-toggle.is-paused .i-pause{display:none}
#idea-plan-create-check-improve-share .loop:not(.is-live) .loop-toggle{display:none}
#idea-plan-create-check-improve-share .loop-art{margin:0;width:230px;max-width:230px;border-radius:16px;overflow:hidden;opacity:.95}
#idea-plan-create-check-improve-share .loop-art img{display:block;width:100%;height:auto}
#idea-plan-create-check-improve-share .loop-art figcaption:empty{display:none}
@media (max-width:900px){#idea-plan-create-check-improve-share .loop{grid-template-columns:440px}#idea-plan-create-check-improve-share .loop-art{display:none}}
/* phones: compact progress bar, 6 dots + one step's text (all 6 <p> stay in the DOM) */
@media (max-width:700px){
 #idea-plan-create-check-improve-share .loop{display:block;margin-top:4px}
 #idea-plan-create-check-improve-share .loop-ring{width:auto;height:auto;display:flex;flex-direction:column}
 #idea-plan-create-check-improve-share .loop-ring>svg,#idea-plan-create-check-improve-share .loop-center,#idea-plan-create-check-improve-share .loop-spark{display:none}
 #idea-plan-create-check-improve-share ol.loop-steps{position:relative;inset:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding-bottom:80px}
 #idea-plan-create-check-improve-share ol.loop-steps::before,#idea-plan-create-check-improve-share ol.loop-steps::after{content:"";position:absolute;left:8.333%;top:15px;height:3px;border-radius:3px}
 #idea-plan-create-check-improve-share ol.loop-steps::before{right:8.333%;background:#E1E6F0}
 #idea-plan-create-check-improve-share ol.loop-steps::after{width:calc(83.333% * var(--p,0));background:#F57E20;transition:width .4s}
 #idea-plan-create-check-improve-share .loop-steps .st-h{position:relative;left:auto!important;top:auto!important;width:auto;margin:0;gap:4px}
 #idea-plan-create-check-improve-share .loop-steps .st-n{width:32px;height:32px;font-size:13px}
 #idea-plan-create-check-improve-share .loop-steps b{font-size:12px;color:#4A5578}
 #idea-plan-create-check-improve-share .loop-steps li.is-on b{color:#14204A}
 #idea-plan-create-check-improve-share .loop-steps p{left:0;right:0;top:62px;width:auto;transform:none;text-align:left;background:#fff;border:1px solid #EADFCB;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45}
 #idea-plan-create-check-improve-share .loop-toggle{position:static;align-self:flex-end;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
 #idea-plan-create-check-improve-share .loop *{transition:none!important;animation:none!important}
}

/* ===== 2. Soft entrance: hero Teddy bubble (index) + footer safety notice (all pages) =====
   Timing matches the Teddy speech bubble (teddy-layer.css tdSay: 320ms, cubic-bezier(.2,.9,.3,1.2)) with the
   overshoot removed (last value 1.2 -> 1) so there is no bounce. Only opacity/transform animate; text is always in the HTML. */
@media (prefers-reduced-motion:no-preference){
 .js-soft body[data-page="index"] .hero-bubble.hb-v221,
 .js-soft .site-footer .ph[role="note"]{opacity:0;transform:translateY(8px)}
 .js-soft body[data-page="index"] .hero-bubble.hb-v221.is-in,
 .js-soft .site-footer .ph[role="note"].is-in{opacity:1;transform:none;transition:opacity 320ms cubic-bezier(.2,.9,.3,1),transform 320ms cubic-bezier(.2,.9,.3,1)}
}

/* ===== 3. Footer notice restyle: icon + text directly on the navy footer (no card, no white fill) ===== */
html body .site-footer .ph[role="note"]{position:static;display:flex;align-items:flex-start;gap:10px;max-width:300px;margin-top:18px;padding:0;border:0;border-radius:0;background:none;background-image:none;box-shadow:none;color:#C9D3EA;font-size:14px;line-height:1.5}
html body .site-footer .ph[role="note"] .ph-ic{flex:0 0 auto;width:auto;height:auto;margin-top:1px;background:none;border-radius:0;color:#FEC623}
html body .site-footer .ph[role="note"] .ph-ic svg{width:20px;height:20px}
html body .site-footer .ph[role="note"] strong{display:block;color:#fff;font-size:14.5px;font-weight:700;line-height:1.4}
html body .site-footer .ph[role="note"] .ph-l{display:block;margin-top:2px;color:#C9D3EA}
html body .site-footer .ph[role="note"] a,html body .site-footer .ph[role="note"] a:visited{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
html body .site-footer .ph[role="note"] a:hover{color:#FEC623}
html body .site-footer .ph[role="note"] a:focus-visible{color:#FEC623;outline:2px solid #FEC623;outline-offset:2px;border-radius:2px}
@media (forced-colors:active){html body .site-footer .ph[role="note"] .ph-ic{color:CanvasText}}

/* ===== 4. Section backgrounds (index): continue the cream/white rhythm =====
   Done in the HTML by adding class "alt" to the steps section (existing .band.alt = cream #FBF8F2). No CSS needed here. */

/* ===== Engineer addition (v2_22, Relay 12:33): pure-CSS fail-safe. If the head script's 3 s timer or the main script fails,
   the bubble and the footer notice still become visible by 3 s. ===== */
@keyframes mktSoftShow{to{opacity:1;transform:none}}
html.js-soft:not(.soft-ok) body[data-page="index"] .hero-bubble.hb-v221,
html.js-soft:not(.soft-ok) .site-footer .ph[role="note"]{animation:mktSoftShow 1ms linear 3s forwards}