/* ==========================================================================
   GOOGLE LUXE BOTANICAL — the actual theme, applied.
   Everything before this was layout reduction. These are the tokens from the
   spec: 32px radii, the Siri glow, multi-layer float shadows, the 0.96 press,
   and one pastel gradient. Colours are unchanged — they were already ours.
   ========================================================================== */
:root{
  --radius-luxe:32px;
  --radius-img:24px;
  --glow-siri:0 0 15px rgba(185,167,214,.4);
  --shadow-float:0 10px 30px -5px rgba(46,39,64,.1), 0 4px 12px -2px rgba(46,39,64,.05);
  --ease-luxe:cubic-bezier(.22,1,.36,1);
}

/* --- Smart Pill: every primary action --- */
.btn-p,.hd-cta,.bar .rs,.paybtn,.sn-cta{
  border-radius:100px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--glow-siri);
  letter-spacing:.02em;
  transition:transform .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe), background .3s var(--ease-luxe);
}
/* The press. This is the whole "feels like a button" ask — a real, physical
   acknowledgement under the thumb, on the same curve as everything else. */
.btn-p:active,.hd-cta:active,.bar .rs:active,.paybtn:active,.sn-cta:active,
.tile:active,.pc:active,.tab:active{ transform:scale(.96); }
@media (hover:hover) and (pointer:fine){
  .btn-p:hover,.hd-cta:hover,.paybtn:hover{ box-shadow:0 0 26px rgba(185,167,214,.62); }
}

/* --- Floating Luxe cards --- */
.tile,.pc,.card,.review,.faq-item{
  border-radius:var(--radius-luxe);
  box-shadow:var(--shadow-float);
  transition:transform .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe);
}
@media (hover:hover) and (pointer:fine){
  .tile:hover,.pc:hover{ transform:translateY(-4px); box-shadow:0 16px 40px -6px rgba(46,39,64,.14), 0 6px 16px -3px rgba(46,39,64,.07); }
}
.tile img,.pc img{ border-radius:var(--radius-img); }

/* --- one pastel gradient, on the promise band --- */
.promise,.band{
  background:linear-gradient(115deg,#FFE7D6,#F6E6FA 38%,#DCF2E3 70%,#D9E7FF);
  border:none;
  border-radius:var(--radius-luxe);
  box-shadow:var(--shadow-float);
}

@media (prefers-reduced-motion:reduce){
  .btn-p,.hd-cta,.tile,.pc,.card{transition:none;}
}

/* the theme at phone size: radius scales down so small cards don't go soft */
@media (max-width:760px){
  .hero{border-radius:0 0 var(--radius-luxe) var(--radius-luxe);overflow:hidden;}
  .tile,.pc{border-radius:24px;}
  .tile img,.pc img{border-radius:18px;}
  .promise,.band{border-radius:24px;margin-left:16px;margin-right:16px;}
  /* the hero pill gets the glow too, on white */
  .hero .btns .btn-p{box-shadow:0 2px 10px rgba(46,39,64,.18), 0 8px 26px rgba(46,39,64,.16), var(--glow-siri);}
}


/* ==========================================================================
   REFINEMENT PASS — nothing new on the screen, only how things arrive.
   Every rule here is invisible until it helps: content settles instead of
   snapping, photos fade instead of popping, and the page respects the
   iPhone's home indicator. No element is added.
   ========================================================================== */

/* 1. Content settles into place as you scroll. Staggered by position so a row
      of cards arrives as a wave rather than a blink. */
/* NOTE THE `.js-reveal` GATE. The hidden state is applied ONLY after JavaScript has
   confirmed IntersectionObserver actually works. Written the obvious way —
   `.reveal{opacity:0}` in the stylesheet — a browser that loads the CSS but never runs
   the observer leaves every product permanently invisible. A storefront must never be
   able to hide its own products; the animation is an enhancement, not a prerequisite. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-luxe), transform .5s var(--ease-luxe);}
.js-reveal .reveal.in{opacity:1;transform:none;}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}

/* 2. Photos fade in. A product photo that pops in at full opacity is the
      single most "unfinished" thing a page can do — this is why native apps
      feel calm and web pages feel twitchy. */
/* Same gate, same reason: a photo that never gets .loaded must still be visible. */
img{transition:opacity .45s var(--ease-luxe);}
.js-reveal img[loading="lazy"]:not(.loaded){opacity:0;}
img.loaded{opacity:1;}

/* 3. The iPhone home indicator. Without this the tab bar sits UNDER the swipe
      bar on every notched iPhone — a real defect, not a nicety. */
.tabbar,.bar{padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));}

/* 4. Optical detail: big display type wants tighter tracking, small type wants
      looser. Uniform tracking is what makes a page feel machine-set. */
.sec-t{letter-spacing:-.022em;}
.hero h1{letter-spacing:-.02em;}
.tile b{letter-spacing:-.008em;}

/* 5. Horizontal rails get proper momentum + a snap that lands on card edges. */
.tiles{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.tiles>*{scroll-snap-align:start;}

/* 6. Never trap a keyboard user, and never show a ring to a mouse user. */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;border-radius:inherit;
}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none;}
  img{transition:none;}
  .js-reveal img[loading="lazy"]:not(.loaded){opacity:1;}
}


/* --------------------------------------------------------------------------
   STANDALONE PAGE CLASSES.
   /preserve, /shop, /track, /confirm-address and /preserve-thanks are rendered
   as self-contained documents — they never load site.css, which is why they had
   none of this theme. Their class names differ from the main site's, so the
   same tokens are mapped onto them here rather than duplicated.
   -------------------------------------------------------------------------- */
.btn-main,.buy,.cta,.btn.btn-p{
  border-radius:100px;border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--glow-siri);letter-spacing:.02em;
  transition:transform .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe);
}
.btn-main:active,.buy:active,.cta:active,.btn:active,.p:active,.step:active{transform:scale(.96);}
@media (hover:hover) and (pointer:fine){
  .btn-main:hover,.buy:hover{box-shadow:0 0 26px rgba(185,167,214,.62);}
}
/* cards on those pages: product tiles, trust cards, craft steps, the form */
.p,.t,.step,.safe,.form,.tr-card,.ca-card{
  border-radius:var(--radius-luxe);
  box-shadow:var(--shadow-float);
  transition:transform .3s var(--ease-luxe), box-shadow .3s var(--ease-luxe);
}
.p img{border-radius:var(--radius-img) var(--radius-img) 0 0;}
@media (hover:hover) and (pointer:fine){
  .p:hover{transform:translateY(-4px);box-shadow:0 16px 40px -6px rgba(46,39,64,.14), 0 6px 16px -3px rgba(46,39,64,.07);}
}
.promise{background:linear-gradient(115deg,#FFE7D6,#F6E6FA 38%,#DCF2E3 70%,#D9E7FF);
  border:none;border-radius:var(--radius-luxe);box-shadow:var(--shadow-float);}
@media(max-width:760px){
  .p,.t,.step,.safe,.form,.tr-card,.ca-card{border-radius:24px;}
  .p img{border-radius:18px 18px 0 0;}
  /* the sticky reserve bar clears the iPhone home indicator */
  .bar{padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));}
}