/* Redesign layer — loaded after v3.css. */

/* 1. Hero: no hard "footer" band. The ribbon shares the hero colour and the page melts into the next section. */
.hero{min-height:0;padding-top:28px}
.hero .v3-scene{height:520px;min-height:520px}
.capability-ribbon{background:var(--night);border-block:0;color:#bfb2c9;position:relative}
.capability-ribbon:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#ffffff14 20%,#ffffff14 80%,transparent)}
.hero-peek{height:150px;margin-bottom:-60px;background:linear-gradient(180deg,var(--night) 0%,#2e2740 22%,#6b5a66 48%,#d8c7b0 76%,var(--paper) 100%)}
.setup-section{position:relative}
.hero-bottom{position:relative}
.scroll-mouse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;color:var(--saffron);text-decoration:none}
.scroll-mouse-body{width:20px;height:31px;border:2px solid #ffbc58aa;border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.scroll-mouse-body i{width:3px;height:8px;border-radius:3px;background:var(--saffron);animation:qbp-wheel 1.6s ease-in-out infinite}
.scroll-mouse-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#d7c6b0}
.scroll-chevrons{display:flex;flex-direction:column;align-items:center}
.scroll-chevrons i{width:9px;height:9px;border-right:2px solid var(--saffron);border-bottom:2px solid var(--saffron);transform:rotate(45deg);margin-top:-3px;animation:qbp-chevron 1.6s infinite}
.scroll-chevrons i:nth-child(2){animation-delay:.2s}
.scroll-cue>span{animation:qbp-bob 1.6s ease-in-out infinite;border-color:#ffbc58aa;color:var(--saffron)}
@keyframes qbp-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@keyframes qbp-chevron{0%{opacity:0;transform:rotate(45deg) translate(-3px,-3px)}50%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(3px,3px)}}
@keyframes qbp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* 2. Interactive device + business cards */
button.setup-device{font:inherit;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
button.setup-device:hover{border-color:#c79e67;color:#76502c;transform:translateY(-1px)}
button.setup-device.selected-device{background:#e7d5b9;border-color:#c9a672;color:#76502c;box-shadow:0 4px 14px #93663222}
.setup-pocket-icon{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:width .3s,height .3s}
.setup-pocket-icon[data-device="tablet"]{width:78px!important;height:92px!important}
.setup-pocket-icon[data-device="computer"]{width:92px!important;height:80px!important}
.setup-mini-chips>button{font:inherit;font-size:11px;background:#f3e9da;border:1px solid #e8dbca;color:#9a826c;border-radius:6px;padding:7px 10px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.setup-mini-chips>button:hover{border-color:#d5b992;color:#76502c}
.setup-mini-chips>button.chosen{background:#e7d5b9;border-color:#d5b992;color:#76502c;font-weight:600}
.setup-mini-chips>.setup-more-biz{display:none}
.setup-mini-chips.show-more>.setup-more-biz,.setup-mini-chips>.setup-more-biz.chosen{display:inline-block}
.setup-mini-chips>.setup-more-toggle{background:transparent;border-style:dashed}
.is-swapping{animation:qbp-swap .35s ease-out}
@keyframes qbp-swap{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}

/* 3. "A weak internet connection…" — promoted to a display line, same family as the heading */
.foundations-section .section-heading{align-items:flex-end;gap:48px}
.foundations-section .section-heading>p{max-width:520px;font-family:var(--display);font-size:clamp(22px,2.1vw,31px);line-height:1.3;letter-spacing:-.025em;color:var(--ink);font-weight:500}

/* Offline switch: large, obvious, invites a tap */
.offline-control{align-items:center;padding:14px 16px;margin-bottom:6px;border:1px solid #b9c9a4;border-bottom:1px solid #b9c9a4;border-radius:16px;background:#f5f8ec}
.offline-control>span{font-size:10px;max-width:50%;color:#4f6340}
.offline-control>span b{display:block;font-size:13px;letter-spacing:.02em;font-weight:600;color:#39542d;margin-top:2px}
#demo-connection{gap:12px;font-size:16px;font-weight:600;color:#39542d;cursor:pointer;min-width:170px}
.connection-switch-track{width:66px;height:36px;border-width:2px;background:#d9a296;border-color:#c07f71}
.connection-switch-track>i{top:4px;left:4px;width:24px;height:24px;box-shadow:0 2px 6px #0003}
#demo-connection[aria-checked="true"] .connection-switch-track>i{transform:translateX(30px)}
#demo-connection[aria-checked="false"] .connection-switch-track{animation:qbp-ping 2s infinite}
@keyframes qbp-ping{0%{box-shadow:0 0 0 0 #c07f7166}70%{box-shadow:0 0 0 10px #c07f7100}100%{box-shadow:0 0 0 0 #c07f7100}}

/* 4. Business panels: real photo + floating app screen */
.business-photo-tag{background:#1b1930b3;color:#f6e1c6;backdrop-filter:blur(4px)}
.business-screen{display:none}
.story-businesses .business-panel--photo>img.business-screen:not([hidden]){display:block;position:absolute;inset:28px 6% auto auto;width:190px;height:auto;object-fit:contain;border:6px solid #1b1930;border-radius:26px;transform:rotate(6deg);box-shadow:0 22px 60px #000a;z-index:1}
.business-panel--photo .business-photo-shade{background:linear-gradient(90deg,#1b1930f2 0,#1b1930c7 38%,#1b193033 75%,#1b193055 100%)}
.business-panel--photo .business-panel-copy{max-width:56%;z-index:2}

@media(max-width:800px){
  .hero{min-height:0}
  .hero-peek{height:110px;margin-bottom:-40px}
  .scroll-mouse{position:static;transform:none;margin:0 auto}
  .hero-bottom{flex-direction:column;gap:14px}
  .hero-bottom .scroll-cue{display:none}
  .foundations-section .section-heading{gap:18px}
  .foundations-section .section-heading>p{font-size:22px;max-width:100%}
  .story-businesses .business-panel--photo>img.business-screen:not([hidden]){width:120px;inset:20px 5% auto auto;border-width:4px;border-radius:18px}
  .business-panel--photo .business-panel-copy{max-width:100%}
  .business-panel--photo .business-photo-shade{background:linear-gradient(0deg,#1b1930 0,#1b1930d9 50%,#1b193022 100%)}
}
@media(max-width:480px){
  .offline-control{flex-direction:column;align-items:flex-start;gap:6px}
  .offline-control>span{max-width:100%}
  #demo-connection{padding-left:0;justify-content:flex-start}
  .setup-mini-chips>button{font-size:10px;padding:6px 8px}
  .story-businesses .business-panel--photo>img.business-screen:not([hidden]){width:84px;inset:18px 5% auto auto;border-width:3px;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){.scroll-mouse-body i,.scroll-chevrons i,.scroll-cue>span,#demo-connection .connection-switch-track{animation:none!important}}
@media(min-width:801px){
  .hero-copy{padding-bottom:10px}
  .hero-bottom{padding:14px 0 16px}
  .scroll-mouse-label{display:none}
}
.business-panel--photo.business-panel--no-screen .business-panel-copy{max-width:62%}

/* 5. Section 03 heading: colour-keyed to the two cards below (purple = language card, sage = offline card) */
.foundations-section .section-heading h2.everyday-title{line-height:1.24;font-weight:400;color:#8a7f8f;letter-spacing:-.05em}
.everyday-title .et-key{display:inline-block;font-weight:600;padding:0 .16em .04em;margin-left:-.04em;border-radius:.2em;line-height:1.05}
.everyday-title .et-lang{background:#342b50;color:var(--cream);transform:rotate(-1.5deg)}
.everyday-title .et-pace{background:#e5edde;color:#304736;box-shadow:inset 0 0 0 2px #ced9c2;transform:rotate(1deg)}
.everyday-title .et-biz{background:var(--saffron);color:var(--night);transform:rotate(-1deg)}
.foundations-section .section-heading>p.everyday-lede{color:#8a7f8f;font-weight:400}
.everyday-lede .et-mark{background:none;font-weight:600;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.everyday-lede .et-mark-lang{color:#342b50;background:linear-gradient(transparent 62%,#342b5026 62%)}
.everyday-lede .et-mark-pace{color:#304736;background:linear-gradient(transparent 62%,#b9cfa6aa 62%)}
.everyday-title .et-key{padding:0 .1em .03em;margin-inline:-.02em}
.foundations-section .section-heading>p.everyday-lede,.foundations-section .section-heading h2.everyday-title{color:#6f6576}
@media(min-width:1101px){
  .foundations-section .section-heading>div{flex:1 1 auto;min-width:0}
  .everyday-title .et-line{white-space:nowrap}
  .foundations-section .section-heading>p.everyday-lede{max-width:470px;flex:0 1 470px}
}
.everyday-title .et-pair{white-space:nowrap}

/* 6. Lede redesign: the two obstacles as card-coloured chips, the goal underlined in saffron */
.foundations-section .section-heading>p.everyday-lede{display:flex;flex-direction:column;gap:14px;color:var(--ink);font-weight:450}
.lede-obstacles{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.lede-chip{display:inline-flex;align-items:center;gap:.45em;font-size:.62em;font-weight:600;letter-spacing:-.01em;line-height:1;padding:.55em .8em;border-radius:99px;white-space:nowrap;position:relative}
.lede-chip svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lede-chip-net{background:#e5edde;color:#304736;box-shadow:inset 0 0 0 1.5px #ced9c2}
.lede-chip-lang{background:#342b50;color:var(--cream)}
.lede-glyph{font-size:.9em;opacity:.8;font-weight:500}
.lede-or{font-size:.62em;color:var(--muted);font-weight:500}
.lede-rest{line-height:1.3}
.lede-goal{font-weight:600;color:var(--ink);background:linear-gradient(transparent 68%,#ffbc5899 68%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:480px){.lede-chip{font-size:.72em}.lede-or{font-size:.72em}}
.lede-goal{white-space:nowrap}
@media(max-width:800px){.foundations-section .section-heading>p.everyday-lede{font-size:20px}.lede-chip,.lede-or{font-size:.78em}}