/* SILENTO HATTARA — REFERENCE LOCKED V6
   Clean final visual override. Existing page text and genuine screenshots are untouched. */

html{scroll-snap-type:none !important;scroll-behavior:auto !important}
body.hattara-page{
  --v6-bg:#051318;
  --v6-bg2:#031015;
  --v6-jade:#0b6257;
  --v6-jade2:#075049;
  --v6-gold:#c99b43;
  --v6-gold2:#e0bd6b;
  --v6-cream:#f1e7cf;
  --v6-copy:#cfc2a6;
  margin:0 !important;
  overflow-x:hidden !important;
  background:
    radial-gradient(circle at 57% 18%,rgba(11,78,69,.09),transparent 31%),
    linear-gradient(180deg,#05161a 0%,#041217 47%,#031015 100%) !important;
  color:var(--v6-cream) !important;
}
body.hattara-page::before,
body.hattara-page::after{display:none !important}
body.hattara-page *{box-sizing:border-box}

/* Header: same field as the page, no black slab. */
body.hattara-page .silento-top{
  position:sticky !important;
  z-index:100 !important;
  top:0 !important;
  width:min(92vw,1440px) !important;
  max-width:1440px !important;
  height:72px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:rgba(5,19,24,.88) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
  border:0 !important;
  border-bottom:1px solid rgba(201,155,67,.18) !important;
  box-shadow:none !important;
}
body.hattara-page .brand-wordmark{
  color:var(--v6-cream) !important;
  font-size:.86rem !important;
  font-weight:650 !important;
  letter-spacing:.31em !important;
}
body.hattara-page .house-nav{gap:30px !important}
body.hattara-page .house-nav>a,
body.hattara-page .nav-models>summary{
  color:#c5ad79 !important;
  font-size:.68rem !important;
  letter-spacing:.14em !important;
}
body.hattara-page .nav-models-panel{
  background:#061619 !important;
  border:1px solid rgba(201,155,67,.32) !important;
  border-radius:8px !important;
}
body.hattara-page .nav-models-panel a{color:var(--v6-cream) !important}
body.hattara-page .nav-models-panel a:hover,
body.hattara-page .nav-models-panel a.is-current{background:rgba(11,98,87,.16) !important}
body.hattara-page .nav-models-panel small{color:#b69c67 !important}

/* Hero proportions follow the approved reference: two-line title, candy slightly right of centre, BUY far right. */
body.hattara-page .hattara-hero{
  position:relative !important;
  isolation:isolate !important;
  width:min(92vw,1440px) !important;
  max-width:1440px !important;
  min-height:720px !important;
  height:calc(100svh - 72px) !important;
  max-height:880px !important;
  margin:0 auto !important;
  padding:62px 0 72px !important;
  display:block !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(201,155,67,.20) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .hattara-hero::before{
  content:"" !important;
  position:absolute !important;
  z-index:-3 !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 63% 55%,rgba(11,94,82,.11),transparent 25%),
    radial-gradient(ellipse at 62% 87%,rgba(6,73,65,.10),transparent 35%) !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-hero::after{
  content:"" !important;
  position:absolute !important;
  z-index:8 !important;
  left:0 !important;
  right:0 !important;
  bottom:48px !important;
  height:1px !important;
  background:linear-gradient(90deg,rgba(201,155,67,.55),rgba(201,155,67,.14) 40%,transparent 74%) !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-hero-copy-block{
  position:absolute !important;
  z-index:20 !important;
  left:0 !important;
  top:74px !important;
  width:680px !important;
  max-width:48% !important;
  margin:0 !important;
}
body.hattara-page .hattara-hero .over{
  margin:0 0 17px !important;
  color:#c6a76a !important;
  font-size:.72rem !important;
  letter-spacing:.25em !important;
}
body.hattara-page .hattara-hero h1{
  width:680px !important;
  max-width:100% !important;
  margin:0 0 25px !important;
  color:var(--v6-cream) !important;
  font-size:clamp(60px,4.75vw,82px) !important;
  line-height:.90 !important;
  font-weight:590 !important;
  letter-spacing:-.045em !important;
  text-shadow:none !important;
}
body.hattara-page .hattara-hero .hero-copy{
  width:580px !important;
  max-width:100% !important;
  margin:0 !important;
  color:var(--v6-copy) !important;
  font-size:1rem !important;
  line-height:1.58 !important;
}
body.hattara-page .hero-version-slot{
  position:relative !important;
  z-index:30 !important;
  width:470px !important;
  max-width:100% !important;
  margin-top:34px !important;
}
body.hattara-page .version-menu{
  width:100% !important;
  border:1px solid rgba(220,181,90,.78) !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(8,76,67,.96),rgba(4,40,39,.98)) !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body.hattara-page .version-menu::before{display:none !important}
body.hattara-page .version-menu summary{
  min-height:58px !important;
  padding:0 20px 0 24px !important;
  display:grid !important;
  grid-template-columns:1fr auto 24px !important;
  align-items:center !important;
  gap:18px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--v6-cream) !important;
  box-shadow:none !important;
}
body.hattara-page .version-menu summary span{
  color:#c4ae79 !important;
  font-size:.67rem !important;
  letter-spacing:.20em !important;
}
body.hattara-page .version-menu summary strong{
  color:#f0dfb4 !important;
  font-size:.79rem !important;
  letter-spacing:.10em !important;
  font-weight:600 !important;
}
body.hattara-page .version-menu summary::after{
  content:"⌄" !important;
  color:var(--v6-gold2) !important;
  font-size:1rem !important;
  transform:translateY(-2px) !important;
}
body.hattara-page .version-menu[open] summary::after{transform:rotate(180deg) translateY(1px) !important}
body.hattara-page .version-panel{
  top:calc(100% + 10px) !important;
  left:0 !important;
  right:0 !important;
  border:1px solid rgba(201,155,67,.42) !important;
  border-radius:8px !important;
  background:rgba(4,21,22,.99) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.42) !important;
}
body.hattara-page .version-panel>a{color:var(--v6-cream) !important;border-radius:4px !important}
body.hattara-page .version-panel>a:hover{background:rgba(10,82,72,.28) !important}
body.hattara-page .version-kicker,
body.hattara-page .version-panel small,
body.hattara-page .installer-preview span{color:#b99a61 !important}

/* Real cotton candy asset, no cone shadow/smudge. */
body.hattara-page .hattara-cotton-stage{
  position:absolute !important;
  z-index:12 !important;
  left:64.5% !important;
  top:53.5% !important;
  width:330px !important;
  max-width:24vw !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
  background:none !important;
  box-shadow:none !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after{display:none !important}
body.hattara-page .hattara-cotton-stage .hero-sticker{
  width:100% !important;
  max-width:none !important;
  background:none !important;
}
body.hattara-page .hattara-cotton-stage img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.19)) !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .hattara-buy-wrap{
  position:absolute !important;
  z-index:30 !important;
  right:0 !important;
  top:51.5% !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
}
body.hattara-page #silento-buy-now{
  width:190px !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 24px !important;
  border:1px solid rgba(221,181,86,.82) !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(7,76,66,.96),rgba(4,43,40,.98)) !important;
  box-shadow:none !important;
  animation:none !important;
  transition:none !important;
}
body.hattara-page #silento-buy-now::before,
body.hattara-page #silento-buy-now::after{display:none !important}
body.hattara-page .silento-buy-word{
  color:#e7c776 !important;
  font-size:.78rem !important;
  letter-spacing:.25em !important;
  text-indent:.25em !important;
}
body.hattara-page .hattara-terminal-line{
  position:absolute !important;
  z-index:20 !important;
  left:0 !important;
  bottom:20px !important;
  margin:0 !important;
  color:#b9a879 !important;
  font-size:.76rem !important;
  letter-spacing:.035em !important;
}
body.hattara-page .terminal-accent{color:#d9ba67 !important}

/* Exact approved-reference decoration assets at near-natural scale. */
body.hattara-page .hattara-reference-decor{
  position:absolute !important;
  z-index:2 !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-reference-decor img{
  position:absolute !important;
  display:block !important;
  max-width:none !important;
  animation:none !important;
  transition:none !important;
  filter:none !important;
  pointer-events:none !important;
}
body.hattara-page .engraved-cloud-left{
  width:255px !important;
  left:-52px !important;
  top:30px !important;
  opacity:.90 !important;
  transform:none !important;
}
body.hattara-page .engraved-cloud-right{
  width:315px !important;
  right:-52px !important;
  top:155px !important;
  opacity:.91 !important;
  transform:none !important;
}
body.hattara-page .engraved-cloud-mid{
  width:280px !important;
  right:275px !important;
  top:360px !important;
  opacity:.78 !important;
  transform:none !important;
}
body.hattara-page .engraved-wind-upper{
  width:365px !important;
  left:46% !important;
  top:125px !important;
  opacity:.74 !important;
  transform:none !important;
}
body.hattara-page .engraved-wind-lower{
  width:470px !important;
  left:-150px !important;
  bottom:118px !important;
  opacity:.70 !important;
  transform:none !important;
}
body.hattara-page .engraved-water{
  width:780px !important;
  left:64% !important;
  bottom:28px !important;
  opacity:.90 !important;
  transform:translateX(-50%) !important;
}

/* Lower page: same material language, correctly scaled. */
body.hattara-page .story-section,
body.hattara-page .story-right{
  position:relative !important;
  isolation:isolate !important;
  width:min(92vw,1320px) !important;
  max-width:1320px !important;
  min-height:660px !important;
  margin:0 auto !important;
  padding:92px 0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(460px,560px) !important;
  gap:72px !important;
  align-items:center !important;
  overflow:hidden !important;
  border:0 !important;
  border-bottom:1px solid rgba(201,155,67,.17) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .story-right{
  grid-template-columns:minmax(460px,560px) minmax(0,1fr) !important;
}
body.hattara-page .story-section:nth-of-type(even){background:rgba(7,57,50,.025) !important}
body.hattara-page .story-section::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  width:265px !important;
  height:150px !important;
  right:-38px !important;
  top:36px !important;
  background:url("assets/decor_v6/cloud-right.png?v=6") center/contain no-repeat !important;
  opacity:.22 !important;
  pointer-events:none !important;
}
body.hattara-page .story-section:nth-of-type(odd)::before{
  right:auto !important;
  left:-38px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.20 !important;
}
body.hattara-page .story-section::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  width:330px !important;
  height:72px !important;
  right:0 !important;
  bottom:24px !important;
  background:url("assets/decor_v6/wind-right.png?v=6") center/contain no-repeat !important;
  opacity:.24 !important;
  pointer-events:none !important;
}
body.hattara-page .story-section:nth-of-type(odd)::after{
  right:auto !important;
  left:0 !important;
  background:url("assets/decor_v6/wind-left.png?v=6") center/contain no-repeat !important;
}
body.hattara-page .story-copy{
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  gap:17px !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .story-copy::before,
body.hattara-page .story-copy::after{display:none !important}
body.hattara-page .panel-over,
body.hattara-page .feature-kicker{
  margin:0 !important;
  color:#be9d60 !important;
  font-size:.69rem !important;
  letter-spacing:.25em !important;
}
body.hattara-page .story-copy h2{
  margin:0 !important;
  color:var(--v6-cream) !important;
  font-size:clamp(39px,3.65vw,58px) !important;
  line-height:1.02 !important;
  font-weight:560 !important;
  letter-spacing:-.032em !important;
}
body.hattara-page .story-copy p{
  margin:0 !important;
  color:var(--v6-copy) !important;
  font-size:1rem !important;
  line-height:1.67 !important;
}
body.hattara-page .story-shot{
  position:relative !important;
  z-index:4 !important;
  width:100% !important;
  margin:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(201,155,67,.34) !important;
  border-radius:8px !important;
  background:#061316 !important;
  box-shadow:0 24px 48px rgba(0,0,0,.22) !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .story-shot::before{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:7px !important;
  border:1px solid rgba(224,189,107,.06) !important;
  pointer-events:none !important;
}
body.hattara-page .story-shot::after{display:none !important}
body.hattara-page .story-shot img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  background:#071215 !important;
  object-fit:cover !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .story-shot-large img{min-height:430px !important;max-height:560px !important;object-position:top center !important}
body.hattara-page .story-shot-medium img{min-height:330px !important;max-height:430px !important;object-position:top center !important}

body.hattara-page .feature-grid-section{
  grid-template-columns:1fr !important;
  gap:34px !important;
}
body.hattara-page .feature-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 !important;
  border-top:1px solid rgba(201,155,67,.23) !important;
  border-left:1px solid rgba(201,155,67,.15) !important;
  background:rgba(5,38,35,.08) !important;
  overflow:hidden !important;
}
body.hattara-page .feature-grid::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  width:275px !important;
  height:115px !important;
  right:-35px !important;
  top:10px !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  opacity:.13 !important;
  pointer-events:none !important;
}
body.hattara-page .feature-grid::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  width:330px !important;
  height:72px !important;
  left:-40px !important;
  bottom:8px !important;
  background:url("assets/decor_v6/wind-left.png?v=6") center/contain no-repeat !important;
  opacity:.14 !important;
  pointer-events:none !important;
}
body.hattara-page .feature-card{
  min-height:188px !important;
  padding:26px 28px 29px !important;
  border:0 !important;
  border-right:1px solid rgba(201,155,67,.15) !important;
  border-bottom:1px solid rgba(201,155,67,.18) !important;
  border-radius:0 !important;
  background:rgba(8,70,60,.055) !important;
  box-shadow:none !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .feature-card::after{display:none !important}
body.hattara-page .feature-card h3{color:#eadcb9 !important;font-weight:560 !important}
body.hattara-page .feature-card p{color:#c5b99e !important;line-height:1.6 !important}

body.hattara-page .service-links{gap:12px !important}
body.hattara-page .service-link{
  width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;
  border:1px solid rgba(201,155,67,.28) !important;border-radius:6px !important;background:rgba(8,67,59,.14) !important;
}
body.hattara-page .service-link img{width:32px !important;height:32px !important;filter:sepia(1) saturate(.62) brightness(1.22) !important}

body.hattara-page .site-footer{
  position:relative !important;
  width:min(92vw,1320px) !important;
  max-width:1320px !important;
  min-height:230px !important;
  margin:0 auto !important;
  padding:64px 0 72px !important;
  background:transparent !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
body.hattara-page .site-footer::before{
  content:"" !important;
  position:absolute !important;
  width:250px !important;height:120px !important;left:-30px !important;bottom:25px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.15 !important;pointer-events:none !important;
}
body.hattara-page .official-marks{position:relative !important;z-index:2 !important;padding-top:25px !important;border-top:1px solid rgba(201,155,67,.15) !important;width:100% !important}
body.hattara-page .official-mark{opacity:.78 !important;filter:sepia(.35) saturate(.7) brightness(1.07) !important}

@media(max-width:1100px){
  body.hattara-page .hattara-hero-copy-block{width:590px !important;max-width:48% !important}
  body.hattara-page .hattara-hero h1{width:590px !important;font-size:clamp(54px,5vw,70px) !important}
  body.hattara-page .hero-version-slot{width:400px !important}
  body.hattara-page .hattara-cotton-stage{left:65% !important;width:300px !important}
  body.hattara-page .engraved-cloud-mid{right:190px !important}
  body.hattara-page .story-section,
  body.hattara-page .story-right{grid-template-columns:minmax(0,1fr) minmax(400px,500px) !important;gap:54px !important}
}
@media(max-width:860px){
  body.hattara-page .silento-top{width:calc(100% - 40px) !important;height:68px !important}
  body.hattara-page .house-nav{gap:15px !important}
  body.hattara-page .hattara-hero{
    width:calc(100% - 40px) !important;height:auto !important;max-height:none !important;min-height:auto !important;
    padding:50px 0 96px !important;display:flex !important;flex-direction:column !important;
  }
  body.hattara-page .hattara-hero-copy-block{position:relative !important;left:auto !important;top:auto !important;width:100% !important;max-width:none !important}
  body.hattara-page .hattara-hero h1{width:100% !important;font-size:clamp(50px,12.8vw,78px) !important;max-width:680px !important}
  body.hattara-page .hattara-hero .hero-copy{width:100% !important;max-width:590px !important}
  body.hattara-page .hero-version-slot{width:min(450px,100%) !important}
  body.hattara-page .hattara-cotton-stage{position:relative !important;left:auto !important;top:auto !important;align-self:center !important;width:min(72vw,360px) !important;max-width:none !important;margin:48px 0 0 !important;transform:none !important}
  body.hattara-page .hattara-buy-wrap{position:relative !important;right:auto !important;top:auto !important;align-self:flex-end !important;margin:-62px 0 48px !important;transform:none !important}
  body.hattara-page .engraved-cloud-left{left:-100px !important;top:22px !important}
  body.hattara-page .engraved-cloud-right{right:-130px !important;top:42% !important}
  body.hattara-page .engraved-cloud-mid{display:none !important}
  body.hattara-page .engraved-water{left:56% !important;bottom:34px !important;width:760px !important}
  body.hattara-page .hattara-terminal-line{left:0 !important;right:0 !important;bottom:18px !important}
  body.hattara-page .hattara-hero::after{bottom:45px !important}
  body.hattara-page .story-section,
  body.hattara-page .story-right{width:calc(100% - 40px) !important;min-height:auto !important;padding:74px 0 !important;grid-template-columns:1fr !important;gap:34px !important}
  body.hattara-page .story-right .story-copy{order:1 !important}
  body.hattara-page .story-right .story-shot{order:2 !important}
  body.hattara-page .story-shot-large img,
  body.hattara-page .story-shot-medium img{min-height:0 !important;max-height:none !important;height:auto !important}
  body.hattara-page .feature-grid{grid-template-columns:1fr !important}
  body.hattara-page .site-footer{width:calc(100% - 40px) !important}
}
@media(max-width:560px){
  body.hattara-page .brand-wordmark{font-size:.78rem !important}
  body.hattara-page .house-nav>a,
  body.hattara-page .nav-models>summary{font-size:.61rem !important}
  body.hattara-page .hattara-hero h1{font-size:clamp(44px,14.5vw,66px) !important}
  body.hattara-page #silento-buy-now{width:155px !important;height:54px !important;min-height:54px !important}
  body.hattara-page .story-copy h2{font-size:clamp(34px,10.5vw,48px) !important}
}


/* ==========================================================
   SILENTO HATTARA — REFERENCE LOCKED V8
   Full viewport deck. No visible page scrolling on desktop.
   Existing copy and genuine product screenshots unchanged.
   ========================================================== */
@media(min-width:901px){
  html, body.hattara-page{
    width:100% !important;height:100% !important;overflow:hidden !important;
    scroll-snap-type:none !important;scroll-behavior:auto !important;
  }
  body.hattara-page .silento-top{
    position:fixed !important;z-index:500 !important;top:0 !important;left:0 !important;right:0 !important;
    width:100vw !important;max-width:none !important;height:72px !important;margin:0 !important;
    padding-left:clamp(34px,6.2vw,122px) !important;padding-right:clamp(34px,6.2vw,122px) !important;
    background:linear-gradient(180deg,rgba(5,19,24,.46),rgba(5,19,24,.10)) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border-bottom:1px solid rgba(201,155,67,.17) !important;box-shadow:none !important;
  }
  body.hattara-page .page-panel{
    position:fixed !important;z-index:10 !important;top:72px !important;left:0 !important;
    width:100vw !important;max-width:none !important;height:calc(100svh - 72px) !important;
    min-height:0 !important;max-height:none !important;margin:0 !important;
    padding-left:clamp(34px,6.2vw,122px) !important;padding-right:clamp(34px,6.2vw,122px) !important;
    overflow:hidden !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
    transform:translate3d(8vw,0,0) scale(.992) !important;filter:none !important;
    transition:transform .72s cubic-bezier(.22,.61,.36,1),opacity .50s ease,visibility 0s linear .72s !important;
    scroll-snap-align:none !important;
  }
  body.hattara-page .page-panel.is-current{
    z-index:30 !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    transform:translate3d(0,0,0) scale(1) !important;
    transition:transform .72s cubic-bezier(.22,.61,.36,1),opacity .50s ease,visibility 0s !important;
  }
  body.hattara-page .page-panel.is-before{z-index:20 !important;transform:translate3d(-8vw,0,0) scale(.992) !important}
  body.hattara-page .page-panel.is-after{z-index:20 !important;transform:translate3d(8vw,0,0) scale(.992) !important}

  body.hattara-page .hattara-hero{
    display:block !important;padding-top:clamp(30px,4.2vh,48px) !important;padding-bottom:52px !important;
    background:transparent !important;border-bottom:0 !important;
  }
  body.hattara-page .hattara-hero-copy-block{
    position:absolute !important;z-index:20 !important;left:11.5vw !important;top:clamp(40px,6.2vh,70px) !important;
    width:43vw !important;max-width:none !important;
  }
  body.hattara-page .hattara-hero h1{
    width:43vw !important;max-width:none !important;margin:0 0 24px !important;
    font-size:clamp(58px,5.15vw,88px) !important;line-height:.90 !important;letter-spacing:-.048em !important;
  }
  body.hattara-page .hattara-hero .hero-copy{
    width:39vw !important;max-width:none !important;font-size:clamp(.94rem,1vw,1.08rem) !important;
  }
  body.hattara-page .hero-version-slot{
    width:31vw !important;min-width:390px !important;max-width:500px !important;margin-top:34px !important;
  }
  body.hattara-page .hattara-cotton-stage{
    left:51.7vw !important;top:53% !important;width:18vw !important;min-width:250px !important;max-width:340px !important;
    transform:translate(-50%,-50%) !important;
  }
  body.hattara-page .hattara-cotton-stage img{filter:none !important}
  body.hattara-page .hattara-buy-wrap{right:5.2vw !important;top:48.5% !important}
  body.hattara-page #silento-buy-now{width:15vw !important;min-width:190px !important;max-width:250px !important}
  body.hattara-page .hattara-terminal-line{left:11.5vw !important;bottom:20px !important}
  body.hattara-page .hattara-hero::after{left:11.5vw !important;right:5.2vw !important;bottom:48px !important}
  body.hattara-page .engraved-cloud-left{width:255px !important;left:-42px !important;top:20px !important}
  body.hattara-page .engraved-cloud-right{width:315px !important;right:-40px !important;top:100px !important}
  body.hattara-page .engraved-cloud-mid{width:270px !important;right:18vw !important;top:39% !important}
  body.hattara-page .engraved-wind-upper{width:365px !important;left:45% !important;top:15% !important}
  body.hattara-page .engraved-wind-lower{width:470px !important;left:-110px !important;bottom:8% !important}
  body.hattara-page .engraved-water{width:52vw !important;min-width:760px !important;max-width:980px !important;left:52% !important;bottom:16px !important}

  body.hattara-page .story-section,body.hattara-page .story-right{
    display:grid !important;grid-template-columns:minmax(0,1fr) minmax(42vw,680px) !important;
    gap:clamp(48px,6vw,110px) !important;align-items:center !important;
    padding-top:clamp(48px,7vh,80px) !important;padding-bottom:clamp(42px,6vh,70px) !important;
    border:0 !important;background:transparent !important;
  }
  body.hattara-page .story-right{grid-template-columns:minmax(42vw,680px) minmax(0,1fr) !important}
  body.hattara-page .story-section::before{opacity:.20 !important}
  body.hattara-page .story-section::after{opacity:.21 !important}
  body.hattara-page .story-copy{align-self:center !important}
  body.hattara-page .story-copy h2{font-size:clamp(42px,4.2vw,70px) !important;line-height:.98 !important}
  body.hattara-page .story-copy p{font-size:clamp(.96rem,1vw,1.08rem) !important;line-height:1.62 !important;max-width:720px !important}
  body.hattara-page .story-shot{width:100% !important;max-height:68vh !important}
  body.hattara-page .story-shot img,body.hattara-page .story-shot-large img,body.hattara-page .story-shot-medium img{
    width:100% !important;height:auto !important;min-height:0 !important;max-height:66vh !important;
    object-fit:contain !important;object-position:center !important;
  }

  body.hattara-page .feature-grid-section{
    display:grid !important;grid-template-columns:1fr !important;grid-template-rows:auto 1fr !important;
    align-content:center !important;gap:24px !important;padding-top:38px !important;padding-bottom:34px !important;
  }
  body.hattara-page .feature-grid-section .story-copy{max-width:960px !important}
  body.hattara-page .feature-grid-section .story-copy h2{font-size:clamp(38px,3.7vw,60px) !important}
  body.hattara-page .feature-grid-section .story-copy p{max-width:960px !important;line-height:1.45 !important}
  body.hattara-page .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;align-self:stretch !important;max-height:48vh !important}
  body.hattara-page .feature-card{min-height:0 !important;padding:16px 18px 17px !important}
  body.hattara-page .feature-card h3{margin:0 0 7px !important;font-size:1.02rem !important}
  body.hattara-page .feature-card p{font-size:.86rem !important;line-height:1.40 !important}
  body.hattara-page .feature-kicker{font-size:.56rem !important;letter-spacing:.20em !important}

  body.hattara-page .service-links{gap:14px !important;margin-top:14px !important}
  body.hattara-page .service-link{
    width:62px !important;height:62px !important;min-width:62px !important;min-height:62px !important;
    border:1px solid rgba(228,193,111,.76) !important;border-radius:9px !important;background:#efe4c8 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
  }
  body.hattara-page .service-link img{width:34px !important;height:34px !important;opacity:1 !important;filter:none !important}

  body.hattara-page .site-footer{
    display:flex !important;align-items:flex-end !important;padding-top:60px !important;padding-bottom:72px !important;background:transparent !important;
  }
  body.hattara-page .official-marks{width:100% !important}
}
@media(max-width:900px){
  html,body.hattara-page{overflow:auto !important}
  body.hattara-page .page-panel{
    position:relative !important;top:auto !important;left:auto !important;width:calc(100% - 40px) !important;
    height:auto !important;min-height:auto !important;opacity:1 !important;visibility:visible !important;
    pointer-events:auto !important;transform:none !important;transition:none !important;
  }
}
/* === END V8 === */


/* === V9 content and slide refinement === */
@media(min-width:901px){
  body.hattara-page .story-section .story-copy{max-width:44vw !important}
  body.hattara-page #format .story-shot img{object-fit:contain !important; object-position:center center !important; max-height:62vh !important}
  body.hattara-page #structure .story-shot img{object-fit:contain !important; object-position:center center !important; max-height:56vh !important}
  body.hattara-page .archive-shot img{object-fit:contain !important; object-position:center center !important; max-height:58vh !important}
  body.hattara-page .messenger-shot img{object-fit:contain !important; object-position:center center !important; max-height:56vh !important}
  body.hattara-page .assistant-shot img{object-fit:contain !important; object-position:center top !important; max-height:58vh !important}

  body.hattara-page .feature-grid-section{gap:18px !important;}
  body.hattara-page .feature-grid-section .story-copy{max-width:920px !important}
  body.hattara-page .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:1180px !important;
    max-height:none !important;
  }
  body.hattara-page .feature-card{min-height:120px !important;padding:18px 20px 20px !important}
  body.hattara-page .feature-card h3{font-size:1.06rem !important;margin-bottom:6px !important}
  body.hattara-page .feature-card p{font-size:.9rem !important;line-height:1.42 !important}

  body.hattara-page .site-footer.closing-section{
    display:grid !important;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr) !important;
    align-items:end !important;
    gap:48px !important;
    min-height:100vh !important;
    padding-top:84px !important;
    padding-bottom:80px !important;
    width:100% !important;
    max-width:none !important;
  }
  body.hattara-page .site-footer.closing-section::before{
    width:320px !important; height:150px !important; left:4vw !important; bottom:36px !important; opacity:.18 !important;
  }
  body.hattara-page .closing-copy{position:relative !important;z-index:2 !important;max-width:760px !important;align-self:center !important;padding-left:5vw !important}
  body.hattara-page .closing-copy h2{
    margin:0 0 20px !important; color:#f1e5cb !important; font-size:clamp(48px,4.6vw,76px) !important;
    line-height:.98 !important; letter-spacing:-.04em !important; font-weight:560 !important;
  }
  body.hattara-page .closing-copy p{margin:0 0 14px !important;color:#d5c8aa !important;font-size:1.02rem !important;line-height:1.65 !important}
  body.hattara-page .closing-meta{color:#e0be70 !important;font-size:.98rem !important;letter-spacing:.02em !important}
  body.hattara-page .closing-actions{margin-top:26px !important;display:flex !important;gap:18px !important;align-items:center !important}
  body.hattara-page .closing-buy{
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    min-width:220px !important;height:58px !important;padding:0 28px !important;text-decoration:none !important;
    border:1px solid rgba(225,192,113,.82) !important;border-radius:999px !important;
    color:#f2e7d0 !important;background:linear-gradient(90deg, rgba(13,92,79,.94), rgba(8,75,65,.92)) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.18) !important;text-transform:uppercase !important;letter-spacing:.18em !important;font-size:.78rem !important;font-weight:560 !important;
  }
  body.hattara-page .closing-buy:hover{transform:translateY(-1px) !important}
  body.hattara-page .site-footer.closing-section .official-marks{
    align-self:end !important; justify-self:start !important; width:auto !important; padding-top:0 !important; border-top:0 !important;
    display:flex !important; gap:20px !important; flex-wrap:wrap !important;
  }
  body.hattara-page .site-footer.closing-section .official-mark{opacity:.95 !important; filter:none !important; height:78px !important; width:auto !important}
}
@media(max-width:900px){
  body.hattara-page .closing-copy{padding-left:0 !important}
  body.hattara-page .site-footer.closing-section{display:block !important; min-height:auto !important}
  body.hattara-page .site-footer.closing-section .official-marks{margin-top:28px !important}
}
/* === END V9 === */


/* === V10 cotton-candy halo removal === */
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage .hero-sticker,
body.hattara-page .hattara-cotton-stage img{
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  outline:none !important;
}
body.hattara-page .hattara-cotton-stage{
  isolation:isolate !important;
  overflow:visible !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after,
body.hattara-page .hattara-cotton-stage .hero-sticker::before,
body.hattara-page .hattara-cotton-stage .hero-sticker::after{
  content:none !important;
  display:none !important;
}
body.hattara-page .hattara-cotton-stage img{
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  image-rendering:auto !important;
  -webkit-transform:translateZ(0) !important;
  transform:translateZ(0) !important;
  backface-visibility:hidden !important;
}
/* === END V10 === */


/* === V11 USER SCREENSHOTS + FINAL COTTON CLEANUP === */
/* exact screenshots supplied by the user */
body.hattara-page .timeline-shot,
body.hattara-page .archive-shot,
body.hattara-page .messenger-shot,
body.hattara-page .assistant-shot{
  background:#061316 !important;
}
body.hattara-page .timeline-shot img,
body.hattara-page .archive-shot img,
body.hattara-page .messenger-shot img,
body.hattara-page .assistant-shot img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#061316 !important;
  filter:none !important;
  transform:none !important;
}
@media(min-width:901px){
  body.hattara-page .timeline-shot{height:min(57vh,570px) !important;max-height:none !important}
  body.hattara-page .archive-shot{height:min(64vh,630px) !important;max-height:none !important}
  body.hattara-page .messenger-shot{height:min(64vh,630px) !important;max-height:none !important}
  body.hattara-page .assistant-shot{height:min(52vh,500px) !important;max-height:none !important}
  body.hattara-page .archive-shot img,
  body.hattara-page .messenger-shot img{width:auto !important;max-width:100% !important;margin:0 auto !important}
}

/* remove every source of a dark halo around the cotton candy */
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage .hero-visual,
body.hattara-page .hattara-cotton-stage .hero-sticker,
body.hattara-page .hattara-cotton-stage img{
  background:transparent !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  outline:0 !important;
  border:0 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}
body.hattara-page .hattara-cotton-stage{
  isolation:auto !important;
  overflow:visible !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after,
body.hattara-page .hattara-cotton-stage .hero-visual::before,
body.hattara-page .hattara-cotton-stage .hero-visual::after,
body.hattara-page .hattara-cotton-stage .hero-sticker::before,
body.hattara-page .hattara-cotton-stage .hero-sticker::after{
  content:none !important;
  display:none !important;
  background:none !important;
  filter:none !important;
  box-shadow:none !important;
}
body.hattara-page .hattara-cotton-stage img{
  -webkit-transform:none !important;
  transform:none !important;
  backface-visibility:visible !important;
  will-change:auto !important;
}
/* === END V11 === */


/* === V12 layout polish + decoration enrichment === */
/* ultra-clean hero cotton and zero halo treatment */
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage .hero-visual,
body.hattara-page .hattara-cotton-stage .hero-sticker,
body.hattara-page .hattara-cotton-stage img{
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
body.hattara-page .hattara-cotton-stage img{
  image-rendering:auto !important;
  -webkit-filter:none !important;
}

/* make internal slides feel less flat */
body.hattara-page .story-section::before{opacity:.29 !important}
body.hattara-page .story-section::after{opacity:.29 !important}
body.hattara-page .site-footer::before{opacity:.22 !important}
body.hattara-page .site-footer::after{
  content:"" !important;
  position:absolute !important;
  width:320px !important;
  height:72px !important;
  right:2vw !important;
  top:90px !important;
  background:url("assets/decor_v6/wind-right.png?v=6") center/contain no-repeat !important;
  opacity:.19 !important;
  pointer-events:none !important;
}
body.hattara-page .story-copy::before{
  content:"" !important;
  display:block !important;
  width:180px !important;
  height:40px !important;
  margin:0 0 8px !important;
  background:url("assets/decor_v6/wind-mid.png?v=6") left center/contain no-repeat !important;
  opacity:.16 !important;
  pointer-events:none !important;
}
body.hattara-page .story-right .story-copy::before{
  width:205px !important;
  background:url("assets/decor_v6/wind-right.png?v=6") left center/contain no-repeat !important;
  opacity:.15 !important;
}
body.hattara-page .story-shot::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  width:150px !important;
  height:72px !important;
  right:-18px !important;
  bottom:-6px !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  opacity:.12 !important;
  pointer-events:none !important;
}
body.hattara-page .story-right .story-shot::after{
  right:auto !important;
  left:-18px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
}

@media(min-width:901px){
  /* slide 2: distribute the text across the frame more elegantly */
  body.hattara-page #engine .story-copy{
    display:grid !important;
    grid-template-columns:minmax(320px,520px) minmax(340px,1fr) !important;
    column-gap:72px !important;
    row-gap:14px !important;
    align-items:start !important;
    max-width:1160px !important;
  }
  body.hattara-page #engine .story-copy .panel-over,
  body.hattara-page #engine .story-copy h2{
    grid-column:1 !important;
  }
  body.hattara-page #engine .story-copy > p:nth-of-type(2),
  body.hattara-page #engine .story-copy > p:nth-of-type(3){
    grid-column:2 !important;
    max-width:620px !important;
  }
  body.hattara-page #engine .story-copy > p:nth-of-type(2){
    padding-top:56px !important;
  }
  body.hattara-page #engine.feature-grid-section{
    gap:30px !important;
  }
  body.hattara-page #engine .feature-grid{
    width:100% !important;
    max-width:1180px !important;
  }

  /* portrait screenshots should have portrait frames, not wide empty boxes */
  body.hattara-page .archive-shot,
  body.hattara-page .messenger-shot,
  body.hattara-page .assistant-shot,
  body.hattara-page .timeline-shot{
    justify-self:center !important;
    align-self:center !important;
    max-height:none !important;
  }
  body.hattara-page .archive-shot{
    width:min(27vw,420px) !important;
    height:auto !important;
  }
  body.hattara-page .messenger-shot{
    width:min(23vw,340px) !important;
    height:auto !important;
  }
  body.hattara-page .assistant-shot{
    width:min(45vw,760px) !important;
    height:auto !important;
  }
  body.hattara-page .timeline-shot{
    width:min(46vw,760px) !important;
    height:auto !important;
  }
  body.hattara-page .archive-shot img,
  body.hattara-page .messenger-shot img,
  body.hattara-page .assistant-shot img,
  body.hattara-page .timeline-shot img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
  }

  /* keep final slide more premium */
  body.hattara-page .closing-copy{max-width:780px !important}
  body.hattara-page .closing-meta{font-size:1rem !important;letter-spacing:.025em !important}
}

