﻿:root {
  --brown: #5b2709;
  --brown-dark: #351406;
  --gold: #d89500;
  --gold-light: #ffc52d;
  --cream: #fff9e9;
  --page: #fffdf8;
  --shadow: 0 14px 34px rgb(112 69 2 / 13%);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--brown-dark); background: var(--page); font-family: "Be Vietnam Pro", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header { position: relative; z-index: 20; height: 84px; background: rgb(255 255 255 / 94%); border-bottom: 1px solid #f1e9d6; }
.header-inner { width: min(1460px, calc(100% - 180px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 44px; }
.brand { width: 276px; display: block; margin-right: auto; }
.brand img { width: 100%; height: auto; }
.primary-nav { display: flex; align-self: stretch; align-items: center; gap: 50px; font-size: 15px; color: #27201c; }
.primary-nav a { height: 100%; display: grid; place-items: center; border-bottom: 3px solid transparent; }
.primary-nav a:hover, .primary-nav .is-active { color: #7a3e05; border-bottom-color: var(--gold); }
.header-cta { margin-left: 56px; padding: 15px 34px; color: #fff; font-weight: 700; border-radius: 15px; background: linear-gradient(135deg, #e0a629, #c37b00); box-shadow: 0 8px 18px rgb(187 119 0 / 18%); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 856px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 61% 44%, #fffef8 0 18%, transparent 44%), linear-gradient(105deg, #fff8df 0%, #fffdf5 51%, #fff3c8 100%); }
.hero::before { content: ""; position: absolute; inset: auto -4% 153px -4%; height: 135px; z-index: -1; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateY(72px); }
.hero-inner { width: min(1460px, calc(100% - 180px)); min-height: 690px; margin: auto; display: grid; grid-template-columns: 50% 50%; align-items: center; }
.hero-copy { position: relative; z-index: 4; padding: 34px 0 10px; }
.origin-pill { width: max-content; max-width: 100%; padding: 11px 28px 11px 22px; display: flex; align-items: center; gap: 16px; text-transform: uppercase; font-size: 16px; font-weight: 800; border-radius: 999px; color: #60320c; background: linear-gradient(90deg, #fff1be, #fff6d7); }
.japan-flag { width: 45px; height: 31px; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 10%)); }
h1 { margin: 22px 0 10px; font-size: clamp(62px, 5vw, 84px); line-height: .99; letter-spacing: -.055em; color: #6c3007; }
h1 span { display: inline-block; white-space: nowrap; color: transparent; background: linear-gradient(90deg, #c27a00 0%, #f2a900 50%, #d87324 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 1px #fff; filter: drop-shadow(0 2px 0 #fff); }
.hero-lead { margin: 10px 0 25px; font-size: clamp(28px, 2.15vw, 39px); line-height: 1.25; font-weight: 700; letter-spacing: -.035em; }
.benefits { display: flex; gap: 14px; }
.benefit { height: 79px; min-width: 218px; padding: 7px 23px 7px 8px; display: flex; align-items: center; gap: 14px; border: 1.5px solid currentColor; border-radius: 999px; background: rgb(255 255 255 / 72%); font-size: 22px; }
.benefit-icon { width: 62px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 6px rgb(255 255 255 / 45%); }
.benefit-icon svg { width: 37px; height: 37px; }
.benefit-brain { color: #e98d00; }.benefit-brain .benefit-icon { background: #ffad0c; }
.benefit-bone { color: #ee4c70; }.benefit-bone .benefit-icon { background: #fa6686; }
.benefit-gut { color: #007ccf; }.benefit-gut .benefit-icon { background: #078fdf; }
.main-cta { width: min(550px, 100%); min-height: 84px; margin-top: 27px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; border: 1px solid #d38800; border-radius: 24px; background: linear-gradient(180deg, #ffc329, #dc8d00); box-shadow: inset 0 2px 1px rgb(255 255 255 / 70%), 0 11px 24px rgb(178 108 0 / 23%); font-size: 28px; font-weight: 900; }
.main-cta:hover { transform: translateY(-2px); filter: saturate(1.08); }
.main-cta svg { width: 38px; height: 38px; flex: 0 0 auto; }

.hero-visual { position: relative; align-self: stretch; min-width: 0; z-index: 3; }
.sun-disc { position: absolute; width: 570px; aspect-ratio: 1; right: 7%; top: 19%; border-radius: 50%; background: linear-gradient(145deg, #fff2a9, #ffc95e); opacity: .7; }
.child { position: absolute; z-index: 2; height: 650px; width: auto; right: -1%; bottom: 0; object-fit: contain; filter: drop-shadow(0 18px 18px rgb(99 65 14 / 12%)); }
.product { position: absolute; z-index: 5; object-fit: contain; filter: drop-shadow(0 15px 15px rgb(83 48 0 / 22%)); }
.product-box { width: 260px; height: 385px; left: 25%; bottom: 40px; transform: none; }
.product-bottle { width: 185px; height: 345px; left: 3%; bottom: 34px; }
.product-stage { position: absolute; z-index: 4; width: 640px; height: 91px; left: -5%; bottom: 7px; border: 1px solid #e5be6e; border-radius: 50%; background: linear-gradient(#fff3ca, #e8bd70); box-shadow: 0 22px 28px rgb(89 53 0 / 15%), inset 0 8px 0 #fff8df; }
.leaves { position: absolute; z-index: 3; left: -5%; bottom: 70px; width: 500px; height: 120px; }
.leaves i { position: absolute; width: 110px; height: 42px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #84b92e, #245e16); transform-origin: right center; }
.leaves i:nth-child(1){left:0;top:20px;transform:rotate(28deg)}.leaves i:nth-child(2){left:55px;top:5px;transform:rotate(57deg)}.leaves i:nth-child(3){right:40px;top:16px;transform:scaleX(-1) rotate(35deg)}.leaves i:nth-child(4){right:0;top:48px;transform:scaleX(-1) rotate(7deg)}
.pattern { position: absolute; z-index: 0; opacity: .35; }
.pattern-one { width: 310px; height: 250px; right: 32%; top: 80px; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 17px, #efd082 18px 21px); clip-path: inset(0 0 48% 0); }
.pattern-two { width: 260px; height: 220px; right: -40px; bottom: 130px; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 21px, #e6b84d 22px 25px); }
.trust-wrap { position: relative; z-index: 10; width: min(1540px, calc(100% - 84px)); margin: -1px auto 0; }
.trust-list { min-height: 102px; padding: 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-radius: 21px; background: rgb(255 255 255 / 94%); box-shadow: var(--shadow); }
.trust-item { min-height: 66px; padding: 0 38px; display: flex; align-items: center; gap: 24px; font-size: 19px; }
.trust-item + .trust-item { border-left: 1px solid #e4d0aa; }
.trust-icon { width: 56px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; color: #7b4109; border-radius: 50%; background: #fff2c7; }
.trust-icon svg { width: 38px; height: 38px; }
.trust-icon .mobile-flag { display: none; width: 48px; height: 34px; }
.trust-arrow { width: 22px; height: 34px; display: none; margin-left: auto; color: #a87b54; }
.disclaimer { margin: 15px 0 0; text-align: center; color: #766e65; font-size: 14px; }
.anchor-target { display: block; }

/* Section 02 — assurance */
.assurance { position: relative; min-height: 941px; padding: 140px 0 120px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0 8%, #fffaf0 20%, #fff5d9 80%, #fff 100%); }
.assurance-shell { position: relative; width: min(1672px, 100%); min-height: 510px; margin: auto; }
.assurance-heading { position: relative; z-index: 4; margin: 0 auto 47px; text-align: center; }
.assurance-heading h2 { margin: 0; color: #552000; font-size: clamp(48px, 4.8vw, 72px); line-height: 1; letter-spacing: -.035em; }
.desktop-assurance-copy { margin: 14px 0 0; font-size: clamp(25px, 2.25vw, 36px); line-height: 1.2; font-weight: 500; }
.mobile-assurance-title, .mobile-assurance-copy, .assurance-eyebrow, .assurance-accent { display: none; }
.assurance-product { position: absolute; z-index: 5; left: 0; bottom: 7px; width: 360px; height: 430px; }
.assurance-product img { position: absolute; z-index: 4; width: 205px; height: 390px; left: 92px; bottom: 43px; object-fit: contain; filter: drop-shadow(0 13px 12px rgb(96 57 0 / 17%)); }
.assurance-podium { position: absolute; z-index: 3; width: 365px; height: 82px; left: -3px; bottom: 0; border: 1px solid #e2ba69; border-radius: 50%; background: linear-gradient(#fff2c4, #e8bd70); box-shadow: 0 17px 23px rgb(91 54 0 / 12%), inset 0 7px 0 #fff9e6; }
.assurance-sun { display: none; }
.assurance-leaves { position: absolute; z-index: 2; inset: auto 0 59px 0; height: 150px; }
.assurance-leaves i { position: absolute; width: 125px; height: 47px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #88bc32, #276817); }
.assurance-leaves i:nth-child(1) { left: 5px; top: 33px; transform: rotate(27deg); }.assurance-leaves i:nth-child(2) { left: -27px; top: 79px; transform: rotate(8deg); }.assurance-leaves i:nth-child(3) { right: 5px; top: 89px; transform: scaleX(-1) rotate(12deg); }
.assurance-grid { position: relative; z-index: 3; width: calc(100% - 330px); min-height: 325px; margin-left: 300px; padding: 31px 42px 27px 73px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-radius: 0 38px 38px 0; background: rgb(255 255 255 / 91%); box-shadow: 0 12px 32px rgb(118 74 4 / 8%); }
.assurance-card { min-width: 0; min-height: 242px; padding: 0 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.assurance-card + .assurance-card { border-left: 1px solid #e1cda7; }
.assurance-card-icon { position: relative; width: 168px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; color: #7f470d; border-radius: 50%; background: radial-gradient(circle, #fffdf3, #fff0bd); }
.assurance-card-icon > svg { width: 96px; height: 96px; }
.assurance-card-icon .assurance-flag { position: absolute; width: 55px; height: 39px; right: 16px; bottom: 17px; }
.assurance-card p { min-height: 68px; margin: 15px 0 0; display: flex; flex-direction: column; justify-content: center; font-size: 27px; line-height: 1.13; }
.assurance-card p span, .assurance-card p strong { display: block; }
.assurance-card p strong { font-weight: 800; }
.assurance-pattern { position: absolute; z-index: 0; opacity: .32; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 19px, #e8c368 20px 23px); }
.assurance-pattern-left { width: 270px; height: 210px; left: 100px; top: 83px; }.assurance-pattern-right { width: 320px; height: 250px; right: 0; top: 60px; }

/* Section 03 — parent concerns */
.concerns { min-height: 940px; padding: 55px 0 90px; overflow: hidden; background: linear-gradient(135deg, #fffdf7, #fff3c9); }
.concerns-shell { width: min(1580px, calc(100% - 72px)); margin: auto; }
.concerns-heading { margin-bottom: 38px; text-align: center; }.concerns-heading > span { width: 73px; height: 4px; margin: 0 auto 23px; display: block; border-radius: 99px; background: #cc8500; }
.concerns-heading h2 { margin: 0; color: #582100; font-size: clamp(42px, 4vw, 62px); line-height: 1.13; font-style: normal; }.concerns-heading em { color: #bd7900; font-style: normal; }
.concerns-layout { display: grid; grid-template-columns: 3fr 1.08fr; gap: 28px; }
.concern-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.concern-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgb(104 61 0 / 9%); }
.concern-card picture, .concern-card picture img { width: 100%; height: 365px; display: block; object-fit: cover; }
.concern-copy { min-height: 161px; padding: 22px 22px 20px 29px; display: flex; align-items: center; gap: 19px; }
.concern-icon { width: 94px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; color: #6a3007; border-radius: 50%; background: radial-gradient(circle, #fffdf4, #ffefba); }.concern-icon svg { width: 61px; height: 61px; }
.concern-copy strong { font-size: clamp(20px, 1.62vw, 27px); line-height: 1.3; }
.concerns-solution { display: flex; flex-direction: column; gap: 18px; }.solution-visual { position: relative; min-height: 415px; }.solution-visual::before { content: ""; position: absolute; width: 390px; aspect-ratio: 1; right: 10px; top: 8px; border-radius: 50%; background: #ffe99e; }
.solution-visual img { position: absolute; z-index: 3; object-fit: contain; filter: drop-shadow(0 13px 13px rgb(84 48 0 / 18%)); }.solution-box { width: 230px; height: 345px; right: 22px; bottom: 40px; }.solution-bottle { width: 174px; height: 330px; left: 35px; bottom: 31px; }.solution-podium { position: absolute; z-index: 2; width: 100%; height: 70px; bottom: 0; border-radius: 50%; background: linear-gradient(#fff0bc, #dfae54); }
.concerns-solution a { min-height: 83px; padding: 0 28px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; border-radius: 23px; background: linear-gradient(#f6b51b, #cc7f00); box-shadow: inset 0 2px #ffe69e, 0 9px 20px rgb(141 83 0 / 18%); font-size: 27px; font-weight: 900; }.concerns-solution a svg { width: 35px; height: 35px; }

/* Section 04 — growth journey */
.growth-journey { min-height: 941px; padding: 79px 0 68px; overflow: hidden; background: radial-gradient(circle at 73% 52%, #fff1ac, transparent 31%), linear-gradient(120deg, #fffdf8, #fff3cb); }
.journey-shell { position: relative; width: min(1505px, calc(100% - 130px)); min-height: 794px; margin: auto; }
.journey-heading { position: relative; z-index: 4; width: 66%; }.journey-origin { width: max-content; padding: 10px 23px; display: flex; align-items: center; gap: 15px; border-radius: 999px; background: #fff2c8; text-transform: uppercase; font-size: 17px; font-weight: 800; }.journey-origin svg { width: 48px; height: 33px; }
.journey-heading h2 { margin: 25px 0 8px; font-size: clamp(45px, 3.8vw, 63px); line-height: 1.08; letter-spacing: -.04em; }.journey-heading h2 span,.journey-heading h2 em { display: block; white-space: nowrap; font-style: normal; }.journey-heading h2 span { color: #542000; }.journey-heading h2 em { color: #c27d00; }.journey-heading p { margin: 0; font-size: 31px; font-weight: 600; }
.age-timeline { position: relative; z-index: 5; width: 58%; margin-top: 114px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }.age-timeline::before { content: ""; position: absolute; left: 9%; right: 9%; top: -61px; height: 3px; background: #d89813; }
.age-card { position: relative; min-height: 245px; padding: 52px 14px 15px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 17px; background: rgb(255 255 255 / 90%); box-shadow: 0 9px 20px rgb(110 65 0 / 7%); }.age-card::before { content: ""; position: absolute; width: 19px; height: 19px; top: -71px; border: 5px solid #fff9e9; border-radius: 50%; background: #d99400; box-shadow: 0 0 0 2px #d99400; }
.age { position: absolute; top: -39px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; color: #572500; background: radial-gradient(circle, #fffdf3, #ffe9a4); font-size: 26px; line-height: .9; }.age-card > img { display: none; }.age-icon { width: 106px; aspect-ratio: 1; display: grid; place-items: center; color: #f2a000; border-radius: 50%; background: #fff3c8; }.age-icon svg { width: 62px; height: 62px; }.age-bone { color: #f04c6c; background: #ffe7ed; }.age-chart { color: #43b84f; background: #e7f8e5; }.age-shield { color: #078ce0; background: #e2f3ff; }.age-card p { margin: 13px 0 0; font-size: 21px; line-height: 1.25; font-weight: 700; }.mobile-age-copy { display: none; }
.journey-visual { position: absolute; z-index: 3; width: 49%; height: 760px; right: -4%; bottom: -12px; }.journey-child { position: absolute; z-index: 2; height: 720px; right: 3%; bottom: 5px; }.journey-podium { position: absolute; z-index: 4; width: 650px; height: 105px; left: -2%; bottom: 0; border-radius: 50%; background: linear-gradient(#fff2c1,#e6b965); }.journey-box,.journey-bottle { position: absolute; z-index: 5; object-fit: contain; filter: drop-shadow(0 13px 13px rgb(88 51 0 / 18%)); }.journey-box { width: 280px; height: 420px; left: 35%; bottom: 61px; }.journey-bottle { width: 196px; height: 375px; left: 10%; bottom: 52px; }
.journey-cta { position: relative; z-index: 7; width: 54%; min-height: 92px; margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; border-radius: 22px; color: #fff; background: linear-gradient(#f8bb24,#d38600); box-shadow: inset 0 2px #ffe6a1,0 10px 21px rgb(124 73 0 / 18%); font-size: 31px; font-weight: 900; }.journey-cta svg { width: 38px; height: 38px; }

/* Section 05 — height factors */
.height-factors { position:relative; min-height:941px; padding:55px 0 80px; overflow:hidden; isolation:isolate; background:#fff8e4 url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-05-background-desktop-v2.webp") center/cover no-repeat; }
.height-factors::before{content:"";display:none}
.height-factors::after{content:"";display:none}
.factors-shell { position:relative; z-index:1; width:min(1500px,calc(100% - 150px)); min-height:806px; margin:auto; }
.factors-heading { position: relative; z-index: 4; width: 62%; }.factors-kicker { width: max-content; margin: 0 0 24px; padding: 10px 23px; border-radius: 99px; background: #fff2c9; text-transform: uppercase; font-weight: 800; }.desktop-factor-kicker{display:flex;align-items:center;gap:13px}.desktop-factor-kicker svg{width:42px;height:29px}.mobile-factor-kicker{display:none}.factors-heading h2 { margin: 0; font-size: clamp(52px,4.5vw,74px); line-height: 1.1; }.factors-heading h2 span,.factors-heading h2 em { display: block; white-space: nowrap; font-style: normal; }.factors-heading h2 span { color:#552000 }.factors-heading h2 em { color:#c98200 }.factors-heading > p:last-child { display:none; }
.factor-panels { position:relative; z-index:5; width:63%; margin-top:25px; display:grid; grid-template-columns:1.05fr 2fr; gap:14px }.factor-panel { min-height:475px; padding:31px 28px; text-align:center; border:1px solid #edcf87; border-radius:20px; background:rgb(255 255 255 / 91%); box-shadow:0 16px 34px rgb(111 67 0 / 8%),inset 0 1px rgb(255 255 255 / 90%) }.factor-number { display:block; color:#dc8b00; font-size:91px; line-height:1 }.factor-panel h3 { margin:8px 0 16px; font-size:25px }.factor-panel > p { margin:0; color:#4f4a45; font-size:18px; line-height:1.45 }.factor-icon { display:grid; place-items:center; color:#7b430a; border-radius:50%; background:#fff0bc }.factor-icon svg{width:58%;height:58%}.dna-icon{width:150px;aspect-ratio:1;margin:0 auto 8px}.lifestyle-icons{margin:199px -12px 0;display:grid;grid-template-columns:repeat(4,1fr)}.lifestyle-icons>div{padding:0 9px;display:flex;flex-direction:column;align-items:center}.lifestyle-icons>div+div{border-left:1px solid #ead7b1}.lifestyle-icons .factor-icon{width:90px;aspect-ratio:1}.lifestyle-icons b{margin-top:8px}.lifestyle-icons small{margin-top:8px;font-size:14px;line-height:1.25}.lifestyle-panel{position:relative}.lifestyle-panel>.factor-number{position:absolute;top:25px;left:0;right:0}.lifestyle-panel>h3{position:absolute;top:135px;left:20px;right:20px}.mobile-factor-copy{display:none}
.factors-visual{position:absolute;z-index:3;width:46%;height:790px;right:-2%;bottom:-10px}.factors-child{position:absolute;z-index:2;height:760px;right:22%;bottom:0}.factors-podium{position:absolute;z-index:4;width:520px;height:95px;right:-4%;bottom:0;border-radius:50%;background:linear-gradient(#fff1bd,#e4b45c)}.factors-bottle,.factors-box{position:absolute;z-index:5;object-fit:contain;filter:drop-shadow(0 12px 13px rgb(80 44 0 / 17%))}.factors-bottle{width:170px;height:330px;right:28%;bottom:50px}.factors-box{width:220px;height:350px;right:-1%;bottom:55px}.factors-cta{display:none}

/* Section 06 — formula */
.formula{min-height:941px;padding:93px 0 80px;overflow:hidden;background:linear-gradient(135deg,#fffdf7,#fff2c9)}.formula-shell{position:relative;width:min(1580px,calc(100% - 95px));min-height:768px;margin:auto}.formula-heading{position:relative;z-index:4;width:67%}.formula-heading>p{width:max-content;margin:0;padding:10px 34px;border:1px solid #c9860d;border-radius:99px;text-transform:uppercase;font-size:18px;font-weight:800}.formula-heading h2{margin:22px 0 0;font-size:clamp(45px,3.9vw,64px);line-height:1.08}.formula-heading h2 span,.formula-heading h2 em{display:block;white-space:nowrap;font-style:normal}.formula-heading h2 span{color:#542000}.formula-heading h2 em{color:#c37c00}.formula-heading>i{width:95px;height:5px;margin-top:20px;display:block;border-radius:99px;background:#d69300}.formula-heading>div{display:none}.formula-cards{position:relative;z-index:5;width:65%;margin-top:35px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.formula-card{min-height:365px;padding:19px 14px;text-align:center;border-radius:17px;background:rgb(255 255 255 / 88%);box-shadow:0 9px 20px rgb(103 61 0 / 8%)}.formula-card>div{display:contents}.formula-icon{width:108px;aspect-ratio:1;margin:auto;display:grid;place-items:center;color:#fff;border-radius:50%;box-shadow:inset 0 0 0 7px rgb(255 255 255 / 38%)}.formula-icon svg{width:60%;height:60%}.calcium{background:#f5ad2a}.protetite{background:#f26b89}.vitamin{background:#249ceb}.gpc{background:#63c94e}.formula-card h3{margin:10px 0 5px;font-size:24px}.formula-card b{padding:8px;display:block;border-radius:99px;background:#fff2c5;font-size:17px}.formula-card p{margin:24px 0 0;color:#555;font-size:16px;line-height:1.5}.formula-visual{position:absolute;z-index:3;width:35%;height:550px;right:-1%;bottom:45px}.formula-podium{position:absolute;z-index:2;width:100%;height:90px;bottom:0;border-radius:50%;background:linear-gradient(#fff0bb,#e2af53)}.formula-visual img{position:absolute;z-index:3;object-fit:contain;filter:drop-shadow(0 12px 13px rgb(80 45 0 / 18%))}.formula-bottle{width:39%;height:390px;left:3%;bottom:50px}.formula-box{width:52%;height:440px;right:0;bottom:55px}.formula-cta{position:relative;z-index:6;width:52%;min-height:94px;margin:32px 0 0 32px;display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;border-radius:23px;background:linear-gradient(#f6b91f,#d38400);font-size:30px;font-weight:900}.formula-cta svg{width:37px;height:37px}

.solution{min-height:941px;padding:100px 0 70px;overflow:hidden;background:linear-gradient(140deg,#fffdf8,#fff4d7)}.solution-shell{position:relative;width:min(1530px,calc(100% - 150px));min-height:760px;margin:auto}.solution-heading{position:relative;z-index:4;width:59%}.solution-heading>p{display:none}.solution-heading h2{margin:0;color:#542000;font-size:clamp(50px,4.4vw,72px);line-height:1}.solution-heading h2 em{color:#dc8d00;font-style:normal}.solution-heading h3{margin:13px 0 20px;color:#542000;font-size:clamp(27px,2.4vw,39px);line-height:1.15}.solution-heading>i{display:none}.solution-heading>div{color:#4e4542;font-size:21px;line-height:1.55}.solution-cards{position:relative;z-index:5;width:53%;margin-top:30px;display:grid;gap:16px}.solution-card{min-height:104px;padding:12px 25px;display:flex;align-items:center;gap:26px;border-radius:18px;background:rgb(255 255 255 / 92%);box-shadow:0 8px 20px rgb(96 55 0 / 7%)}.solution-icon{width:80px;aspect-ratio:1;flex:0 0 auto;display:grid;place-items:center;color:#fff;border-radius:50%;box-shadow:inset 0 0 0 7px rgb(255 255 255 / 30%)}.solution-icon svg{width:61%;height:61%}.solution-icon.nutrient{background:#f3a900}.solution-icon.children{background:#ff6685}.solution-icon.japan{color:#188ee1;background:#e8f4ff}.solution-card>div{padding-left:26px;border-left:1px solid #edd49c}.solution-card h4{margin:0 0 4px;color:#481a0c;font-size:23px}.solution-card p{margin:0;color:#645b58;font-size:17px}.mobile-solution-copy,.mobile-only{display:none}.solution-product-visual{position:absolute;z-index:3;width:50%;height:650px;right:-4%;bottom:0}.solution-product-podium{position:absolute;z-index:1;width:94%;height:135px;right:0;bottom:0;border-radius:50%;background:linear-gradient(#fff6d4,#e7c78e);box-shadow:0 12px 20px rgb(101 58 0 / 12%)}.solution-product-visual img{position:absolute;z-index:3;object-fit:contain;filter:drop-shadow(0 13px 12px rgb(82 47 0 / 18%))}.solution-product-bottle{width:38%;height:470px;left:12%;bottom:70px}.solution-product-box{width:49%;height:550px;right:4%;bottom:72px}.solution-product-leaves{position:absolute;inset:0;z-index:2}.solution-product-leaves i{position:absolute;width:120px;height:52px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#9abe36,#397b18);transform:rotate(25deg)}.solution-product-leaves i:nth-child(1){left:0;bottom:130px}.solution-product-leaves i:nth-child(2){left:5%;bottom:85px;transform:rotate(-15deg)}.solution-product-leaves i:nth-child(3){right:0;bottom:90px;transform:rotate(145deg)}.solution-cta{position:relative;z-index:6;width:44%;min-height:85px;margin:27px 0 0 60px;display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;border-radius:22px;background:linear-gradient(#f8bd26,#d88800);font-size:28px;font-weight:900}.solution-cta svg{width:38px;height:38px}

.solution-heading{width:62%}.solution-heading h2{font-size:clamp(48px,3.8vw,62px)}.solution-heading h3{font-size:clamp(26px,2.05vw,34px)}

.mechanism{min-height:941px;padding:22px 0 45px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff2ce)}.mechanism-shell{position:relative;width:min(1440px,calc(100% - 150px));min-height:870px;margin:auto}.mechanism-heading{text-align:center}.mechanism-heading p{width:max-content;margin:0 auto 12px;padding:10px 38px;border:2px solid #d99000;border-radius:99px;font-size:18px;font-weight:800}.mechanism-heading h2{margin:0;color:#542000;font-size:clamp(49px,4.1vw,68px);line-height:1.12}.mechanism-heading h2 em{color:#db9000;font-style:normal}.mechanism-heading>div{font-size:25px}.mechanism-cards{position:relative;z-index:4;margin-top:23px;display:grid;grid-template-columns:repeat(3,1fr);gap:52px}.mechanism-card{position:relative;min-height:426px;padding:20px 42px;text-align:center;border:1px solid #f0d594;border-radius:26px;background:rgb(255 255 255 / 88%)}.stage-number{position:absolute;top:6px;left:14px;width:74px;aspect-ratio:1;display:grid;place-items:center;color:#fff;border:5px solid #fff;border-radius:50%;background:#efa900;font-size:34px;font-weight:900;box-shadow:0 0 0 2px #f3bf42}.stage-two .stage-number{background:#ff8b19}.stage-three .stage-number{background:#62bd42}.mechanism-icon{width:220px;aspect-ratio:1;margin:0 auto;display:grid;place-items:center;color:#6a2d10;border-radius:50%;background:#fff0bd}.stage-two .mechanism-icon{background:#ffe3db}.stage-three .mechanism-icon{background:#e9f8cc}.mechanism-icon svg{width:68%;height:68%}.mechanism-card h3{margin:4px 0 8px;color:#542000;font-size:26px}.mechanism-card p{margin:0;color:#56382d;font-size:19px;line-height:1.45}.mobile-mechanism-copy{display:none}.mechanism-product{position:absolute;z-index:5;width:490px;height:290px;left:50%;bottom:0;transform:translateX(-50%)}.mechanism-product div{position:absolute;width:100%;height:65px;bottom:0;border-radius:50%;background:linear-gradient(#fff1bf,#e4bd77)}.mechanism-product img{position:absolute;z-index:2;bottom:30px;object-fit:contain}.mechanism-product img:nth-of-type(1){width:145px;height:245px;left:95px}.mechanism-product img:nth-of-type(2){width:185px;height:275px;right:85px}.mechanism-cta{position:absolute;z-index:6;width:430px;min-height:82px;right:0;bottom:70px;display:flex;align-items:center;justify-content:center;gap:15px;color:#fff;border-radius:20px;background:linear-gradient(#f8bd27,#d98b00);font-size:25px;font-weight:900}.mechanism-cta svg{width:34px;height:34px}

.alpha{min-height:941px;padding:28px 0 34px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff2cc)}.alpha-shell{width:min(1580px,calc(100% - 95px));margin:auto}.alpha-heading{text-align:center}.alpha-heading p{width:210px;margin:0 auto 8px;padding:8px;border:2px solid #d58a00;border-radius:99px;font-size:23px;font-weight:900}.alpha-heading h2{margin:0;color:#542000;font-size:clamp(38px,3.4vw,56px)}.alpha-heading h2 em{color:#db8d00;font-style:normal}.alpha-layout{margin-top:20px;display:grid;grid-template-columns:42% 30% 28%;grid-template-rows:390px 190px;gap:18px}.alpha-molecule{grid-row:1/3;padding:30px;text-align:center;border-radius:26px;background:rgb(255 255 255 / 75%)}.molecule{position:relative;width:350px;aspect-ratio:1;margin:0 auto 10px;display:grid;place-items:center;color:#fff;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff8a5,#f1a500 60%,#cc7900);box-shadow:0 0 45px #ffd34e}.molecule b{font-size:45px}.molecule i{position:absolute;width:62px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#f4b313 55%,#d77d00)}.molecule i:nth-child(2){left:-45px;top:65px}.molecule i:nth-child(3){right:-38px;top:55px}.molecule i:nth-child(4){left:0;bottom:-30px}.molecule i:nth-child(5){right:-5px;bottom:-25px}.molecule i:nth-child(6){top:-35px;left:145px}.alpha-molecule h3{margin:22px 0 4px;font-size:26px}.alpha-molecule p{margin:0;font-size:19px;line-height:1.45}.mobile-alpha-copy{display:none}.alpha-benefits{display:grid;gap:14px}.alpha-benefit{min-height:116px;padding:12px 24px;display:flex;align-items:center;gap:25px;border-radius:22px;background:#fff}.alpha-benefit span{width:76px;aspect-ratio:1;display:grid;place-items:center;color:#fff;border-radius:50%;background:#f6a900}.alpha-benefit:nth-child(2) span{background:#ff8c78}.alpha-benefit:nth-child(3) span{background:#73c85a}.alpha-benefit svg{width:58%;height:58%}.alpha-benefit p{margin:0;font-size:22px}.alpha-sleep{grid-column:2/4;display:grid;grid-template-columns:32% 1fr;overflow:hidden;border-radius:22px;background:#fff}.alpha-sleep img{width:100%;height:100%;object-fit:cover}.alpha-sleep div{padding:18px 28px}.alpha-sleep h3{margin:0 0 7px;font-size:25px}.alpha-sleep p{margin:0;font-size:19px}.alpha-product{position:relative;min-height:390px}.alpha-product>div{position:absolute;width:100%;height:70px;bottom:0;border-radius:50%;background:linear-gradient(#fff0ba,#dfb565)}.alpha-product>img{position:absolute;z-index:2;bottom:32px;object-fit:contain}.alpha-product>img:nth-of-type(1){width:35%;height:250px;left:12%}.alpha-product>img:nth-of-type(2){width:44%;height:310px;right:8%}.alpha-product>p{display:none}.alpha-cta{width:550px;min-height:82px;margin:20px auto 0;display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;border-radius:25px;background:linear-gradient(#f8bd28,#d98900);font-size:28px;font-weight:900}.alpha-cta svg{width:35px;height:35px}

.protetite-section{min-height:941px;padding:24px 0 45px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff0c7)}.protetite-shell{position:relative;width:min(1600px,calc(100% - 64px));min-height:870px;margin:auto}.protetite-heading{text-align:center}.protetite-heading>p{width:180px;margin:0 auto 10px;padding:9px;border:2px solid #d38a00;border-radius:99px;font-size:22px;font-weight:900}.protetite-heading h2{margin:0;color:#542000;font-size:clamp(38px,3.3vw,55px)}.protetite-heading h2 em{color:#db8d00;font-style:normal}.protetite-heading>div{display:none}.protetite-cards{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.protetite-card{min-height:220px;padding:25px;display:flex;align-items:flex-start;gap:25px;border-radius:22px;background:#fff}.pt-icon{width:130px;aspect-ratio:1;flex:0 0 auto;display:grid;place-items:center;color:#fff;border-radius:50%;background:#f2a800}.pt-icon.collagen{background:#fa6a8a}.pt-icon.complex{background:#1aa0ed}.pt-icon svg{width:67%;height:67%}.protetite-card h3{margin:18px 0 18px;padding-bottom:16px;border-bottom:1px solid #e9d4af;font-size:24px}.protetite-card p{margin:0;font-size:18px;line-height:1.45}.bone-flow{width:56%;min-height:405px;margin-top:20px;padding:28px 32px;border-radius:22px;background:rgb(255 255 255 / 82%)}.bone-flow>h3{width:max-content;margin:0 0 28px;padding:10px 25px;border:1px solid #d99413;border-radius:99px;font-size:19px}.bone-flow>div{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:20px;text-align:center}.bone-flow article span{width:170px;height:170px;margin:auto;display:grid;place-items:center}.matrix-icon{background:repeating-linear-gradient(45deg,transparent 0 15px,#e3cda8 16px 21px),repeating-linear-gradient(-45deg,transparent 0 15px,#efd9b4 16px 21px);border-radius:22px}.matrix-icon.filled{background-color:#fff0b7;box-shadow:inset 0 0 0 18px rgb(240 175 0 / 20%)}.bone-icon{color:#e2bd79;transform:rotate(-18deg)}.bone-icon svg{width:100%;height:100%}.bone-flow p{font-size:17px;font-weight:700}.bone-flow b{font-size:44px;color:#d88b00}.protetite-product{position:absolute;width:43%;height:410px;right:0;bottom:10px}.protetite-product>div{position:absolute;width:100%;height:90px;bottom:0;border-radius:50%;background:linear-gradient(#fff2c8,#e3bd77)}.protetite-product>img{position:absolute;z-index:2;bottom:45px;object-fit:contain}.protetite-product>img:nth-of-type(1){width:30%;height:295px;left:20%}.protetite-product>img:nth-of-type(2){width:40%;height:370px;right:12%}.protetite-product article{display:none}.protetite-cta{position:absolute;z-index:5;width:430px;min-height:76px;right:4%;bottom:0;display:flex;align-items:center;justify-content:center;gap:15px;color:#fff;border-radius:19px;background:linear-gradient(#f8bd28,#d98900);font-size:26px;font-weight:900}.protetite-cta svg{width:34px;height:34px}

.absorption{min-height:941px;padding:48px 0;overflow:hidden;background:linear-gradient(140deg,#fffdf8,#fff1c7)}.absorption-shell{position:relative;width:min(1570px,calc(100% - 100px));min-height:830px;margin:auto}.absorption-heading{width:72%}.absorption-heading>p{width:210px;margin:0 0 18px;padding:10px;text-align:center;color:#fff;border-radius:22px;background:linear-gradient(#eab334,#c97c00);font-size:28px;font-weight:900}.absorption-heading h2{margin:0;color:#542000;font-size:clamp(40px,3.45vw,57px)}.absorption-heading h2 em{color:#d88900;font-style:normal}.absorption-heading>div{margin-top:12px;font-size:25px}.absorption-steps{position:relative;z-index:4;width:65%;margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}.absorption-step{position:relative;min-height:265px;padding:18px 12px;text-align:center;border-radius:18px;background:#fff}.absorption-step:not(:last-child)::after{content:"›";position:absolute;right:-29px;top:95px;color:#c47a00;font-size:45px}.absorption-step h3{margin:0 0 8px;font-size:25px}.abs-icon{width:115px;aspect-ratio:1;margin:auto;display:grid;place-items:center;color:#fff;border-radius:50%;background:#f3a800}.abs-icon.d3{background:#ff8c61}.abs-icon.cpp{background:#f46f90}.abs-icon.uptake{background:#70c84d}.abs-icon svg{width:62%;height:62%}.absorption-step p{font-size:17px}.lacto-card{position:relative;z-index:4;width:62%;min-height:150px;margin-top:20px;padding:18px 28px;display:flex;align-items:center;gap:30px;border-radius:20px;background:#fff}.lacto-card>span{width:110px;aspect-ratio:1;display:grid;place-items:center;color:#fff;border-radius:50%;background:#219de8}.lacto-card svg{width:65%;height:65%}.lacto-card h3{margin:0 0 8px;font-size:26px}.lacto-card p{margin:0;font-size:19px}.absorption-product{position:absolute;width:40%;height:460px;right:-1%;bottom:0}.absorption-product>div{position:absolute;width:100%;height:90px;bottom:0;border-radius:50%;background:linear-gradient(#fff2c6,#dfb86d)}.absorption-product>img{position:absolute;z-index:2;bottom:45px;object-fit:contain}.absorption-product>img:nth-of-type(1){width:31%;height:320px;left:18%}.absorption-product>img:nth-of-type(2){width:41%;height:400px;right:10%}.absorption-cta{width:46%;min-height:86px;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:15px;color:#fff;border-radius:20px;background:linear-gradient(#f8bd28,#d98900);font-size:27px;font-weight:900}.absorption-cta svg{width:34px;height:34px}

.whole-development{min-height:941px;padding:80px 0 45px;overflow:hidden;background:linear-gradient(140deg,#fffdf8,#fff2cf)}.development-shell{position:relative;width:min(1550px,calc(100% - 100px));min-height:810px;margin:auto}.development-heading{text-align:center}.development-heading h2{margin:0;color:#542000;font-size:clamp(42px,3.6vw,60px);line-height:1.14}.development-heading h2 em{color:#db8c00;font-style:normal}.development-heading p{margin:12px 0 25px;font-size:22px}.development-hero{position:absolute;inset:100px 0 0}.development-hero>img{position:absolute;z-index:2;object-fit:contain}.development-hero>img:first-child{width:28%;height:760px;left:-5%;bottom:-60px}.development-hero>div{position:absolute;width:25%;height:90px;right:-2%;bottom:70px;border-radius:50%;background:linear-gradient(#fff1c2,#dfb66d)}.development-hero>img:nth-of-type(2){width:10%;height:300px;right:16%;bottom:110px}.development-hero>img:nth-of-type(3){width:14%;height:370px;right:1%;bottom:112px}.development-cards{position:relative;z-index:4;width:60%;margin:30px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.development-card{min-height:330px;padding:18px 12px;text-align:center;border-radius:17px;background:#fff}.development-card span{width:105px;aspect-ratio:1;margin:auto;display:grid;place-items:center;color:#fff;border-radius:50%;background:#f2a700}.development-card:nth-child(2) span{background:#f26e78}.development-card:nth-child(3) span{background:#6ac44e}.development-card:nth-child(4) span{background:#ff8c2f}.development-card:nth-child(5) span{background:#1c9ee8}.development-card svg{width:63%;height:63%}.development-card h3{margin:12px 0;font-size:21px}.development-card p{font-size:15px;line-height:1.4}.development-cta{position:relative;z-index:5;width:560px;min-height:86px;margin:30px auto 0;display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;border-radius:21px;background:linear-gradient(#f8bd28,#d98900);font-size:29px;font-weight:900}.development-cta svg{width:35px;height:35px}

.ingredients{min-height:941px;padding:75px 0 45px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff1c7)}.ingredients-shell{position:relative;width:min(1550px,calc(100% - 100px));min-height:800px;margin:auto}.ingredients h2{text-align:center;margin:0;color:#542000;font-size:clamp(40px,3.4vw,56px)}.ingredients h2 em{color:#d89100;font-style:normal}.ingredients-product{position:absolute;width:42%;height:590px;left:0;top:130px}.ingredients-product>div{position:absolute;width:100%;height:90px;bottom:0;border-radius:50%;background:linear-gradient(#fff2c4,#dfb66b)}.ingredients-product img{position:absolute;z-index:2;bottom:48px;object-fit:contain}.ingredients-product img:nth-of-type(1){width:31%;height:390px;left:15%}.ingredients-product img:nth-of-type(2){width:43%;height:500px;right:10%}.ingredient-list{width:56%;margin:30px 0 0 auto;display:grid;gap:9px}.ingredient-row{min-height:77px;padding:7px 12px 7px 18px;display:grid;grid-template-columns:90px 1fr 250px;align-items:center;border-radius:18px;background:#fff}.ingredient-icon{width:68px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;color:#c17800;background:#fff0c9}.ingredient-icon.collagen,.ingredient-icon.muscle{color:#d53763;background:#ffe1e5}.ingredient-icon.brain{color:#db8700}.ingredient-icon.fish,.ingredient-icon.gut{color:#168bd0;background:#dff4ff}.ingredient-icon.leaf{color:#398f2b;background:#e5f8d7}.ingredient-icon svg{width:65%;height:65%}.ingredient-row strong{font-size:23px}.ingredient-row b{padding:14px;text-align:center;border-radius:16px;background:#fff1c9;font-size:25px}.dosage{position:absolute;width:39%;min-height:110px;left:1%;bottom:0;padding:15px 34px;display:flex;align-items:center;gap:30px;border-radius:18px;background:#fff}.dosage svg{width:75px;height:75px;color:#fff;padding:15px;border-radius:50%;background:#eba100}.dosage p{margin:0;display:flex;gap:15px;font-size:25px}.dosage span{font-weight:800}.ingredients-cta{display:none}

.japan-origin{min-height:941px;padding:75px 0 40px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff1c8)}.origin-shell{position:relative;width:min(1590px,calc(100% - 80px));min-height:810px;margin:auto}.origin-heading{text-align:center}.origin-heading>p{display:none}.origin-heading h2{margin:0;color:#542000;font-size:clamp(42px,3.6vw,60px);line-height:1.18}.origin-heading h2 em{padding:5px 70px;display:inline-block;color:#fff;border-radius:99px;background:linear-gradient(#e8b844,#c77a00);font-style:normal}.origin-product{display:none}.origin-cards{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.origin-card{position:relative;min-height:610px;padding:16px;text-align:center;border:1px solid #e9bd5c;border-radius:20px;background:#fff;overflow:hidden}.origin-card>img{width:100%;height:325px;object-fit:cover}.origin-card>span{width:110px;aspect-ratio:1;margin:-55px auto 10px;position:relative;display:grid;place-items:center;color:#713400;border-radius:50%;background:#ffedbd;box-shadow:0 0 0 7px #fff}.origin-card svg{width:58%;height:58%}.origin-card h3{margin:0 0 12px;font-size:27px}.origin-card p{margin:0;font-size:19px;line-height:1.45}

.legal-profile{min-height:941px;padding:75px 0 45px;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff1c8)}.legal-shell{position:relative;width:min(1580px,calc(100% - 100px));min-height:810px;margin:auto}.legal-heading{text-align:center}.legal-heading p{display:none}.legal-heading h2{margin:0;color:#542000;font-size:clamp(45px,3.8vw,63px)}.legal-heading h2 em{color:#d88b00;font-style:normal}.legal-heading div{font-size:24px}.legal-product{position:absolute;width:27%;height:560px;left:-3%;bottom:0}.legal-product>div{position:absolute;width:100%;height:80px;bottom:0;border-radius:50%;background:linear-gradient(#fff1c2,#dfb66e)}.legal-product>img{position:absolute;z-index:2;bottom:42px;object-fit:contain}.legal-product>img:nth-of-type(1){width:34%;height:310px;left:7%}.legal-product>img:nth-of-type(2){width:48%;height:420px;right:2%}.legal-product>p{display:none}.legal-cards{width:73%;margin:30px 0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.legal-card{min-height:620px;padding:16px;display:flex;flex-direction:column;border:1px solid #e7bf71;border-radius:18px;background:#fff}.legal-card img{width:100%;height:430px;object-fit:contain;background:#faf8f2}.legal-card h3{margin:15px 0;text-align:center;font-size:20px}.legal-card a{min-height:65px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;border-radius:16px;background:linear-gradient(#e9b539,#c77b00);font-size:20px;font-weight:900}.legal-card a svg{width:28px;height:28px}
.legal-meta,.legal-trust-strip{display:none}

.usage{min-height:941px;padding:25px 0;overflow:hidden;background:linear-gradient(145deg,#fffdf8,#fff1c8)}.usage-shell{position:relative;width:min(1450px,calc(100% - 120px));min-height:890px;margin:auto}.usage-logo{width:300px}.usage h2{width:60%;margin:45px 0 25px;color:#542000;font-size:clamp(70px,7vw,112px);line-height:1}.usage h2 em{display:block;color:#d68a00;font-style:normal}.usage-cards{position:relative;z-index:4;width:62%;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.usage-card{min-height:370px;padding:20px 12px;text-align:center;border:1px solid #e8c36f;border-radius:18px;background:#fff}.usage-card span{width:150px;aspect-ratio:1;margin:auto;display:grid;place-items:center;color:#703400;border-radius:50%;background:#fff0c8}.usage-card svg{width:65%;height:65%}.usage-card h3{font-size:27px}.usage-visual{position:absolute;width:48%;height:850px;right:-5%;bottom:0}.usage-visual>img{position:absolute;z-index:2;object-fit:contain}.usage-visual>img:first-child{width:78%;height:800px;right:0;top:0}.usage-visual>div{position:absolute;width:85%;height:90px;right:0;bottom:0;border-radius:50%;background:linear-gradient(#fff1c2,#dfb66e)}.usage-visual>img:nth-of-type(2){width:26%;height:330px;left:18%;bottom:45px}.usage-visual>img:nth-of-type(3){width:38%;height:430px;right:2%;bottom:48px}
.usage-eyebrow,.usage-dose-band,.usage-timing{display:none}

.packages{min-height:941px;padding:20px 0 50px;background:linear-gradient(145deg,#fffdf8,#fff1c8)}.packages-shell{width:min(1530px,calc(100% - 100px));margin:auto;text-align:center}.packages-shell>img{display:none}.packages h2{margin:0;color:#542000;font-size:clamp(48px,4.2vw,70px)}.packages h2 em{color:#d58a00;font-style:normal}.packages-shell>p{margin:5px;font-size:25px;font-weight:700}.package-grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.package-card{min-height:490px;padding:15px;border:1px solid #edc66e;border-radius:20px;background:#fff}.pack-images{height:340px;display:flex;align-items:end;justify-content:center}.pack-images img{width:34%;height:320px;object-fit:contain;margin:0 -3%}.package-card h3{margin:0 auto 10px;padding:8px;border-radius:99px;background:#fff0c4;font-size:34px}.package-card strong{display:block;font-size:43px}.package-card b{display:none}.offer-bar{margin-top:20px;min-height:155px;display:grid;grid-template-columns:32% 30% 38%;grid-template-rows:1fr 1fr;align-items:center;border-radius:20px;background:#fff}.offer-bar>strong{grid-row:1/3;height:100%;display:grid;place-items:center;color:#fff;background:#7d3c08;font-size:55px}.offer-bar p{margin:0;font-size:23px;font-weight:700}.offer-bar time{font-size:45px;font-weight:900}.offer-bar a{grid-column:3;grid-row:1/3;margin:25px;min-height:90px;display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;border-radius:20px;background:linear-gradient(#f5b92c,#d68500);font-size:32px;font-weight:900}.offer-bar svg{display:none}
.packages-eyebrow,.package-mobile-benefits{display:none}.package-recommendation-copy{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.faq{min-height:941px;padding:35px 0;background:linear-gradient(145deg,#fffdf8,#fff1c8)}.faq-shell{position:relative;width:min(1570px,calc(100% - 100px));min-height:870px;margin:auto}.faq header{text-align:center}.faq header h2{margin:0;color:#542000;font-size:clamp(40px,3.4vw,56px)}.faq header h2 em{color:#d88b00;font-style:normal}.faq header p{margin:5px;font-size:22px}.faq-product{position:absolute;width:48%;height:560px;left:-3%;top:150px}.faq-product>div{position:absolute;width:70%;height:80px;left:20%;bottom:0;border-radius:50%;background:linear-gradient(#fff1c2,#dfb66e)}.faq-product img{position:absolute;z-index:2;bottom:45px;object-fit:contain}.faq-product img:nth-of-type(1){width:25%;height:310px;left:33%}.faq-product img:nth-of-type(2){width:36%;height:420px;right:8%}.faq-list{width:50%;margin:30px 0 0 auto;display:grid;gap:16px}.faq-item{border-radius:18px;background:#fff}.faq-item summary{min-height:105px;padding:12px 30px;display:flex;align-items:center;gap:25px;cursor:pointer;font-size:24px;font-weight:800;list-style:none}.faq-item summary::after{content:"⌄";margin-left:auto;font-size:32px}.faq-item summary span{width:72px;aspect-ratio:1;display:grid;place-items:center;color:#7a3c00;border-radius:50%;background:#fff0c3}.faq-item summary svg{width:55%;height:55%}.faq-item>p{margin:0;padding:0 30px 22px 127px;font-size:17px}.faq-cta{position:absolute;width:440px;min-height:100px;right:0;bottom:105px;display:flex;align-items:center;justify-content:center;gap:15px;color:#fff;border-radius:20px;background:linear-gradient(#f5b92b,#d68500);font-size:31px;font-weight:900}.faq-cta svg{width:35px;height:35px}.faq-trust{position:absolute;width:68%;left:0;bottom:100px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.faq-trust div{min-height:100px;padding:15px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:15px;background:#fff;font-size:20px}.faq-trust svg{width:58px;height:58px;color:#7a3c00}.faq-disclaimer{position:absolute;width:100%;bottom:0;margin:0;padding:20px;text-align:center;border:1px solid #edc36f;border-radius:16px}
.faq-eyebrow,.consultation-privacy{display:none}

.alpha-product { grid-column: 3; grid-row: 1; }

@media (max-width: 1180px) and (min-width: 768px) {
  .assurance-product { transform: scale(.86); transform-origin: left bottom; }
  .assurance-grid { width: calc(100% - 250px); margin-left: 250px; padding-left: 65px; }
  .assurance-card { padding: 0 12px; }.assurance-card-icon { width: 125px; }.assurance-card-icon > svg { width: 75px; height: 75px; }.assurance-card p { font-size: 20px; }
}

@media (max-width: 1180px) and (min-width: 768px) {
  .primary-nav { gap: 24px; }.header-cta { margin-left: 10px; }.hero-copy { padding-left: 0; }
  .benefit { min-width: 0; padding-right: 16px; font-size: 18px; }.benefit-icon { width: 50px; }
  .product-box { left: 21%; }.product-stage { width: 560px; }.trust-item { padding: 0 14px; font-size: 15px; }
}

@media (max-width: 767px) {
  .site-header { height: 92px; border-radius: 0 0 22px 22px; box-shadow: 0 8px 20px rgb(104 63 0 / 8%); }
  .header-inner { width: calc(100% - 32px); gap: 18px; }
  .brand { width: 245px; max-width: calc(100% - 62px); }
  .menu-toggle { width: 48px; height: 48px; margin-left: auto; padding: 4px; display: grid; place-items: center; color: #6c350c; border: 0; background: transparent; }
  .menu-toggle svg { width: 100%; height: 100%; }
  .primary-nav { position: absolute; inset: 92px 12px auto; padding: 12px; display: none; align-self: auto; gap: 0; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
  .primary-nav.is-open { display: flex; }.primary-nav a { width: 100%; height: auto; padding: 13px; border: 0; }
  .header-cta { display: none; }
  .hero { min-height: 0; padding-bottom: 24px; background: radial-gradient(circle at 50% 36%, #fffef8 0 10%, transparent 48%), linear-gradient(115deg, #fff9e6, #fff3c5); }
  .hero::before { display: none; }
  .hero-inner { width: 100%; min-height: auto; padding: 34px 20px 0; display: flex; flex-direction: column; }
  .hero-copy { width: 100%; padding: 0; display: contents; text-align: center; }
  .origin-pill { order: 1; width: 100%; justify-content: center; align-self: center; padding: 9px 8px; gap: 0; border: 1px solid #d79518; background: rgb(255 255 255 / 55%); font-size: clamp(10px, 3vw, 15px); white-space: nowrap; }
  .origin-pill .japan-flag { display: none; }
  h1 { order: 2; margin: 17px auto 7px; font-size: clamp(43px, 13.3vw, 67px); line-height: 1.03; letter-spacing: -.06em; }
  h1 span { display: block; white-space: nowrap; font-size: clamp(29px, 8.7vw, 44px); }
  .hero-lead { order: 3; margin: 3px auto 0; max-width: 680px; font-size: clamp(19px, 5.4vw, 29px); line-height: 1.3; }
  .desktop-only { display: none; }
  .hero-visual { order: 4; width: calc(100% + 40px); height: min(75vw, 520px); margin: 13px -20px -3px; }
  .sun-disc { width: 72vw; right: -15%; top: 0; }
  .child { height: 95%; left: -7%; right: auto; bottom: -1%; }
  .product-box { width: 36%; height: 73%; left: 56%; bottom: 3%; }.product-bottle { width: 27%; height: 61%; left: 39%; bottom: 1%; }
  .product-stage { width: 62%; height: 12%; left: 35%; bottom: -1%; }
  .leaves { left: -4%; bottom: 3%; width: 105%; opacity: .8; }
  .benefits { order: 5; width: 100%; gap: 9px; }
  .benefit { min-width: 0; width: calc(33.333% - 6px); height: clamp(70px, 20vw, 94px); padding: 7px; justify-content: center; gap: 8px; border: 0; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgb(121 78 8 / 11%); font-size: clamp(13px, 3.8vw, 19px); color: #40200d; }
  .benefit-icon { width: clamp(43px, 12vw, 61px); }
  .main-cta { order: 6; width: 100%; min-height: clamp(72px, 19vw, 96px); margin-top: 17px; border-radius: 17px; font-size: clamp(18px, 5vw, 26px); }
  .trust-wrap { width: calc(100% - 40px); margin: 21px auto 0; }
  .trust-list { padding: 10px 20px; grid-template-columns: 1fr; border-radius: 16px; }
  .trust-item { min-height: 72px; padding: 0 3px; gap: 18px; text-align: left; font-size: clamp(14px, 4vw, 20px); }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid #e6ded4; }
  .trust-icon { width: 48px; background: #fff2c7; }.trust-icon .desktop-factory { display: none; }.trust-icon .mobile-flag { display: block; }.trust-arrow { display: block; }
  .disclaimer { margin: 19px 0 0; padding: 14px 16px; border: 1px solid #efcf85; border-radius: 14px; background: rgb(255 255 255 / 55%); color: #4f2b1c; font-size: clamp(12px, 3.5vw, 17px); line-height: 1.45; }
  .pattern-one { right: -130px; top: 90px; }.pattern-two { left: -120px; right: auto; bottom: 47%; }

  .assurance { min-height: 0; padding: 68px 0 77px; background: linear-gradient(135deg, #fffdf8 0%, #fff2c9 100%); }
  .assurance-shell { width: 100%; min-height: 0; padding: 0 24px; }
  .assurance-heading { min-height: 480px; margin: 0; padding: 0 0 0 16px; text-align: left; }
  .assurance-eyebrow { width: 62%; margin: 0 0 20px; padding: 10px 8px; display: block; text-align: center; text-transform: uppercase; border: 1.5px solid #bd7400; border-radius: 999px; background: rgb(255 255 255 / 38%); font-size: clamp(13px, 3.7vw, 19px); font-weight: 800; }
  .assurance-heading h2 { width: 54%; font-size: clamp(32px, 7vw, 52px); line-height: 1.22; letter-spacing: -.04em; }
  .desktop-assurance-title, .desktop-assurance-copy { display: none; }.mobile-assurance-title { display: inline; }
  .mobile-assurance-copy { width: 56%; margin: 13px 0 0; display: block; font-size: clamp(14px, 3vw, 18px); line-height: 1.55; }
  .assurance-accent { width: 52px; height: 6px; margin-top: 16px; display: block; border-radius: 99px; background: #e59b00; }
  .assurance-product { width: 45%; height: 440px; left: auto; right: 0; top: 0; bottom: auto; }
  .assurance-product img { width: 90%; height: 365px; left: 0; bottom: 45px; }
  .assurance-podium { width: 112%; height: 69px; left: -12%; bottom: 0; }
  .assurance-sun { position: absolute; inset: 44px -70px auto auto; width: 340px; aspect-ratio: 1; display: block; border-radius: 50%; background: radial-gradient(circle, #fff6c4, #ffd66b); opacity: .72; }
  .assurance-leaves { inset: auto 0 58px auto; width: 160px; }.assurance-leaves i:nth-child(1), .assurance-leaves i:nth-child(2) { display: none; }.assurance-leaves i:nth-child(3) { right: -17px; top: 60px; }
  .assurance-grid { width: 100%; min-height: 0; margin: 0; padding: 0; gap: 16px; grid-template-columns: 1fr; border-radius: 0; background: transparent; box-shadow: none; }
  .assurance-card { min-height: 151px; padding: 17px 25px; flex-direction: row; justify-content: flex-start; gap: 24px; text-align: left; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgb(111 68 0 / 8%); }
  .assurance-card + .assurance-card { border-left: 0; }
  .assurance-card-icon { width: 102px; }
  .assurance-card-icon > svg { width: 67px; height: 67px; }.assurance-card-icon .assurance-factory { display: none; }.assurance-card-icon .assurance-flag { position: static; width: 70px; height: 49px; }
  .assurance-card p { min-width: 0; min-height: 84px; margin: 0; padding-left: 25px; justify-content: center; border-left: 1px solid #e5cf9f; font-size: clamp(19px, 5vw, 27px); line-height: 1.25; }
  .assurance-card p strong { margin-top: 5px; }
  .assurance-pattern-left { left: -110px; top: 345px; }.assurance-pattern-right { right: -90px; top: 65px; }

  .concerns { min-height: 0; padding: 58px 0 70px; }.concerns-shell { width: calc(100% - 38px); }
  .concerns-heading { margin-bottom: 25px; }.concerns-heading > span { width: 51px; margin-bottom: 22px; }.concerns-heading h2 { font-size: clamp(30px, 8vw, 43px); line-height: 1.28; }.concerns-heading h2 br { display: none; }.concerns-heading em { color: inherit; }
  .concerns-layout { display: flex; flex-direction: column; gap: 27px; }.concern-cards { grid-template-columns: 1fr; gap: 13px; }
  .concern-card { min-height: 184px; display: grid; grid-template-columns: 41% 59%; border-radius: 14px; }.concern-card picture { grid-column: 2; grid-row: 1; }.concern-card picture, .concern-card picture img { height: 100%; min-height: 184px; }.concern-copy { grid-column: 1; grid-row: 1; min-height: 184px; padding: 17px 12px 17px 18px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }.concern-icon { width: 82px; margin: 0 auto; }.concern-icon svg { width: 54px; height: 54px; }.concern-copy strong { font-size: clamp(16px, 4.4vw, 23px); line-height: 1.25; }.concern-copy strong br { display: none; }
  .concerns-solution { display: block; }.solution-visual { display: none; }.concerns-solution a { min-height: 82px; border-radius: 18px; font-size: clamp(20px, 5.5vw, 28px); }

  .growth-journey { min-height: 0; padding: 40px 0 54px; }.journey-shell { width: calc(100% - 34px); min-height: 0; }.journey-heading { width: 100%; text-align: center; }.journey-origin { margin: auto; padding: 9px 14px; font-size: clamp(11px,3.1vw,16px); }.journey-origin svg { width: 39px; height: 28px; }.journey-heading h2 { margin: 22px -5px 9px; font-size: clamp(27px,6.2vw,40px); line-height: 1.12; white-space: nowrap; }.journey-heading p { font-size: clamp(16px,4.7vw,24px); }
  .age-timeline { width: 100%; margin-top: 25px; gap: 9px; }.age-timeline::before { top: auto; bottom: -31px; left: 2%; right: 2%; }.age-card { min-height: 315px; padding: 14px 6px 12px; border: 1px solid #f1d796; border-radius: 12px; }.age-card::before { width: 15px; height: 15px; top: auto; bottom: -40px; }.age { position: static; width: auto; height: auto; background: none; font-size: clamp(18px,5vw,25px); }.age-card > img { width: calc(100% + 12px); height: 137px; margin: 13px -6px 8px; display: block; object-fit: cover; }.age-icon,.desktop-age-copy { display: none; }.mobile-age-copy { display: block; }.age-card p { margin: 0; font-size: clamp(14px,3.8vw,20px); line-height: 1.22; }
  .journey-visual { position: relative; width: calc(100% + 34px); height: 590px; right: auto; bottom: auto; margin: 49px -17px 0; }.journey-child { height: 540px; left: -3%; right: auto; }.journey-podium { width: 61%; height: 76px; left: 38%; }.journey-box { width: 36%; height: 360px; left: 62%; bottom: 39px; }.journey-bottle { width: 27%; height: 300px; left: 45%; bottom: 34px; }
  .journey-cta { width: 100%; min-height: 83px; margin-top: 17px; border-radius: 18px; white-space: nowrap; font-size: clamp(18px,4.8vw,25px); }.journey-cta svg { width: 33px; height: 33px; }

  .height-factors{min-height:0;padding:48px 0 62px;background:#fff8e4 url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-05-background-mobile-v2.webp") center/cover no-repeat}.factors-shell{width:calc(100% - 34px);min-height:0}.factors-heading{width:100%;text-align:center}.factors-kicker{margin:0 auto 25px;border:1px solid #d28b13;background:rgb(255 255 255 / 72%);font-size:clamp(13px,3.7vw,19px)}.desktop-factor-kicker{display:none}.mobile-factor-kicker{display:inline}.factors-heading h2{font-size:clamp(30px,7.8vw,42px);line-height:1.16}.factors-heading>p:last-child{margin:13px 0 25px;display:block;font-size:clamp(15px,4vw,21px);line-height:1.4}.mobile-break{display:none}
  .factor-panels{width:100%;margin-top:0;grid-template-columns:44% 56%;gap:9px}.factor-panel{min-height:470px;padding:20px 12px;border-color:#eee;border-radius:20px}.dna-icon{width:120px}.factor-number{font-size:clamp(65px,19vw,95px)}.factor-panel h3{padding:10px 4px;border-radius:99px;background:#eee9e5;font-size:clamp(15px,4vw,21px)}.factor-panel>p{font-size:clamp(14px,3.7vw,19px)}.desktop-factor-copy{display:none}.mobile-factor-copy{display:inline}.lifestyle-icons{margin:0 0 27px;grid-template-columns:repeat(4,1fr);gap:5px}.lifestyle-icons>div{padding:0;border:0!important}.lifestyle-icons .factor-icon{width:clamp(48px,12vw,62px)}.lifestyle-icons b{font-size:clamp(9px,2.7vw,14px)}.lifestyle-icons small{display:none}.lifestyle-panel>.factor-number,.lifestyle-panel>h3{position:static}.lifestyle-panel>h3{background:#fff0bd}.lifestyle-panel{display:flex;flex-direction:column}.lifestyle-panel .lifestyle-icons{order:0}.lifestyle-panel>.factor-number{order:1}.lifestyle-panel>h3{order:2}.lifestyle-panel>p{order:3}
  .factors-visual{position:relative;width:calc(100% + 34px);height:535px;right:auto;bottom:auto;margin:0 -17px}.factors-child{height:500px;left:-3%;right:auto}.factors-podium{width:58%;height:77px;right:1%}.factors-bottle{width:27%;height:280px;right:31%;bottom:38px}.factors-box{width:37%;height:330px;right:0;bottom:39px}.factors-cta{width:100%;min-height:83px;display:flex;align-items:center;justify-content:center;gap:20px;color:#fff;border-radius:18px;background:linear-gradient(#f7b923,#d68800);font-size:clamp(23px,6vw,31px);font-weight:900}.factors-cta svg{width:37px;height:37px}

  .formula{min-height:0;padding:35px 0 55px}.formula-shell{width:calc(100% - 34px);min-height:0}.formula-heading{width:100%;text-align:center}.formula-heading>p{display:none}.formula-heading h2{font-size:clamp(28px,7.4vw,40px);line-height:1.2}.formula-heading h2 span,.formula-heading h2 em{white-space:normal}.formula-heading>i{width:53px;margin:17px auto}.formula-heading>div{display:block;font-size:clamp(15px,4vw,21px);line-height:1.45}.formula-cards{position:relative;z-index:4;width:58%;margin-top:24px;grid-template-columns:1fr;gap:10px}.formula-card{min-height:150px;padding:14px 15px;display:flex;align-items:flex-start;gap:14px;text-align:left;background:#fff}.formula-card>div{display:block;flex:1}.formula-icon{width:88px;flex:0 0 auto}.formula-card h3{margin:4px 0 2px;font-size:clamp(20px,5vw,26px)}.formula-card b{padding:0;background:none;font-size:clamp(15px,4vw,20px)}.formula-card p{margin:15px 0 0;padding-top:12px;border-top:1px solid #e8d6b2;font-size:clamp(13px,3.4vw,17px)}.formula-visual{z-index:2;width:55%;height:520px;right:-7%;bottom:130px}.formula-bottle{width:43%;height:300px;left:-2%;bottom:35px}.formula-box{width:59%;height:375px;right:0;bottom:43px}.formula-cta{width:100%;min-height:82px;margin:24px 0 0;border-radius:18px;text-align:center;font-size:clamp(18px,4.7vw,25px)}
  .solution{min-height:0;padding:38px 0 58px}.solution-shell{width:calc(100% - 34px);min-height:0}.solution-heading{width:100%}.solution-heading>p{width:max-content;max-width:100%;margin:0 auto 22px;padding:10px 18px;display:flex;align-items:center;gap:10px;border-radius:99px;background:#fff0c5;font-size:clamp(12px,3.5vw,18px);font-weight:800}.solution-heading>p svg{width:42px;height:30px}.solution-heading h2{font-size:clamp(44px,10vw,50px);line-height:1.05}.solution-heading h2 em{display:inline;font-size:1em;white-space:normal}.solution-heading h3{margin:15px 0;font-size:clamp(27px,7vw,38px);line-height:1.17}.solution-heading>i{width:55px;height:4px;margin:18px 0 30px;display:block;border-radius:99px;background:#d38a00}.solution-heading>div{display:none}.solution-cards{width:48%;margin-top:0;gap:10px}.solution-card{min-height:180px;padding:12px;align-items:flex-start;gap:10px;border-radius:20px}.solution-icon{width:64px;margin-top:2px}.solution-card>div{padding:0;border:0}.solution-card h4{font-size:clamp(17px,4.4vw,22px);line-height:1.2}.solution-card p{margin-top:12px;font-size:clamp(13px,3.4vw,17px);line-height:1.35}.desktop-solution-copy{display:none}.mobile-solution-copy,.mobile-only{display:inline}.solution-product-visual{width:61%;height:630px;right:-13%;bottom:300px}.solution-product-podium{height:96px;bottom:20px}.solution-product-bottle{width:43%;height:340px;left:0;bottom:65px}.solution-product-box{width:57%;height:430px;right:0;bottom:67px}.solution-product-leaves i{width:105px;height:46px}.solution-cta{width:100%;min-height:86px;margin:24px 0 0;border-radius:20px;text-align:center;font-size:clamp(20px,5.5vw,29px)}.solution-cta svg{width:34px;height:34px}
  .mechanism{min-height:0;padding:32px 0 52px}.mechanism-shell{width:calc(100% - 56px);min-height:0}.mechanism-heading p{padding:8px 17px;font-size:clamp(12px,3.4vw,17px)}.mechanism-heading h2{margin-top:18px;font-size:clamp(34px,9vw,48px)}.mechanism-heading>div{font-size:clamp(16px,4.3vw,22px)}.mechanism-cards{margin-top:18px;grid-template-columns:1fr;gap:12px}.mechanism-card{min-height:260px;padding:20px 18px 20px 46%;display:flex;align-items:center;text-align:left}.mechanism-icon{position:absolute;width:32%;left:4%;top:50%;transform:translateY(-50%)}.stage-number{width:62px;left:34%;top:20px;font-size:28px}.mechanism-card>div{width:100%}.mechanism-card h3{padding:10px 14px;border-radius:99px;background:#fff0c5;font-size:clamp(18px,4.7vw,24px)}.stage-two h3{background:#ffe0e0}.stage-three h3{background:#dff2ff}.mechanism-card p{font-size:clamp(15px,4vw,20px)}.desktop-mechanism-copy{display:none}.mobile-mechanism-copy{display:inline}.mechanism-product{position:relative;width:100%;height:400px;left:auto;bottom:auto;transform:none}.mechanism-product div{height:70px}.mechanism-product img:nth-of-type(1){width:34%;height:280px;left:20%;bottom:35px}.mechanism-product img:nth-of-type(2){width:43%;height:340px;right:13%;bottom:38px}.mechanism-cta{position:relative;width:94%;min-height:82px;right:auto;bottom:auto;margin:-12px auto 0;font-size:clamp(20px,5.3vw,28px)}
  .alpha{min-height:0;padding:28px 0 55px}.alpha-shell{width:calc(100% - 32px)}.alpha-heading p{width:160px;font-size:20px}.alpha-heading h2{font-size:clamp(31px,8vw,43px);line-height:1.15}.alpha-heading h2 em{display:block}.alpha-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}.alpha-molecule{grid-row:auto;padding:20px 10px}.molecule{width:78%;margin-top:35px}.molecule b{font-size:clamp(25px,7vw,36px)}.molecule i{width:18%}.alpha-molecule h3{margin-top:45px;font-size:22px}.alpha-molecule p{font-size:17px}.desktop-alpha-copy{display:none}.mobile-alpha-copy{display:inline}.alpha-benefits{padding:20px 14px;background:#fff;border-radius:22px}.alpha-benefit{padding:12px 0;gap:16px;border-radius:0;border-bottom:1px solid #ead8c7}.alpha-benefit:last-child{border:0}.alpha-benefit span{width:72px;flex:0 0 auto}.alpha-benefit p{font-size:clamp(16px,4.2vw,21px)}.alpha-sleep{grid-column:1/3;grid-template-columns:60% 1fr;min-height:300px}.alpha-sleep div{padding:20px 14px}.alpha-sleep h3{font-size:clamp(19px,5vw,25px)}.alpha-sleep p{font-size:clamp(15px,4vw,20px)}.alpha-product{grid-column:1/3;min-height:365px}.alpha-product>p{position:absolute;right:2%;top:80px;width:46%;display:block;font-size:clamp(18px,4.7vw,24px);font-weight:700}.alpha-product>img:nth-of-type(1){width:25%;height:270px;left:8%}.alpha-product>img:nth-of-type(2){width:34%;height:330px;right:39%}.alpha-cta{width:94%;min-height:82px;margin-top:16px;font-size:clamp(21px,5.7vw,29px)}
  .alpha-product>p{z-index:4;right:0;top:80px;width:43%;padding:15px;border-radius:18px;background:rgb(255 255 255 / 72%)}
  .protetite-section{min-height:0;padding:25px 0 55px}.protetite-shell{width:calc(100% - 52px);min-height:0}.protetite-heading>p{width:150px;font-size:19px}.protetite-heading h2{font-size:clamp(30px,7.8vw,42px);line-height:1.2}.protetite-heading h2 em{color:#d98c00}.protetite-heading>div{margin:12px auto 20px;display:block;font-size:clamp(15px,4vw,20px)}.protetite-cards{grid-template-columns:1fr;gap:10px}.protetite-card{min-height:155px;padding:14px 20px;align-items:center}.pt-icon{width:105px}.protetite-card h3{margin:0 0 8px;padding:0;border:0;font-size:clamp(19px,5vw,25px)}.protetite-card p{font-size:clamp(14px,3.8vw,19px)}.bone-flow{width:100%;min-height:300px;margin-top:12px;padding:16px 10px}.bone-flow>h3{margin:0 auto 15px;padding:8px 18px;font-size:clamp(14px,3.8vw,19px)}.bone-flow>div{gap:5px}.bone-flow article span{width:100px;height:100px}.bone-flow p{font-size:clamp(11px,3vw,15px)}.bone-flow b{font-size:25px}.protetite-product{position:relative;width:100%;height:390px;right:auto;bottom:auto;margin-top:12px;border-radius:20px;background:rgb(255 255 255 / 72%)}.protetite-product>img:nth-of-type(1){width:23%;height:285px;left:4%}.protetite-product>img:nth-of-type(2){width:30%;height:345px;right:58%}.protetite-product article{position:absolute;z-index:4;right:2%;top:70px;width:45%;padding:14px;display:block;border-radius:18px;background:rgb(255 255 255 / 82%)}.protetite-product article h3{font-size:clamp(18px,4.7vw,24px)}.protetite-product article p{font-size:clamp(14px,3.7vw,19px)}.protetite-cta{position:relative;width:100%;min-height:82px;right:auto;bottom:auto;margin-top:14px;font-size:clamp(21px,5.5vw,29px)}
  .absorption{min-height:0;padding:28px 0 55px}.absorption-shell{width:calc(100% - 32px);min-height:0}.absorption-heading{width:100%}.absorption-heading>p{width:150px;margin-bottom:18px;font-size:21px}.absorption-heading h2{font-size:clamp(31px,8vw,43px);line-height:1.15}.absorption-heading h2 em{display:block}.absorption-heading>div{font-size:clamp(16px,4.2vw,21px);line-height:1.45}.absorption-steps{width:100%;margin-top:22px;grid-template-columns:repeat(4,1fr);gap:7px}.absorption-step{min-height:335px;padding:16px 6px}.absorption-step:not(:last-child)::after{right:-11px;top:120px;font-size:40px}.absorption-step h3{font-size:clamp(14px,3.7vw,19px)}.abs-icon{width:100%}.absorption-step p{font-size:clamp(11px,3vw,15px)}.lacto-card{width:100%;min-height:220px;padding:20px 24px;gap:25px}.lacto-card>span{width:145px;flex:0 0 auto}.lacto-card h3{font-size:clamp(20px,5.2vw,26px)}.lacto-card p{font-size:clamp(15px,4vw,20px)}.absorption-product{position:relative;width:100%;height:480px;right:auto;bottom:auto}.absorption-product>img:nth-of-type(1){width:33%;height:350px;left:18%}.absorption-product>img:nth-of-type(2){width:43%;height:430px;right:9%}.absorption-cta{width:94%;min-height:82px;margin:10px auto 0;text-align:center;font-size:clamp(19px,5vw,26px)}
  .whole-development{min-height:0;padding:44px 0 55px}.development-shell{width:calc(100% - 32px);min-height:0}.development-heading h2{font-size:clamp(31px,8vw,43px)}.development-heading p{display:none}.development-hero{position:relative;height:520px;inset:auto;margin-top:12px}.development-hero>img:first-child{width:62%;height:500px;left:0;bottom:0}.development-hero>div{width:57%;height:70px;right:0;bottom:10px}.development-hero>img:nth-of-type(2){width:25%;height:270px;right:30%;bottom:45px}.development-hero>img:nth-of-type(3){width:34%;height:340px;right:0;bottom:48px}.development-cards{width:100%;margin-top:0;grid-template-columns:repeat(6,1fr);gap:8px}.development-card{min-height:285px;padding:14px 8px}.development-card:nth-child(-n+3){grid-column:span 2}.development-card:nth-child(n+4){grid-column:span 3}.development-card span{width:120px}.development-card h3{font-size:clamp(18px,4.7vw,24px)}.development-card p{display:none}.development-cta{width:96%;min-height:86px;margin-top:20px;font-size:clamp(22px,5.8vw,30px)}
  .ingredients{min-height:0;padding:35px 0 55px}.ingredients-shell{width:calc(100% - 58px);min-height:0;display:grid;grid-template-columns:60% 40%}.ingredients h2{grid-column:1/-1;font-size:clamp(31px,8vw,43px);line-height:1.2}.ingredients h2 em{display:block}.ingredient-list{grid-column:1/-1;grid-row:2;width:100%;margin-top:20px;gap:9px}.ingredient-row{min-height:112px;grid-template-columns:105px 1fr 155px}.ingredient-icon{width:82px}.ingredient-row strong{font-size:clamp(17px,4.5vw,23px)}.ingredient-row b{font-size:clamp(18px,4.8vw,25px)}.ingredients-product{grid-column:1;grid-row:3;position:relative;width:100%;height:390px;left:auto;top:auto;margin-top:14px}.ingredients-product img:nth-of-type(1){width:31%;height:270px;left:12%}.ingredients-product img:nth-of-type(2){width:44%;height:350px;right:9%}.dosage{grid-column:2;grid-row:3;position:relative;width:100%;min-height:350px;left:auto;right:auto;bottom:auto;margin-top:14px;padding:25px 15px;display:block;text-align:center}.dosage svg{width:95px;height:95px}.dosage p{display:grid;gap:15px;font-size:clamp(20px,5.3vw,27px)}.dosage span{padding-top:15px;border-top:1px solid #d9b98a}.ingredients-cta{grid-column:1/-1;grid-row:4;width:100%;min-height:85px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;border-radius:20px;background:linear-gradient(#f8bd28,#d98900);font-size:clamp(22px,5.7vw,29px);font-weight:900}.ingredients-cta svg{width:35px;height:35px}
  .japan-origin{min-height:0;padding:45px 0 55px}.origin-shell{width:calc(100% - 40px);min-height:0}.origin-heading>p{width:max-content;max-width:100%;margin:0 auto 20px;padding:9px 18px;display:block;border:1px solid #d58b00;border-radius:99px;font-size:clamp(13px,3.5vw,18px);font-weight:800}.origin-heading h2{font-size:clamp(30px,7.8vw,42px)}.origin-heading h2 br{display:none}.origin-heading h2 em{padding:0;color:#d88c00;background:none}.origin-product{position:relative;width:100%;height:490px;display:block}.origin-product>div{position:absolute;width:72%;height:80px;left:14%;bottom:15px;border-radius:50%;background:linear-gradient(#fff2c5,#dfb66c)}.origin-product img{position:absolute;z-index:2;bottom:55px;object-fit:contain}.origin-product img:nth-of-type(1){width:28%;height:310px;left:29%}.origin-product img:nth-of-type(2){width:38%;height:400px;right:15%}.origin-cards{margin-top:10px;grid-template-columns:1fr;gap:12px}.origin-card{min-height:230px;padding:20px 24px;display:grid;grid-template-columns:30% 1fr;align-items:center;text-align:left}.origin-card>img{display:none}.origin-card>span{width:135px;margin:0;box-shadow:none}.origin-card>div{padding-left:30px;border-left:1px solid #e6c788}.origin-card h3{font-size:clamp(20px,5.2vw,27px)}.origin-card p{font-size:clamp(15px,4vw,20px)}
  .legal-profile{min-height:0;padding:30px 0 55px}.legal-shell{width:calc(100% - 40px);min-height:0}.legal-heading p{width:max-content;max-width:100%;margin:0 auto 15px;padding:8px 17px;display:block;border:1px solid #d58b00;border-radius:99px;font-size:clamp(12px,3.4vw,17px);font-weight:800}.legal-heading h2{font-size:clamp(37px,9.5vw,50px);line-height:1.08}.legal-heading h2 em{display:block}.legal-heading div{margin-top:12px;font-size:clamp(16px,4.3vw,22px);font-weight:700}.legal-cards{width:100%;margin-top:22px;grid-template-columns:1fr;gap:12px}.legal-card{min-height:300px;padding:15px;display:grid;grid-template-columns:42% 1fr;align-items:center}.legal-card img{height:270px}.legal-card>div{padding:15px}.legal-card h3{text-align:left;font-size:clamp(21px,5.5vw,28px)}.legal-card a{font-size:clamp(17px,4.5vw,23px)}.legal-product{position:relative;width:100%;height:410px;left:auto;bottom:auto}.legal-product>img:nth-of-type(1){width:26%;height:280px;left:10%}.legal-product>img:nth-of-type(2){width:36%;height:355px;right:42%}.legal-product>p{position:absolute;right:4%;top:110px;width:38%;display:flex;align-items:center;gap:15px;font-size:clamp(17px,4.5vw,23px);font-weight:800}.legal-product>p svg{width:75px;flex:0 0 auto;color:#a66a00}
  .usage{min-height:0;padding:35px 0 0}.usage-shell{width:calc(100% - 68px);min-height:0}.usage-logo{width:260px;margin:auto;display:block}.usage h2{width:100%;margin:30px 0;text-align:center;font-size:clamp(40px,10vw,54px)}.usage h2 em{display:inline;color:#542000}.usage-cards{width:100%;grid-template-columns:1fr;gap:10px}.usage-card{min-height:175px;padding:12px 30px;display:flex;align-items:center;gap:35px;text-align:left}.usage-card span{width:130px;flex:0 0 auto}.usage-card h3{font-size:clamp(22px,5.7vw,29px)}.usage-visual{position:relative;width:calc(100% + 68px);height:600px;right:auto;bottom:auto;margin:0 -34px}.usage-visual>img:first-child{width:60%;height:560px;left:0;right:auto;top:20px}.usage-visual>div{width:65%;height:80px}.usage-visual>img:nth-of-type(2){width:25%;height:300px;left:48%}.usage-visual>img:nth-of-type(3){width:34%;height:390px;right:0}
  .packages{min-height:0;padding:30px 0 55px}.packages-shell{width:calc(100% - 42px)}.packages-shell>img{width:250px;margin:auto;display:block}.packages h2{margin-top:20px;font-size:clamp(38px,9.8vw,52px);line-height:1.1}.packages h2 em{display:block}.packages-shell>p{display:none}.package-grid{grid-template-columns:1fr;gap:12px}.package-card{min-height:245px;padding:14px;display:grid;grid-template-columns:44% 1fr;align-items:center}.pack-images{height:215px}.pack-images img{height:210px}.package-card h3{font-size:clamp(25px,6.5vw,34px)}.package-card strong{font-size:clamp(35px,9vw,48px)}.package-card.featured{border:3px solid #df9200;background:#fff9dc}.package-card b{margin-top:8px;padding:8px;display:block;color:#fff;border-radius:99px;background:#e83232;font-size:30px}.offer-bar{display:grid;grid-template-columns:1fr;grid-template-rows:auto;margin-top:15px;background:none}.offer-bar>strong{display:none}.offer-bar p{padding:30px;border-radius:18px;background:#fff0f0;color:#c20b19;font-size:24px}.offer-bar time{margin:18px auto;padding:15px 45px;border-radius:18px;background:#fff0f0;color:#c20b19}.offer-bar a{grid-column:auto;grid-row:auto;width:100%;margin:0;min-height:90px;font-size:clamp(27px,7vw,36px)}.offer-bar svg{width:52px;height:52px;display:block}
  .faq{min-height:0;padding:35px 0 45px}.faq-shell{width:calc(100% - 38px);min-height:0}.faq header h2{font-size:clamp(37px,9.5vw,50px);line-height:1.1}.faq header h2 em{display:block}.faq header p{display:none}.faq-product{position:relative;width:100%;height:450px;left:auto;top:auto}.faq-product>div{height:70px}.faq-product img:nth-of-type(1){width:28%;height:300px;left:28%}.faq-product img:nth-of-type(2){width:39%;height:390px;right:12%}.faq-list{width:100%;margin-top:10px;gap:9px}.faq-item summary{min-height:110px;padding:10px 20px;font-size:clamp(18px,4.7vw,24px)}.faq-item summary span{width:72px;flex:0 0 auto}.faq-item>p{padding:0 22px 20px;font-size:16px}.faq-cta{position:relative;width:100%;min-height:90px;right:auto;bottom:auto;margin-top:14px;font-size:clamp(25px,6.5vw,34px)}.faq-trust{position:relative;width:100%;left:auto;bottom:auto;margin-top:12px}.faq-trust div{min-height:180px;padding:12px 5px;display:flex;flex-direction:column;font-size:clamp(12px,3.1vw,16px)}.faq-trust svg{width:62px;height:62px}.faq-disclaimer{position:relative;bottom:auto;margin-top:12px;font-size:14px}
}

.bone-flow b{width:22px;height:22px;font-size:0;border-top:4px solid #d88b00;border-right:4px solid #d88b00;transform:rotate(45deg)}
.absorption-step:not(:last-child)::after{content:"";width:17px;height:17px;right:-26px;top:112px;border-top:4px solid #c47a00;border-right:4px solid #c47a00;transform:rotate(45deg)}
.faq-item summary::after{content:"";width:14px;height:14px;margin-left:auto;border-right:4px solid #6b2d00;border-bottom:4px solid #6b2d00;transform:rotate(45deg);transition:transform .2s ease}.faq-item[open] summary::after{transform:rotate(225deg)}
@media (max-width:767px){.bone-flow b{width:14px;height:14px}.absorption-step:not(:last-child)::after{right:-9px;top:128px;width:12px;height:12px}}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.main-cta { transition: none; } }

.absorption-product .section-child { z-index: 1; width: 66%; height: 520px; right: -12%; bottom: 0; }
.faq-product .section-child { z-index: 1; width: 55%; height: 520px; left: -3%; bottom: 0; }

@media (max-width: 767px) {
  .alpha-product { grid-row: auto; }
  .absorption-product .section-child { display: none; }
  .faq-product .section-child { display: none; }
}

/* Narrow mobile refinement: preserve hierarchy and readable copy at 390px. */
@media (max-width: 430px) {
  .solution-heading h2 { font-size: 38px; }
  .solution-heading h3 { font-size: 27px; }

  .bone-flow { min-height: 0; }
  .bone-flow article span { width: 82px; height: 82px; }

  .legal-card { grid-template-columns: 39% minmax(0, 1fr); }
  .legal-card > div { min-width: 0; padding: 12px; }
  .legal-card h3 { font-size: 18px; overflow-wrap: anywhere; }
  .legal-card a { width: 100%; padding-inline: 8px; font-size: 14px; }
  .legal-product > p { right: 2%; width: 40%; flex-direction: column; gap: 7px; text-align: center; font-size: 14px; line-height: 1.25; }
  .legal-product > p svg { width: 52px; }

  .origin-card { grid-template-columns: 28% minmax(0, 1fr); padding: 16px; }
  .origin-card > span { width: 82px; }
  .origin-card > div { min-width: 0; padding-left: 16px; }
  .origin-card h3 { font-size: 18px; overflow-wrap: anywhere; }
  .origin-card p { font-size: 14px; }

  .package-card { grid-template-columns: 40% minmax(0, 1fr); }
  .package-card strong { font-size: 29px; white-space: nowrap; }
  .package-card b { font-size: 20px; }
}

/* Approved desktop content revision: content remains editable and code-native. */
.desktop-content{display:none}
@media (min-width:768px){
  .desktop-content{display:block}
  .journey-cta,.solution-cta,.mechanism-cta,.alpha-cta,.protetite-cta,.absorption-cta,.development-cta,.ingredients-cta{display:none}

  .formula-visual,.solution-product-visual,.mechanism-product,.alpha-product,.protetite-product,.ingredients-product,.origin-product,.legal-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/product-mockup-final.webp");background-repeat:no-repeat;background-position:center;background-size:contain}
  .hero-visual,.journey-visual,.factors-visual,.absorption-product,.development-hero,.usage-visual,.faq-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/child-product-mockup-final.webp");background-repeat:no-repeat;background-position:center;background-size:contain}
  .hero-visual>img,.journey-visual>img,.factors-visual>img,.formula-visual>img,.solution-product-visual>img,.mechanism-product>img,.alpha-product>img,.protetite-product>img,.absorption-product>img,.development-hero>img,.ingredients-product>img,.origin-product>img,.legal-product>img,.usage-visual>img,.faq-product>img{display:none!important}
  .hero-visual .sun-disc,.hero-visual .product-stage,.hero-visual .leaves,.assurance-product .assurance-sun,.assurance-product .assurance-leaves,.assurance-product .assurance-podium,.journey-visual .journey-podium,.factors-visual .factors-podium,.formula-visual .formula-podium,.solution-product-visual .solution-product-podium,.solution-product-visual .solution-product-leaves,.mechanism-product>div,.absorption-product>div,.development-hero>div,.ingredients-product>div,.origin-product>div,.legal-product>div,.usage-visual>div,.faq-product>div{display:none}

  .growth-journey{min-height:1240px}
  .support-roadmap{position:absolute;z-index:5;left:0;right:0;bottom:38px;padding:24px 28px;border:1px solid #ecd49b;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(90,49,0,.1)}
  .support-roadmap h3{margin:0 0 18px;color:#572300;text-align:center;font-size:28px;line-height:1.15}
  .support-roadmap h3 em{color:#d28a00;font-style:normal}
  .support-roadmap ol{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
  .support-roadmap li{min-height:112px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#fff8e5,#fff);border-left:5px solid #e1a21a}
  .support-roadmap b,.support-roadmap span{display:block}.support-roadmap b{margin-bottom:8px;color:#6b2d00;font-size:20px}.support-roadmap span{color:#5d5048;font-size:15px;line-height:1.5}

  .ingredients{min-height:1050px}.ingredients-shell{min-height:920px}.ingredient-list{width:66%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.ingredient-row{min-height:105px;padding:9px 12px;grid-template-columns:66px minmax(0,1fr) 142px}.ingredient-icon{width:55px}.ingredient-row strong{font-size:18px;line-height:1.15}.ingredient-row b{padding:11px 7px;font-size:19px;white-space:nowrap}.ingredient-row strong small{display:block;margin-top:4px;color:#7b675b;font-size:11px;font-weight:600}.ingredients-product{width:33%;height:560px;top:155px}.ingredients-product img:nth-of-type(1){width:35%;height:360px;left:8%}.ingredients-product img:nth-of-type(2){width:51%;height:480px;right:2%}.dosage{width:31%;left:1%;bottom:30px}

  .japan-origin{min-height:1190px}.origin-shell{min-height:1100px}.testimonials{position:absolute;z-index:4;left:0;right:0;bottom:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .testimonials article{min-height:190px;padding:25px;display:grid;grid-template-columns:70px 1fr;gap:18px;border:1px solid #efdcae;border-radius:24px;background:#fff;box-shadow:0 16px 38px rgba(80,43,0,.1)}
  .testimonial-avatar{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#e0a51e,#8a4b00);font-size:22px;font-weight:900}
  .testimonials h3{margin:4px 0 12px;color:#612800;font-size:21px}.testimonials h3 span{display:block;margin-top:3px;color:#9b775e;font-size:13px;font-weight:600}.testimonials p{margin:0;color:#5d5048;font-size:15px;line-height:1.6}

  .usage h2{margin-top:0}
  .packages{min-height:1220px}.packages-shell{min-height:1130px}.package-benefits{margin:18px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.package-benefits span{padding:13px 10px;border-radius:14px;background:#fff8df;color:#693000;text-align:center;font-size:14px;font-weight:800}
  .distributor-commitments{margin:15px 0 18px;padding:20px 26px;border-radius:20px;background:#fff;border:1px solid #e6ca8d}.distributor-commitments h3{margin:0 0 14px;color:#5d2500;text-align:center;font-size:24px}.distributor-commitments ul{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px 28px;list-style:none}.distributor-commitments li{position:relative;padding-left:22px;color:#574a42;font-size:15px}.distributor-commitments li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:6px;border-left:3px solid #d59000;border-bottom:3px solid #d59000;transform:rotate(-45deg)}

  .faq{min-height:1530px}.faq-shell{min-height:1440px}.faq-list{grid-template-columns:repeat(2,1fr);gap:12px 18px}.faq-item summary{min-height:84px}.faq-product{top:125px}.consultation-panel{position:absolute;z-index:5;left:0;right:0;bottom:205px;padding:28px 32px;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;border-radius:26px;background:linear-gradient(135deg,#fff7dc,#fff);border:1px solid #e8ca7e;box-shadow:0 18px 48px rgba(82,44,0,.11)}
  .consultation-panel>div>p{margin:0 0 9px;color:#a66500;font-size:14px;font-weight:900;letter-spacing:.08em}.consultation-panel h3{margin:0;color:#582300;font-size:30px;line-height:1.25}.consultation-panel h3 em{color:#d58c00;font-style:normal}.consultation-panel form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.consultation-panel label{display:grid;gap:6px;color:#60331b;font-size:13px;font-weight:800}.consultation-panel input{width:100%;height:46px;padding:0 13px;border:1px solid #dfc691;border-radius:12px;background:#fff;font:inherit}.consultation-panel button{grid-column:1/-1;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:14px;color:#fff;background:linear-gradient(#f2b729,#ce7900);font-size:17px;font-weight:900;cursor:pointer}.consultation-panel button svg{width:24px;height:24px}.faq-trust{bottom:85px}.safety-notes{position:absolute;left:0;right:0;bottom:12px;color:#75665d;text-align:center;font-size:12px;line-height:1.45}.safety-notes p{margin:3px 0}
}

/* Final mobile containment overrides. Keep these after legacy breakpoints. */
@media (width <= 767px){
  .molecule i:nth-child(2){left:0}
  .packages .package-meta span{font-size:13px!important}
}

/* Section 03 remove numeric row labels */
.concerns-v2 .concern-row::after{display:none}
.concerns-v2 .concern-copy strong{padding-top:0}

/* Section 05 approved mobile redesign */
@media (width <= 767px){
  .height-factors{padding:42px 0 52px;background:#fff8e4 url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-05-background-mobile-v2.webp") center/cover no-repeat}
  .height-factors .factors-shell{width:calc(100% - 32px)}
  .height-factors .factors-kicker{margin-bottom:18px;padding:9px 16px;font-size:clamp(12px,3.4vw,15px)}
  .height-factors .factors-heading h2{font-size:clamp(29px,7.7vw,40px);line-height:1.12}
  .height-factors .factors-heading>p:last-child{margin:12px auto 22px;max-width:620px;font-size:clamp(14px,3.8vw,18px)}
  .height-factors .factor-panels{position:relative;width:100%;margin:0;padding:18px 12px;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:0;overflow:hidden;border:1px solid #ead7aa;border-radius:24px;background:#fff;box-shadow:0 14px 32px rgb(105 62 0 / 9%)}
  .height-factors .factor-panel{min-width:0;min-height:430px;padding:10px 9px;border:0;border-radius:18px;background:transparent;box-shadow:none;overflow-wrap:anywhere}
  .height-factors .genetic-panel{border-right:1px solid #ead7aa;background:linear-gradient(135deg,#f5f1ed,#fff)}
  .height-factors .lifestyle-panel{background:linear-gradient(135deg,#fffdf5,#fff6ce)}
  .height-factors .dna-icon{width:86px;margin-bottom:4px}
  .height-factors .factor-number{font-size:clamp(44px,13vw,66px);line-height:1;white-space:nowrap}
  .height-factors .factor-panel h3{margin:7px 0 13px;padding:8px 4px;font-size:clamp(12px,3.4vw,17px);line-height:1.18}
  .height-factors .factor-panel>p{font-size:clamp(13px,3.45vw,17px);line-height:1.4}
  .height-factors .lifestyle-icons{margin:0 0 12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 4px}
  .height-factors .lifestyle-icons .factor-icon{width:52px}
  .height-factors .lifestyle-icons b{font-size:clamp(10px,2.7vw,13px);line-height:1.15}
  .height-factors .factors-visual{width:calc(100% + 32px);height:500px;margin:0 -16px;background-position:center bottom!important;background-size:contain!important}
  .height-factors .factors-cta{min-height:76px;margin-top:0;font-size:clamp(21px,5.7vw,28px)}
}

/* Section 09 approved mobile redesign */
@media (width <= 767px){
  .alpha{padding:38px 0 52px;background:linear-gradient(145deg,#fffdf8,#fff2cc)}
  .alpha .alpha-shell{width:calc(100% - 32px)}
  .alpha .alpha-heading{text-align:center}
  .alpha .alpha-heading p{width:max-content;margin:0 auto 12px;padding:8px 28px;font-size:clamp(14px,3.8vw,17px)}
  .alpha .alpha-heading h2{font-size:clamp(30px,8vw,42px);line-height:1.08}
  .alpha .alpha-layout{margin-top:22px;display:flex;flex-direction:column;gap:12px}
  .alpha .alpha-molecule{width:100%;padding:18px;display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:18px;text-align:left;border-radius:22px;background:#fff;box-shadow:0 10px 24px rgb(91 53 0 / 8%)}
  .alpha .molecule{grid-column:1;grid-row:1/3;width:96px;margin:0;overflow:visible}
  .alpha .molecule i{display:none}
  .alpha .molecule b{font-size:25px}
  .alpha .alpha-molecule h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(21px,5.5vw,27px)}
  .alpha .alpha-molecule p{grid-column:2;grid-row:2;margin:4px 0 0;font-size:clamp(14px,3.8vw,17px);line-height:1.35}
  .alpha .alpha-benefits{width:100%;padding:0;gap:10px;background:transparent}
  .alpha .alpha-benefit{min-height:104px;padding:14px 16px;gap:16px;border:0;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgb(91 53 0 / 7%)}
  .alpha .alpha-benefit span{width:68px}
  .alpha .alpha-benefit p{font-size:clamp(15px,4vw,19px);line-height:1.3}
  .alpha .alpha-sleep{width:100%;min-height:250px;grid-column:auto;grid-template-columns:minmax(0,56%) minmax(0,44%);border-radius:22px}
  .alpha .alpha-sleep div{padding:18px 14px}
  .alpha .alpha-sleep h3{font-size:clamp(17px,4.5vw,22px);line-height:1.25}
  .alpha .alpha-sleep p{font-size:clamp(13px,3.45vw,16px);line-height:1.4}
  .alpha .alpha-product{width:100%;min-height:410px;grid-column:auto;margin:0;background-position:center top!important;background-size:auto 315px!important}
  .alpha .alpha-product>p{position:relative;top:auto;right:auto;width:100%;margin:315px 0 0;padding:14px 18px;text-align:center;border-radius:18px;background:rgb(255 255 255 / 92%);font-size:clamp(16px,4.3vw,20px);line-height:1.3}
  .alpha .alpha-cta{width:100%;min-height:76px;margin:14px 0 0;font-size:clamp(20px,5.3vw,26px)}
}

/* Section 11 approved mobile redesign */
@media (width <= 767px){
  .absorption{padding:38px 0 52px}
  .absorption .absorption-shell{width:calc(100% - 32px)}
  .absorption .absorption-heading{text-align:center}
  .absorption .absorption-heading>p{width:max-content;margin:0 auto 14px;padding:9px 26px;font-size:clamp(17px,4.5vw,21px)}
  .absorption .absorption-heading h2{font-size:clamp(29px,7.7vw,41px);line-height:1.1}
  .absorption .absorption-heading>div{margin-top:12px;font-size:clamp(14px,3.8vw,18px);line-height:1.45}
  .absorption .absorption-steps{width:100%;margin-top:22px;grid-template-columns:1fr;gap:22px}
  .absorption .absorption-step{min-width:0;min-height:112px;padding:14px 18px;display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:18px;text-align:left;border-radius:20px;box-shadow:0 9px 22px rgb(93 54 0 / 8%)}
  .absorption .abs-icon{grid-column:1;grid-row:1/3;width:72px}
  .absorption .absorption-step h3{grid-column:2;grid-row:1;align-self:end;margin:0 0 3px;font-size:clamp(18px,4.8vw,23px)}
  .absorption .absorption-step p{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:clamp(14px,3.8vw,17px);line-height:1.35}
  .absorption .absorption-step:not(:last-child)::after{content:"";width:12px;height:12px;right:calc(50% - 6px);top:auto;bottom:-18px;border-top:3px solid #c47a00;border-right:3px solid #c47a00;transform:rotate(135deg)}
  .absorption .lacto-card{width:100%;min-height:150px;margin-top:22px;padding:18px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;border:1px solid #9bdcff;border-radius:22px;box-shadow:0 8px 22px rgb(33 157 232 / 12%)}
  .absorption .lacto-card>span{width:84px}
  .absorption .lacto-card h3{font-size:clamp(18px,4.8vw,23px)}
  .absorption .lacto-card p{font-size:clamp(13px,3.55vw,17px);line-height:1.4}
  .absorption .absorption-product{width:100%;height:420px;margin-top:12px;background-position:center bottom!important;background-size:contain!important}
  .absorption .absorption-cta{width:100%;min-height:78px;margin:10px 0 0;padding:10px 14px;font-size:clamp(18px,4.8vw,24px)}
}

/* Section 02 approved mobile redesign */
@media (width <= 767px){
  .assurance{padding:48px 0 56px}
  .assurance-shell{width:calc(100% - 32px);padding:0;display:flex;flex-direction:column}
  .assurance-heading{min-height:0;margin:0;padding:0;text-align:center}
  .assurance-eyebrow{width:max-content;max-width:100%;margin:0 auto 14px;padding:9px 22px;font-size:clamp(13px,3.5vw,16px);line-height:1.2}
  .assurance-heading h2{width:100%;font-size:clamp(30px,9vw,46px);line-height:1.1}
  .mobile-assurance-copy{width:100%;margin:12px auto 0;font-size:clamp(14px,3.8vw,17px);line-height:1.4}
  .assurance-accent{margin:15px auto 0}
  .assurance-pattern-left{left:0}
  .assurance-pattern-right{right:0}
  .assurance-product{position:relative;width:min(78vw,340px);max-width:100%;height:310px;inset:auto;margin:20px auto 12px;background-position:center!important;background-size:contain!important;transform:none}
  .assurance-grid{width:100%;margin:12px 0 0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .assurance-card{min-width:0;min-height:220px;padding:16px 10px;flex-direction:column;justify-content:center;gap:12px;text-align:center}
  .assurance-card-icon{width:76px}
  .assurance-card-icon>svg{width:50px;height:50px}
  .assurance-card-icon .assurance-flag{width:54px;height:38px}
  .assurance-card p{min-width:0;min-height:0;margin:0;padding:12px 0 0;border-left:0;border-top:1px solid #e5cf9f;font-size:clamp(14px,3.8vw,18px);line-height:1.2;overflow-wrap:anywhere}
  .assurance-card p :is(span,strong){min-width:0;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:767px){
  .desktop-content{display:none!important}.extra-ingredient{display:none}.safety-notes{margin-top:12px;color:#75665d;font-size:13px;line-height:1.45}.safety-notes p{margin:6px 0}
  .assurance-product,.formula-visual,.solution-product-visual,.mechanism-product,.alpha-product,.protetite-product,.ingredients-product,.origin-product,.legal-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/product-mockup-final.webp");background-repeat:no-repeat;background-position:center;background-size:contain}
  .hero-visual,.journey-visual,.factors-visual,.absorption-product,.development-hero,.usage-visual,.faq-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/child-product-mockup-mobile-final.webp");background-repeat:no-repeat;background-position:center;background-size:contain}
  .assurance-product>img,.hero-visual>img,.journey-visual>img,.factors-visual>img,.formula-visual>img,.solution-product-visual>img,.mechanism-product>img,.alpha-product>img,.protetite-product>img,.absorption-product>img,.development-hero>img,.ingredients-product>img,.origin-product>img,.legal-product>img,.usage-visual>img,.faq-product>img{display:none!important}
  .hero-visual .sun-disc,.hero-visual .product-stage,.hero-visual .leaves,.assurance-product .assurance-sun,.assurance-product .assurance-leaves,.assurance-product .assurance-podium,.journey-visual .journey-podium,.factors-visual .factors-podium,.formula-visual .formula-podium,.solution-product-visual .solution-product-podium,.solution-product-visual .solution-product-leaves,.mechanism-product>div,.absorption-product>div,.development-hero>div,.ingredients-product>div,.origin-product>div,.legal-product>div,.usage-visual>div,.faq-product>div{display:none}
  .journey-heading h2{font-size:clamp(25px,6.2vw,36px);white-space:normal;overflow-wrap:anywhere}
  .factor-panels{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  .factor-panel,.lifestyle-icons>div{min-width:0}
  .ingredient-row{width:100%;min-width:0;grid-template-columns:70px minmax(0,1fr) 100px;padding-inline:8px}
  .ingredient-row strong{min-width:0;font-size:16px;overflow-wrap:anywhere}.ingredient-row b{min-width:0;padding:10px 5px;font-size:16px;white-space:nowrap}
}

@media (min-width:768px) and (max-width:1199px){
  .faq-v2{min-height:0;height:auto;padding:30px 0}
  .faq-v2 .faq-shell{width:calc(100% - 48px);min-height:0}
  .faq-v2 .faq-heading{position:relative}
  .faq-v2 .faq-heading h2{font-size:clamp(34px,5vw,48px)}
  .faq-v2 .faq-heading p{font-size:17px}
  .faq-v2 .faq-main{height:auto;display:grid;grid-template-columns:1fr;gap:18px}
  .faq-v2 .faq-showcase{height:340px;background-position:58% 78%;background-size:42%}
  .faq-v2 .faq-showcase::before{width:310px;left:31%;top:0}.faq-v2 .faq-showcase::after{width:56%;left:22%;bottom:8px}
  .faq-v2 .faq-showcase .section-child{width:32%;height:320px;left:16%;right:auto;bottom:5px}
  .faq-v2 .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .faq-v2 .faq-item summary{min-height:82px;padding:9px 14px;gap:11px;font-size:15px}.faq-v2 .faq-item summary span{width:48px}
  .faq-v2 .consultation-panel{position:relative;bottom:auto;margin-top:18px;padding:18px;display:grid!important;grid-template-columns:1fr;gap:14px}
  .faq-v2 .consultation-copy{padding:0;border:0;text-align:center}.faq-v2 .consultation-copy::before{display:none}
  .faq-v2 .consultation-panel form{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}.faq-v2 .consultation-panel button{grid-column:1/-1}
  .faq-v2 .faq-trust{position:relative;bottom:auto}.faq-v2 .safety-notes{position:relative;bottom:auto;margin-top:10px}
}

@media (min-width:1200px){
  .height-factors .factors-visual{width:40%;right:-3%;bottom:0;background-position:92% 86%;background-size:48%}
  .height-factors .factors-child{height:700px;left:0;right:auto;bottom:0}
}

/* Section 18 V2 — approved FAQ composition. */
.faq-v2{position:relative;min-height:941px;padding:24px 0 18px;overflow:hidden;background:radial-gradient(circle at 18% 42%,rgba(255,225,137,.28),transparent 28%),linear-gradient(145deg,#fffdf8,#fff2ca)}
.faq-v2 .faq-shell{position:relative;width:min(1596px,calc(100% - 76px));min-height:0;margin:auto}
.faq-v2 .faq-heading{text-align:center}
.faq-v2 .faq-heading h2{margin:0;color:#542000;font-size:clamp(40px,3.25vw,55px);line-height:1.05;letter-spacing:-.035em}
.faq-v2 .faq-heading h2 em{color:#d88b00;font-style:normal}
.faq-v2 .faq-heading p{margin:8px 0 0;color:#4a2616;font-size:20px;line-height:1.35}
.faq-v2 .faq-subtitle-mobile{display:none}
.faq-v2 .faq-main{height:470px;margin-top:14px;display:grid;grid-template-columns:44% 56%;gap:20px;align-items:stretch}
.faq-v2 .faq-showcase{position:relative;inset:auto;width:auto;height:auto;min-width:0;background-image:none;isolation:isolate}
.faq-v2 .faq-showcase::before{content:"";position:absolute;z-index:-1;width:430px;aspect-ratio:1;left:19%;top:4%;border-radius:50%;background:linear-gradient(145deg,rgba(255,246,203,.9),rgba(255,215,105,.38))}
.faq-v2 .faq-showcase::after{content:"";position:absolute;z-index:0;width:66%;height:55px;left:24%;bottom:17px;border-radius:50%;background:linear-gradient(#ffe9ad,#d9a647);box-shadow:0 15px 24px rgba(107,66,0,.16)}
.faq-v2 .faq-showcase .section-child{display:block!important;position:absolute;z-index:2;width:47%;height:430px;left:0;right:auto;bottom:5px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 12px 12px rgba(75,44,0,.12))}
.faq-v2 .faq-showcase .faq-product-art{display:block!important;position:absolute;z-index:1;width:58%;height:405px;left:auto;right:5%;bottom:28px;object-fit:contain;opacity:1;filter:drop-shadow(0 12px 13px rgba(80,48,0,.14))}
.faq-v2 .faq-list{width:auto;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content;gap:12px 14px;align-content:start}
.faq-v2 .faq-item{min-width:0;border:1px solid rgba(229,194,119,.38);border-radius:18px;background:#fff;box-shadow:0 9px 23px rgba(100,62,0,.07);overflow:hidden}
.faq-v2 .faq-item summary{min-height:91px;padding:10px 20px;display:flex;align-items:center;gap:16px;color:#4d220d;font-size:17px;line-height:1.3;font-weight:850;list-style:none;cursor:pointer}
.faq-v2 .faq-item summary::-webkit-details-marker{display:none}
.faq-v2 .faq-item summary span{width:58px;aspect-ratio:1;display:grid;place-items:center;flex:0 0 auto;color:#824300;border-radius:50%;background:#fff0c6}
.faq-v2 .faq-item summary svg{width:34px;height:34px}
.faq-v2 .faq-item summary::after{content:"";width:12px;height:12px;margin-left:auto;flex:0 0 auto;border-right:3px solid #6b2d00;border-bottom:3px solid #6b2d00;transform:rotate(45deg);transition:transform .2s ease}
.faq-v2 .faq-item[open] summary::after{transform:rotate(225deg)}
.faq-v2 .faq-item>p{margin:0;padding:0 20px 16px 94px;color:#554a43;font-size:14px;line-height:1.5}
.faq-v2 .faq-item:nth-child(7){grid-column:1}
.faq-v2 .consultation-panel{position:relative;z-index:2;left:auto;right:auto;bottom:auto;margin:10px 0 0;padding:13px 20px;display:grid!important;grid-template-columns:31% 69%;gap:22px;align-items:center;border:1px solid #e4b858;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(93,54,0,.08)}
.faq-v2 .consultation-copy{padding-left:84px;position:relative;border-right:1px solid #e4c98d}
.faq-v2 .consultation-copy::before{content:"";position:absolute;width:58px;height:58px;left:8px;top:50%;border-radius:50%;background:#fff0c6;transform:translateY(-50%)}
.faq-v2 .consultation-copy>p{margin:0 0 4px;color:#a36100;font-size:13px;font-weight:900;letter-spacing:.03em}
.faq-v2 .consultation-copy h3{margin:0;color:#582300;font-size:22px;line-height:1.13}
.faq-v2 .consultation-copy h3 em{color:#d58c00;font-style:normal}
.faq-v2 .consultation-panel form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 10px}
.faq-v2 .consultation-panel label{display:grid;gap:4px;color:#60331b;font-size:10px;font-weight:800}
.faq-v2 .consultation-panel input{width:100%;height:37px;padding:0 10px;border:1px solid #dfc691;border-radius:8px;background:#fff;color:#3d2418;font:inherit}
.faq-v2 .consultation-panel button{grid-column:1/-1;height:38px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:9px;color:#fff;background:linear-gradient(#f2b729,#d78600);font-size:14px;font-weight:900;cursor:pointer}
.faq-v2 .consultation-panel button svg{width:20px;height:20px}
.faq-v2 :is(summary,input,button):focus-visible{outline:3px solid #1678d3;outline-offset:3px}
.faq-v2 .faq-trust{position:relative;width:94%;left:auto;bottom:auto;margin:9px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.faq-v2 .faq-trust div{min-width:0;min-height:62px;padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:13px;background:#fff;font-size:13px;line-height:1.2}
.faq-v2 .faq-trust svg{width:38px;height:38px;flex:0 0 auto;color:#7a3c00}
.faq-v2 .safety-notes{position:relative;left:auto;right:auto;bottom:auto;margin:8px auto 0;max-width:1180px;color:#75665d;text-align:center;font-size:9px;line-height:1.25}
.faq-v2 .safety-notes p{margin:2px 0}

@media (max-width:767px){
  .faq-v2{min-height:0;padding:26px 0 30px;overflow:hidden}
  .faq-v2 .faq-shell{width:calc(100% - 2 * clamp(16px,10vw,40px));min-height:0}
  .faq-v2 .faq-heading h2{font-size:clamp(29px,8vw,38px);line-height:1.08}
  .faq-v2 .faq-heading h2 em{display:block;margin-top:3px}
  .faq-v2 .faq-subtitle-desktop{display:none}
  .faq-v2 .faq-subtitle-mobile{display:block;margin:10px auto 0;max-width:310px;font-size:15px;line-height:1.35}
  .faq-v2 .faq-main{height:auto;margin-top:12px;display:grid;grid-template-columns:1fr;gap:14px}
  .faq-v2 .faq-showcase{height:320px;background-image:none}
  .faq-v2 .faq-showcase::before{width:250px;left:11%;top:12%}.faq-v2 .faq-showcase::after{width:92%;height:36px;left:4%;bottom:8px}
  .faq-v2 .faq-showcase .section-child{display:block!important;width:48%;height:250px;left:auto;right:-2%;bottom:13px}
  .faq-v2 .faq-showcase .faq-product-art{display:block!important;width:72%;height:270px;left:-5%;right:auto;bottom:20px}
  .faq-v2 .faq-list{width:100%;display:grid;grid-template-columns:1fr;gap:9px}
  .faq-v2 .faq-item:nth-child(7){grid-column:auto}
  .faq-v2 .faq-item{border-radius:14px}
  .faq-v2 .faq-item summary{min-height:76px;padding:9px 13px;gap:12px;font-size:15px;line-height:1.3}
  .faq-v2 .faq-item summary span{width:49px}.faq-v2 .faq-item summary svg{width:29px;height:29px}
  .faq-v2 .faq-item>p{padding:0 15px 14px 74px;font-size:13px;line-height:1.5}
  .faq-v2 .consultation-panel{margin-top:16px;padding:17px 14px;display:grid!important;grid-template-columns:1fr;gap:14px;border-radius:16px}
  .faq-v2 .consultation-copy{padding:0;border:0}.faq-v2 .consultation-copy::before{display:none}
  .faq-v2 .consultation-copy>p{font-size:11px}.faq-v2 .consultation-copy h3{font-size:21px;line-height:1.14}
  .faq-v2 .consultation-panel form{display:grid;grid-template-columns:1fr;gap:9px}
  .faq-v2 .consultation-panel label{font-size:11px}.faq-v2 .consultation-panel input{height:43px}.faq-v2 .consultation-panel button{height:48px;font-size:14px}
  .faq-v2 .faq-trust{width:100%;margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .faq-v2 .faq-trust div{min-height:118px;padding:10px 4px;display:flex;flex-direction:column;gap:7px;text-align:center;font-size:10px;overflow-wrap:anywhere}.faq-v2 .faq-trust svg{width:38px;height:38px}
  .faq-v2 .safety-notes{margin-top:12px;text-align:left;font-size:10px;line-height:1.4}.faq-v2 .safety-notes p{margin:5px 0}
}

/* Layout reconciliation pass: section-specific composition after the shared asset rules. */
@media (min-width:768px){
  .hero-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/child-product-mockup-final.webp");background-position:center bottom;background-size:contain}
  .journey-visual,.factors-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/product-mockup-final.webp");background-position:center bottom;background-size:contain}
  .absorption-product,.development-hero,.usage-visual,.faq-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/product-mockup-final.webp");background-position:center bottom;background-size:contain}
  .journey-child,.factors-child{display:block!important}
  .journey-visual>.journey-child,.factors-visual>.factors-child{display:block!important}
  .journey-box,.journey-bottle,.factors-bottle,.factors-box{display:none!important}
  .absorption-product .section-child,.development-hero>img:first-child,.usage-visual>img:first-child,.faq-product .section-child{display:block!important}
  .growth-journey{min-height:941px}.journey-visual{right:-1%;bottom:0;width:45%;height:650px;background-position:56% 68%;background-size:40%}.journey-child{height:540px;right:-2%;bottom:35px}
  .support-roadmap{bottom:0;padding:13px 18px;border-radius:18px}.support-roadmap h3{margin-bottom:10px;font-size:21px}.support-roadmap ol{gap:10px}.support-roadmap li{min-height:76px;padding:10px 14px;border-radius:13px;border-left-width:4px}.support-roadmap b{margin-bottom:4px;font-size:16px}.support-roadmap span{font-size:12px;line-height:1.35}
  .ingredients{min-height:941px}.ingredients-shell{min-height:800px}.ingredient-list{gap:8px 12px}.ingredient-row{min-height:88px;padding:7px 10px;grid-template-columns:58px minmax(0,1fr) 128px}.ingredient-icon{width:48px}.ingredient-row strong{font-size:16px}.ingredient-row b{padding:9px 6px;font-size:17px}.ingredient-row strong small{font-size:10px}.ingredients-product{height:500px;top:135px}.dosage{bottom:18px}
  .japan-origin{min-height:941px}.origin-shell{min-height:810px}.origin-card{min-height:530px}.origin-card>img{height:260px}.testimonials{bottom:0;gap:14px}.testimonials article{min-height:125px;padding:14px 18px;grid-template-columns:52px 1fr;gap:12px;border-radius:17px}.testimonial-avatar{width:52px;height:52px;font-size:17px}.testimonials h3{margin:2px 0 5px;font-size:17px}.testimonials h3 span{font-size:11px}.testimonials p{font-size:12px;line-height:1.35}
  .packages{min-height:941px}.packages-shell{min-height:850px}.package-grid{margin-top:14px}.package-card{min-height:365px}.pack-images{height:230px}.pack-images img{height:220px}.package-card h3{font-size:25px}.package-card strong{font-size:34px}.package-benefits{margin:10px 0;gap:8px}.package-benefits span{padding:8px 7px;border-radius:11px;font-size:11px}.distributor-commitments{margin:8px 0 10px;padding:10px 18px;border-radius:15px}.distributor-commitments h3{margin-bottom:7px;font-size:18px}.distributor-commitments ul{gap:5px 22px}.distributor-commitments li{padding-left:18px;font-size:12px}.offer-bar{margin-top:10px;min-height:120px}.offer-bar>strong{font-size:42px}.offer-bar time{font-size:34px}.offer-bar a{min-height:70px;font-size:25px}
  .development-hero{background-position:96% 82%;background-size:30%}.faq{min-height:941px}.faq-shell{min-height:870px}.faq-list{gap:8px 12px}.faq-item summary{min-height:58px;padding:7px 14px;gap:10px;font-size:15px}.faq-item summary span{width:42px}.faq-item>p{padding:0 14px 10px 66px;font-size:12px}.faq-product{top:120px;height:410px;background-position:34% bottom;background-size:52%}.faq-product .section-child{height:370px}.consultation-panel{bottom:118px;padding:14px 20px;gap:18px;border-radius:18px}.consultation-panel h3{font-size:21px;line-height:1.15}.consultation-panel form{grid-template-columns:repeat(4,1fr);gap:8px}.consultation-panel label{gap:3px;font-size:10px}.consultation-panel input{height:34px;padding:0 9px;border-radius:9px}.consultation-panel button{height:36px;border-radius:10px;font-size:13px}.consultation-panel button svg{width:18px;height:18px}.faq-trust{bottom:54px}.faq-trust div{min-height:55px;padding:7px;font-size:12px}.faq-trust svg{width:36px;height:36px}.safety-notes{bottom:0;font-size:9px;line-height:1.25}.safety-notes p{margin:2px 0}
}
@media (max-width:767px){
  .absorption-product,.faq-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/product-mockup-final.webp")}.absorption-product .section-child,.faq-product .section-child{display:none!important}
  .hero-visual,.journey-visual,.factors-visual,.development-hero,.usage-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/child-product-mockup-mobile-final.webp")}
  .factor-panels{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
  .ingredient-row{grid-template-columns:70px minmax(0,1fr) 100px}
  .legacy-mockup>img{display:none!important}
  .consultation-panel.desktop-content{position:relative;left:auto;right:auto;bottom:auto;margin:22px 0 14px;padding:20px 16px;display:grid!important;grid-template-columns:1fr;gap:16px;border:1px solid #e8ca7e;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(82,44,0,.08)}
  .consultation-panel>div>p{margin:0 0 7px;color:#a66500;font-size:12px;font-weight:900}.consultation-panel h3{margin:0;color:#582300;font-size:23px;line-height:1.2}.consultation-panel h3 em{color:#d58c00;font-style:normal}.consultation-panel form{display:grid;grid-template-columns:1fr;gap:10px}.consultation-panel label{display:grid;gap:5px;color:#60331b;font-size:12px;font-weight:800}.consultation-panel input{width:100%;height:42px;padding:0 11px;border:1px solid #dfc691;border-radius:10px;background:#fff;font:inherit}.consultation-panel button{height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;color:#fff;background:linear-gradient(#f2b729,#ce7900);font-size:14px;font-weight:900}.consultation-panel button svg{width:21px;height:21px}
  .faq-trust{position:relative;left:auto;bottom:auto;width:100%;margin-top:12px}.safety-notes{position:relative;bottom:auto}
  .faq-v2 .faq-shell{width:calc(100% - 2 * clamp(16px,10vw,40px));min-height:0}
  .faq-v2 .faq-main{height:auto;display:grid;grid-template-columns:1fr}
  .faq-v2 .faq-showcase{height:320px}
  .faq-v2 .consultation-panel form{display:grid;grid-template-columns:1fr}
  .faq-v2 .faq-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:768px) and (max-width:1199px){
  .faq-v2{min-height:0;height:auto;padding:30px 0}
  .faq-v2 .faq-shell{width:calc(100% - 48px);min-height:0}
  .faq-v2 .faq-heading h2{font-size:clamp(34px,5vw,48px)}
  .faq-v2 .faq-heading p{font-size:17px}
  .faq-v2 .faq-main{height:auto;display:grid;grid-template-columns:1fr;gap:18px}
  .faq-v2 .faq-showcase{position:relative;inset:auto;width:auto;height:340px;background-position:58% 78%;background-size:42%}
  .faq-v2 .faq-showcase::before{width:310px;left:31%;top:0}.faq-v2 .faq-showcase::after{width:56%;left:22%;bottom:8px}
  .faq-v2 .faq-showcase .section-child{display:block!important;width:32%;height:320px;left:16%;right:auto;bottom:5px}
  .faq-v2 .faq-showcase .faq-product-art{display:block!important;width:44%;height:320px;left:auto;right:20%;bottom:16px}
  .faq-v2 .faq-list{width:100%;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .faq-v2 .faq-item summary{min-height:82px;padding:9px 14px;gap:11px;font-size:15px}.faq-v2 .faq-item summary span{width:48px}
  .faq-v2 .consultation-panel{position:relative;left:auto;right:auto;bottom:auto;margin-top:18px;padding:18px;display:grid!important;grid-template-columns:1fr;gap:14px}
  .faq-v2 .consultation-copy{padding:0;border:0;text-align:center}.faq-v2 .consultation-copy::before{display:none}
  .faq-v2 .consultation-panel form{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}.faq-v2 .consultation-panel button{grid-column:1/-1}
  .faq-v2 .faq-trust{position:relative;left:auto;bottom:auto}.faq-v2 .safety-notes{position:relative;bottom:auto;margin-top:10px}
}

/* Unique Imagen mockups: final responsive asset mapping. */
@media (min-width:768px){
  .hero-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-01/section-01-desktop.webp")!important}.assurance-product{background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-02/section-02-desktop.webp") center/contain no-repeat!important}.concerns .solution-visual{background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-03/section-03-desktop.webp") center/contain no-repeat!important}.journey-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-04/section-04-desktop.webp")!important}.factors-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-05/section-05-desktop.webp")!important}.formula-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-06/section-06-desktop.webp")!important}.solution-product-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-07/section-07-desktop.webp")!important}.mechanism-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-08/section-08-desktop.webp")!important}.alpha-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-09/section-09-desktop.webp")!important}.protetite-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-10/section-10-desktop.webp")!important}.absorption-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-11/section-11-desktop.webp")!important}.development-hero{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-12/section-12-desktop.webp")!important}.ingredients-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-13/section-13-desktop.webp")!important}.origin-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-14/section-14-desktop.webp")!important}.legal-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-15/section-15-desktop.webp")!important}.usage-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-16/section-16-desktop.webp")!important}
}
@media (width <= 767px){
  .hero-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-01/section-01-mobile.webp")!important}.assurance-product{background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-02/section-02-mobile.webp") center/contain no-repeat!important}.concerns .solution-visual{display:block;min-height:390px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-03/section-03-mobile.webp") center/contain no-repeat!important}.journey-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-04/section-04-mobile.webp")!important}.factors-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-05/section-05-mobile.webp")!important}.formula-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-06/section-06-mobile.webp")!important}.solution-product-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-07/section-07-mobile.webp")!important}.mechanism-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-08/section-08-mobile.webp")!important}.alpha-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-09/section-09-mobile.webp")!important}.protetite-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-10/section-10-mobile.webp")!important}.absorption-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-11/section-11-mobile.webp")!important}.development-hero{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-12/section-12-mobile.webp")!important}.ingredients-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-13/section-13-mobile.webp")!important}.origin-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-14/section-14-mobile.webp")!important}.legal-product{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-15/section-15-mobile.webp")!important}.usage-visual{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-16/section-16-mobile.webp")!important}
}

/* Section 18 V3 — isolated visual and true single-column accordion. */
.faq-v3 .faq-product-art-picture,.faq-v3 .faq-product-art{display:none!important}
.faq-v3 :is(.faq-expert,.faq-bottle,.faq-box,.faq-product-stage){display:block!important}
.faq-v3 .faq-item[open]{border-color:#dc9400;background:linear-gradient(135deg,#fff9e8,#fffdf8);box-shadow:0 12px 28px rgb(119 72 0 / 11%)}
.faq-v3 .faq-item[open] summary{color:#572500}
.faq-v3 .faq-item[open]>p{border-top:1px solid #f0ddb4}

@media (min-width:1200px){
  .faq-v3{min-height:941px;padding:24px 0 18px}
  .faq-v3 .faq-shell{width:min(1596px,calc(100% - 76px))}
  .faq-v3 .faq-heading h2{font-size:clamp(48px,4vw,62px)}
  .faq-v3 .faq-main{height:500px;margin-top:14px;display:grid;grid-template-columns:40% 60%;gap:24px}
  .faq-v3 .faq-showcase{position:relative;height:500px;overflow:hidden;border-radius:30px;background:radial-gradient(circle at 46% 46%,#fff4c9 0 38%,transparent 39%),linear-gradient(145deg,#fffdf7,#fff5d9)}
  .faq-v3 .faq-showcase::before{width:390px;left:12%;top:4%;background:linear-gradient(145deg,rgb(255 246 203 / 92%),rgb(255 215 105 / 42%))}
  .faq-v3 .faq-showcase::after{display:none}
  .faq-v3 .faq-showcase .faq-expert{position:absolute;z-index:2;width:48%;height:455px;left:24%;right:auto;bottom:0;object-fit:contain;object-position:bottom;filter:drop-shadow(0 12px 14px rgb(78 45 0 / 12%))}
  .faq-v3 .faq-showcase .section-child{position:absolute;z-index:3;width:43%;height:455px;left:-2%;right:auto;bottom:-8px;object-fit:contain;object-position:bottom}
  .faq-v3 .faq-product-stage{position:absolute;z-index:3;width:43%;height:64px;left:auto;right:0;bottom:8px;border-radius:50%;background:linear-gradient(#ffe7a4,#d9a442);box-shadow:0 14px 22px rgb(103 61 0 / 17%)}
  .faq-v3 .faq-bottle,.faq-v3 .faq-box{position:absolute;z-index:4;bottom:40px;object-fit:contain;filter:drop-shadow(0 12px 10px rgb(74 42 0 / 18%))}
  .faq-v3 .faq-bottle{width:15%;height:240px;right:26%}.faq-v3 .faq-box{width:22%;height:292px;right:2%}
  .faq-v3 .faq-list{width:auto;margin:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;gap:8px;align-content:start}
  .faq-v3 .faq-item{border-radius:15px}
  .faq-v3 .faq-item summary{min-height:54px;padding:7px 16px;gap:14px;font-size:15px}
  .faq-v3 .faq-item summary span{width:40px}.faq-v3 .faq-item summary svg{width:25px;height:25px}
  .faq-v3 .faq-item>p{padding:11px 18px 13px 70px;font-size:13px;line-height:1.45;text-align:left}
  .faq-v3 .consultation-panel{margin-top:9px}
}

@media (min-width:768px) and (max-width:1199px){
  .faq-v3 .faq-main{height:auto;grid-template-columns:1fr;gap:16px}
  .faq-v3 .faq-showcase{height:360px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at 48% 48%,#fff2c4 0 31%,transparent 32%),#fffaf0}
  .faq-v3 .faq-showcase::after{display:none}
  .faq-v3 .faq-showcase .faq-expert{position:absolute;z-index:2;width:30%;height:345px;left:36%;right:auto;bottom:0;object-fit:contain}
  .faq-v3 .faq-showcase .section-child{width:31%;height:345px;left:12%;right:auto;bottom:0}
  .faq-v3 .faq-product-stage{position:absolute;z-index:3;width:30%;height:48px;left:auto;right:9%;bottom:10px;border-radius:50%;background:linear-gradient(#ffe7a4,#d9a442)}
  .faq-v3 .faq-bottle,.faq-v3 .faq-box{position:absolute;z-index:4;bottom:34px;object-fit:contain}.faq-v3 .faq-bottle{width:10%;height:190px;right:27%}.faq-v3 .faq-box{width:15%;height:235px;right:11%}
  .faq-v3 .faq-list{grid-template-columns:minmax(0,1fr);gap:8px}
}

@media (width <= 767px){
  .faq-v3 .faq-main{grid-template-columns:1fr}
  .faq-v3 .faq-showcase{height:330px;overflow:hidden;border-radius:20px;background:radial-gradient(circle at 48% 48%,#fff2c4 0 38%,transparent 39%),#fffaf0}
  .faq-v3 .faq-showcase::after{display:none}
  .faq-v3 .faq-showcase .faq-expert{position:absolute;z-index:2;width:48%;height:305px;left:31%;right:auto;bottom:0;object-fit:contain}
  .faq-v3 .faq-showcase .section-child{width:49%;height:305px;left:-8%;right:auto;bottom:0}
  .faq-v3 .faq-product-stage{position:absolute;z-index:3;width:42%;height:36px;left:auto;right:-1%;bottom:8px;border-radius:50%;background:linear-gradient(#ffe7a4,#d9a442)}
  .faq-v3 .faq-bottle,.faq-v3 .faq-box{position:absolute;z-index:4;bottom:27px;object-fit:contain}.faq-v3 .faq-bottle{width:15%;height:130px;right:24%}.faq-v3 .faq-box{width:22%;height:168px;right:1%}
  .faq-v3 .faq-list{grid-template-columns:minmax(0,1fr);gap:8px}
  .faq-v3 .faq-item>p{padding:11px 15px 14px;font-size:13px}
}

/* Mobile responsive repair V2 — readable cards and contained product art. */
@media (width <= 767px){
  .hero,.assurance,.formula,.solution{overflow:hidden}
  .molecule{overflow:hidden}
  .development-card>span{max-width:100%}

  .formula .formula-shell{width:calc(100% - 32px);display:flex;flex-direction:column}
  .formula .formula-heading{order:1}
  .formula .formula-cards{order:2;width:100%;margin-top:22px;grid-template-columns:1fr;gap:12px}
  .formula .formula-card{min-height:150px;padding:16px;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;border-radius:18px}
  .formula .formula-card>div{min-width:0}.formula .formula-icon{width:82px}
  .formula .formula-card h3{font-size:21px}.formula .formula-card b{font-size:15px}.formula .formula-card p{margin-top:9px;padding-top:9px;font-size:13px;line-height:1.45}
  .formula .formula-visual{order:3;position:relative;width:100%;height:340px;right:auto;bottom:auto;margin-top:10px;background-position:center bottom!important;background-size:contain!important}
  .formula .formula-visual>img{display:none!important}
  .formula .formula-cta{order:4;min-height:64px}

  .solution .solution-shell{display:flex;flex-direction:column}
  .solution .solution-heading{order:1}
  .solution .solution-cards{order:2;width:100%;margin-top:0;grid-template-columns:1fr;gap:12px}
  .solution .solution-card{min-height:148px;padding:16px;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:16px}
  .solution .solution-icon{width:72px;margin:0}.solution .solution-card>div{min-width:0}
  .solution .solution-card h4{font-size:20px}.solution .solution-card p{margin-top:7px;font-size:13px;line-height:1.45}
  .solution .solution-product-visual{order:3;position:relative;width:100%;height:360px;right:auto;bottom:auto;margin-top:12px;background-position:center bottom!important;background-size:contain!important}
  .solution .solution-product-visual>img{display:none!important}
  .solution .solution-product-leaves i{max-width:82px}
  .solution .solution-cta{order:4;min-height:66px}

  .usage .usage-shell{width:calc(100% - 32px)}
  .usage .usage-cards{width:100%;grid-template-columns:1fr;gap:12px}
  .usage .usage-card{min-height:170px;padding:18px;display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:18px}
  .usage .usage-card span{width:112px}.usage .usage-card h3{font-size:21px;line-height:1.25}.usage .usage-card p{font-size:13px;line-height:1.45}
  .usage .usage-visual{max-width:calc(100% + 32px);margin-inline:-16px}

  .packages .packages-shell{width:calc(100% - 32px)}
  .packages .package-card{min-height:310px;padding:14px;grid-template-columns:42% minmax(0,1fr);gap:12px}
  .packages .pack-images{width:100%;height:245px;overflow:hidden}
  .packages .pack-images img{height:230px;margin:0;max-width:100%;object-fit:contain}
  .packages .pack-images:has(img:nth-child(1):last-child) img{width:72%}
  .packages .pack-images:has(img:nth-child(2):last-child) img{width:48%}
  .packages .pack-images:has(img:nth-child(3):last-child) img{width:34%}
  .packages .package-price>strong{font-size:clamp(25px,7vw,31px);white-space:nowrap}
  .packages .package-meta{width:100%}
  .packages .package-meta span{font-size:13px}
  .packages .offer-bar a{min-height:58px}
  .faq-v3 .faq-showcase .section-child{left:0}
}

/* Section 12 V3 — child and product are integrated into one desktop background. */
@media (min-width:768px){
  .whole-development{
    background-color:#fff8df;
    background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-12-desktop-integrated-v5.webp");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }
  .whole-development .development-hero{display:none!important}
}

/* Production responsive architecture fixes */
.assurance-card p :is(span,strong){min-width:0;max-width:100%;overflow-wrap:anywhere}
.mechanism-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.mechanism-card{min-width:0}
.mechanism-card>div{min-width:0}
.mechanism-card :is(h3,p,span){overflow-wrap:anywhere}
@media (min-width:768px) and (max-width:1180px){
  .mechanism-shell{width:calc(100% - 64px)}
  .mechanism-cards{gap:18px}
  .mechanism-card{padding-inline:18px}
  .mechanism-icon{width:min(180px,100%)}
  .mechanism-card h3{font-size:21px}
  .mechanism-card p{font-size:16px}
}
@media (min-width:768px){
  .packages .package-meta span{font-size:13px}
}

@media (min-width:768px){.packages .package-grid{margin-top:42px}}

/* Premium quantity capsule */
.quantity-control{padding:9px 11px;border:1px solid #efdfbd;border-radius:14px;background:#fffdf6}
.quantity-control>span{color:#70401e;font-size:13px;font-weight:800}
.quantity-control>div{grid-template-columns:38px 48px 38px;padding:4px;border:1px solid #e0bf7c;border-radius:999px;background:#fff;box-shadow:0 5px 14px rgb(111 67 0 / 9%)}
.quantity-control button{width:38px;height:38px;border:0;border-radius:50%;color:#7a4308;background:#fff0c8;font-size:20px;line-height:1;transition:background .18s ease,transform .18s ease}
.quantity-control button:hover{background:#ffe29a}.quantity-control button:active{transform:scale(.94)}
.quantity-control input{width:48px;height:38px;border:0;background:transparent;color:#572800;font-size:16px;font-weight:900;appearance:textfield}
.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{margin:0;appearance:none}

/* Desktop order summary composition */
@media (min-width:768px){
  .order-summary{grid-template-columns:minmax(190px,1.2fr) minmax(190px,1fr) auto;align-items:end}
  .order-summary>label{grid-column:1}
  .order-facts{grid-column:2}
  .quantity-control{grid-column:3;padding:0;display:grid;justify-items:center;gap:5px;border:0;background:transparent}
  .quantity-control>span{font-size:11px;line-height:1}
  .order-total{grid-column:1/-1}
}

/* Approved desktop order form mockup */
@media (min-width:768px){
  .faq-v3 .consultation-panel{grid-template-columns:minmax(245px,30%) minmax(0,70%);padding:26px 30px;gap:28px;align-items:stretch;border-radius:24px;background:linear-gradient(115deg,#fff9e9 0 30%,#fff 30% 100%);box-shadow:0 18px 44px rgb(90 52 0 / 12%)}
  .faq-v3 .consultation-copy{padding:22px 18px;display:flex;flex-direction:column;justify-content:center}
  .faq-v3 .consultation-copy>p{font-size:13px}.faq-v3 .consultation-copy h3{font-size:clamp(25px,2vw,34px);line-height:1.12}
  .faq-v3 .consultation-panel form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .faq-v3 .consultation-panel form>label{font-size:12px}
  .faq-v3 .consultation-panel form>label input{height:46px;border-radius:10px}
  .order-summary{grid-column:1/-1;padding:18px 20px;grid-template-columns:minmax(190px,1.2fr) minmax(190px,1fr) auto;gap:14px 18px;align-items:end;border-color:#ecd6a5;border-radius:17px;background:#fff8e8}
  .order-summary h4{font-size:19px}
  .order-summary select{height:44px;border-radius:10px}
  .order-facts{gap:9px}.order-facts span{min-height:44px;justify-content:center;padding:7px 10px;background:rgb(255 255 255 / 78%)}
  .quantity-control{grid-column:3;padding:0;display:grid;justify-items:center;align-self:end;gap:7px;border:0;background:transparent}
  .quantity-control>span{font-size:12px}
  .quantity-control>div{grid-template-columns:38px 48px 38px}
  .order-total{grid-column:1/-1;margin-top:2px;padding-top:13px;font-size:15px}.order-total strong{font-size:24px}
  .faq-v3 .consultation-privacy{grid-column:1/-1;justify-self:start;margin:0;padding:6px 10px}
  .faq-v3 .consultation-panel form>button[type="submit"]{grid-column:1/-1;height:58px;border-radius:12px;font-size:18px}
}

button{font-family:inherit}

/* Selectable packages and synchronized order summary */
.package-card{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.package-card.is-selected{border-color:#d79408;box-shadow:0 18px 46px rgb(126 77 0 / 18%),inset 0 0 0 2px rgb(215 148 8 / 12%)}
.package-select{grid-column:1/-1;width:100%;min-height:48px;margin-top:12px;border:1px solid #d58a00;border-radius:13px;color:#8a4d00;background:#fff8df;font-size:15px;font-weight:900;cursor:pointer}
.package-card.is-selected .package-select{color:#fff;background:linear-gradient(#f4b82b,#d48300)}
.order-summary{grid-column:1/-1;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;border:1px solid #e3bd68;border-radius:16px;background:#fff9e9}
.order-summary h4{grid-column:1/-1;margin:0;color:#582300;font-size:16px}
.order-summary>label{font-size:12px}
.order-summary select{width:100%;height:42px;margin-top:5px;padding:0 10px;border:1px solid #dec38d;border-radius:10px;color:#582300;background:#fff;font:inherit}
.order-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.order-facts span{padding:7px 9px;display:grid;color:#826852;border-radius:10px;background:#fff;font-size:11px}
.order-facts strong{margin-top:2px;color:#582300;font-size:13px}
.quantity-control{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#60331b;font-size:12px;font-weight:800}
.quantity-control>div{display:grid;grid-template-columns:40px 58px 40px;align-items:center}
.quantity-control button{height:40px;border:1px solid #d9b76f;color:#6c360c;background:#fff;font-size:22px;font-weight:800;cursor:pointer}
.quantity-control button:first-child{border-radius:10px 0 0 10px}.quantity-control button:last-child{border-radius:0 10px 10px 0}
.quantity-control input{width:58px;height:40px;padding:0;text-align:center;border:1px solid #d9b76f;border-inline:0;border-radius:0;background:#fff;font:inherit;font-weight:800}
.order-total{grid-column:1/-1;margin:0;padding-top:10px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ead4a5;color:#60331b;font-size:14px;font-weight:800}
.order-total strong{color:#d27f00;font-size:20px}
@media (width <= 767px){
  .packages .package-card{padding-bottom:14px;grid-template-rows:1fr auto}
  .packages .package-select{grid-column:1/-1;grid-row:2;min-height:46px;margin:5px 4px 0;font-size:13px}
  .order-summary{grid-template-columns:1fr;padding:12px}
  .order-summary h4,.quantity-control,.order-total{grid-column:1}
}

/* Production footer and global readability safety */
.site-footer{padding:44px 0 0;color:#f9edcf;background:#4b210b}.footer-inner{width:min(1500px,calc(100% - 64px));margin:auto;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:52px}.footer-brand img{width:190px;height:auto;padding:10px;border-radius:12px;background:#fff}.site-footer h2{margin:0 0 12px;color:#fff;font-size:18px}.site-footer p,.site-footer address,.site-footer a{font-size:14px;line-height:1.65}.site-footer address{font-style:normal}.site-footer a{display:block;color:#f9edcf;text-decoration:none}.site-footer a:hover{text-decoration:underline}.footer-brand p{max-width:480px}.footer-bottom{margin:32px 0 0!important;padding:16px;text-align:center;border-top:1px solid rgb(255 255 255 / 16%)}
@media(width <= 767px){.footer-inner{width:calc(100% - 32px);grid-template-columns:1fr;gap:25px}.site-footer{padding-top:34px}.site-footer h2{font-size:17px}.site-footer p,.site-footer address,.site-footer a{font-size:14px}.footer-bottom{padding-inline:16px!important}}
.footer-brand>strong{display:block;color:#fff;font-size:20px;letter-spacing:.04em}

/* Section 18 approved mobile redesign */
@media (width <= 767px){
  .faq-v3{padding:34px 0 38px;background:linear-gradient(155deg,#fffdf8,#fff1cb)}
  .faq-v3 .faq-shell{width:calc(100% - 32px);min-height:0}
  .faq-v3 .faq-heading .faq-eyebrow{width:max-content;max-width:100%;margin:0 auto 14px;padding:8px 14px;display:block;color:#5c2b0f;border:1px solid #d88b00;border-radius:99px;background:rgb(255 255 255 / 64%);font-size:clamp(10px,3vw,13px);font-weight:900}
  .faq-v3 .faq-heading h2{font-size:clamp(31px,8.7vw,42px);line-height:1.04}
  .faq-v3 .faq-heading h2 em{display:block}
  .faq-v3 .faq-heading .faq-subtitle-desktop{display:none}
  .faq-v3 .faq-heading .faq-subtitle-mobile{max-width:340px;margin:11px auto 0;display:block;color:#6d584a;font-size:clamp(14px,3.8vw,17px);line-height:1.4}
  .faq-v3 .faq-main{display:grid;grid-template-columns:1fr;gap:14px}
  .faq-v3 .faq-showcase{position:relative;width:100%;height:300px;left:auto;top:auto;margin-top:16px;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 50% 48%,#fff0bb 0 40%,transparent 41%),#fffaf0;box-shadow:0 12px 28px rgb(91 53 0 / 8%)}
  .faq-v3 .faq-showcase .faq-expert{width:46%;height:280px;left:31%;bottom:0}
  .faq-v3 .faq-showcase .section-child{width:47%;height:282px;left:-2%;bottom:0}
  .faq-v3 .faq-product-stage{width:40%;height:34px;right:0;bottom:6px}
  .faq-v3 .faq-bottle{width:14%;height:122px;right:23%;bottom:24px}.faq-v3 .faq-box{width:21%;height:158px;right:0;bottom:24px}
  .faq-v3 .faq-list{width:100%;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border:1px solid #e2bd6c;border-radius:20px;background:#fff;box-shadow:0 14px 32px rgb(91 53 0 / 8%)}
  .faq-v3 .faq-list::before{content:"CÂU HỎI THƯỜNG GẶP";padding:14px 16px;color:#59280d;border-bottom:1px solid #ead6aa;background:#fff8e6;font-size:15px;font-weight:900}
  .faq-v3 .faq-item{min-width:0;border:0;border-radius:0;background:#fff;box-shadow:none}
  .faq-v3 .faq-item+.faq-item{border-top:1px solid #eadfca}
  .faq-v3 .faq-item summary{min-height:66px;padding:8px 13px;gap:11px;font-size:clamp(14px,3.8vw,17px);line-height:1.28}
  .faq-v3 .faq-item summary span{width:43px;flex:0 0 auto}.faq-v3 .faq-item summary svg{width:25px;height:25px}
  .faq-v3 .faq-item summary::after{width:11px;height:11px;flex:0 0 auto}
  .faq-v3 .faq-item[open]{border:0;background:#fff;box-shadow:none}
  .faq-v3 .faq-item[open] summary{background:#fffaf0}
  .faq-v3 .faq-item[open]>p{margin:0 12px 13px;padding:12px 13px;color:#5d5149;border:0;border-radius:12px;background:#fff7df;font-size:14px;line-height:1.5}
  .faq-v3 .consultation-panel{margin-top:16px;padding:17px 14px;display:grid!important;grid-template-columns:1fr;gap:13px;border:1px solid #deb35a;border-radius:20px;background:rgb(255 255 255 / 90%);box-shadow:0 14px 32px rgb(91 53 0 / 9%)}
  .faq-v3 .consultation-copy{padding:0;text-align:left}
  .faq-v3 .consultation-copy>p{margin:0 0 6px;font-size:12px}.faq-v3 .consultation-copy h3{font-size:clamp(22px,6vw,28px);line-height:1.08}
  .faq-v3 .consultation-panel form{display:grid;grid-template-columns:1fr;gap:9px}
  .faq-v3 .consultation-panel label{gap:5px;font-size:13px}.faq-v3 .consultation-panel input{height:46px;border-radius:10px}
  .faq-v3 .consultation-privacy{margin:1px 0;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#438536;border-radius:10px;background:#f1f8e9;font-size:12px;font-weight:800}
  .faq-v3 .consultation-privacy::before{content:"✓";width:21px;height:21px;display:grid;place-items:center;color:#fff;border-radius:50%;background:#58a348}
  .faq-v3 .consultation-panel button{height:54px;border-radius:11px;font-size:16px}
  .faq-v3 .faq-trust{width:100%;margin-top:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .faq-v3 .faq-trust div{min-width:0;min-height:104px;padding:9px 4px;gap:7px;border:1px solid #f0dfb8;border-radius:14px;background:#fff;font-size:clamp(10px,2.8vw,12px);line-height:1.2}
  .faq-v3 .faq-trust svg{width:35px;height:35px}
  .faq-v3 .safety-notes{margin-top:12px;padding:12px;color:#75665d;border-radius:14px;background:rgb(255 255 255 / 65%);font-size:13px;line-height:1.42;text-align:left}
  .faq-v3 .safety-notes p{margin:6px 0}
}

/* Section 12 approved mobile redesign */
@media (width <= 767px){
  .whole-development{min-height:0;padding:42px 0 52px;overflow:hidden;background:#fff8df url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-12-mobile-v2.webp") center/cover no-repeat}
  .whole-development .development-shell{width:calc(100% - 32px);min-height:0}
  .whole-development .development-heading{text-align:center}
  .whole-development .development-heading h2{font-size:clamp(28px,7.5vw,40px);line-height:1.12}
  .whole-development .development-heading p{max-width:640px;margin:12px auto 0;display:block;font-size:clamp(14px,3.8vw,18px);line-height:1.45}
  .whole-development .development-hero{display:block!important;width:calc(100% + 32px);height:340px;inset:auto;margin:12px -16px 0;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-12-v2/mobile-clean.webp") center/contain no-repeat!important}
  .whole-development .development-cards{position:relative;width:100%;margin-top:-28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .whole-development .development-card{grid-column:auto;min-width:0;min-height:218px;padding:14px 10px;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;gap:8px;text-align:left;border-radius:20px;background:#fff;box-shadow:0 8px 20px rgb(91 53 0 / 8%)}
  .whole-development .development-card>span{grid-column:1;grid-row:1;width:56px;height:56px;margin:0}
  .whole-development .development-card h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(15px,4vw,19px);line-height:1.2}
  .whole-development .development-card h3 br{display:none}
  .whole-development .development-card p{grid-column:1/-1;grid-row:2;margin:4px 0 0;display:block;font-size:clamp(13px,3.35vw,16px);line-height:1.4;text-align:left}
  .whole-development .development-card:last-child{grid-column:1/-1;min-height:150px;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;padding:16px 20px}
  .whole-development .development-card:last-child>span{grid-row:1/3;width:68px;height:68px}
  .whole-development .development-card:last-child h3,.whole-development .development-card:last-child p{grid-column:2}
  .whole-development .development-card:last-child p{grid-row:2}
  .whole-development .development-cta{width:100%;min-height:78px;margin:18px 0 0;padding:10px 12px;font-size:clamp(20px,5.3vw,27px)}
}

/* Section 13 approved mobile redesign */
@media (width <= 767px){
  .ingredients{padding:38px 0 52px}
  .ingredients .ingredients-shell{width:calc(100% - 32px);display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:12px}
  .ingredients h2{grid-column:1/-1;grid-row:1;margin:0 0 4px;font-size:clamp(29px,7.6vw,40px);line-height:1.12}
  .ingredients .ingredients-product{grid-column:1;grid-row:2;position:relative;width:100%;height:270px;inset:auto;margin:0;background-position:center!important;background-size:contain!important}
  .ingredients .dosage{grid-column:2;grid-row:2;position:relative;width:100%;min-height:270px;inset:auto;margin:0;padding:14px 10px;display:grid;place-items:center;text-align:center;border:1px solid #edcf87;border-radius:20px}
  .ingredients .dosage svg{width:68px;height:68px;padding:12px}
  .ingredients .dosage p{margin:0;gap:10px;font-size:clamp(17px,4.5vw,22px);line-height:1.15}
  .ingredients .dosage span{padding-top:10px}
  .ingredients .ingredient-list{grid-column:1/-1;grid-row:3;width:100%;margin:0;padding:8px 10px;display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border:1px solid #edcf87;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgb(91 53 0 / 8%)}
  .ingredients .ingredient-row{min-width:0;min-height:78px;padding:8px 2px;display:grid;grid-template-columns:52px minmax(0,1fr) 92px;gap:7px;border-radius:0;border-bottom:1px solid #efddb5;background:transparent}
  .ingredients .ingredient-row:last-child{border-bottom:0}
  .ingredients .ingredient-icon{width:46px}
  .ingredients .ingredient-row strong{min-width:0;font-size:clamp(13px,3.45vw,16px);line-height:1.25;overflow-wrap:anywhere}
  .ingredients .ingredient-row strong small{display:inline;color:#79675d;font-size:11px;line-height:1.2}
  .ingredients .ingredient-row b{min-width:0;padding:10px 4px;font-size:clamp(13px,3.45vw,16px);white-space:nowrap}
  .ingredients .extra-ingredient{display:grid}
  .ingredients .ingredients-cta{grid-column:1/-1;grid-row:4;width:100%;min-height:78px;margin:2px 0 0;font-size:clamp(20px,5.3vw,27px)}
}

/* Section 14 approved mobile redesign */
@media (width <= 767px){
  .japan-origin{padding:40px 0 52px}
  .japan-origin .origin-shell{width:calc(100% - 32px)}
  .japan-origin .origin-heading>p{margin-bottom:16px;padding:9px 14px;font-size:clamp(12px,3.3vw,15px)}
  .japan-origin .origin-heading h2{font-size:clamp(28px,7.4vw,40px);line-height:1.12}
  .japan-origin .origin-product{width:100%;height:360px;margin-top:8px;background-position:center!important;background-size:contain!important}
  .japan-origin .origin-cards{position:relative;margin-top:8px;padding-left:18px;display:grid;grid-template-columns:1fr;gap:14px;counter-reset:origin-step}
  .japan-origin .origin-cards::before{content:"";position:absolute;left:8px;top:30px;bottom:90px;width:2px;background:#d99100}
  .japan-origin .origin-card{counter-increment:origin-step;position:relative;min-width:0;min-height:205px;padding:10px;display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:stretch;text-align:left;border-radius:20px;overflow:visible;box-shadow:0 9px 22px rgb(91 53 0 / 8%)}
  .japan-origin .origin-card::before{content:"0" counter(origin-step);position:absolute;z-index:4;width:38px;height:38px;left:-29px;top:calc(50% - 19px);display:grid;place-items:center;color:#fff;border:3px solid #fff;border-radius:50%;background:#d99100;font-size:13px;font-weight:900}
  .japan-origin .origin-card>img{display:block;width:100%;height:100%;min-height:185px;border-radius:14px;object-fit:cover;clip-path:inset(0 0 20% 0 round 14px)}
  .japan-origin .origin-card>span{position:absolute;z-index:3;width:60px;left:calc(42% - 20px);top:calc(50% - 30px);margin:0;box-shadow:0 0 0 5px #fff}
  .japan-origin .origin-card>div{min-width:0;padding:14px 8px 14px 46px;display:flex;flex-direction:column;justify-content:center;border-left:0}
  .japan-origin .origin-card h3{margin:0 0 8px;font-size:clamp(16px,4.2vw,20px);line-height:1.2;overflow-wrap:anywhere}
  .japan-origin .origin-card p{margin:0;font-size:clamp(13px,3.35vw,16px);line-height:1.4}
  .japan-origin .origin-cards::after{content:"NGHIÊN CỨU · SẢN XUẤT · NHẬP KHẨU MINH BẠCH";margin:4px 0 0 -18px;padding:13px 14px;text-align:center;color:#652800;border:1px solid #d99100;border-radius:99px;background:rgb(255 255 255 / 68%);font-size:clamp(12px,3.3vw,15px);font-weight:900}
}

/* Section 17 V2 — premium, accurate three-tier package comparison. */
@media (min-width:768px){
  .packages{min-height:941px;padding:38px 0 30px;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgb(255 255 255 / 96%) 0 18%,transparent 52%),linear-gradient(135deg,#fffdf7,#fff2cf)}
  .packages .packages-shell{width:min(1540px,calc(100% - 96px));min-height:0}
  .packages h2{margin:0;font-size:clamp(48px,4vw,62px);line-height:1.04;letter-spacing:-.025em}
  .packages .packages-shell>p{margin:8px 0 18px;color:#6b4a31;font-size:19px;font-weight:650}
  .packages .package-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:end}
  .packages .package-card{position:relative;min-height:546px;padding:16px;display:grid;grid-template-rows:92px 250px auto;align-content:start;border:1px solid #ecd39a;border-radius:24px;background:rgb(255 255 255 / 96%);box-shadow:0 16px 42px rgb(96 57 0 / 10%)}
  .packages .package-card header{padding:13px 10px 11px;border-radius:17px;background:linear-gradient(135deg,#fff8df,#f4e1ae);text-align:center}
  .packages .package-card header h3{margin:0;padding:0;color:#5d2a0d;background:none;font-size:31px;line-height:1}
  .packages .package-card header p{margin:7px 0 0;color:#a86600;font-size:13px;font-weight:900;letter-spacing:.2em}
  .packages .pack-images{height:250px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
  .packages .pack-images img{width:34%;max-width:34%;height:245px;margin:0 -3%;object-fit:contain;filter:drop-shadow(0 13px 11px rgb(67 38 0 / 18%))}
  .packages .package-price{text-align:center;align-self:end}
  .packages .package-price>strong{display:block;color:#d48600;font-size:38px;line-height:1.05}
  .packages .package-meta{margin-top:12px;padding:11px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:1px solid #f1dfb8;border-radius:14px;background:#fff9e9;text-align:left}
  .packages .package-meta span{display:grid;gap:3px;color:#776456;font-size:11px;line-height:1.3}
  .packages .package-meta span+span{padding-left:11px;border-left:1px solid #e9d09b}
  .packages .package-meta b{display:block;color:#55270d;font-size:13px;line-height:1.25}
  .packages .package-card.featured{min-height:562px;border:3px solid #d99a15;background:#fffdf5;box-shadow:0 22px 52px rgb(126 77 0 / 19%);transform:translateY(-9px)}
  .packages .package-card.featured::before{content:"KHUYÊN DÙNG";position:absolute;z-index:2;top:-18px;left:50%;padding:9px 24px;color:#fff;border-radius:999px;background:linear-gradient(135deg,#efb72b,#c97800);box-shadow:0 8px 18px rgb(152 90 0 / 24%);transform:translateX(-50%);font-size:13px;font-weight:900;letter-spacing:.14em;white-space:nowrap}
  .packages .package-card.featured header{background:linear-gradient(135deg,#fff1bd,#efd18a)}
  .packages .package-benefits,.packages .distributor-commitments{display:none!important}
  .packages .offer-bar{margin-top:14px;min-height:112px;display:grid;grid-template-columns:28% 19% 28% 25%;grid-template-rows:1fr;align-items:center;overflow:hidden;border:1px solid #e4bd65;border-radius:22px;background:rgb(255 255 255 / 95%);box-shadow:0 13px 34px rgb(93 54 0 / 11%)}
  .packages .offer-bar>strong{height:100%;display:grid;place-items:center;color:#fff;border-radius:20px 0 0 20px;background:linear-gradient(135deg,#efa800,#cc7200);font-size:42px;line-height:1}
  .packages .offer-countdown{height:70%;display:grid;place-items:center;padding:4px 16px;border-right:1px solid #ead8b5;text-align:center}
  .packages .offer-countdown p{margin:0;color:#6b4127;font-size:13px;line-height:1.25}
  .packages .offer-countdown time{color:#c87800;font-size:32px;font-weight:950;line-height:1}
  .packages .offer-bar>small{padding:0 20px;color:#75685f;font-size:12px;line-height:1.45;text-align:left}
  .packages .offer-bar>a{grid-column:auto;grid-row:auto;margin:14px;min-height:70px;display:flex;align-items:center;justify-content:center;border-radius:15px;font-size:23px}
}

@media (width <= 767px){
  .packages{padding:32px 0 40px;background:linear-gradient(150deg,#fffdf8,#fff2cf)}
  .packages h2{font-size:clamp(32px,9vw,42px);line-height:1.06}
  .packages .packages-shell>p{margin:9px 0 22px;font-size:15px;line-height:1.45}
  .packages .package-grid{gap:14px}
  .packages .package-card{position:relative;min-height:292px;padding:14px;display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:10px 12px;border:1px solid #ead09a;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgb(91 52 0 / 9%)}
  .packages .package-card header{grid-column:2;padding:11px 8px;border-radius:13px;background:#fff4d2;text-align:center}
  .packages .package-card header h3{margin:0;padding:0;background:none;font-size:24px}
  .packages .package-card header p{margin:5px 0 0;color:#a76700;font-size:10px;font-weight:900;letter-spacing:.14em}
  .packages .pack-images{grid-column:1;grid-row:1/3;height:225px;display:flex;align-items:flex-end;justify-content:center}
  .packages .pack-images img{width:auto;height:210px;margin:0 -13%;object-fit:contain;filter:drop-shadow(0 10px 8px rgb(63 34 0 / 17%))}
  .packages .package-price{grid-column:2;text-align:center}
  .packages .package-price>strong{display:block;color:#d48600;font-size:clamp(25px,7vw,31px);line-height:1.05}
  .packages .package-meta{margin-top:10px;padding:9px;display:grid;gap:7px;border-radius:12px;background:#fff8e5;text-align:left}
  .packages .package-meta span{display:grid;gap:2px;color:#756257;font-size:10px;line-height:1.3}
  .packages .package-meta span+span{padding-top:7px;border-top:1px solid #ead7ae}
  .packages .package-meta b{display:block;margin:0;padding:0;color:#55270d;border-radius:0;background:none;font-size:12px}
  .packages .package-card.featured{margin-top:8px;border:3px solid #d99a15;background:#fffdf5;box-shadow:0 17px 36px rgb(123 75 0 / 17%)}
  .packages .package-card.featured::before{content:"KHUYÊN DÙNG";position:absolute;z-index:2;top:-14px;left:50%;padding:7px 18px;color:#fff;border-radius:999px;background:linear-gradient(135deg,#efb72b,#c97800);transform:translateX(-50%);font-size:10px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
  .packages .package-benefits,.packages .distributor-commitments{display:none!important}
  .packages .offer-bar{margin-top:18px;padding:0 14px 14px;display:grid;grid-template-columns:1fr;overflow:hidden;border:1px solid #e1bd6e;border-radius:19px;background:#fff}
  .packages .offer-bar>strong{margin:0 -14px 12px;padding:15px;border-radius:18px 18px 0 0;background:linear-gradient(135deg,#efa800,#cc7200);font-size:34px}
  .packages .offer-countdown{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 0 10px}
  .packages .offer-countdown p{margin:0;font-size:12px}.packages .offer-countdown time{font-size:28px}
  .packages .offer-bar>small{padding:0 4px;color:#76675d;font-size:10px;line-height:1.4;text-align:center}
  .packages .offer-bar>a{grid-column:auto;grid-row:auto;margin:12px 0 0;min-height:58px;font-size:20px}
}

/* Section 17 approved mobile redesign */
@media (width <= 767px){
  .packages{padding:34px 0 44px;background:linear-gradient(155deg,#fffdf8,#fff1cc)}
  .packages .packages-shell{width:calc(100% - 32px)}
  .packages .packages-eyebrow{width:max-content;max-width:100%;margin:0 auto 14px;padding:8px 16px;display:block;color:#5c2b0f;border:1px solid #d88b00;border-radius:99px;background:rgb(255 255 255 / 65%);font-size:clamp(11px,3.2vw,14px);font-weight:900}
  .packages h2{margin:0;font-size:clamp(34px,9.4vw,45px);line-height:1.04}
  .packages h2 em{display:block}
  .packages .packages-shell>p{margin:10px auto 20px;display:block;color:#6c5748;font-size:clamp(14px,3.7vw,17px);line-height:1.4}
  .packages .package-grid{margin-top:0;display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border:1px solid #e1bb67;border-radius:22px;background:#fff;counter-reset:package-tier;box-shadow:0 15px 34px rgb(96 57 0 / 9%)}
  .packages .package-card{counter-increment:package-tier;position:relative;min-width:0;min-height:210px;padding:18px 10px;display:grid;grid-template-columns:minmax(0,34%) minmax(0,27%) minmax(0,39%);grid-template-rows:1fr;align-items:center;gap:0;border:0;border-radius:0;background:#fff}
  .packages .package-card+.package-card{border-top:1px solid #ead6aa}
  .packages .package-card::after{content:"0" counter(package-tier);position:absolute;top:10px;left:10px;width:31px;height:31px;display:grid;place-items:center;color:#6b350f;border-radius:50%;background:#fff0c5;font-size:12px;font-weight:900}
  .packages .package-card header{grid-column:2;grid-row:1;padding:0 7px;background:none;text-align:left}
  .packages .package-card header h3{margin:0;padding:0;background:none;font-size:clamp(18px,4.8vw,22px);line-height:1.1;white-space:nowrap}
  .packages .package-card header p{margin:8px 0 0;padding:6px 5px;text-align:center;color:#8a5100;border-radius:99px;background:#fff1c9;font-size:9px;font-weight:900;letter-spacing:.08em}
  .packages .pack-images{grid-column:1;grid-row:1;width:100%;height:170px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
  .packages .pack-images img{width:auto;max-width:none;height:158px;margin:0 -20%;object-fit:contain;filter:drop-shadow(0 8px 7px rgb(62 36 0 / 16%))}
  .packages .pack-images img:only-child{margin:0;height:164px}
  .packages .pack-images:has(img:nth-child(2):last-child) img{width:55%;height:154px;margin:0 -12%}
  .packages .pack-images:has(img:nth-child(3):last-child) img{width:43%;height:148px;margin:0 -17%}
  .packages .package-price{grid-column:3;grid-row:1;min-width:0;padding-left:9px;text-align:left;border-left:1px solid #ead7ae}
  .packages .package-price>strong{color:#d48600;font-size:clamp(20px,5.4vw,25px);line-height:1.08;white-space:nowrap}
  .packages .package-meta{margin-top:10px;padding:9px 8px;display:grid;gap:7px;border-radius:12px;background:#fff8e7;text-align:left}
  .packages .package-meta span{display:grid;gap:2px;color:#766459;font-size:10px;line-height:1.25}
  .packages .package-meta span+span{padding-top:7px;border-top:1px solid #ead7ae}
  .packages .package-meta b{display:block;margin:0;padding:0;color:#582b11;background:none;font-size:11px;white-space:nowrap}
  .packages .package-card.featured{margin:0;border:2px solid #d79408;background:linear-gradient(100deg,#fffdf7,#fff4c9);box-shadow:inset 0 0 24px rgb(226 157 0 / 10%)}
  .packages .package-card.featured::before{content:"KHUYÊN DÙNG";position:absolute;z-index:4;top:8px;left:50%;padding:6px 13px;color:#fff;border-radius:99px;background:linear-gradient(135deg,#efb228,#cd7900);transform:translateX(-50%);font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
  .packages .package-mobile-benefits{margin-top:14px;padding:12px 7px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border:1px solid #e5c477;border-radius:17px;background:rgb(255 255 255 / 84%)}
  .packages .package-mobile-benefits span{min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:clamp(9px,2.6vw,12px);font-weight:800;line-height:1.2}
  .packages .package-mobile-benefits span::before{content:"✓";width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;color:#fff;border-radius:50%;background:#70a951;font-size:12px}
  .packages .offer-bar{margin-top:14px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:hidden;border:1px solid #e1bd6e;border-radius:19px;background:#fff}
  .packages .offer-bar>strong{display:none}
  .packages .offer-countdown{grid-column:1/-1;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .packages .offer-countdown p,.packages .offer-countdown time{margin:0;min-height:66px;padding:9px;display:grid;place-items:center;text-align:center;color:#c8111f;border-radius:14px;background:#fff0f1}
  .packages .offer-countdown p{font-size:13px;line-height:1.2}.packages .offer-countdown time{font-size:29px}
  .packages .offer-bar>small{grid-column:1/-1;padding:0 4px;color:#77685f;font-size:10px;line-height:1.35;text-align:center}
  .packages .offer-bar>a{grid-column:1/-1;width:100%;min-height:62px;margin:0;font-size:clamp(21px,5.8vw,27px)}
  .packages .offer-bar>a svg{width:34px;height:34px;display:block}
}

/* Section 15 V2 — legal verification visual integrated into desktop background. */
@media (min-width:768px){
  .legal-profile{
    background-color:#fffaf0;
    background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-15-legal-desktop-v2.webp");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }
  .legal-profile .legal-product{display:none!important}
}

/* Section 15 approved mobile redesign */
@media (width <= 767px){
  .legal-profile{padding:34px 0 46px;background:linear-gradient(155deg,#fffdf8,#fff3d5)}
  .legal-profile .legal-shell{width:calc(100% - 32px);min-height:0}
  .legal-profile .legal-heading p{margin-bottom:14px;padding:8px 14px;font-size:clamp(11px,3.2vw,14px)}
  .legal-profile .legal-heading h2{font-size:clamp(32px,9vw,43px);line-height:1.04}
  .legal-profile .legal-heading div{max-width:340px;margin:12px auto 0;font-size:clamp(14px,3.7vw,17px);line-height:1.4}
  .legal-profile .legal-product{position:relative;width:100%;height:265px;left:auto;bottom:auto;margin-top:22px;padding:16px;display:grid;grid-template-columns:minmax(0,54%) minmax(0,46%);align-items:center;overflow:hidden;border:1px solid #e4bf70;border-radius:22px;background-color:rgb(255 255 255 / 82%);background-position:left 8px center!important;background-size:54% auto!important;box-shadow:0 12px 30px rgb(95 55 0 / 9%)}
  .legal-profile .legal-product>p.legal-hero-copy{grid-column:2;position:relative;z-index:3;right:auto;top:auto;width:auto;margin:0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:inherit;line-height:1.35}
  .legal-profile .legal-hero-copy svg{width:64px;height:64px;color:#c98200}
  .legal-profile .legal-hero-copy strong{font-size:clamp(15px,4vw,19px);line-height:1.15}
  .legal-profile .legal-hero-copy span{font-size:clamp(11px,3vw,14px);line-height:1.4}
  .legal-profile .legal-cards{width:100%;margin-top:16px;display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;border:1px solid #e4bf70;border-radius:22px;background:#fff;counter-reset:legal-document;box-shadow:0 14px 34px rgb(95 55 0 / 8%)}
  .legal-profile .legal-card{counter-increment:legal-document;position:relative;min-width:0;min-height:255px;padding:14px;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:center;border:0;border-radius:0;background:#fff}
  .legal-profile .legal-card:nth-child(even){background:#fffaf0}
  .legal-profile .legal-card+.legal-card{border-top:1px solid #ead7ad}
  .legal-profile .legal-card::before{content:"0" counter(legal-document);position:absolute;z-index:3;left:calc(46% - 17px);top:20px;width:34px;height:34px;display:grid;place-items:center;color:#fff;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#efb536,#c97800);font-size:12px;font-weight:900}
  .legal-profile .legal-card img{width:100%;height:225px;padding:6px;object-fit:contain;border-radius:13px;background:#faf9f5}
  .legal-profile .legal-card>div{min-width:0;padding:16px 6px 16px 24px}
  .legal-profile .legal-card h3{margin:0;text-align:left;font-size:clamp(16px,4.2vw,20px);line-height:1.22;overflow-wrap:anywhere}
  .legal-profile .legal-meta{margin:9px 0 13px;display:block;color:#735f50;font-size:clamp(11px,3vw,14px);line-height:1.35}
  .legal-profile .legal-card a{width:max-content;max-width:100%;min-height:42px;padding:8px 11px;color:#7a4300;border:1px solid #d48a00;border-radius:99px;background:transparent;font-size:clamp(10px,2.8vw,13px);white-space:nowrap}
  .legal-profile .legal-card a svg{width:18px;height:18px}
  .legal-profile .legal-trust-strip{margin-top:14px;padding:13px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border:1px solid #e4bf70;border-radius:18px;background:rgb(255 255 255 / 84%)}
  .legal-profile .legal-trust-strip span{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;color:#56301a;font-size:clamp(10px,2.8vw,13px);font-weight:800;white-space:nowrap}
  .legal-profile .legal-trust-strip span::before{content:"✓";width:22px;height:22px;display:grid;place-items:center;color:#fff;border-radius:50%;background:#65a84f;font-size:13px;font-weight:900}
}

/* Section 16 V2 — four-step usage timeline with integrated desktop scene. */
@media (min-width:768px){
  .usage{
    padding:64px 0 52px;
    background-color:#fffaf0;
    background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-16-usage-desktop-v2.webp");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }
  .usage .usage-shell{width:min(1580px,calc(100% - 100px));min-height:825px}
  .usage h2{width:60%;margin:0 0 46px;font-size:clamp(54px,5vw,78px);line-height:.96}
  .usage h2 em{display:inline;margin-left:.12em}
  .usage .usage-cards{width:60%;counter-reset:usage-step;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .usage .usage-cards::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:54px;height:3px;background:linear-gradient(90deg,#e8b139,#d88900)}
  .usage .usage-card{position:relative;min-width:0;min-height:360px;padding:72px 14px 24px;border-radius:22px;box-shadow:0 16px 34px rgb(101 61 0 / 9%);counter-increment:usage-step}
  .usage .usage-card::before{content:"0" counter(usage-step);position:absolute;top:18px;left:50%;width:48px;height:48px;display:grid;place-items:center;color:#fff;border-radius:50%;background:#d88b00;box-shadow:0 0 0 7px #fff3d1;transform:translateX(-50%);font-size:16px;font-weight:900}
  .usage .usage-card span{width:112px}
  .usage .usage-card h3{margin:20px 0 0;font-size:clamp(19px,1.45vw,24px);line-height:1.2}
  .usage .usage-visual{display:none!important}
}

/* Section 16 V3 — balanced 2 x 2 instruction layout. */
@media (min-width:768px){
  .usage{background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-16-usage-desktop-v3.webp");background-position:center;background-size:cover}
  .usage h2{width:55%;margin:12px 0 36px;font-size:clamp(48px,4vw,62px);line-height:1}
  .usage .usage-cards{width:54%;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .usage .usage-cards::before{display:none}
  .usage .usage-card{min-height:245px;padding:74px 20px 22px;display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:18px;text-align:left}
  .usage .usage-card::before{top:18px;left:24px;transform:none}
  .usage .usage-card span{width:104px;margin:0}
  .usage .usage-card h3{margin:0;font-size:clamp(20px,1.55vw,26px);line-height:1.22}
  .usage .usage-card p{margin:9px 0 0;color:#5f5148;font-size:14px;line-height:1.45}
  .usage .usage-visual{display:none!important}
}

/* Section 16 approved mobile redesign */
@media (width <= 767px){
  .usage{padding:34px 0 0;background:linear-gradient(155deg,#fffdf8,#fff2cd)}
  .usage .usage-shell{width:calc(100% - 32px);min-height:0}
  .usage .usage-eyebrow{width:max-content;max-width:100%;margin:0 auto 14px;padding:8px 16px;display:block;color:#5a290d;border:1px solid #d88b00;border-radius:99px;background:rgb(255 255 255 / 62%);font-size:clamp(11px,3.2vw,14px);font-weight:900}
  .usage h2{width:100%;margin:0;text-align:center;font-size:clamp(35px,9.6vw,46px);line-height:1.02}
  .usage h2 em{display:block;color:#d58a00}
  .usage .usage-dose-band{margin:16px auto 14px;padding:11px 12px;display:block;text-align:center;color:#5a290d;border:1px solid #e0a52b;border-radius:99px;background:linear-gradient(135deg,#fff8df,#ffe8a9);font-size:clamp(13px,3.6vw,17px);font-weight:900}
  .usage .usage-cards{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border:1px solid #e3bd69;border-radius:22px;background:#fff;counter-reset:usage-mobile-step;box-shadow:0 14px 32px rgb(91 53 0 / 8%)}
  .usage .usage-card{counter-increment:usage-mobile-step;position:relative;min-width:0;min-height:255px;padding:46px 13px 16px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;border:0;border-radius:0;background:#fff}
  .usage .usage-card:nth-child(2n){border-left:1px solid #ead7ad}
  .usage .usage-card:nth-child(n+3){border-top:1px solid #ead7ad}
  .usage .usage-card::before{content:"0" counter(usage-mobile-step);position:absolute;top:12px;left:14px;color:#d18800;font-size:clamp(17px,4.8vw,22px);font-weight:900}
  .usage .usage-card span{width:82px;flex:0 0 auto;margin:0;color:#713400;background:#fff0c8}
  .usage .usage-card h3{margin:0;font-size:clamp(16px,4.3vw,20px);line-height:1.2;overflow-wrap:anywhere}
  .usage .usage-card p{margin:0;color:#68584e;font-size:clamp(14px,3.4vw,15px);line-height:1.38}
  .usage .usage-timing{margin:12px 0 0;padding:11px 14px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;color:#5a290d;border:1px solid #d88b00;border-radius:17px;background:rgb(255 250 232 / 92%);font-size:clamp(13px,3.6vw,17px);font-weight:900;line-height:1.3}
  .usage .usage-timing svg{width:29px;height:29px;flex:0 0 auto;color:#bf7900}
  .usage .usage-visual{position:relative;width:calc(100% + 32px);height:430px;right:auto;bottom:auto;margin:0 -16px;background-position:center bottom!important;background-size:contain!important}
}

/* Section 05 V2 — isolated responsive foreground mockups. */
.height-factors .factors-visual>*{display:none!important}
@media (min-width:768px){
  .height-factors .factors-visual{width:46%;right:-2%;bottom:-8px;height:790px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-05-v2/section-05-v2-desktop-clean.webp") right bottom/auto 92% no-repeat!important}
}
@media (width <= 767px){
  .height-factors .factors-visual{width:calc(100% + 34px);height:535px;right:auto;bottom:auto;margin:0 -17px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-05-v2/section-05-v2-mobile-clean.webp") center bottom/contain no-repeat!important}
}

/* Section 10 V2 — product-only Protetite mockups. */
.protetite-section .protetite-product>div,.protetite-section .protetite-product>img{display:none!important}
@media (min-width:768px){
  .protetite-section .protetite-product{width:43%;height:430px;right:0;bottom:16px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-10-v2/section-10-v2-desktop-clean.webp") center bottom/contain no-repeat!important}
}
@media (width <= 767px){
  .protetite-section .protetite-product{width:100%;height:390px;right:auto;bottom:auto;margin-top:12px;background:rgb(255 255 255 / 72%) url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-10-v2/section-10-v2-mobile-clean.webp") 5% 78%/58% auto no-repeat!important}
}

/* Sections 11–12 V2 — topic-specific mockups and responsive backgrounds. */
.absorption .absorption-product>*,.whole-development .development-hero>*,.whole-development .development-hero>img:first-child{display:none!important}
@media (min-width:768px){
  .absorption .absorption-product{width:42%;height:500px;right:-1%;bottom:0;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-11-v2/desktop-clean.webp") right bottom/contain no-repeat!important}
  .whole-development{background:#fff8df url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-12-desktop-v2.webp") center/cover no-repeat}
  .whole-development .development-hero{inset:100px 0 0;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-12-v2/desktop-clean.webp") center bottom/100% auto no-repeat!important}
}
@media (width <= 767px){
  .absorption .absorption-product{width:100%;height:480px;right:auto;bottom:auto;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-11-v2/mobile-clean.webp") center bottom/contain no-repeat!important}
  .whole-development{background:#fff8df url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-12-mobile-v2.webp") center/cover no-repeat}
  .whole-development .development-hero{height:500px;inset:auto;margin-top:12px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-12-v2/mobile-clean.webp") center/contain no-repeat!important}
}
.concerns .solution-visual>*{display:none!important}.faq-v2 .faq-product-art-picture{display:contents}

/* Section 03 V2 — single emotional story, scannable concerns, isolated conversion. */
.concerns-v2{min-height:941px;padding:42px 0 54px;background:linear-gradient(135deg,#fffdf8,#fff5d9)}
.concerns-v2 .concerns-shell{width:min(1580px,calc(100% - 72px))}
.concerns-v2 .concerns-heading{margin-bottom:28px}.concerns-v2 .concerns-heading>span{margin-bottom:14px}.concerns-v2 .concerns-heading h2{font-size:clamp(42px,3.55vw,60px);line-height:1.08}
.concerns-v2 .concerns-layout{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,31fr) minmax(0,26fr);grid-template-rows:minmax(0,1fr) auto 78px;gap:12px 18px;align-items:stretch;min-height:650px}
.concerns-v2 .concerns-story{position:relative;grid-column:1;grid-row:1/4;min-width:0;height:650px;display:block;overflow:hidden;border-radius:28px;background:#ead9b6;box-shadow:0 18px 45px rgb(91 53 0 / 12%)}
.concerns-v2 .concerns-story img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.concerns-v2 .concerns-story span{position:absolute;left:34px;bottom:30px;padding:13px 27px;color:#5a260d;border:1px solid #e3bc62;border-radius:99px;background:rgb(255 250 231 / 94%);box-shadow:0 8px 18px rgb(84 43 0 / 14%);font-size:21px;font-weight:900;letter-spacing:.04em}
.concerns-v2 .concern-rows{grid-column:2;grid-row:1;min-width:0;display:grid;gap:12px;counter-reset:concern}
.concerns-v2 .concern-row{counter-increment:concern;min-height:118px;padding:10px 18px;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;border:1px solid #f0ddb4;border-radius:22px;background:rgb(255 255 255 / 94%);box-shadow:0 10px 24px rgb(91 53 0 / 8%)}
.concerns-v2 .concern-row>picture{display:none}.concerns-v2 .concern-row::after{content:"0" counter(concern);grid-column:2;grid-row:1;align-self:start;margin:8px 0 0;color:#ca8300;font-size:17px;font-weight:900}
.concerns-v2 .concern-copy{grid-column:1/3;grid-row:1;min-width:0;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:18px}.concerns-v2 .concern-icon{width:72px;height:72px;margin:0;display:grid;place-items:center;color:#6a2d10;border-radius:50%;background:#fff1c7}.concerns-v2 .concern-icon svg{width:44px;height:44px}.concerns-v2 .concern-copy strong{min-width:0;padding-top:22px;font-size:clamp(20px,1.38vw,25px);line-height:1.18;overflow-wrap:anywhere}.concerns-v2 .concern-copy strong br{display:none}
.concerns-v2 .concerns-conversion{display:contents}
.concerns-v2 .concerns-conversion p{grid-column:2;grid-row:2;align-self:end;margin:0;color:#65341d;font-size:20px;line-height:1.35}.concerns-v2 .concerns-conversion .solution-visual{grid-column:3;grid-row:1/4;min-width:0;min-height:650px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-03-v2/section-03-v2-desktop-trim.webp") center bottom/145% auto no-repeat!important}.concerns-v2 .concerns-conversion a{grid-column:2;grid-row:3;min-height:78px;border-radius:20px;font-size:25px}
.concerns-v2 .concerns-conversion .solution-visual::before{display:none!important}

@media (width <= 767px){
  .concerns-v2{width:100%;max-width:100vw;min-height:0;padding:36px 0 44px;overflow:hidden}.concerns-v2 .concerns-shell{width:calc(100vw - 32px);max-width:calc(100vw - 32px)}
  .concerns-v2 .concerns-heading{margin-bottom:20px}.concerns-v2 .concerns-heading h2{max-width:100%;font-size:clamp(25px,7vw,34px);line-height:1.16;letter-spacing:-.02em;overflow-wrap:anywhere}.concerns-v2 .concerns-heading h2 br{display:none}.concerns-v2 .concerns-heading em{display:block;color:#c47c00}
  .concerns-v2 .concerns-layout{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:14px}
  .concerns-v2 .concerns-story{grid-row:auto;height:290px;border-radius:21px}.concerns-v2 .concerns-story img{object-position:center}.concerns-v2 .concerns-story span{left:14px;bottom:14px;padding:9px 15px;font-size:13px}
  .concerns-v2 .concern-rows{grid-column:1;grid-row:auto;width:100%;min-width:0;gap:10px}.concerns-v2 .concern-row{width:100%;min-width:0;min-height:102px;padding:10px 14px;grid-template-columns:66px minmax(0,1fr);border-radius:17px}
  .concerns-v2 .concern-row::after{grid-column:2;margin:5px 0 0;font-size:13px}.concerns-v2 .concern-copy{width:auto;max-width:100%;min-height:0;padding:0;grid-template-columns:66px minmax(0,1fr);gap:12px}.concerns-v2 .concern-icon{width:58px;height:58px}.concerns-v2 .concern-icon svg{width:36px;height:36px}.concerns-v2 .concern-copy strong{width:auto;max-width:100%;min-width:0;padding-top:18px;font-size:clamp(17px,4.7vw,21px);line-height:1.22;white-space:normal;overflow-wrap:anywhere}
  .concerns-v2 .concerns-conversion{grid-column:1;grid-row:auto;width:100%;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 240px auto;gap:8px}.concerns-v2 .concerns-conversion p{grid-column:1;grid-row:1;max-width:100%;text-align:center;font-size:16px;overflow-wrap:anywhere}.concerns-v2 .concerns-conversion .solution-visual{grid-column:1;grid-row:2;min-height:240px;background:url("/hnkt_nano_growth_habit_ex/static/src/assets/mockups-unique/section-03-v2/section-03-v2-mobile-trim.webp") center/contain no-repeat!important}.concerns-v2 .concerns-conversion a{grid-column:1;grid-row:3;width:100%;min-height:72px;padding-inline:12px;font-size:21px}
}

/* Final desktop override: Section 12 is a single integrated background scene. */
@media (min-width:768px){
  .whole-development{
    background-color:#fff8df;
    background-image:url("/hnkt_nano_growth_habit_ex/static/src/assets/backgrounds/section-12-desktop-integrated-v5.webp");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }
  .whole-development .development-hero{display:none!important}
}

/* Production type floor: keep package comparison copy readable on tablet and desktop. */
@media (min-width:768px){
  .packages .package-meta span{font-size:13px}
}

/* Local desktop order form final override */
@media (min-width:768px){
  .faq-v3 .consultation-panel{grid-template-columns:minmax(245px,30%) minmax(0,70%);padding:26px 30px;gap:28px;align-items:stretch;border-radius:24px;background:linear-gradient(115deg,#fff9e9 0 30%,#fff 30% 100%);box-shadow:0 18px 44px rgb(90 52 0 / 12%)}
  .faq-v3 .consultation-copy{padding:22px 18px;display:flex;flex-direction:column;justify-content:center}
  .faq-v3 .consultation-copy>p{font-size:13px}.faq-v3 .consultation-copy h3{font-size:clamp(25px,2vw,34px);line-height:1.12}
  .faq-v3 .consultation-panel form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .faq-v3 .consultation-panel form>label{font-size:12px}
  .faq-v3 .consultation-panel form>label input{height:46px;border-radius:10px}
  .faq-v3 .order-summary{grid-column:1/-1;padding:18px 20px;display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(190px,1fr) auto;gap:14px 18px;align-items:end;border:1px solid #ecd6a5;border-radius:17px;background:#fff8e8}
  .faq-v3 .order-summary h4{grid-column:1/-1;margin:0;font-size:19px}
  .faq-v3 .order-summary>label{grid-column:1;font-size:12px}
  .faq-v3 .order-summary select{width:100%;height:44px;margin-top:5px;padding:0 10px;border:1px solid #dec38d;border-radius:10px;background:#fff;font:inherit}
  .faq-v3 .order-facts{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .faq-v3 .order-facts span{min-height:44px;padding:7px 10px;display:grid;justify-content:start;background:rgb(255 255 255 / 78%)}
  .faq-v3 .quantity-control{grid-column:3;padding:0;display:grid;justify-items:center;align-self:end;gap:7px;border:0;background:transparent}
  .faq-v3 .quantity-control>span{font-size:12px;line-height:1}
  .faq-v3 .quantity-control>div{display:grid;grid-template-columns:38px 48px 38px;align-items:center;padding:4px;border:1px solid #e0bf7c;border-radius:999px;background:#fff;box-shadow:0 5px 14px rgb(111 67 0 / 9%)}
  .faq-v3 .quantity-control button{grid-column:auto;width:38px;height:38px;border:0;border-radius:50%;color:#7a4308;background:#fff0c8;font-size:20px;line-height:1}
  .faq-v3 .quantity-control input{width:48px;height:38px;padding:0;text-align:center;border:0;background:transparent;color:#572800;font-size:16px;font-weight:900;appearance:textfield}
  .faq-v3 .order-total{grid-column:1/-1;margin:2px 0 0;padding-top:13px;display:flex;justify-content:space-between;border-top:1px solid #ead4a5;font-size:15px}.faq-v3 .order-total strong{font-size:24px}
  .faq-v3 .consultation-privacy{grid-column:1/-1;justify-self:start;margin:0;padding:6px 10px}
  .faq-v3 .consultation-panel form>button[type="submit"]{grid-column:1/-1;height:58px;border-radius:12px;font-size:18px}
}

/* Package conversion architecture */
.package-consultation{position:relative;z-index:5;width:100%;margin:24px 0 0;padding:26px 30px;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:28px;align-items:stretch;border:1px solid #e3bd68;border-radius:24px;background:linear-gradient(115deg,#fff7df 0 34%,#fff 34% 100%);box-shadow:0 18px 44px rgb(90 52 0 / 12%)}
.package-consultation .consultation-copy{min-width:0;padding:20px 18px 0;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.package-consultation .consultation-copy>p{margin:0 0 8px;color:#a66500;font-size:13px;font-weight:900;letter-spacing:.06em}
.package-consultation .consultation-copy h3{margin:0;color:#582300;font-size:clamp(25px,2vw,34px);line-height:1.12}.package-consultation .consultation-copy em{color:#d58c00;font-style:normal}
.package-consultation .consultation-mockup{position:relative;width:100%;height:390px;margin-top:auto;align-self:stretch;overflow:hidden}
.package-consultation .consultation-mockup img{position:absolute;bottom:0;display:block;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 13px 14px rgb(91 53 0 / 13%))}
.package-consultation .consultation-expert{z-index:1;left:-6%;width:72%;height:100%}
.package-consultation .consultation-child{z-index:2;right:-7%;width:62%;height:83%}
.package-consultation .consultation-bottle{z-index:4;left:23%;width:27%;height:45%}
.package-consultation .consultation-box{z-index:3;right:8%;width:42%;height:49%}
.package-consultation form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.package-consultation form>label{display:grid;gap:5px;color:#60331b;font-size:12px;font-weight:800}
.package-consultation form>label input{width:100%;height:46px;padding:0 12px;border:1px solid #dfc691;border-radius:10px;background:#fff;color:#3d2418;font:inherit}
.package-consultation form>label input::placeholder{color:#816b5b;opacity:1}
.package-consultation .order-summary{grid-column:1/-1;padding:18px 20px;display:grid;grid-template-columns:minmax(210px,1.1fr) minmax(210px,1fr);gap:14px 18px;align-items:end;border:1px solid #ecd6a5;border-radius:17px;background:#fff8e8}
.package-consultation .order-summary h4{grid-column:1/-1;margin:0;color:#582300;font-size:19px}
.package-consultation .order-summary>label{grid-column:1;display:grid;gap:5px;color:#60331b;font-size:12px;font-weight:800}
.package-consultation .order-summary select{width:100%;height:44px;padding:0 10px;border:1px solid #dec38d;border-radius:10px;background:#fff;color:#582300;font:inherit}
.package-consultation .order-facts{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.package-consultation .order-facts span{min-height:44px;padding:7px 10px;display:grid;align-content:center;color:#826852;border-radius:10px;background:rgb(255 255 255 / 78%);font-size:11px}.package-consultation .order-facts strong{color:#582300;font-size:13px}
.package-consultation .order-total{grid-column:1/-1;margin:2px 0 0;padding-top:13px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ead4a5;color:#60331b;font-size:15px;font-weight:800}.package-consultation .order-total strong{color:#d27f00;font-size:24px}
.package-consultation .consultation-privacy{grid-column:1/-1;justify-self:start;margin:0;padding:6px 10px;color:#438536;border-radius:10px;background:#f1f8e9;font-size:12px;font-weight:800}.package-consultation .consultation-privacy::before{content:"✓";margin-right:6px}
.package-consultation form>button[type="submit"]{grid-column:1/-1;height:58px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;color:#fff;background:linear-gradient(#f2b729,#d78600);font-size:18px;font-weight:900;cursor:pointer}.package-consultation form>button svg{width:24px;height:24px}
@media (width <= 767px){
  .package-consultation{margin-top:18px;padding:17px 14px;grid-template-columns:1fr;gap:13px;border-radius:20px;background:rgb(255 255 255 / 92%)}
  .package-consultation .consultation-copy{padding:0;text-align:center}.package-consultation .consultation-copy>p{font-size:12px}.package-consultation .consultation-copy h3{font-size:clamp(22px,6vw,28px)}
  .package-consultation .consultation-mockup{width:min(100%,330px);height:300px;margin:8px auto 0}
  .package-consultation form{grid-template-columns:1fr;gap:9px}
  .package-consultation .order-summary{grid-template-columns:1fr;padding:12px;gap:10px}
  .package-consultation .order-summary h4,.package-consultation .order-summary>label,.package-consultation .order-facts,.package-consultation .order-total{grid-column:1}
  .package-consultation form>label input{height:46px}.package-consultation form>button[type="submit"]{height:56px;font-size:16px}
}

/* Final desktop package subtitle clearance */
@media (min-width:768px){
  .packages .packages-shell>p{transform:translateY(-6px);margin-bottom:40px}
  .packages .package-grid{margin-top:20px}
}

/* Final mobile conversion cleanup */
@media (width <= 767px){
  .packages .package-card{min-height:182px;padding:12px 10px;grid-template-columns:minmax(0,31%) minmax(0,29%) minmax(0,40%);grid-template-rows:118px 48px}
  .packages .package-card::after{display:none}
  .packages .pack-images{height:118px}
  .packages .pack-images img,.packages .pack-images img:only-child{height:112px}
  .packages .pack-images:has(img:nth-child(2):last-child) img{height:108px}
  .packages .pack-images:has(img:nth-child(3):last-child) img{height:104px}
  .packages .package-meta{display:none}
  .packages .package-price{padding-left:7px}
  .packages .package-select{min-height:44px;margin-top:2px}
  .packages .offer-bar>a{display:none}
  .package-consultation .consultation-mockup{height:240px}
  .package-consultation .consultation-child{height:86%}
  .package-consultation .order-facts{display:none}
  .package-consultation .order-summary{gap:9px}
  .package-consultation .order-summary h4{font-size:18px}
}

/* Final origin title and testimonial rhythm */
@media (min-width:768px){
  .japan-origin{min-height:0;padding-bottom:58px}
  .japan-origin .origin-shell{min-height:0}
  .japan-origin .origin-heading h2{font-size:clamp(42px,3.4vw,56px)}
  .japan-origin .testimonials{position:static;margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  .japan-origin .testimonials article{min-height:140px;padding:18px 20px;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:start}
  .japan-origin .testimonial-avatar{width:58px;height:58px;font-size:18px}
  .japan-origin .testimonials h3{margin:2px 0 8px;font-size:19px;line-height:1.25}
  .japan-origin .testimonials h3 span{margin-top:4px;font-size:13px;line-height:1.35}
  .japan-origin .testimonials p{font-size:15px;line-height:1.5}
}
@media (width <= 767px){
  .japan-origin .origin-heading h2{font-size:clamp(28px,7vw,36px)}
}

/* Final section 04 image ratio fix */
@media (min-width:768px){
  .growth-journey .journey-child{width:auto!important;height:540px;object-fit:contain}
}

/* Unified section title scale */
main>section h2[id]>:is(span,em){white-space:normal!important}
@media (min-width:768px){
  main>section h2[id]{font-size:clamp(42px,3.4vw,56px)!important;line-height:1.08!important}
}
@media (width <= 767px){
  main>section h2[id]{font-size:clamp(28px,7vw,36px)!important;line-height:1.12!important}
}

/* Final section 08 heading clearance */
@media (min-width:768px){
  .mechanism-heading h2{margin-top:16px!important}
}

/* Final section 12 title line clearance */
@media (min-width:768px){
  .development-heading h2 em{display:block;margin-top:8px}
}

/* Live mobile performance and section repairs */
.form-honeypot{display:none!important}
[data-form-status]:empty{display:none!important}
@media (width <= 767px){
  .mechanism-shell{width:calc(100% - 32px)}
  .mechanism-cards{grid-template-columns:1fr!important;gap:14px}
  .mechanism-card{min-height:0;padding:18px;display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;text-align:left}
  .mechanism-icon{position:relative;left:auto;top:auto;width:76px;transform:none;grid-row:1/3}
  .stage-number{position:absolute;left:58px;top:8px;width:48px;font-size:20px;border-width:3px}
  .mechanism-card>div{min-width:0}
  .mechanism-card h3{margin:0 0 8px;padding:8px 12px;font-size:18px;line-height:1.2;overflow-wrap:normal;word-break:normal}
  .mechanism-card p{font-size:15px;line-height:1.48;overflow-wrap:normal;word-break:normal}
  .mechanism-product{height:330px}
  .mechanism-cta{width:100%;margin-top:4px;padding:12px 18px;font-size:19px;line-height:1.2}
}

