/* Sugar Loop: a lively little candy shop. */

/* Iteration 01 */
 .hero-copy{position:relative;z-index:4}.hero-facts{display:flex;gap:30px;list-style:none;padding:24px 0 0;margin:26px 0 0;border-top:1px solid var(--line);max-width:440px}.hero-facts li{font-size:12px;color:var(--muted)}.hero-facts strong{display:block;font:500 23px/1.3 var(--display);color:var(--ink);margin-bottom:3px}.hero h1{letter-spacing:-.035em}.hero .eyebrow.pill{letter-spacing:.1em}.hero-art{isolation:isolate}@media(max-width:800px){.hero-facts{justify-content:center;margin:24px auto 0;gap:25px;padding-top:20px}.hero-copy{padding-bottom:28px}.hero-facts strong{font-size:21px}}

/* Iteration 02 */
 .ribbon{padding:18px 0 10px;background:#b92f4d}.ribbon-inner{padding-inline:20px}.candy-belt{height:45px;overflow:hidden;margin-top:12px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.belt-track{display:flex;width:max-content;animation:conveyor 30s linear infinite}.belt-group{display:flex;gap:45px;padding-right:45px}.belt-group .candy{--size:36px;filter:drop-shadow(0 3px 0 #6e153544)}@keyframes conveyor{to{transform:translateX(-50%)}}html[data-motion="reduced"] .belt-track,html[data-motion="paused"] .belt-track{animation-play-state:paused}

/* Iteration 03 */
 @keyframes shop-reveal{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.reveal-in{animation:shop-reveal .65s cubic-bezier(.22,1,.36,1) both}html[data-motion="paused"] .reveal-in,html[data-motion="reduced"] .reveal-in{animation:none}

/* Iteration 04 */
 .hero-machine{translate:var(--depth-x,0px) var(--depth-y,0px);transition:translate .45s ease-out}.hero-art .sparkle{animation:star-breathe 3.8s ease-in-out infinite;animation-play-state:paused}.hero-art.is-in-view .sparkle{animation-play-state:running}.hero-art .sparkle.two{animation-delay:1.2s}@keyframes star-breathe{50%{opacity:.4;scale:.8}}html[data-motion="reduced"] .hero-machine,html[data-motion="paused"] .hero-machine{translate:0 0;transition:none}html[data-motion="reduced"] .sparkle,html[data-motion="paused"] .sparkle{animation:none}@media(pointer:coarse){.hero-machine{translate:0 0}}

/* Iteration 05 */
 .gallery-controls button{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:15px;text-align:left;transition:background .2s,box-shadow .2s}.gallery-controls img{width:30px;height:52px;object-fit:cover;border-radius:6px}.gallery-controls button[aria-pressed=true]{box-shadow:0 4px 0 #27150f}.gallery-nav{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}.gallery-nav span{font:800 12px var(--body);font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--muted)}.round-button{width:44px;height:44px;border:1px solid #ccb197;border-radius:50%;background:var(--cream);font-size:21px}.round-button:hover{background:white}.gallery-title{min-height:22px}@media(max-width:390px){.gallery-controls{gap:6px}.gallery-controls button{font-size:10px;padding:7px}.gallery-controls img{display:none}}

/* Iteration 06 */
 [hidden]{display:none!important}.motion-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:auto;margin-right:22px;background:transparent;border:1px solid var(--line);border-radius:100px;padding:9px 12px;min-height:44px;font-size:11px;font-weight:800;color:var(--muted)}.motion-toggle:hover{background:#f4e8db}.motion-toggle:disabled{cursor:default}.motion-toggle[aria-pressed=true]{background:var(--mint);color:var(--green)}html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion="paused"] .site-header{height:var(--header-expanded)}html[data-motion="paused"] .site-header.is-compact{height:var(--header-compact)}html[data-motion="paused"] .site-header .brand-logo{width:var(--logo-expanded)}html[data-motion="paused"] .site-header.is-compact .brand-logo{width:var(--logo-compact)}html[data-page-hidden] .belt-track,html[data-page-hidden] .sparkle,.ribbon:not(.is-in-view) .belt-track{animation-play-state:paused}@media(max-width:800px){.motion-toggle{margin-right:10px;font-size:10px;padding:8px 10px}}

/* Iteration 11 */
 .flavors h2{margin-bottom:16px}.flavor-invitation{font-size:16px;margin-bottom:30px}.flavor-list button{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid transparent;background:transparent;border-radius:22px;padding:14px 6px;font:800 12px var(--body);width:100%;min-height:120px}.flavor-list button[aria-pressed=true]{background:#f5e8d4;border-color:#dbc2a3;box-shadow:0 4px 0 #e8d2b8}.flavor-list button:hover{background:#fff}.flavor-spotlight{display:flex;align-items:center;gap:28px;text-align:left;max-width:630px;margin:35px auto 0;padding:24px 30px;border-top:1px solid var(--line)}.flavor-large{--size:110px}.flavor-spotlight .eyebrow{font-size:10px;margin:0 0 5px}.flavor-spotlight h3{font-size:28px;margin:0 0 8px}.flavor-spotlight p:last-child{font-size:14px;min-height:46px;margin:0}@media(max-width:800px){.flavor-list{gap:10px}.flavor-spotlight{gap:18px;padding:24px 0}.flavor-large{--size:88px}.flavor-list button{min-height:105px}}@media(max-width:390px){.flavor-list button{font-size:10px;padding:10px 2px}.flavor-spotlight h3{font-size:25px}}

/* Iteration 12 */
 .twist-list{margin-top:30px;border-top:1px solid #decbb5}.twist-card{border-bottom:1px solid #decbb5}.twist-card summary{display:flex;align-items:center;gap:15px;list-style:none;padding:20px 0;cursor:pointer}.twist-card summary::-webkit-details-marker{display:none}.twist-card strong,.twist-card small{display:block}.twist-card strong{font:500 23px var(--display);margin-bottom:4px}.twist-card small{font-size:12px;line-height:1.6;color:var(--muted)}.twist-icon{width:50px;height:55px;display:grid;place-items:center;flex:none;font:500 34px var(--display);border-radius:12px;box-shadow:inset 3px 3px #fff6,0 4px 0 #56352520}.twist-ice{background:#d9eff2;color:#4c849b;border:1px solid #9bc4d3;rotate:-8deg}.twist-mystery{background:#daccdf;color:#825391;border:1px solid #ac8dbb;rotate:6deg}.twist-bar{background:#754b32;color:#e9c48b;border:1px solid #63422f;rotate:-5deg}.twist-plus{margin-left:auto;color:var(--pink);font-size:26px;transition:transform .2s}.twist-card[open] .twist-plus{transform:rotate(45deg)}.twist-card>p{font-size:15px;line-height:1.8;padding:0 18px 20px 65px;margin:0}.twist-card[open] summary{padding-bottom:12px}@media(max-width:390px){.twist-card summary{gap:12px}.twist-card strong{font-size:21px}.twist-card>p{padding-left:0}.twist-icon{width:44px;height:49px}}

/* Iteration 13 */
 .toolkit{background:#fffaf2;border-bottom:1px solid var(--line)}.toolkit-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px}.toolkit h2{margin-bottom:20px}.toolkit p{max-width:420px}.booster-options{display:flex;gap:13px;margin-top:30px}.booster-options button{display:grid;justify-items:center;gap:7px;min-width:98px;padding:14px 17px;border:1px solid var(--line);border-radius:20px;background:#fffdf8;font:800 12px var(--body);color:var(--pink);transition:background .2s,transform .2s}.booster-options svg{width:41px;height:41px}.booster-options button[aria-pressed=true]{background:#fbe8e7;border-color:#d89b9c;box-shadow:0 4px 0 #ecc4bf}.booster-options button:hover{transform:translateY(-3px)}.booster-options button span{color:var(--ink)}.booster-display{text-align:center;padding:30px 45px;background:#f6eddf;border-radius:45% 45% 26px 26px;border:1px solid #ead6bc}.booster-display .eyebrow{font-size:10px;margin:0 0 9px}.booster-display h3{font-size:35px;margin:0 0 13px}.booster-display p:last-child{font-size:16px;min-height:80px;margin:0}.booster-illustration{position:relative;height:190px;display:grid;place-items:center}.booster-illustration svg{width:140px;height:140px;color:var(--pink);rotate:-12deg;filter:drop-shadow(0 10px 0 #d6b3a544)}.booster-illustration>.candy{--size:52px;position:absolute;right:0;bottom:30px;rotate:12deg}.tool-sparkle{font-size:50px;color:#ba8a43;position:absolute;top:5px;left:15px}@media(max-width:1000px){.toolkit-layout{gap:40px}.booster-display{padding:30px}}@media(max-width:800px){.toolkit-layout{grid-template-columns:minmax(0,1fr);gap:35px;max-width:590px;text-align:center}.toolkit p{margin-inline:auto}.booster-options{justify-content:center}.booster-display{max-width:420px;width:100%;margin:auto}.booster-display p:last-child{min-height:60px}}@media(max-width:390px){.booster-options{gap:8px}.booster-options button{min-width:0;flex:1;padding:14px 10px}}

/* Iteration 14 */
 .mobile-download{display:none}@media(max-width:800px){body:has(.mobile-download){padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}.mobile-download{display:flex;align-items:center;gap:10px;position:fixed;z-index:35;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));padding:11px;background:#fffaf2f5;border:1px solid #dfc5a6;border-radius:20px;box-shadow:0 6px 35px #52332130}.mobile-download img{border-radius:11px;flex:none}.mobile-download>div{min-width:0;flex:1}.mobile-download strong{display:block;font:500 19px var(--display)}.mobile-download>div span{font-size:9px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-download a{display:inline-flex;align-items:center;gap:6px;padding:11px 14px;min-height:44px;border-radius:100px;background:var(--pink);color:#fff;text-decoration:none;font-size:12px;font-weight:900;flex:none}.dialog-open .mobile-download,body:has(.nav.is-open) .mobile-download{display:none}}@media(max-width:350px){.mobile-download{left:8px;right:8px;gap:8px}.mobile-download>div span{display:none}.mobile-download a{padding:11px}.mobile-download strong{font-size:17px}}

/* Iteration 15 */
 .download-qr{width:224px;max-width:100%;margin:0 auto;text-align:center}.download-qr>a{display:block;background:white;border:1px solid #abc7b2;border-radius:24px;padding:12px;box-shadow:0 8px 0 #bad4c2}.download-qr img{width:100%;height:auto;border-radius:6px}.download-qr figcaption{margin-top:22px;font-size:12px;color:var(--green)}.download-qr strong{display:block;font:500 22px var(--display);margin-bottom:7px}.download-qr span{display:block}@media(max-width:800px){.download-qr{display:none}.launch-panel{padding-bottom:38px}}

/* Iteration 16 */
.small-button{border:1px solid #cbb396;border-radius:100px;background:var(--paper);padding:10px 16px;min-height:44px;font:800 12px var(--body)}.small-button:hover{background:white}
 .share-row{margin-top:23px}.copy-shop{background:#edf7f0;border-color:#9abca6;color:var(--green)}.share-status{display:block;min-height:21px;font-size:12px;margin-top:8px;color:var(--green)}.share-fallback label{display:block;font-size:12px;margin-bottom:5px}.share-fallback input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #88a98f;border-radius:9px;font:14px var(--body);color:var(--ink);background:#fff}

/* Iteration 17 */
 .home-questions{background:#f5ecdf;margin-bottom:80px;border-block:1px solid #eadbc7}.questions-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:95px;align-items:start}.questions-layout h2{font-size:46px;margin-bottom:24px}.questions-layout>div>p{font-size:16px}.questions-layout .text-link{margin-top:10px}.home-questions .faq summary{font-size:16px}.home-questions .faq details>div{font-size:15px}@media(max-width:800px){.home-questions{margin-bottom:55px}.questions-layout{grid-template-columns:minmax(0,1fr);gap:25px;max-width:590px}.questions-layout h2{font-size:39px}.questions-layout>div:first-child{text-align:center}}

/* Iteration 20 */
 .nav a[aria-current=location]{color:var(--pink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}.back-to-top{display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:900;text-underline-offset:4px;margin-top:12px}a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.button:active{transform:translateY(1px)}.small-button,.booster-options button,.flavor-list button{touch-action:manipulation}.menu-open .mobile-download{display:none!important}@media(min-width:801px) and (max-width:1020px){.menu-toggle{display:flex}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);padding:18px 27px 26px;border-bottom:1px solid var(--line);box-shadow:0 20px 25px #4b2b2412;gap:10px;flex-direction:column;align-items:stretch}.nav.is-open{display:flex}.nav a{padding:12px}.nav .nav-cta{margin-top:4px}.motion-toggle{margin-right:12px}}@media(max-width:800px){body.has-mobile-download{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}.back-to-top{display:flex;justify-content:center}}@media(max-width:350px){.motion-toggle{padding:8px;gap:4px;margin-right:6px;font-size:9px}.hero-facts{gap:16px}.hero-facts strong{font-size:19px}}@media(prefers-reduced-motion:reduce){.hero-machine{translate:0 0}.belt-track,.sparkle,.reveal-in{animation:none!important}}@media print{.motion-toggle,.mobile-download,.copy-shop,.back-to-top{display:none!important}.candy-belt{display:none}}

/* Refinement 1: consistent spacing and fluid hero proportions. */
.section { padding-block: clamp(64px, 6.5vw, 94px); }
.hero-copy > p, .intro > p, .story-copy > p { text-wrap: pretty; }
.hero-facts { gap: 32px; }
.hero-facts li + li { padding-left: 28px; border-left: 1px solid var(--line); }
@media (min-width: 801px) and (max-width: 1100px) {
  .hero h1 { font-size: clamp(48px, 5.7vw, 63px); }
  .hero-copy { padding-block: 48px; }
}
@media (max-width: 800px) {
  .hero-copy { padding-top: 36px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(42px, calc(7.4vw + 16px), 64px); }
  .hero-art { height: clamp(430px, 125vw, 580px); }
  .hero-machine { height: calc(100% - 28px); right: clamp(-12px, calc(7vw - 30px), 6px); }
  .hero-phone { width: clamp(138px, 38vw, 170px); left: clamp(0px, 2vw, 12px); }
  .hero-facts { gap: 24px; margin-top: 24px; }
  .hero-facts li + li { padding-left: 24px; }
  .how-grid { margin-top: 36px; }
}
@media (max-width: 350px) {
  .hero-facts { gap: 18px; }
  .hero-facts li + li { padding-left: 18px; }
}

/* Refinement 2: readable gallery choices and a comfortable screenshot viewer. */
.gallery-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 440px;
  margin-inline: auto;
}
.gallery-controls button {
  min-width: 0;
  min-height: 64px;
  justify-content: center;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.gallery-controls button span { text-wrap: balance; }
.gallery-title { font-size: 13px; line-height: 1.6; }
.dialog-header { gap: 16px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { line-height: 1.3; }
.dialog-close { width: 44px; height: 44px; flex: none; }
.screen-dialog { max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.screen-dialog img { max-height: calc(100dvh - 180px); object-fit: contain; }
.screen-dialog figcaption { font-size: 13px; }
@media (max-width: 480px) {
  .gallery-controls img { display: none; }
  .gallery-controls button { min-height: 52px; padding: 9px 7px; font-size: 12px; text-align: center; }
  .gallery-nav { margin-top: 24px; }
  .dialog-header { padding: 12px 16px; }
  .dialog-header h2 { font-size: 17px; }
  .screen-dialog figure { padding-inline: 16px; }
}

/* Refinement 3: steadier, easier-to-read existing showcases and answers. */
.flavor-list li { min-width: 0; }
.flavor-list button { font-size: 12px; line-height: 1.4; padding: 14px 5px; }
.flavor-spotlight { align-items: flex-start; }
.flavor-spotlight > div { min-width: 0; flex: 1; }
.flavor-spotlight p:last-child { font-size: 15px; line-height: 1.7; min-height: 5.1em; text-wrap: pretty; }
.booster-options button { font-size: 13px; }
.booster-display p:last-child { line-height: 1.7; min-height: 5.1em; text-wrap: pretty; }
.twist-card small { font-size: 13px; }
.twist-card > p { font-size: 16px; }
.home-questions .faq summary { font-size: 17px; }
.faq summary::after { flex: none; min-width: 20px; text-align: center; }
.faq details > div, .home-questions .faq details > div { font-size: 16px; line-height: 1.8; }
@media (max-width: 800px) {
  .booster-display p:last-child { min-height: 6.8em; }
}
@media (max-width: 480px) {
  .flavor-list button { min-height: 112px; }
  .flavor-large { --size: 80px; }
  .flavor-spotlight { gap: 20px; }
  .flavor-spotlight p:last-child { min-height: 8.5em; }
  .booster-display { padding: 28px 24px; }
  .faq details > div { padding-right: 12px; }
}
@media (max-width: 350px) {
  .flavor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flavor-list button { min-height: 108px; }
  .flavor-large { --size: 64px; }
  .flavor-spotlight { gap: 16px; }
  .flavor-spotlight p:last-child { min-height: 10.2em; }
}

/* Refinement 4: clearer navigation, anchor placement, and touch access. */
html { scroll-padding-top: 108px; }
.legal-copy section { scroll-margin-top: 0; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-links { column-gap: 24px; row-gap: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-toggle { flex: none; }
@media (max-width: 1020px) {
  .nav { max-height: calc(100dvh - 144px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 96px; scroll-padding-bottom: 108px; }
  .header-inner { gap: 12px; }
  .motion-toggle { margin-right: 0; flex: none; white-space: nowrap; }
}
@media (max-width: 350px) {
  .header-inner { gap: 8px; }
  .motion-toggle { padding-inline: 8px; }
}

/* Refinement 5: seamless existing motion and a pause that holds its place. */
.belt-group { min-width: 100vw; flex-shrink: 0; justify-content: space-around; }
.motion-toggle > [aria-hidden] { display: inline-block; width: 1em; text-align: center; }
html[data-motion="paused"] .belt-track {
  animation: conveyor 30s linear infinite !important;
  animation-play-state: paused !important;
}