@media(max-width:900px){
  body.hattara-page .story-copy::before,
  body.hattara-page .story-shot::after,
  body.hattara-page .site-footer::after{display:none !important}
}
/* === END V12 === */

/* === V14 NON-REGRESSION POLISH === */
/* Restore the V12 visual system, tighten layouts, improve flow/engine/archive, and keep payment hooks untouched. */

/* Hero: remove the dark region over the water and every possible cotton shadow source. */
body.hattara-page .hattara-hero::before{
  background:none !important;
}
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage *,
body.hattara-page .hattara-cotton-stage img{
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after,
body.hattara-page .hattara-cotton-stage .hero-visual::before,
body.hattara-page .hattara-cotton-stage .hero-visual::after,
body.hattara-page .hattara-cotton-stage .hero-sticker::before,
body.hattara-page .hattara-cotton-stage .hero-sticker::after{
  content:none !important;
  display:none !important;
}
body.hattara-page .engraved-water{
  opacity:.94 !important;
  filter:none !important;
  z-index:3 !important;
}
body.hattara-page .hattara-cotton-stage{z-index:12 !important;}

/* Stronger but restrained decorative continuity on every slide. */
body.hattara-page .story-section::before{opacity:.33 !important;}
body.hattara-page .story-section::after{opacity:.31 !important;}
body.hattara-page .story-section:nth-of-type(even)::before{opacity:.27 !important;}
body.hattara-page .story-section:nth-of-type(odd)::before{opacity:.30 !important;}
body.hattara-page .story-copy::before{opacity:.20 !important;}
body.hattara-page .story-shot::after{opacity:.15 !important;}
body.hattara-page .site-footer::before{opacity:.24 !important;}
body.hattara-page .site-footer::after{opacity:.22 !important;}

@media(min-width:901px){
  /* Preserve the full-screen slide deck while using the screen more efficiently. */
  body.hattara-page .story-section,
  body.hattara-page .story-right{
    grid-template-columns:minmax(0,1fr) minmax(36vw,610px) !important;
    gap:clamp(34px,3.6vw,62px) !important;
    padding-left:6.4vw !important;
    padding-right:6.4vw !important;
  }
  body.hattara-page .story-right{
    grid-template-columns:minmax(36vw,610px) minmax(0,1fr) !important;
  }
  body.hattara-page .story-copy{
    max-width:700px !important;
  }
  body.hattara-page .story-copy h2{
    font-size:clamp(46px,4.25vw,70px) !important;
    line-height:.98 !important;
  }
  body.hattara-page .story-copy p{
    font-size:clamp(1rem,1.03vw,1.10rem) !important;
    line-height:1.58 !important;
  }

  /* Slide 2 / FLOW: text and editor sit closer, with a stronger editorial balance. */
  body.hattara-page .flow-section{
    grid-template-columns:minmax(0,.92fr) minmax(42vw,690px) !important;
    gap:clamp(28px,3vw,50px) !important;
  }
  body.hattara-page .flow-section .story-copy{max-width:640px !important;}
  body.hattara-page .flow-section .story-shot{justify-self:end !important;}

  /* Engine: larger type, better arrangement, less empty dead space. */
  body.hattara-page #engine.feature-grid-section{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    align-content:center !important;
    gap:28px !important;
    padding-left:7vw !important;
    padding-right:7vw !important;
  }
  body.hattara-page #engine .story-copy{
    display:grid !important;
    grid-template-columns:minmax(360px, .95fr) minmax(420px,1.05fr) !important;
    column-gap:54px !important;
    row-gap:10px !important;
    max-width:1240px !important;
    align-items:start !important;
  }
  body.hattara-page #engine .story-copy .panel-over,
  body.hattara-page #engine .story-copy h2{grid-column:1 !important;}
  body.hattara-page #engine .story-copy > p:nth-of-type(2),
  body.hattara-page #engine .story-copy > p:nth-of-type(3){
    grid-column:2 !important;
    max-width:660px !important;
    font-size:clamp(1.04rem,1.1vw,1.16rem) !important;
    line-height:1.52 !important;
  }
  body.hattara-page #engine .story-copy > p:nth-of-type(2){padding-top:52px !important;}
  body.hattara-page #engine .feature-grid{
    width:min(100%,1240px) !important;
    max-width:1240px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-self:start !important;
  }
  body.hattara-page #engine .feature-card{
    min-height:138px !important;
    padding:20px 24px 22px !important;
  }
  body.hattara-page #engine .feature-card h3{
    font-size:1.16rem !important;
    line-height:1.18 !important;
    margin-bottom:8px !important;
  }
  body.hattara-page #engine .feature-card p{
    font-size:.95rem !important;
    line-height:1.48 !important;
  }
  body.hattara-page #engine .feature-kicker{font-size:.62rem !important;}

  /* Archive: exact portrait aspect ratio, no black side bars, more premium framing. */
  body.hattara-page .archive-shot{
    width:min(35vw,510px) !important;
    height:auto !important;
    aspect-ratio:696 / 810 !important;
    justify-self:center !important;
    background:transparent !important;
    border-color:rgba(201,155,67,.42) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.12) !important;
  }
  body.hattara-page .archive-shot img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:transparent !important;
  }

  /* Existing user screenshots keep their natural orientation and stay close to copy. */
  body.hattara-page .timeline-shot{
    width:min(46vw,760px) !important;
    aspect-ratio:1682 / 810 !important;
    height:auto !important;
  }
  body.hattara-page .timeline-shot img{width:100% !important;height:100% !important;object-fit:cover !important;background:transparent !important;}
  body.hattara-page .messenger-shot{
    width:min(25vw,360px) !important;
    aspect-ratio:770 / 1484 !important;
    height:auto !important;
    background:transparent !important;
  }
  body.hattara-page .messenger-shot img{width:100% !important;height:100% !important;object-fit:cover !important;background:transparent !important;}
  body.hattara-page .assistant-shot{
    width:min(48vw,790px) !important;
    aspect-ratio:1634 / 402 !important;
    height:auto !important;
    background:transparent !important;
  }
  body.hattara-page .assistant-shot img{width:100% !important;height:100% !important;object-fit:cover !important;background:transparent !important;}

  /* Closing slide: preserve €30 lifetime-access tone and add a little more ornament. */
  body.hattara-page .closing-copy{max-width:760px !important;}
  body.hattara-page .closing-meta{font-size:1rem !important;}
}

