/* ===========================================================
   ToothPal — bottom-of-page app ad  (appad.css)
   A rounded panel: headline + CTA pill, then a six-frame carousel
   of real app screens. Namespaced .aad-* so it can't collide with
   the homepage's own gallery section.
   =========================================================== */
/* Guides and articles run in a 740px column; the carousel needs more than that,
   so the panel breaks out and centres on the viewport regardless of its parent. */
.aad{position:relative;overflow:hidden;border-radius:30px;margin:64px 0 0;
  width:min(1180px,calc(100vw - 48px));left:50%;margin-left:max(-590px,calc(-50vw + 24px));
  background:linear-gradient(176deg,#F2F8FC 0%,#E3EFF7 38%,#D6E8F3 72%,#EFF6FA 100%);
  box-shadow:0 2px 10px rgba(21,40,48,.05),0 28px 64px -28px rgba(21,40,48,.3)}
.aad::before{content:"";position:absolute;left:-12%;right:-12%;top:-14%;height:58%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(107,184,214,.3),transparent 72%)}
.aad-head{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding:clamp(28px,4vw,46px) clamp(24px,3.6vw,44px) 0}
.aad-head h2{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(26px,3.5vw,42px);
  line-height:1.08;letter-spacing:-.6px;color:#1B4A62;margin:0;max-width:17ch}
.aad-head h2 em{font-style:italic;color:#2D7A9E}
.aad-head .aad-cta{flex:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:linear-gradient(135deg,#2D7A9E,#1B4A62);color:#fff;text-decoration:none;
  font-family:Inter,sans-serif;font-size:16px;font-weight:600;border-radius:999px;padding:15px 30px;
  box-shadow:0 14px 30px -12px rgba(27,74,98,.8);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.aad-head .aad-cta:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(27,74,98,.9)}
.aad-sub{position:relative;z-index:3;padding:14px clamp(24px,3.6vw,44px) 0;font-size:15px;color:#6A8A9B;max-width:62ch}

/* the carousel */
.aad-rail{position:relative;z-index:2;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:30px clamp(24px,3.6vw,44px) 40px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.aad-rail::-webkit-scrollbar{height:7px}
.aad-rail::-webkit-scrollbar-thumb{background:rgba(27,74,98,.22);border-radius:99px}
.aad-fr{flex:none;width:248px;scroll-snap-align:center;position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(172deg,#FFFFFF,#EAF2F8);min-height:520px;padding:28px 20px 0;
  display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(21,40,48,.05),0 22px 48px -22px rgba(21,40,48,.42)}
.aad-fr.dk{background:radial-gradient(200px 170px at 50% 6%,#21495f,transparent 62%),linear-gradient(168deg,#1d4a60,#102b3a)}
.aad-fr.gd{background:radial-gradient(200px 170px at 50% 8%,#FFF6E4,transparent 64%),linear-gradient(168deg,#FDF3E0,#EFD7A8)}
.aad-fr h3{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:25px;line-height:1.1;
  letter-spacing:-.3px;color:#1B4A62;text-align:center;margin:0}
.aad-fr h3 em{font-style:italic;color:#2D7A9E}
.aad-fr p{font-size:12.8px;line-height:1.45;color:#6A8A9B;text-align:center;margin:9px 0 0}
.aad-fr.dk h3{color:#fff}.aad-fr.dk h3 em{color:#FFD27A}.aad-fr.dk p{color:rgba(226,238,245,.72)}
.aad-fr.gd h3{color:#6B4A12}.aad-fr.gd h3 em{color:#9A6B18}.aad-fr.gd p{color:#8A6A32}
.aad-fr .aad-ph{margin-top:auto;display:flex;justify-content:center;padding-top:24px}
.aad-fr .aad-ph span{display:block;width:158px;border:6px solid #16262e;border-radius:28px;overflow:hidden;
  background:#0d2733;margin-bottom:-24px;line-height:0;
  box-shadow:0 20px 44px -18px rgba(13,39,51,.7)}
.aad-fr .aad-ph img{width:100%;display:block;height:auto}
.aad-fr.tl .aad-ph span{transform:rotate(-5deg)}
.aad-fr.tr .aad-ph span{transform:rotate(5deg)}
/* handwritten margin note */
.aad-note{position:absolute;z-index:6;font-family:Fraunces,Georgia,serif;font-style:italic;font-size:13.6px;
  line-height:1.22;color:#2D7A9E;max-width:92px;background:rgba(255,255,255,.94);border-radius:13px;
  padding:7px 9px 5px;box-shadow:0 6px 18px -8px rgba(21,40,48,.42)}
.aad-fr.dk .aad-note,.aad-fr.gd .aad-note{color:#17424F;background:rgba(255,253,247,.95)}
.aad-note svg{display:block;width:32px;height:21px;margin-top:2px;overflow:visible}
.aad-note.r{text-align:right}.aad-note.r svg{margin-left:auto}
/* closing scallop — the brand smile arc */
.aad-band{position:relative;z-index:1;height:48px;margin-top:-40px;overflow:hidden;line-height:0}
.aad-band svg{display:block;width:100%;height:48px}
.aad-foot{position:relative;z-index:3;text-align:center;padding:0 24px 30px;font-size:12.4px;color:#6A8A9B}
.aad-foot a{color:#2D7A9E}
@media(max-width:700px){
  .aad{border-radius:22px;margin-top:48px}
  .aad-head{flex-direction:column;gap:16px}
  .aad-head .aad-cta{width:100%;justify-content:center}
  .aad-fr{width:224px;min-height:482px}
  .aad-fr .aad-ph span{width:142px}
  .aad-note{font-size:12.2px;max-width:80px;padding:6px 8px 4px}
  .aad-note svg{width:26px;height:17px}
}
@media(prefers-reduced-motion:reduce){.aad-head .aad-cta{transition:none}}

/* frame 1 — Cheese… / …Smile! morph: two complete states stacked, cross-fading */
.aad-fr.morph{position:relative;padding:0}
.aad-morph{position:absolute;inset:0}
.aad-morph .aad-st{position:absolute;inset:0;display:flex;flex-direction:column}
.aad-morph .aad-st.a{animation:aadMa 6.8s ease-in-out infinite}
.aad-morph .aad-st.b{animation:aadMb 6.8s ease-in-out infinite}
@keyframes aadMa{0%,30%{opacity:1}40%,90%{opacity:0}100%{opacity:1}}
@keyframes aadMb{0%,30%{opacity:0}40%,90%{opacity:1}100%{opacity:0}}
/* the second state is the gold makeover payoff — recolour it in place */
.aad-fr.morph .aad-st.b{background:radial-gradient(200px 170px at 50% 8%,#FFF6E4,transparent 64%),linear-gradient(168deg,#FDF3E0,#EFD7A8);
  border-radius:24px}
.aad-fr.morph .aad-st.b h3{color:#6B4A12}.aad-fr.morph .aad-st.b p{color:#8A6A32}
.aad-morph .aad-st{padding:28px 20px 0}
@media(max-width:760px){.aad-morph .aad-st{padding:24px 16px 0}}
@media(prefers-reduced-motion:reduce){
  .aad-morph .aad-st.a,.aad-morph .aad-st.b{animation:none}
  .aad-morph .aad-st.a{opacity:0}.aad-morph .aad-st.b{opacity:1}}