@media(max-width:900px){
  body.hattara-page .flow-section,
  body.hattara-page #engine .story-copy{display:block !important;}
  body.hattara-page .archive-shot,
  body.hattara-page .timeline-shot,
  body.hattara-page .messenger-shot,
  body.hattara-page .assistant-shot{width:100% !important;height:auto !important;aspect-ratio:auto !important;}
  body.hattara-page .archive-shot img,
  body.hattara-page .timeline-shot img,
  body.hattara-page .messenger-shot img,
  body.hattara-page .assistant-shot img{width:100% !important;height:auto !important;object-fit:contain !important;}
}
/* === END V14 === */

/* === V15 hero shadow hard-kill ===
   Remove every possible shadow/dark matte under the cotton candy without touching payment hooks.
   This is intentionally narrow to avoid regressions.
   ============================================ */
body.hattara-page .hattara-hero{
  background:linear-gradient(180deg,#041516 0%,#031314 100%) !important;
}
body.hattara-page .hattara-reference-decor,
body.hattara-page .hattara-reference-decor *{
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage .hero-visual,
body.hattara-page .hattara-cotton-stage .hero-sticker,
body.hattara-page .hattara-cotton-stage img{
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after,
body.hattara-page .hattara-cotton-stage .hero-visual::before,
body.hattara-page .hattara-cotton-stage .hero-visual::after,
body.hattara-page .hattara-cotton-stage .hero-sticker::before,
body.hattara-page .hattara-cotton-stage .hero-sticker::after,
body.hattara-page .hero-visual::before,
body.hattara-page .hero-visual::after,
body.hattara-page .hero-sticker::before,
body.hattara-page .hero-sticker::after{
  content:none !important;
  display:none !important;
  background:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
}
body.hattara-page .hattara-cotton-stage{
  isolation:isolate !important;
  overflow:visible !important;
}
body.hattara-page .hattara-cotton-stage img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  transform:none !important;
  animation:none !important;
  will-change:auto !important;
  backface-visibility:hidden !important;
}
body.hattara-page .engraved-water{
  z-index:2 !important;
  opacity:1 !important;
}
body.hattara-page .hattara-cotton-stage{
  z-index:4 !important;
}
/* === END V15 === */

/* === V16 clean water artwork ===
   The previous water PNG contained low-opacity dark pixels that created
   the visible black vertical haze under the cotton candy. The hero now
   uses a cleaned line-art-only water asset. No layout/payment changes. */
body.hattara-page .engraved-water{
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  background:transparent !important;
  box-shadow:none !important;
}
/* === END V16 === */

/* === V17 emergency hero shadow removal ===
   Narrow fix only: remove the dark column/shadow under the cotton candy
   without changing payment or layout systems.
   1) use the SVG water art (no premultiplied alpha haze)
   2) kill every filter/pseudo/background on the cotton stage
   3) remove hero radial underglow behind the candy
   ================================================ */
body.hattara-page .hattara-hero::before{
  background:none !important;
}
body.hattara-page .hattara-cotton-stage,
body.hattara-page .hattara-cotton-stage *,
body.hattara-page .hattara-cotton-stage img,
body.hattara-page .hero-visual img{
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.hattara-page .hattara-cotton-stage::before,
body.hattara-page .hattara-cotton-stage::after,
body.hattara-page .hattara-cotton-stage .hero-visual::before,
body.hattara-page .hattara-cotton-stage .hero-visual::after,
body.hattara-page .hattara-cotton-stage .hero-sticker::before,
body.hattara-page .hattara-cotton-stage .hero-sticker::after,
body.hattara-page .hero-visual::before,
body.hattara-page .hero-visual::after,
body.hattara-page .hero-sticker::before,
body.hattara-page .hero-sticker::after{
  content:none !important;
  display:none !important;
  background:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
}
body.hattara-page .hattara-cotton-stage{
  isolation:auto !important;
}
body.hattara-page .hattara-cotton-stage img{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
body.hattara-page .engraved-water,
body.hattara-page .engraved-water img{
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  box-shadow:none !important;
  background:transparent !important;
  opacity:.94 !important;
}
/* === END V17 === */

/* === V18 WORKING WATER MOTION + LIGHT ===
   Uses real HTML aura layers instead of pseudo-elements so previous hard-kill
   rules cannot suppress the effect. Specific selectors override animation:none.
   No payment/layout hooks changed.
   =============================================================== */

/* animated water: override the earlier .hattara-reference-decor img animation:none */
body.hattara-page .hattara-reference-decor img.engraved-water{
  animation:hattaraWaterAlive 6.8s ease-in-out infinite !important;
  transform-origin:50% 80% !important;
  will-change:transform,opacity !important;
  opacity:.96 !important;
}

/* independent light system between water and candy */
body.hattara-page .hattara-water-light{
  position:absolute !important;
  z-index:3 !important;
  left:64% !important;
  bottom:48px !important;
  width:560px !important;
  height:390px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  overflow:visible !important;
  background:transparent !important;
}
body.hattara-page .hattara-water-light > span{
  position:absolute !important;
  display:block !important;
  pointer-events:none !important;
}
body.hattara-page .hattara-water-glow{
  left:50% !important;
  bottom:0 !important;
  width:500px !important;
  height:250px !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at 50% 72%,
    rgba(92,255,238,.34) 0%,
    rgba(58,215,205,.22) 22%,
    rgba(34,159,159,.11) 46%,
    rgba(14,88,94,.04) 64%,
    rgba(0,0,0,0) 78%) !important;
  filter:blur(14px) !important;
  -webkit-filter:blur(14px) !important;
  animation:hattaraGlowBreathe 5.4s ease-in-out infinite !important;
}
body.hattara-page .hattara-water-beam{
  left:50% !important;
  bottom:74px !important;
  width:210px !important;
  height:300px !important;
  transform:translateX(-50%) !important;
  border-radius:50% 50% 30% 30% / 18% 18% 82% 82% !important;
  background:linear-gradient(to top,
    rgba(90,245,231,.20) 0%,
    rgba(74,229,218,.15) 28%,
    rgba(50,191,188,.09) 52%,
    rgba(25,120,128,.04) 72%,
    rgba(0,0,0,0) 100%) !important;
  filter:blur(22px) !important;
  -webkit-filter:blur(22px) !important;
  animation:hattaraBeamBreathe 5.9s ease-in-out infinite !important;
}
body.hattara-page .hattara-water-rim{
  left:50% !important;
  bottom:68px !important;
  width:300px !important;
  height:118px !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  border:1px solid rgba(117,255,239,.34) !important;
  box-shadow:
    0 0 18px rgba(95,245,229,.14),
    inset 0 0 18px rgba(95,245,229,.10) !important;
  animation:hattaraRimPulse 4.8s ease-in-out infinite !important;
}

/* allow a tiny clean float but no shadow */
body.hattara-page .hattara-cotton-stage .hero-sticker img{
  animation:hattaraCottonFloatClean 5.8s ease-in-out infinite !important;
  filter:none !important;
  -webkit-filter:none !important;
  box-shadow:none !important;
  will-change:transform !important;
}

@keyframes hattaraWaterAlive{
  0%   { transform:translateX(-50%) translateY(0) scaleX(1) scaleY(1); opacity:.92; }
  25%  { transform:translateX(-50%) translateY(-2px) scaleX(1.015) scaleY(1.004); opacity:.98; }
  50%  { transform:translateX(-50%) translateY(-5px) scaleX(.992) scaleY(1.012); opacity:1; }
  75%  { transform:translateX(-50%) translateY(-2px) scaleX(1.010) scaleY(1.006); opacity:.98; }
  100% { transform:translateX(-50%) translateY(0) scaleX(1) scaleY(1); opacity:.92; }
}
@keyframes hattaraGlowBreathe{
  0%,100% { opacity:.45; transform:translateX(-50%) scale(.94); }
  50%     { opacity:.90; transform:translateX(-50%) scale(1.08); }
}
@keyframes hattaraBeamBreathe{
  0%,100% { opacity:.30; transform:translateX(-50%) scaleX(.88) scaleY(.95); }
  50%     { opacity:.78; transform:translateX(-50%) scaleX(1.08) scaleY(1.06); }
}
@keyframes hattaraRimPulse{
  0%,100% { opacity:.30; transform:translateX(-50%) scale(.92); }
  50%     { opacity:.70; transform:translateX(-50%) scale(1.06); }
}
@keyframes hattaraCottonFloatClean{
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}

@media(max-width:900px){
  body.hattara-page .hattara-water-light{
    left:56% !important;
    bottom:52px !important;
    width:360px !important;
    height:280px !important;
  }
  body.hattara-page .hattara-water-glow{width:330px !important;height:180px !important}
  body.hattara-page .hattara-water-beam{width:150px !important;height:220px !important;bottom:48px !important}
  body.hattara-page .hattara-water-rim{width:220px !important;height:86px !important;bottom:46px !important}
}
/* === END V18 === */

/* === V19 light alignment + clouds on every slide === */
/* The desktop hero places the candy at 51.7vw. Lock the light to the exact same axis. */
@media(min-width:901px){
  body.hattara-page .hattara-water-light{
    left:51.7vw !important;
    bottom:38px !important;
    width:430px !important;
    height:430px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .hattara-water-glow{
    left:50% !important;
    bottom:16px !important;
    width:360px !important;
    height:170px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(ellipse at 50% 68%,
      rgba(111,255,240,.28) 0%,
      rgba(62,218,209,.17) 26%,
      rgba(27,145,149,.075) 50%,
      rgba(0,0,0,0) 76%) !important;
    filter:blur(12px) !important;
    -webkit-filter:blur(12px) !important;
  }
  body.hattara-page .hattara-water-beam{
    left:50% !important;
    bottom:92px !important;
    width:128px !important;
    height:292px !important;
    transform:translateX(-50%) !important;
    background:linear-gradient(to top,
      rgba(98,246,232,.16) 0%,
      rgba(80,229,217,.12) 30%,
      rgba(55,184,184,.075) 56%,
      rgba(28,124,132,.035) 78%,
      rgba(0,0,0,0) 100%) !important;
    filter:blur(17px) !important;
    -webkit-filter:blur(17px) !important;
  }
  body.hattara-page .hattara-water-rim{
    left:50% !important;
    bottom:73px !important;
    width:248px !important;
    height:92px !important;
    transform:translateX(-50%) !important;
    border-color:rgba(111,255,240,.28) !important;
    box-shadow:0 0 14px rgba(95,245,229,.10), inset 0 0 12px rgba(95,245,229,.07) !important;
  }
  /* soft light reaches the lower half of the candy, without making a dark/drop shadow */
  body.hattara-page .hattara-candy-aura{
    left:50% !important;
    top:48px !important;
    width:260px !important;
    height:250px !important;
    transform:translateX(-50%) !important;
    border-radius:50% !important;
    background:radial-gradient(circle at 50% 64%,
      rgba(118,255,241,.14) 0%,
      rgba(72,222,214,.09) 26%,
      rgba(33,145,151,.04) 48%,
      rgba(0,0,0,0) 72%) !important;
    filter:blur(18px) !important;
    -webkit-filter:blur(18px) !important;
    animation:hattaraCandyAura 5.6s ease-in-out infinite !important;
  }
}
@keyframes hattaraCandyAura{
  0%,100%{opacity:.38;transform:translateX(-50%) scale(.94)}
  50%{opacity:.72;transform:translateX(-50%) scale(1.05)}
}

/* Clouds belong to every interior slide, not only the hero. Keep them behind content. */
body.hattara-page .story-section::before{
  z-index:1 !important;
  width:290px !important;
  height:164px !important;
  right:-22px !important;
  top:42px !important;
  background:url("assets/decor_v6/cloud-right.png?v=6") center/contain no-repeat !important;
  opacity:.42 !important;
}
body.hattara-page .story-section:nth-of-type(odd)::before{
  right:auto !important;
  left:-24px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.39 !important;
}
body.hattara-page .story-section::after{
  z-index:1 !important;
  width:205px !important;
  height:116px !important;
  right:9% !important;
  bottom:38px !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  opacity:.25 !important;
}
body.hattara-page .story-section:nth-of-type(odd)::after{
  right:auto !important;
  left:9% !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
}
body.hattara-page .story-copy,
body.hattara-page .story-shot,
body.hattara-page .feature-grid{
  position:relative !important;
  z-index:4 !important;
}
/* final/origin slide also gets the same visual language */
body.hattara-page .site-footer::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  width:300px !important;
  height:170px !important;
  left:-28px !important;
  top:64px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.34 !important;
  pointer-events:none !important;
}
body.hattara-page .site-footer::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  width:260px !important;
  height:150px !important;
  right:-18px !important;
  bottom:42px !important;
  background:url("assets/decor_v6/cloud-right.png?v=6") center/contain no-repeat !important;
  opacity:.30 !important;
  pointer-events:none !important;
}
body.hattara-page .site-footer > *{position:relative !important;z-index:4 !important}

@media(max-width:900px){
  body.hattara-page .hattara-water-light{
    left:56% !important;
    bottom:42px !important;
  }
  body.hattara-page .hattara-candy-aura{
    left:50% !important;
    top:42px !important;
    width:210px !important;
    height:205px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .story-section::before,
  body.hattara-page .story-section::after,
  body.hattara-page .site-footer::before,
  body.hattara-page .site-footer::after{opacity:.20 !important}
}
/* === END V19 === */


/* === V20 centered hero light + denser clouds on all slides === */
@media(min-width:901px){
  body.hattara-page .hattara-water-light{
    left:52% !important;
    bottom:18px !important;
    width:520px !important;
    height:500px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .hattara-water-glow{
    left:50% !important;
    bottom:22px !important;
    width:380px !important;
    height:176px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(ellipse at 50% 70%,
      rgba(111,255,240,.26) 0%,
      rgba(67,223,214,.18) 24%,
      rgba(31,148,153,.08) 48%,
      rgba(0,0,0,0) 74%) !important;
    filter:blur(10px) !important;
    -webkit-filter:blur(10px) !important;
  }
  body.hattara-page .hattara-water-beam{
    left:50% !important;
    bottom:96px !important;
    width:146px !important;
    height:344px !important;
    transform:translateX(-50%) !important;
    border-radius:50% 50% 28% 28% / 14% 14% 86% 86% !important;
    background:linear-gradient(to top,
      rgba(101,247,234,.24) 0%,
      rgba(84,231,220,.17) 24%,
      rgba(59,193,194,.11) 46%,
      rgba(31,129,138,.06) 66%,
      rgba(0,0,0,0) 100%) !important;
    filter:blur(15px) !important;
    -webkit-filter:blur(15px) !important;
  }
  body.hattara-page .hattara-water-rim{
    left:50% !important;
    bottom:78px !important;
    width:256px !important;
    height:94px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .hattara-candy-aura{
    left:50% !important;
    top:18px !important;
    width:290px !important;
    height:320px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(circle at 50% 58%,
      rgba(117,255,240,.17) 0%,
      rgba(79,225,216,.10) 26%,
      rgba(35,149,154,.045) 48%,
      rgba(0,0,0,0) 76%) !important;
    filter:blur(20px) !important;
    -webkit-filter:blur(20px) !important;
  }
}

/* More clouds on every slide: section background cloud, copy-side cloud, and shot-side cloud. */
body.hattara-page .story-section::before{
  z-index:1 !important;
  width:320px !important;
  height:182px !important;
  opacity:.44 !important;
  top:30px !important;
}
body.hattara-page .story-section::after{
  z-index:1 !important;
  width:240px !important;
  height:132px !important;
  opacity:.33 !important;
  bottom:26px !important;
}
body.hattara-page .story-copy::before,
body.hattara-page .story-copy::after,
body.hattara-page .story-shot::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  pointer-events:none !important;
}
body.hattara-page .story-copy::before{
  z-index:1 !important;
  width:215px !important;
  height:118px !important;
  right:-36px !important;
  top:-8px !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  opacity:.24 !important;
}
body.hattara-page .story-copy::after{
  z-index:1 !important;
  width:250px !important;
  height:132px !important;
  left:-42px !important;
  bottom:-10px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.18 !important;
}
body.hattara-page .story-right .story-copy::before{
  right:auto !important;
  left:-34px !important;
}
body.hattara-page .story-right .story-copy::after{
  left:auto !important;
  right:-36px !important;
  background:url("assets/decor_v6/cloud-right.png?v=6") center/contain no-repeat !important;
}
body.hattara-page .story-shot::after{
  z-index:2 !important;
  width:228px !important;
  height:122px !important;
  right:-18px !important;
  bottom:-8px !important;
  background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  opacity:.20 !important;
}
body.hattara-page .story-right .story-shot::after{
  right:auto !important;
  left:-18px !important;
}
body.hattara-page .story-copy > *,
body.hattara-page .story-shot > *{
  position:relative !important;
  z-index:4 !important;
}
body.hattara-page .feature-grid::before{
  width:318px !important;
  height:138px !important;
  right:-26px !important;
  top:-2px !important;
  opacity:.22 !important;
}
body.hattara-page .feature-grid::after{
  width:320px !important;
  height:128px !important;
  left:-28px !important;
  bottom:-4px !important;
  background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
  opacity:.19 !important;
}
body.hattara-page .site-footer::before{
  width:330px !important;
  height:180px !important;
  left:-24px !important;
  top:52px !important;
  opacity:.40 !important;
}
body.hattara-page .site-footer::after{
  width:320px !important;
  height:174px !important;
  right:-20px !important;
  bottom:36px !important;
  opacity:.36 !important;
}
@media(max-width:900px){
  body.hattara-page .hattara-water-light{
    left:56% !important;
    bottom:34px !important;
    width:350px !important;
    height:320px !important;
  }
  body.hattara-page .hattara-water-beam{width:122px !important;height:240px !important;bottom:62px !important}
  body.hattara-page .hattara-candy-aura{top:18px !important;width:220px !important;height:230px !important}
  body.hattara-page .story-section::before,
  body.hattara-page .story-section::after,
  body.hattara-page .story-copy::before,
  body.hattara-page .story-copy::after,
  body.hattara-page .story-shot::after,
  body.hattara-page .feature-grid::before,
  body.hattara-page .feature-grid::after,
  body.hattara-page .site-footer::before,
  body.hattara-page .site-footer::after{opacity:.18 !important}
}
/* === END V20 === */


/* === V21 remove water art, keep only centered lifted light === */
body.hattara-page .engraved-water,
body.hattara-page .hattara-reference-decor img.engraved-water,
body.hattara-page .hattara-water-rim{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

@media(min-width:901px){
  body.hattara-page .hattara-water-light{
    left:51.7vw !important;
    bottom:126px !important;
    width:310px !important;
    height:360px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .hattara-water-glow{
    left:50% !important;
    bottom:18px !important;
    width:190px !important;
    height:116px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(ellipse at 50% 72%,
      rgba(115,255,240,.18) 0%,
      rgba(72,226,216,.12) 26%,
      rgba(35,151,155,.05) 52%,
      rgba(0,0,0,0) 78%) !important;
    filter:blur(14px) !important;
    -webkit-filter:blur(14px) !important;
  }
  body.hattara-page .hattara-water-beam{
    left:50% !important;
    bottom:52px !important;
    width:126px !important;
    height:254px !important;
    transform:translateX(-50%) !important;
    border-radius:50% 50% 32% 32% / 16% 16% 84% 84% !important;
    background:linear-gradient(to top,
      rgba(107,248,235,.18) 0%,
      rgba(83,231,220,.13) 28%,
      rgba(52,187,188,.08) 56%,
      rgba(0,0,0,0) 100%) !important;
    filter:blur(18px) !important;
    -webkit-filter:blur(18px) !important;
  }
  body.hattara-page .hattara-candy-aura{
    left:50% !important;
    top:2px !important;
    width:250px !important;
    height:282px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(circle at 50% 68%,
      rgba(120,255,242,.18) 0%,
      rgba(76,224,216,.10) 30%,
      rgba(36,145,150,.04) 54%,
      rgba(0,0,0,0) 78%) !important;
    filter:blur(18px) !important;
    -webkit-filter:blur(18px) !important;
  }
}

@media(max-width:900px){
  body.hattara-page .hattara-water-light{
    left:56% !important;
    bottom:96px !important;
    width:220px !important;
    height:270px !important;
  }
  body.hattara-page .hattara-water-glow{
    width:156px !important;
    height:90px !important;
    bottom:12px !important;
  }
  body.hattara-page .hattara-water-beam{
    width:100px !important;
    height:188px !important;
    bottom:38px !important;
  }
  body.hattara-page .hattara-candy-aura{
    width:188px !important;
    height:214px !important;
    top:4px !important;
  }
}
/* === END V21 === */


/* === V22 raise hero light + richer clouds on all cards === */
@media(min-width:901px){
  /* Lift the light so it hugs the cotton candy more closely. */
  body.hattara-page .hattara-water-light{
    left:50% !important;
    bottom:188px !important;
    width:260px !important;
    height:312px !important;
    transform:translateX(-50%) !important;
  }
  body.hattara-page .hattara-water-glow{
    left:50% !important;
    bottom:112px !important;
    width:128px !important;
    height:118px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(circle at 50% 54%,
      rgba(122,255,244,.20) 0%,
      rgba(72,224,216,.11) 38%,
      rgba(23,110,122,.03) 68%,
      rgba(0,0,0,0) 100%) !important;
    filter:blur(18px) !important;
    -webkit-filter:blur(18px) !important;
  }
  body.hattara-page .hattara-water-beam{
    left:50% !important;
    bottom:126px !important;
    width:110px !important;
    height:224px !important;
    transform:translateX(-50%) !important;
    border-radius:50% 50% 36% 36% / 18% 18% 82% 82% !important;
    background:linear-gradient(to top,
      rgba(110,250,238,.16) 0%,
      rgba(86,232,221,.13) 24%,
      rgba(58,192,196,.09) 50%,
      rgba(0,0,0,0) 100%) !important;
    filter:blur(16px) !important;
    -webkit-filter:blur(16px) !important;
  }
  body.hattara-page .hattara-candy-aura{
    left:50% !important;
    top:10px !important;
    width:258px !important;
    height:290px !important;
    transform:translateX(-50%) !important;
    background:radial-gradient(circle at 50% 66%,
      rgba(124,255,243,.18) 0%,
      rgba(80,226,217,.10) 34%,
      rgba(36,146,152,.04) 58%,
      rgba(0,0,0,0) 80%) !important;
  }

  /* Denser, more visible cloud decoration across the rest of the cards/slides. */
  body.hattara-page .story-section::before{
    width:368px !important;
    height:204px !important;
    top:14px !important;
    opacity:.58 !important;
  }
  body.hattara-page .story-section::after{
    width:284px !important;
    height:156px !important;
    bottom:12px !important;
    opacity:.40 !important;
  }
  body.hattara-page .story-copy::before{
    width:250px !important;
    height:134px !important;
    right:-42px !important;
    top:-14px !important;
    opacity:.34 !important;
  }
  body.hattara-page .story-copy::after{
    width:294px !important;
    height:148px !important;
    left:-56px !important;
    bottom:-18px !important;
    opacity:.27 !important;
  }
  body.hattara-page .story-shot::before,
  body.hattara-page .story-shot::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    pointer-events:none !important;
    z-index:2 !important;
  }
  body.hattara-page .story-shot::before{
    width:248px !important;
    height:126px !important;
    left:-22px !important;
    top:-14px !important;
    background:url("assets/decor_v6/cloud-left.png?v=6") center/contain no-repeat !important;
    opacity:.22 !important;
  }
  body.hattara-page .story-shot::after{
    width:246px !important;
    height:128px !important;
    right:-24px !important;
    bottom:-10px !important;
    background:url("assets/decor_v6/cloud-right.png?v=6") center/contain no-repeat !important;
    opacity:.26 !important;
  }
  body.hattara-page .story-right .story-shot::before{
    left:auto !important;
    right:-18px !important;
    background:url("assets/decor_v6/cloud-mid.png?v=6") center/contain no-repeat !important;
  }
  body.hattara-page .story-right .story-shot::after{
    right:auto !important;
    left:-22px !important;
  }
  body.hattara-page .feature-grid::before{
    width:350px !important;
    height:154px !important;
    right:-34px !important;
    top:-8px !important;
    opacity:.30 !important;
  }
  body.hattara-page .feature-grid::after{
    width:350px !important;
    height:144px !important;
    left:-36px !important;
    bottom:-10px !important;
    opacity:.26 !important;
  }
  body.hattara-page .site-footer::before{
    width:360px !important;
    height:194px !important;
    left:-28px !important;
    top:38px !important;
    opacity:.48 !important;
  }
  body.hattara-page .site-footer::after{
    width:352px !important;
    height:190px !important;
    right:-26px !important;
    bottom:24px !important;
    opacity:.44 !important;
  }
}

@media(max-width:900px){
  body.hattara-page .hattara-water-light{left:50% !important; bottom:136px !important; width:190px !important; height:228px !important;}
  body.hattara-page .hattara-water-glow{left:50% !important; bottom:82px !important; width:104px !important; height:88px !important;}
  body.hattara-page .hattara-water-beam{left:50% !important; bottom:92px !important; width:82px !important; height:154px !important;}
  body.hattara-page .hattara-candy-aura{left:50% !important; top:10px !important; width:176px !important; height:194px !important;}
  body.hattara-page .story-section::before,
  body.hattara-page .story-section::after,
  body.hattara-page .story-copy::before,
  body.hattara-page .story-copy::after,
  body.hattara-page .story-shot::before,
  body.hattara-page .story-shot::after,
  body.hattara-page .feature-grid::before,
  body.hattara-page .feature-grid::after,
  body.hattara-page .site-footer::before,
  body.hattara-page .site-footer::after{opacity:.24 !important;}
}
/* === END V22 === */


/* === V23 warm light physically anchored behind the cone ===
   The light now lives INSIDE the cotton stage, so its axis follows the Hattara
   image exactly at every viewport size. Water remains removed. No payment,
   copy, screenshot, navigation or cloud-layout hooks changed.
   ================================================================ */

/* Water stays fully removed. */
body.hattara-page .engraved-water,
body.hattara-page .hattara-reference-decor img.engraved-water,
body.hattara-page .hattara-water-rim{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Make the cotton stage the coordinate system for the light. */
body.hattara-page .hattara-cotton-stage{
  position:absolute !important;
  overflow:visible !important;
  isolation:isolate !important;
}
body.hattara-page .hattara-cotton-stage .hero-visual,
body.hattara-page .hattara-cotton-stage .hero-sticker{
  position:relative !important;
  z-index:3 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

/* One full-stage light canvas centered on the image itself. */
body.hattara-page .hattara-cotton-stage .hattara-water-light{
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  pointer-events:none !important;
  overflow:visible !important;
  background:transparent !important;
  filter:none !important;
  -webkit-filter:none !important;
}
body.hattara-page .hattara-cotton-stage .hattara-water-light > span{
  position:absolute !important;
  display:block !important;
  pointer-events:none !important;
  box-shadow:none !important;
  mix-blend-mode:screen !important;
}

/* Warm source: centered precisely behind the cone, not below it. */
body.hattara-page .hattara-cotton-stage .hattara-water-glow{
  left:50% !important;
  top:79% !important;
  bottom:auto !important;
  width:46% !important;
  height:30% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,226,169,.48) 0%,
    rgba(255,197,120,.30) 24%,
    rgba(247,160,96,.14) 48%,
    rgba(190,106,66,.045) 67%,
    rgba(0,0,0,0) 82%) !important;
  filter:blur(13px) !important;
  -webkit-filter:blur(13px) !important;
  animation:hattaraWarmSource 5.2s ease-in-out infinite !important;
}

/* Warm lift: reaches upward through the cone into the lower cotton candy. */
body.hattara-page .hattara-cotton-stage .hattara-water-beam{
  left:50% !important;
  top:39% !important;
  bottom:auto !important;
  width:58% !important;
  height:52% !important;
  transform:translateX(-50%) !important;
  border-radius:50% 50% 36% 36% / 20% 20% 80% 80% !important;
  background:radial-gradient(ellipse at 50% 88%,
    rgba(255,220,157,.30) 0%,
    rgba(255,190,116,.20) 24%,
    rgba(242,151,93,.11) 48%,
    rgba(176,101,72,.035) 67%,
    rgba(0,0,0,0) 82%) !important;
  filter:blur(17px) !important;
  -webkit-filter:blur(17px) !important;
  animation:hattaraWarmBeam 5.8s ease-in-out infinite !important;
}

/* Very soft warm halo behind the cotton body so it looks illuminated, not pasted. */
body.hattara-page .hattara-cotton-stage .hattara-candy-aura{
  left:50% !important;
  top:12% !important;
  bottom:auto !important;
  width:104% !important;
  height:78% !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 50% 72%,
    rgba(255,228,183,.18) 0%,
    rgba(255,190,132,.105) 30%,
    rgba(228,139,103,.045) 54%,
    rgba(0,0,0,0) 78%) !important;
  filter:blur(19px) !important;
  -webkit-filter:blur(19px) !important;
  animation:hattaraWarmAura 6.0s ease-in-out infinite !important;
}

@keyframes hattaraWarmSource{
  0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.94)}
  50%{opacity:.92;transform:translate(-50%,-50%) scale(1.06)}
}
@keyframes hattaraWarmBeam{
  0%,100%{opacity:.48;transform:translateX(-50%) scaleX(.92) scaleY(.96)}
  50%{opacity:.78;transform:translateX(-50%) scaleX(1.04) scaleY(1.035)}
}
@keyframes hattaraWarmAura{
  0%,100%{opacity:.46;transform:translateX(-50%) scale(.96)}
  50%{opacity:.72;transform:translateX(-50%) scale(1.025)}
}

/* Existing cotton float remains clean and shadowless. */
body.hattara-page .hattara-cotton-stage .hero-sticker img{
  position:relative !important;
  z-index:4 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}

@media(max-width:900px){
  body.hattara-page .hattara-cotton-stage{
    position:relative !important;
  }
  body.hattara-page .hattara-cotton-stage .hattara-water-glow{
    top:80% !important;
    width:48% !important;
    height:30% !important;
  }
  body.hattara-page .hattara-cotton-stage .hattara-water-beam{
    top:40% !important;
    width:60% !important;
    height:51% !important;
  }
  body.hattara-page .hattara-cotton-stage .hattara-candy-aura{
    top:12% !important;
    width:106% !important;
    height:78% !important;
  }
}
/* === END V23 === */