/* Scentsible K9 modern refresh, preview only.
   Same layout, copy, colors and fonts. Only the surface changes:
   softer shapes, bigger readable type, depth, calmer motion. */

:root{
  --m-r:16px;
  --m-r-lg:22px;
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-shadow:0 1px 2px rgba(26,29,24,.08),0 12px 32px rgba(26,29,24,.14);
  --m-shadow-lift:0 2px 4px rgba(26,29,24,.10),0 20px 44px rgba(26,29,24,.20);
}

/* Buttons: soft pill shape, readable label, gentle lift */
html body .btn{
  border-radius:999px;
  font-size:14.5px;
  letter-spacing:.07em;
  padding:16px 30px;
  min-height:52px;
  justify-content:center;
  transition:transform .35s var(--m-ease),background-color .25s ease,box-shadow .35s var(--m-ease),border-color .25s ease,color .25s ease;
}
html body .btn-lg{font-size:15px;padding:18px 34px}
html body .btn-primary{box-shadow:0 6px 18px rgba(95,107,82,.35)}
@media (hover:hover){
  html body .btn:hover{transform:translateY(-2px)}
  html body .btn-primary:hover{box-shadow:0 12px 26px rgba(95,107,82,.42)}
}
html body .btn:active{transform:scale(.98)}

/* Section labels: drop the dash, a touch larger */
html body .eyebrow::before,
html body .hero-eyebrow-row::before{display:none}
html body .eyebrow,
html body .hero-eyebrow-row{font-size:12.5px;letter-spacing:.16em}

/* Body copy: larger, airier, brighter on dark */
html body .hero-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.6}
html body .problem-copy-full p,
html body .villain-copy p,
html body .villain-copy-block p,
html body .villain-bullet-list li,
html body .stakes-copy p,
html body .guide-copy p,
html body .corner-copy p,
html body .corner-lead,
html body .proof-lead,
html body .myth-lead,
html body .success-text,
html body .deserve-card-body{font-size:17px;line-height:1.75}
html body .villain-copy p,
html body .villain-bullet-list li,
html body .deserve-card-body,
html body .stakes-copy p{color:rgba(254,254,254,.82)}

/* Photos and video: rounded, with depth */
html body .section-photo-wrap,
html body .corner-media,
html body .proof-cell,
html body .video-card{border-radius:var(--m-r-lg);overflow:hidden;box-shadow:var(--m-shadow)}
html body .section-photo-wrap img,
html body .corner-media img,
html body .proof-cell img{transition:transform 1.2s var(--m-ease)}
@media (hover:hover){
  html body .section-photo-wrap:hover img,
  html body .proof-cell:hover img{transform:scale(1.03)}
}

/* Cards: rounded, quiet border, lift on hover */
html body .deserve-card,
html body .type-card,
html body .credential-card,
html body .review-card-sk9,
html body .plan-step,
html body .success-item{
  border-radius:var(--m-r-lg);
  transition:transform .45s var(--m-ease),box-shadow .45s var(--m-ease),border-color .3s ease;
}
html body .deserve-card{border:1px solid rgba(254,254,254,.08);border-top:3px solid var(--sage)}
@media (hover:hover){
  html body .deserve-card:hover,
  html body .type-card:hover,
  html body .credential-card:hover,
  html body .review-card-sk9:hover{transform:translateY(-4px);box-shadow:var(--m-shadow-lift)}
}

/* Header: frosted glass instead of a flat bar */
html body .sk9-nav{
  background:rgba(35,38,32,.78);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid rgba(254,254,254,.06);
}
html body .sk9-nav-cta{border-radius:999px}

/* Hero: a softer, more even scrim so the photo breathes */
html body .hero-vignette{
  background:
    linear-gradient(100deg,rgba(26,29,24,.90) 0%,rgba(26,29,24,.62) 48%,rgba(26,29,24,.10) 100%),
    linear-gradient(to top,rgba(26,29,24,.75) 0%,rgba(26,29,24,0) 55%);
}
html body .hero h1{letter-spacing:-.005em}

/* The wrong-word rows: a little more air */
html body .myth-row{transition:background-color .3s ease}
@media (hover:hover){html body .myth-row:hover{background:rgba(254,254,254,.025)}}

/* Calm, gentle scroll fade (only where the site already fades) */
html body .fade-up{transition-timing-function:var(--m-ease)!important;transition-duration:.9s!important}

@media (prefers-reduced-motion:reduce){
  html body .btn,html body .deserve-card,html body .type-card,html body .credential-card,html body .review-card-sk9,
  html body .section-photo-wrap img,html body .proof-cell img{transition:none!important;transform:none!important}
}

/* ================================================================
   Round 2 (2026-10-24): fewer words, more to scroll through.
   Words are hidden here for the preview only. At ship time they get
   cut from the source instead, so nothing hidden stays in the HTML.
   ================================================================ */

/* Sticky needs a page that does not become its own scroller */
html,body{overflow-x:clip!important}

/* Big, bold numbers you can feel */
html body .step-num-big{color:var(--sage);opacity:.9}
html body .credential-num{color:var(--sage)}

/* Phone: cards stack like a deck as you scroll, rows swipe sideways */
@media (max-width:760px){
  html body .deserve-cards,
  html body .plan-steps{gap:14px}
  html body .deserve-card{background:#2f332b}
  html body .plan-step{border:1px solid rgba(45,48,42,.08);border-top:3px solid var(--sage)}

  html body .myth-word{font-size:clamp(40px,12vw,60px)}
  html body .step-num-big{font-size:72px}
}

/* Scroll-driven motion where the browser supports it (Safari 26, Chrome) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* reading progress bar along the top */
    body::after{content:"";position:fixed;left:0;top:0;height:3px;width:100%;z-index:10000;
      background:linear-gradient(90deg,var(--sage),#c8d3b2);transform-origin:0 50%;
      animation:m-grow linear both;animation-timeline:scroll(root)}

    /* hero photo slowly pushes in and the words drift up as you leave */
    html body .hero-photo{animation:m-push linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    html body .hero-content{animation:m-lift linear both;animation-timeline:view();animation-range:exit 0% exit 80%}

    /* photos: start a touch zoomed and settle as they come into view */
    html body .section-photo-wrap img,
    html body .corner-media img{animation:m-settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%}

    /* numbers pop */
    html body .credential-num,
    html body .step-num-big{animation:m-pop linear both;animation-timeline:view();animation-range:entry 10% cover 35%}

    /* list rows slide in one at a time */
    html body .corner-list li,
    html body .success-item{animation:m-slide linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    html body .stakes-item:nth-child(odd){animation:m-slide linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    html body .stakes-item:nth-child(even){animation:m-slide-r linear both;animation-timeline:view();animation-range:entry 0% cover 30%}

    /* the check marks pop as each line lands */
    html body .success-check{animation:m-pop linear both;animation-timeline:view();animation-range:entry 30% cover 40%}

  }
}
@keyframes m-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-push{to{transform:scale(1.18)}}
@keyframes m-lift{to{transform:translateY(-60px);opacity:.15}}
@keyframes m-settle{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes m-pop{from{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}
@keyframes m-slide{from{transform:translateX(-36px);opacity:0}to{transform:none;opacity:1}}
@keyframes m-slide-r{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes m-recede{to{transform:scale(.94);filter:brightness(.8)}}

/* Cookie notice: a small frosted card in the corner, not a bar across the page */
html body #sk9-cookie{
  left:12px!important;right:auto!important;bottom:12px!important;top:auto!important;
  width:auto!important;max-width:min(340px,calc(100vw - 24px))!important;
  padding:12px 12px 12px 16px!important;gap:12px!important;align-items:center!important;flex-wrap:nowrap!important;
  background:rgba(35,38,32,.62)!important;
  -webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);
  border:1px solid rgba(254,254,254,.12)!important;border-radius:18px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  font-size:12.5px!important;line-height:1.45!important;
}
html body #sk9-cookie p{flex:1 1 auto!important;color:rgba(254,254,254,.82)!important;font-size:12.5px!important}
html body #sk9-cookie a{color:#c8d3b2!important}
html body #sk9-cookie button{
  flex:0 0 auto!important;border-radius:999px!important;padding:8px 16px!important;min-height:36px!important;
  font-size:12.5px!important;background:var(--sage)!important;color:#fff!important;border:0!important;
}

/* ================================================================
   Round 3 (2026-10-24): one story. Who we are, the drives, how we train.
   New sections built by build.py.
   ================================================================ */
html body .m-believe{background:var(--white)}
html body .m-drives{background:#f3f2ec}
html body .m-believe h2,html body .m-drives h2{color:var(--charcoal)}
html body .m-believe h2 em,html body .m-drives h2 em,html body .plan-section h2 em{color:var(--sage);font-style:normal}

html body .m-beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
html body .m-belief{background:#f3f2ec;border-radius:var(--m-r-lg);padding:30px 26px;border-top:3px solid var(--sage)}
html body .m-belief .n{font-family:var(--font-h);font-weight:800;font-size:60px;line-height:1;color:var(--sage)}
html body .m-belief h3{font-family:var(--font-h);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:24px;line-height:1.05;color:var(--charcoal);margin:12px 0 8px}
html body .m-belief p{font-size:17px;line-height:1.6;color:#55594f}

html body .m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px;
  padding-top:30px;border-top:1px solid rgba(45,48,42,.1)}
html body .m-stat b{display:block;font-family:var(--font-h);font-weight:800;font-size:clamp(40px,6vw,68px);line-height:1;color:var(--sage)}
html body .m-stat span{display:block;margin-top:6px;font-family:var(--font-h);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:#6b6f63}

html body .m-drive-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
html body .m-drive{background:#fff;border-radius:var(--m-r-lg);padding:28px 24px;box-shadow:var(--m-shadow);
  display:flex;flex-direction:column;gap:10px}
html body .m-drive .bred{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
html body .m-drive h3{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;color:var(--charcoal)}
html body .m-drive p{font-size:16.5px;line-height:1.55;color:#55594f;flex:1}
html body .m-drive .job{margin-top:6px;padding-top:14px;border-top:1px solid rgba(45,48,42,.1);
  font-family:var(--font-sub);font-style:italic;font-size:16px;color:var(--charcoal)}
html body .m-drive .job b{display:block;font-family:var(--font-h);font-style:normal;font-weight:800;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:4px}
html body .m-note{margin-top:26px;font-family:var(--font-sub);font-style:italic;font-size:16px;color:#6b6f63}
html body .m-ctas{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  html body .m-drive-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  html body .section-pad-lg{padding:76px 0}
  html body .m-beliefs{grid-template-columns:1fr;gap:14px;margin-top:32px}
  html body .m-stat b{font-size:40px}
  html body .m-stat span{font-size:11px;letter-spacing:.08em}
  html body .m-drive-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;margin:32px -20px 0;padding:6px 20px 22px;scroll-padding:0 20px;
    scrollbar-width:none;overscroll-behavior-x:contain}
  html body .m-drive-row::-webkit-scrollbar{display:none}
  html body .m-drive-row::after{content:"";width:1px}
  html body .m-drive{scroll-snap-align:start}
  html body .m-ctas .btn{width:100%}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-stat b,html body .m-belief .n{animation:m-pop linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  }
}

/* ================================================================
   Round 4 (2026-10-24): one belief as a chain, the four dog types,
   our job, a calm nose section.
   ================================================================ */
html body .m-lead{font-family:var(--font-sub);font-style:italic;font-size:clamp(17px,1.8vw,21px);line-height:1.6;
  max-width:620px;margin-top:18px;color:#55594f}

/* The chain: one line you follow down the page */
html body .m-chain{list-style:none;margin:44px 0 0;padding:0 0 0 34px;position:relative;max-width:720px}
html body .m-chain::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-radius:3px;background:rgba(129,143,107,.2)}
html body .m-chain::after{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--sage);
  transform-origin:top;transform:scaleY(1)}
html body .m-chain li{position:relative;padding:0 0 34px}
html body .m-chain li:last-child{padding-bottom:0}
html body .m-chain .dot{position:absolute;left:-34px;top:4px;width:19px;height:19px;border-radius:50%;
  background:var(--white);border:3px solid var(--sage);z-index:1}
html body .m-chain li:last-child .dot{background:var(--sage)}
html body .m-chain h3{font-family:var(--font-h);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(24px,3vw,30px);line-height:1.05;color:var(--charcoal)}
html body .m-chain p{margin-top:6px;font-size:17px;line-height:1.6;color:#55594f}

/* Four types: title says it, one line under each */
html body .types-section{padding:76px 0}
html body .types-header h2 span{color:var(--sage)}
html body .types-section .types-grid{margin-top:28px}

/* Our job: dark, one statement, six drive tiles */
html body .m-job{background:var(--charcoal)}
html body .m-job h2 em{color:var(--sage);font-style:normal}
html body .m-job .m-lead{color:rgba(254,254,254,.82)}
html body .m-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:34px;max-width:820px}
html body .m-tile{background:rgba(254,254,254,.05);border:1px solid rgba(254,254,254,.08);border-radius:18px;padding:18px 18px 16px}
html body .m-tile b{display:block;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:24px;
  letter-spacing:.03em;color:var(--white);line-height:1}
html body .m-tile span{display:block;margin-top:6px;font-size:14.5px;line-height:1.4;color:var(--soft-sage)}

/* The nose: headline, one sentence, one photo */
html body .m-nose{background:var(--white)}
html body .m-nose h2{color:var(--charcoal)}
html body .m-nose h2 em{color:var(--sage);font-style:normal}
html body .m-nose-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
html body .m-nose .btn{margin-top:26px}
html body .m-nose .section-photo-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

@media (max-width:760px){
  html body .m-tiles{grid-template-columns:1fr 1fr}
  html body .m-nose-inner{grid-template-columns:1fr;gap:32px}
  html body .m-nose .section-photo-wrap img{aspect-ratio:4/3}
  html body .m-nose .btn{width:100%}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-chain::after{animation:m-fill linear both;animation-timeline:view();animation-range:cover 15% cover 65%}
    html body .m-chain .dot{animation:m-pop linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
    html body .m-tile{animation:m-pop linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
}
@keyframes m-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ================================================================
   Round 5 (2026-10-24). No sticky stacking anywhere, ever.
   Less gap under the hero, count-up numbers, a slash you watch happen,
   drives with icons that draw in, a photo card for the nose,
   social links instead of videos, a two-row footer.
   ================================================================ */
html body .m-believe{padding:56px 0 80px}
html body .m-beliefs{grid-template-columns:repeat(2,1fr)}
html body .m-belief{box-shadow:none}
html body .m-plan-gap{display:none}
@media (max-width:760px){
  html body .m-believe{padding:36px 0 64px}
  html body .m-beliefs{grid-template-columns:1fr}
  html body .m-job,html body .m-drives,html body .plan-section,html body .m-social{padding:64px 0}
}

/* Wrong word: thicker slash on a slight angle */
html body .myth-slash{height:clamp(7px,1vw,11px);top:46%;transform:rotate(-4deg) scaleX(0)}
html body .myth-row.lit .myth-slash{transform:rotate(-4deg) scaleX(1)}

/* Drives: a vertical list, each with a big round badge and a line icon */
html body .m-job{background:var(--charcoal);padding:88px 0}
html body .m-drives{background:#f3f2ec;padding:88px 0}
html body .m-drive-list{display:flex;flex-direction:column;gap:16px;margin-top:40px;max-width:760px}
html body .m-drive{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:start;background:#fff;
  border-radius:var(--m-r-lg);padding:24px 22px;box-shadow:var(--m-shadow)}
html body .m-badge{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--sage)}
html body .m-drive:nth-child(3n+2) .m-badge{background:var(--deep-moss)}
html body .m-drive:nth-child(3n) .m-badge{background:var(--charcoal)}
html body .m-badge svg{width:50px;height:50px}
html body .m-badge svg *{stroke-dasharray:160;stroke-dashoffset:0}
html body .m-drive h3{font-size:28px}
html body .m-drive-row{display:none}
@media (max-width:760px){
  html body .m-drive{grid-template-columns:64px 1fr;gap:16px;padding:20px 18px}
  html body .m-badge{width:64px;height:64px}
  html body .m-badge svg{width:38px;height:38px}
  html body .m-drive h3{font-size:25px}
}

/* Nose: one photo card with the words on it */
html body .m-nose{background:#f3f2ec;padding:0 0 88px}
html body .m-nose-card{position:relative;border-radius:var(--m-r-lg);overflow:hidden;box-shadow:var(--m-shadow);min-height:520px;display:flex;align-items:flex-end}
html body .m-nose-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
html body .m-nose-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,29,24,.92) 0%,rgba(26,29,24,.55) 45%,rgba(26,29,24,.05) 75%)}
html body .m-nose-text{position:relative;z-index:1;padding:36px 32px;max-width:560px}
html body .m-nose-text h2{color:var(--white)}
html body .m-nose-text h2 em{color:var(--soft-sage);font-style:normal}
html body .m-nose-text p{margin:14px 0 22px;font-family:var(--font-sub);font-style:italic;font-size:18px;line-height:1.55;color:rgba(254,254,254,.88)}
@media (max-width:760px){
  html body .m-nose{padding:0 0 64px}
  html body .m-nose-card{min-height:560px}
  html body .m-nose-text{padding:26px 22px}
  html body .m-nose-text .btn{width:100%}
}

/* Social: four pills instead of the videos */
html body .m-social{background:var(--sage);padding:80px 0}
html body .m-social h2{color:var(--white)}
html body .m-social .eyebrow{color:rgba(254,254,254,.8)}
html body .m-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
html body .m-pill{font-family:var(--font-h);font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--charcoal);background:var(--white);border-radius:999px;padding:14px 24px;text-decoration:none;
  transition:transform .3s var(--m-ease)}
@media (hover:hover){html body .m-pill:hover{transform:translateY(-2px)}}
@media (max-width:760px){html body .m-pills{display:grid;grid-template-columns:1fr 1fr}html body .m-pill{text-align:center}}

/* Footer: two rows on a phone, not a long stack */
@media (max-width:760px){
  html body .footer-inner{display:grid!important;grid-template-columns:1fr 1fr!important;gap:26px 18px!important}
  html body .footer-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  html body .footer-brand > p{display:none}
  html body .footer-brand .footer-socials{margin:0}
  html body .footer-col-contact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
  html body .footer-col-contact h5{width:100%}
  html body .footer-col-contact p{margin:0!important}
  html body .footer-col li{margin-bottom:6px}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* belief cards rise and grow in as you reach them */
    html body .m-belief{animation:m-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}

    /* wrong word: word lands, then the slash cuts through, then the truth slides in */
    html body .myth-word,html body .myth-slash,html body .myth-truth{transition:none!important}
    html body .myth-word{animation:m-word linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
    html body .myth-slash{animation:m-slash linear both;animation-timeline:view();animation-range:cover 30% cover 45%}
    html body .myth-truth{animation:m-truth linear both;animation-timeline:view();animation-range:cover 42% cover 55%}

    /* drives: card swings in from alternating sides, badge pops, icon draws itself */
    html body .m-drive:nth-child(odd){animation:m-in-l linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    html body .m-drive:nth-child(even){animation:m-in-r linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    html body .m-badge{animation:m-spin-pop linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
    html body .m-badge svg *{animation:m-draw linear both;animation-timeline:view();animation-range:entry 50% cover 50%}

    /* nose photo pulls back as it comes up */
    html body .m-nose-card img{animation:m-settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%}

    /* steps slide in one by one, no stacking */
    html body .plan-step{animation:m-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}

    /* social pills pop */
    html body .m-pill{animation:m-pop linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
  }
}
@keyframes m-rise{from{transform:translateY(60px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes m-word{from{transform:translateY(24px);opacity:0;color:#fff}60%{transform:none;opacity:1;color:#fff}to{transform:none;opacity:1;color:rgba(255,255,255,.5)}}
@keyframes m-slash{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}
@keyframes m-truth{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1;color:#c8d3b2}}
@keyframes m-in-l{from{transform:translateX(-70px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
@keyframes m-in-r{from{transform:translateX(70px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
@keyframes m-spin-pop{from{transform:scale(.3) rotate(-90deg);opacity:0}70%{transform:scale(1.12) rotate(6deg);opacity:1}to{transform:none;opacity:1}}
@keyframes m-draw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}

/* ================================================================
   Round 6 (2026-10-24): the four dog types, taught visually.
   A nervous system meter per dog, three things you might see,
   one line on what is happening, one line on what helps.
   ================================================================ */
html body .m-types{background:var(--white);padding:80px 0;scroll-margin-top:80px}
html body .m-types h2{color:var(--charcoal)}
html body .m-types h2 em{color:var(--sage);font-style:normal}
html body .m-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
html body .m-tab{font-family:var(--font-h);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--charcoal);background:#f3f2ec;border:1px solid rgba(45,48,42,.1);border-radius:999px;padding:10px 16px}
html body .m-type-list{display:flex;flex-direction:column;gap:20px;margin-top:32px;max-width:760px}
html body .m-type{border-radius:var(--m-r-lg);overflow:hidden;box-shadow:var(--m-shadow);background:#fff;scroll-margin-top:96px}

html body .m-type-top{background:var(--charcoal);padding:26px 24px 22px;color:#fff}
html body .m-type-kicker{font-family:var(--font-h);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft-sage)}
html body .m-type-top h3{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4vw,36px);
  line-height:1;color:#fff;margin:8px 0 20px;letter-spacing:.01em}

/* the meter: calm sage on the left, warm red on the right */
html body .m-meter-labels{display:flex;justify-content:space-between;font-family:var(--font-h);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(254,254,254,.55);margin-bottom:8px}
html body .m-meter-track{position:relative;height:14px;border-radius:999px;background:rgba(254,254,254,.1)}
html body .m-meter-fill{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:999px;transform-origin:left center;
  background:linear-gradient(90deg,#818f6b 0%,#c9b56a 55%,#d9824a 80%,#d94438 100%)}
html body .m-meter-dot{position:absolute;top:50%;left:var(--v);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 5px rgba(254,254,254,.18),0 4px 12px rgba(0,0,0,.4)}
html body .m-meter-state{margin-top:12px;font-family:var(--font-sub);font-style:italic;font-size:17px;color:#e9e4d3}
html body .m-type-overwhelmed .m-meter-fill{background:linear-gradient(90deg,#818f6b,#c9b56a 45%,#d9824a 70%,#d94438)}
html body .m-type-overexcited .m-meter-fill{background:linear-gradient(90deg,#818f6b,#c9b56a 50%,#d9824a 85%,#e0663f)}
html body .m-type-confused .m-meter-fill{background:linear-gradient(90deg,#818f6b,#b3b06c 70%,#c9b56a)}
html body .m-type-underfulfilled .m-meter-fill{background:linear-gradient(90deg,#818f6b,#c9b56a 65%,#d9a04a)}

html body .m-type-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:16px}
html body .m-type-label{display:block;font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:8px}
html body .m-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
html body .m-chips li{font-family:var(--font-h);font-weight:700;font-size:15.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--charcoal);background:#f3f2ec;border-radius:999px;padding:9px 14px;line-height:1.1}
html body .m-type-row p{font-size:17px;line-height:1.55;color:#45493f;margin:0}
html body .m-helps{background:#f3f2ec;border-radius:16px;padding:14px 16px;border-left:4px solid var(--sage)}
html body .m-helps p{color:var(--charcoal);font-weight:600}
html body .m-type-more{font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);text-decoration:none}
html body .m-type-more::after{content:" \2192"}

@media (max-width:760px){
  html body .m-types{padding:64px 0}
  html body .m-type-top{padding:22px 18px 20px}
  html body .m-type-body{padding:20px 18px 22px}
  html body .m-chips li{font-size:14px}
}

/* Confused: the dot keeps drifting, because the signal keeps dropping */
@media (prefers-reduced-motion:no-preference){
  html body .m-type-confused .m-meter-dot{animation:m-drift 3.2s ease-in-out infinite}
}
@keyframes m-drift{0%,100%{left:50%}25%{left:30%}55%{left:72%}80%{left:40%}}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-type{animation:m-rise linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    /* the meter fills as the card comes up */
    html body .m-type-top .m-meter-fill{animation:m-fillx linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
    html body .m-type:not(.m-type-confused) .m-meter-dot{animation:m-slide-dot linear both;animation-timeline:view();animation-range:entry 60% cover 40%}
    /* chips pop one after another */
    html body .m-chips li{animation:m-pop linear both;animation-timeline:view()}
    html body .m-chips li:nth-child(1){animation-range:entry 20% cover 30%}
    html body .m-chips li:nth-child(2){animation-range:entry 50% cover 36%}
    html body .m-chips li:nth-child(3){animation-range:entry 80% cover 42%}
    html body .m-helps{animation:m-in-l linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
    html body .m-tab{animation:m-pop linear both;animation-timeline:view();animation-range:entry 20% cover 30%}
  }
}
@keyframes m-fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-slide-dot{from{left:0}to{left:var(--v)}}
/* confused: the whole meter shows faintly, the dot wanders across it */
html body .m-type-confused .m-meter-fill{width:100%;opacity:.35}
/* what helps slides in flat, no tilt */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-helps{animation-name:m-slide}
  }
}

/* ================================================================
   Round 7 (2026-10-24): drag the meter. Five stops, one card shows.
   Drive cards get big numbers instead of icons.
   ================================================================ */
html body .m-badge{font-family:var(--font-h);font-weight:800;font-size:34px;letter-spacing:.02em;color:#fff}
@media (max-width:760px){html body .m-badge{font-size:26px}}

html body .m-dial{margin-top:30px;background:var(--charcoal);border-radius:var(--m-r-lg);padding:24px 22px 18px;--pos:8%;max-width:760px;box-shadow:var(--m-shadow)}
html body .m-dial-ends{display:flex;justify-content:space-between;font-family:var(--font-h);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(254,254,254,.55);margin-bottom:12px}
html body .m-dial-track{position:relative;height:44px}
html body .m-dial-bar{position:absolute;left:0;right:0;top:15px;height:14px;border-radius:999px;
  background:linear-gradient(90deg,#818f6b 0%,#a9b29a 15%,#c9b56a 45%,#d9824a 75%,#d94438 100%)}
html body .m-dial-dot{position:absolute;top:22px;left:var(--pos);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 7px rgba(254,254,254,.2),0 6px 16px rgba(0,0,0,.45);pointer-events:none}
html body .m-dial.snapping .m-dial-dot{transition:left .45s var(--m-ease)}
html body .m-dial-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;touch-action:pan-y}
html body .m-dial-range:active{cursor:grabbing}
html body .m-dial-range:focus-visible + *{outline:none}
html body .m-dial:focus-within .m-dial-dot{box-shadow:0 0 0 7px rgba(254,254,254,.45),0 6px 16px rgba(0,0,0,.45)}

html body .m-stops{position:relative;height:40px;margin-top:10px}
html body .m-stop{position:absolute;left:var(--v);transform:translateX(-50%);top:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(254,254,254,.5);padding:8px 2px;white-space:nowrap;transition:color .25s ease}
html body .m-stop::before{content:"";position:absolute;left:50%;top:-6px;width:2px;height:8px;margin-left:-1px;background:rgba(254,254,254,.25)}
html body .m-stop.on{color:#fff}
html body .m-stop[data-stop="regulated"]{transform:none;left:0}
html body .m-stop[data-stop="overwhelmed"]{transform:none;left:auto;right:0}
html body .m-stop[data-stop="regulated"]::before{left:calc(8% * 0 + 14px)}
html body .m-stop[data-stop="overwhelmed"]::before{left:auto;right:10px}

html body .m-panels{margin-top:18px;max-width:760px;display:flex;flex-direction:column;gap:18px}
html body .m-panel{border-radius:var(--m-r-lg);overflow:hidden;box-shadow:var(--m-shadow);background:#fff;scroll-margin-top:96px}
html body .m-panel-regulated .m-type-top{background:var(--sage)}
html body .m-panel-regulated .m-type-kicker{color:#f3f2ec}
/* with JS, only the chosen dog shows, and it swaps in */
html.m-dial-on body .m-panel{display:none}
html.m-dial-on body .m-panel.on{display:block;animation:m-swap .45s var(--m-ease) both}
html.m-dial-on body .m-panel.on .m-chips li{animation:m-pop .5s var(--m-ease) both}
html.m-dial-on body .m-panel.on .m-chips li:nth-child(2){animation-delay:.08s}
html.m-dial-on body .m-panel.on .m-chips li:nth-child(3){animation-delay:.16s}
html.m-dial-on body .m-panel.on .m-helps{animation:m-slide .5s var(--m-ease) .12s both}
@keyframes m-swap{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:760px){
  html body .m-dial{padding:20px 16px 14px}
  html body .m-stop{font-size:10.5px;letter-spacing:.02em}
}
@media (max-width:420px){
  /* tight phones: name the stops in two lines so nothing collides */
  html body .m-stops{height:48px}
  html body .m-stop{white-space:normal;width:64px;text-align:center;line-height:1.1}
  html body .m-stop[data-stop="regulated"]{text-align:left}
  html body .m-stop[data-stop="overwhelmed"]{text-align:right}
}
@media (prefers-reduced-motion:reduce){
  html.m-dial-on body .m-panel.on,html.m-dial-on body .m-panel.on *{animation:none!important}
}
html body .m-dial-now{margin-top:6px;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(30px,5vw,40px);
  line-height:1;color:#fff;letter-spacing:.01em}
html body .m-dial[data-state="regulated"] .m-dial-now{color:#c8d3b2}
html body .m-dial[data-state="overexcited"] .m-dial-now{color:#e9a070}
html body .m-dial[data-state="overwhelmed"] .m-dial-now{color:#ef7a6c}
html body .m-dial-now.pulse{animation:m-pop .4s var(--m-ease)}
@media (max-width:760px){
  html body .m-stops{position:static;height:auto;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  html body .m-stop,html body .m-stop[data-stop="regulated"],html body .m-stop[data-stop="overwhelmed"]{
    position:static;transform:none;width:auto;text-align:center;white-space:nowrap;
    font-size:12px;letter-spacing:.06em;padding:8px 12px;border-radius:999px;background:rgba(254,254,254,.08);color:rgba(254,254,254,.7)}
  html body .m-stop::before{display:none}
  html body .m-stop.on{background:#fff;color:var(--charcoal)}
}

/* ================================================================
   Round 8 (2026-10-24): real photos everywhere.
   Photo strip under the hero, drive photo tiles that flip, and the
   wrong-word section rebuilt from scratch (light, upright type).
   ================================================================ */

/* Strip of real clients and events, two rows drifting opposite ways */
html body .m-strip{background:var(--white);padding:14px 0 6px;overflow:hidden}
html body .m-marquee{overflow:hidden;margin-bottom:10px}
html body .m-marquee-track{display:flex;gap:10px;width:max-content;animation:m-marq 70s linear infinite}
html body .m-right .m-marquee-track{animation-direction:reverse;animation-duration:80s}
html body .m-marquee img{height:clamp(130px,16vw,200px);width:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;display:block;background:#e9e7df}
html body .m-strip-cap{text-align:center;margin:12px 0 0;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:#6b6f63}
html body .m-strip-cap b{color:var(--sage)}
@keyframes m-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html body .m-marquee{overflow-x:auto}
  html body .m-marquee-track{animation:none}
}
html body .m-believe{padding-top:44px}

/* Drives: photo tiles in two rows you swipe sideways, tap to flip */
html body .m-flip-grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:14px;max-width:1184px;margin:34px auto 0;padding:0 48px}
html body .m-flip{all:unset;box-sizing:border-box;display:block;cursor:pointer;perspective:1200px;aspect-ratio:4/5;border-radius:var(--m-r-lg);-webkit-tap-highlight-color:transparent}
html body .m-flip:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
html body .m-flip-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--m-ease)}
html body .m-flip.on .m-flip-in{transform:rotateY(180deg)}
html body .m-flip-front,html body .m-flip-back{position:absolute;inset:0;border-radius:var(--m-r-lg);overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:var(--m-shadow)}
html body .m-flip-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body .m-flip-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,29,24,.88) 0%,rgba(26,29,24,.25) 45%,rgba(26,29,24,0) 70%)}
html body .m-flip-name{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font-family:var(--font-h);font-weight:800;
  text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1;color:#fff}
html body .m-flip-name small{display:block;font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--soft-sage);margin-bottom:6px;line-height:1.3}
html body .m-flip-hint{position:absolute;top:12px;right:12px;z-index:1;font-family:var(--font-h);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);background:rgba(254,254,254,.9);border-radius:999px;padding:6px 10px}
html body .m-flip-back{transform:rotateY(180deg);background:var(--charcoal);color:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:4px}
html body .m-flip-back small{font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--sage)}
html body .m-flip-back b{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;margin-bottom:10px}
html body .m-flip-label{font-family:var(--font-h);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft-sage);margin-top:8px}
html body .m-flip-text{font-size:15px;line-height:1.45;color:rgba(254,254,254,.88)}
html body .m-flip-job{font-family:var(--font-sub);font-style:italic;font-size:16px;line-height:1.4;color:#e9e4d3}
@media (max-width:760px){
  html body .m-flip-grid{grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 18px;margin-top:26px;
    scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain;gap:12px}
  html body .m-flip-grid::-webkit-scrollbar{display:none}
  html body .m-flip{scroll-snap-align:start}
  html body .m-flip-text{font-size:14px}
  html body .m-flip-job{font-size:15px}
}
@media (prefers-reduced-motion:reduce){html body .m-flip-in{transition:none}}

/* Wrong word: light, big upright type, a slash you see happen */
html body .m-myth{background:#f3f2ec;padding:76px 0}
html body .m-myth h2{color:var(--charcoal)}
html body .m-myth h2 em{color:#d94438;font-style:normal}
html body .m-myth-list{list-style:none;margin:30px 0 0;padding:0;max-width:820px}
html body .m-myth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid rgba(45,48,42,.12)}
html body .m-myth-row:first-child{border-top:1px solid rgba(45,48,42,.12)}
html body .m-myth-word{position:relative;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-style:normal;
  font-size:clamp(32px,7vw,64px);line-height:1;color:var(--charcoal);letter-spacing:.005em;transition:color .5s ease .9s}
html body .m-myth-slash{position:absolute;left:-4%;right:-4%;top:48%;height:clamp(6px,1vw,10px);margin-top:-4px;border-radius:6px;
  background:#d94438;transform:rotate(-6deg) scaleX(1);transform-origin:left center;transition:transform .6s cubic-bezier(.65,0,.35,1) .3s}
html body .m-myth-truth{flex:0 0 auto;text-align:right;font-family:var(--font-h);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,3vw,28px);line-height:1.05;color:var(--sage);transition:opacity .5s ease 1s,transform .5s var(--m-ease) 1s}
html body .m-myth-truth small{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;color:#8b8f83;margin-bottom:4px}
html.m-myth-js body .m-myth-row:not(.lit) .m-myth-slash{transform:rotate(-6deg) scaleX(0)}
html.m-myth-js body .m-myth-row:not(.lit) .m-myth-truth{opacity:0;transform:translateX(24px)}
html body .m-myth-row.lit .m-myth-word,html:not(.m-myth-js) body .m-myth-word{color:rgba(45,48,42,.45)}
html body .m-myth-close{margin-top:30px;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.6vw,36px);
  line-height:1.1;color:var(--charcoal);max-width:820px;letter-spacing:.01em}
html body .m-myth-close em{font-style:normal;color:var(--sage)}
@media (max-width:520px){
  html body .m-myth-row{flex-direction:column;align-items:flex-start;gap:8px}
  html body .m-myth-truth{text-align:left}
  html body .m-myth-truth small{display:inline;margin:0 6px 0 0}
  html.m-myth-js body .m-myth-row:not(.lit) .m-myth-truth{transform:translateY(10px)}
}
@media (prefers-reduced-motion:reduce){
  html body .m-myth-slash,html body .m-myth-truth,html body .m-myth-word{transition:none}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-flip{animation:m-pop linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
}
/* frame each drive photo on the dog */
html body .m-flip-front img[src$="nose.jpg"]{object-position:30% 50%}
html body .m-flip-front img[src$="chase.jpg"]{object-position:50% 70%}
html body .m-flip-front img[src$="herd.jpg"]{object-position:42% 50%}
html body .m-flip-front img[src$="retrieve.jpg"]{object-position:74% 40%}
html body .m-flip-front img[src$="guard.jpg"]{object-position:28% 40%}
html body .m-flip-front img[src$="close.jpg"]{object-position:68% 50%}

/* ================================================================
   Round 9 (2026-10-24): the big idea in the hero. A rotating line of
   real examples, plus a preview-only picker for headlines A, B, C.
   ================================================================ */
html body .m-rot{margin:14px 0 0;font-family:var(--font-h);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(20px,2.6vw,28px);line-height:1.1;color:#fff;min-height:1.2em}
html body .m-rot span{display:inline-block;border-bottom:3px solid var(--sage);padding-bottom:2px;transition:opacity .35s ease,transform .35s var(--m-ease)}
html body .m-rot span.out{opacity:0;transform:translateY(-10px)}
html body .m-picker{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:10001;display:flex;align-items:center;gap:6px;
  background:rgba(35,38,32,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(254,254,254,.14);
  border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
html body .m-picker span{font-family:var(--font-h);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(254,254,254,.7);margin-right:4px}
html body .m-picker button{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-h);font-weight:800;font-size:16px;color:#fff;background:rgba(254,254,254,.1)}
html body .m-picker button.on{background:var(--sage)}
/* keep the cookie card clear of the picker on the preview */
html body #sk9-cookie{bottom:70px!important}
html body .m-rot{margin-bottom:14px}

/* Round 10: drives as a plain grid, no sideways scroll. Two across on a phone,
   so four show on screen at once. Less space above the headline. */
html body .m-drives{padding:44px 0 64px}
html body .m-drives .m-lead{margin-top:10px}
html body .m-flip-grid{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;margin-top:22px}
@media (max-width:760px){
  html body .m-drives{padding:32px 0 56px}
  html body .m-flip-grid{grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;
    padding:0 20px;gap:10px;margin-top:18px}
  html body .m-flip{aspect-ratio:3/4}
  html body .m-flip-name{left:12px;right:12px;bottom:10px;font-size:19px}
  html body .m-flip-name small{font-size:9.5px;letter-spacing:.1em;margin-bottom:4px}
  html body .m-flip-hint{top:8px;right:8px;font-size:9.5px;padding:5px 8px}
  html body .m-flip-back{padding:12px 11px;gap:2px}
  html body .m-flip-back small{font-size:11px}
  html body .m-flip-back b{font-size:18px;margin-bottom:4px}
  html body .m-flip-label{font-size:9.5px;margin-top:6px}
  html body .m-flip-text{font-size:13px;line-height:1.35}
  html body .m-flip-job{font-size:13.5px;line-height:1.3}
}
html body .m-flip-back{justify-content:center}

/* ================================================================
   Round 11 (2026-10-24): smooth, not bouncy. Kelty: "it bounces out at
   you... not smooth. I want it to be an addictive experience."
   Every entrance is now a short, soft fade and rise. No overshoot,
   no spin, no tilt, no scale pops. These keyframes replace the earlier ones.
   ================================================================ */
@keyframes m-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes m-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes m-in-l{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-in-r{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-spin-pop{from{opacity:0}to{opacity:1}}
@keyframes m-slide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes m-slide-r{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes m-swap{from{opacity:0}to{opacity:1}}
html body .fade-up{transition-duration:.7s!important}

/* the meter: the card under it crossfades, nothing jumps */
html.m-dial-on body .m-panel.on{animation:m-swap .35s ease both}
html.m-dial-on body .m-panel.on .m-chips li,
html.m-dial-on body .m-panel.on .m-helps{animation:none}
html body .m-dial-now{transition:color .3s ease}
html body .m-dial-ends{justify-content:space-between}
html body .m-dial.snapping .m-dial-dot{transition:left .5s cubic-bezier(.33,1,.68,1)}
/* chips inside the meter cards no longer pop on scroll either */
html body .m-chips li{animation:none!important}

/* hero trust line */
html body .m-trust{margin-top:22px;font-family:var(--font-h);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(254,254,254,.78);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
html body .m-trust b{color:#fff}
html body .m-trust i{width:4px;height:4px;border-radius:50%;background:var(--sage);display:inline-block}
html body .m-rot{display:none}
html body #sk9-cookie{bottom:12px!important}

/* Nose card: photo on top, words on solid charcoal below, so they read */
html body .m-nose-card{display:block;min-height:0;background:var(--charcoal)}
html body .m-nose-card img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center 45%}
html body .m-nose-card::after{display:none}
html body .m-nose-text{max-width:none;padding:28px 28px 30px}
html body .m-nose-text p{color:rgba(254,254,254,.9)}
@media (max-width:760px){
  html body .m-nose-card{min-height:0}
  html body .m-nose-card img{aspect-ratio:4/3}
  html body .m-nose-text{padding:22px 20px 24px}
}

/* Wrong word: the slash is a straight, level red line drawn left to right */
html body .m-myth-slash{transform:scaleX(1);top:50%;height:clamp(6px,.9vw,9px);margin-top:-4px;left:-3%;right:-3%}
html.m-myth-js body .m-myth-row:not(.lit) .m-myth-slash{transform:scaleX(0)}
html body .m-myth-slash{top:44%}

/* ================================================================
   Round 13 (2026-10-24): a little glow everywhere.
   ================================================================ */
html body .m-myth-slash{box-shadow:0 0 10px rgba(217,68,56,.65),0 0 22px rgba(217,68,56,.35)}
html body .btn-primary{box-shadow:0 6px 18px rgba(95,107,82,.35),0 0 22px rgba(129,143,107,.45)}
@media (hover:hover){html body .btn-primary:hover{box-shadow:0 10px 24px rgba(95,107,82,.4),0 0 32px rgba(129,143,107,.6)}}
html body .btn-outline-white{box-shadow:0 0 18px rgba(254,254,254,.12)}
html body .sk9-nav-cta{box-shadow:0 0 16px rgba(129,143,107,.5)}
html body .m-dial-dot{box-shadow:0 0 0 7px rgba(254,254,254,.18),0 0 24px rgba(254,254,254,.45),0 6px 16px rgba(0,0,0,.45)}
html body .m-dial-bar{box-shadow:0 0 16px rgba(201,181,106,.35)}
html body .m-stop.on{box-shadow:0 0 16px rgba(254,254,254,.35)}
html body .m-pill{box-shadow:0 0 18px rgba(254,254,254,.35)}
html body .m-flip-hint{box-shadow:0 0 12px rgba(254,254,254,.5)}
html body .m-helps{box-shadow:0 0 18px rgba(129,143,107,.18)}
html body #sk9-cookie button{box-shadow:0 0 14px rgba(129,143,107,.5)!important}

/* Wrong word: the real word is as big and bold as the crossed-out one, in sage */
html body .m-myth-row{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 0}
html body .m-myth-truth{text-align:left;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-style:normal;
  font-size:clamp(30px,6.4vw,58px);line-height:1;letter-spacing:.005em;color:var(--sage)}
html body .m-myth-truth small{display:none}
html.m-myth-js body .m-myth-row:not(.lit) .m-myth-truth{transform:translateY(10px)}
html body .m-myth .m-lead{color:#55594f}
html body .m-flip-front img[src$="chase.jpg"]{object-position:50% 62%}
html body .m-flip-front img[src$="retrieve.jpg"]{object-position:55% 30%}

/* ================================================================
   Round 14 (2026-10-24). Kelty picked: photos that slowly zoom,
   colors that shift, more to touch.
   ================================================================ */

/* Photos ease a little closer as you scroll past them */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .section-photo-wrap img,
    html body .m-nose-card img,
    html body .proof-cell img,
    html body .m-flip-front img{animation:m-zoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes m-zoom{from{transform:scale(1)}to{transform:scale(1.14)}}
html body .proof-cell{overflow:hidden}

/* Wrong word: tap a label to cross it out yourself */
html body .m-myth-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){html.m-myth-js body .m-myth-row:not(.lit):hover .m-myth-slash{transform:scaleX(.12)}}

/* Photo wall: tap to see full screen */
html body .m-lightbox{position:fixed;inset:0;z-index:10002;background:rgba(26,29,24,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease}
html body .m-lightbox.on{opacity:1;pointer-events:auto}
html body .m-lightbox img{max-width:100%;max-height:82vh;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.97);transition:transform .35s var(--m-ease)}
html body .m-lightbox.on img{transform:none}
html body .m-lightbox span{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(254,254,254,.7)}
/* No slanted headline type anywhere */
html body h1 em,html body h2 em,html body h3 em{font-style:normal}
html body .proof-wall h2 em{color:var(--soft-sage)}

/* ================================================================
   Round 15 (2026-10-24). No color blending. Slashes tied to the scroll.
   The meter becomes one light card. Faces centered on two drive tiles.
   ================================================================ */
html body .m-myth-row{cursor:default}

/* Slash draws as you scroll, in step with your thumb (Safari 26, Chrome).
   Older browsers: it draws the moment the row is on screen, no delay. */
html body .m-myth-slash,html body .m-myth-truth,html body .m-myth-word{transition-delay:0s!important}
html body .m-myth-slash{transition-duration:.45s!important}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html body .m-myth-slash{transition:none!important;animation:m-strike linear both;animation-timeline:view();animation-range:entry 60% cover 35%}
    html body .m-myth-word{transition:none!important;animation:m-dim linear both;animation-timeline:view();animation-range:cover 25% cover 38%}
    html body .m-myth-truth{transition:none!important;animation:m-truth-in linear both;animation-timeline:view();animation-range:cover 22% cover 40%}
    html.m-myth-js body .m-myth-row:not(.lit) .m-myth-truth{opacity:1}
  }
}
@keyframes m-strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-dim{from{color:var(--charcoal)}to{color:rgba(45,48,42,.45)}}
@keyframes m-truth-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Faces: shepherd and closeness centered on a phone; drive tiles do not zoom */
html body .m-flip-front img[src$="guard.jpg"]{object-position:41% 35%}
html body .m-flip-front img[src$="close.jpg"]{object-position:42% 50%}
html body .m-flip-front img{animation:none!important;transform:none!important}

/* The meter: one light card, meter on top, the dog right under it */
html body .m-dial{background:#fff;border:1px solid rgba(45,48,42,.08);border-bottom:0;border-radius:var(--m-r-lg) var(--m-r-lg) 0 0;
  box-shadow:var(--m-shadow);padding:22px 22px 16px;margin-top:26px}
html body .m-dial-ends{color:#7a7e72}
html body .m-dial-bar{height:16px;top:14px;box-shadow:none}
html body .m-dial-dot{background:#fff;border:3px solid var(--charcoal);box-shadow:0 0 0 6px rgba(45,48,42,.08),0 6px 14px rgba(0,0,0,.18)}
html body .m-dial-now{color:var(--charcoal)}
html body .m-dial[data-state="regulated"] .m-dial-now{color:#5f6b52}
html body .m-dial[data-state="confused"] .m-dial-now{color:#8a7d3a}
html body .m-dial[data-state="underfulfilled"] .m-dial-now{color:#a8742a}
html body .m-dial[data-state="overexcited"] .m-dial-now{color:#c45f2a}
html body .m-dial[data-state="overwhelmed"] .m-dial-now{color:#c0392b}
html body .m-stop,html body .m-stop[data-stop="regulated"],html body .m-stop[data-stop="overwhelmed"]{color:#55594f}
html body .m-stop::before{background:rgba(45,48,42,.2)}
html body .m-stop.on{color:var(--charcoal);box-shadow:none}
@media (max-width:760px){
  html body .m-stop,html body .m-stop[data-stop="regulated"],html body .m-stop[data-stop="overwhelmed"]{background:#f3f2ec;color:#55594f}
  html body .m-stop.on{background:var(--charcoal);color:#fff}
}
html body .m-panels{margin-top:0}
html body .m-panel{border:1px solid rgba(45,48,42,.08);border-top:1px solid rgba(45,48,42,.1);border-radius:0 0 var(--m-r-lg) var(--m-r-lg);box-shadow:var(--m-shadow)}
html body .m-panel .m-type-top,html body .m-panel-regulated .m-type-top{background:#fff;color:var(--charcoal);padding:20px 22px 0}
html body .m-panel .m-type-top h3{color:var(--charcoal);margin:6px 0 0;font-size:clamp(26px,4vw,34px)}
html body .m-panel .m-type-kicker,html body .m-panel-regulated .m-type-kicker{color:var(--sage)}
html body .m-panel .m-type-body{padding-top:16px}
@media (max-width:760px){html body .m-panel .m-type-top{padding:18px 18px 0}}
html body .m-flip-front img[src$="chase.jpg"]{object-position:50% 70%}
html body .m-flip-front img[src$="retrieve.jpg"]{object-position:50% 50%}
html body .m-flip-front img[src$="retrieve.jpg"]{object-position:55% 45%}

/* ================================================================
   Dog type pages (overwhelmed, overexcited, confused, under-fulfilled).
   Same look as the homepage: meter, tap-to-check signs, one big why,
   short steps, real photos, tap-open FAQs.
   ================================================================ */
html body .page-hero-content > p{font-family:var(--font-sub);font-style:italic;font-size:clamp(17px,1.7vw,20px);line-height:1.55}
html body .t-meter-sec{background:#fff;padding:40px 0 8px}
html body .t-meter{margin-top:6px;max-width:760px;background:#fff;border:1px solid rgba(45,48,42,.08);border-radius:var(--m-r-lg);box-shadow:var(--m-shadow);padding:22px 22px 20px}
html body .t-bar{position:relative;height:16px;border-radius:999px;margin:10px 0 18px;
  background:linear-gradient(90deg,#818f6b 0%,#a9b29a 15%,#c9b56a 45%,#d9824a 75%,#d94438 100%)}
html body .t-bar i{position:absolute;top:50%;left:var(--v);width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;
  border:3px solid var(--charcoal);box-shadow:0 0 0 6px rgba(45,48,42,.08),0 0 22px rgba(254,254,254,.6),0 6px 14px rgba(0,0,0,.18)}
html body .t-now{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(30px,5vw,40px);line-height:1;color:var(--charcoal)}
html body .t-now small{display:block;margin-top:6px;font-family:var(--font-sub);font-style:italic;text-transform:none;font-weight:400;font-size:17px;color:#55594f}
html body .t-compare{display:inline-block;margin-top:14px;font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);text-decoration:none}
html body .t-compare::after{content:" \2192"}

html body .t-signs-sec,html body .t-steps-sec,html body .t-faq-sec,html body .t-others-sec{background:#fff;padding:56px 0}
html body .t-signs-sec h2,html body .t-steps-sec h2,html body .t-faq-sec h2,html body .t-others-sec h2{color:var(--charcoal)}
html body .t-signs-sec h2 em,html body .t-steps-sec h2 em,html body .t-faq-sec h2 em,html body .t-others-sec h2 em{color:var(--sage)}
html body .t-signs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;max-width:960px}
html body .t-sign{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  background:#f3f2ec;border:2px solid transparent;border-radius:18px;padding:16px 16px 16px;-webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
html body .t-sign:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
html body .t-sign b{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.05;color:var(--charcoal);padding-right:30px}
html body .t-sign span{font-size:14.5px;line-height:1.45;color:#55594f}
html body .t-sign i{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(45,48,42,.25);background:#fff;transition:all .25s ease}
html body .t-sign.on{background:#fff;border-color:var(--sage);box-shadow:0 0 22px rgba(129,143,107,.35)}
html body .t-sign.on i{background:var(--sage);border-color:var(--sage);box-shadow:inset 0 0 0 4px #fff}
html body .t-tally{margin-top:18px;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em;color:var(--charcoal);
  opacity:.35;transition:opacity .3s ease}
html body .t-tally.show{opacity:1}
html body .t-count{color:var(--sage)}
html body .t-hint{display:block;margin-top:6px;font-family:var(--font-sub);font-style:italic;text-transform:none;font-weight:400;font-size:17px;color:#55594f;
  max-height:0;overflow:hidden;opacity:0;transition:opacity .35s ease,max-height .35s ease}
html body .t-tally.match .t-hint{max-height:80px;opacity:1}

html body .t-why-sec{background:var(--charcoal);padding:64px 0}
html body .t-why-sec h2{color:#fff}
html body .t-why-sec h2 em{color:var(--sage)}
html body .t-why-p{margin-top:18px;max-width:640px;font-family:var(--font-sub);font-style:italic;font-size:clamp(18px,2vw,21px);line-height:1.55;color:rgba(254,254,254,.88)}
html body .t-why-link{margin-top:16px;font-size:15px}
html body .t-why-link a{color:var(--soft-sage)}

html body .t-steps{list-style:none;margin:26px 0 0;padding:0;max-width:720px;display:flex;flex-direction:column;gap:12px}
html body .t-steps li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;background:#f3f2ec;border-radius:18px;padding:18px 18px}
html body .t-n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--sage);color:#fff;
  font-family:var(--font-h);font-weight:800;font-size:24px;box-shadow:0 0 18px rgba(129,143,107,.45)}
html body .t-steps b{display:block;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.1;color:var(--charcoal);margin-top:4px}
html body .t-steps p{margin-top:4px;font-size:16px;line-height:1.5;color:#55594f}

html body .t-strip{padding:8px 0 10px}

html body .t-faq-sec{background:#f3f2ec}
html body .t-faqs{margin-top:22px;max-width:760px;display:flex;flex-direction:column;gap:10px}
html body .t-faq{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(26,29,24,.06)}
html body .t-faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 18px;position:relative;font-family:var(--font-h);font-weight:800;
  text-transform:uppercase;font-size:17px;line-height:1.15;color:var(--charcoal)}
html body .t-faq summary::-webkit-details-marker{display:none}
html body .t-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:#f3f2ec;color:var(--sage);font-size:20px;transition:transform .3s var(--m-ease)}
html body .t-faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
html body .t-faq p{padding:0 18px 18px;font-size:16px;line-height:1.6;color:#45493f}

html body .t-others{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;max-width:960px}
html body .t-other{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:#f3f2ec;border-radius:18px;padding:18px 18px 22px;position:relative}
html body .t-other b{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--charcoal)}
html body .t-other span{font-size:15px;line-height:1.45;color:#55594f}
html body .t-other i{display:block;position:relative;height:6px;border-radius:999px;margin-top:8px;
  background:linear-gradient(90deg,#818f6b,#c9b56a 45%,#d9824a 75%,#d94438)}
html body .t-other i::after{content:"";position:absolute;top:50%;left:var(--v);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:2px solid var(--charcoal)}

@media (max-width:760px){
  html body .t-meter-sec{padding:32px 0 4px}
  html body .t-signs-sec,html body .t-steps-sec,html body .t-faq-sec,html body .t-others-sec,html body .t-why-sec{padding:48px 0}
  html body .t-signs{grid-template-columns:1fr 1fr;gap:8px}
  html body .t-sign{padding:14px 12px}
  html body .t-sign b{font-size:16px;padding-right:24px}
  html body .t-sign span{font-size:13.5px}
  html body .t-sign i{top:12px;right:10px;width:18px;height:18px}
  html body .t-others{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html body .t-sign,html body .t-sign i,html body .t-hint{transition:none}}

/* Drive tiles: no 3D flip (iPhone showed it mirrored). Tap fades the words in
   over a dimmed photo instead. */
html body .m-flip{perspective:none}
html body .m-flip-in,html body .m-flip.on .m-flip-in{transform:none!important;transform-style:flat;transition:none}
html body .m-flip-front,html body .m-flip-back{-webkit-backface-visibility:visible;backface-visibility:visible}
html body .m-flip-back{transform:none;background:rgba(26,29,24,.9);opacity:0;pointer-events:none;transition:opacity .35s ease;
  justify-content:center;gap:2px;padding:16px 16px}
html body .m-flip.on .m-flip-back{opacity:1}
html body .m-flip.on .m-flip-hint{opacity:0}
html body .m-flip-back b{font-size:20px;margin-bottom:6px}
html body .m-flip-label{margin-top:10px}
@media (max-width:760px){
  html body .m-flip-back{padding:14px 13px}
  html body .m-flip-back b{font-size:17px;margin-bottom:2px}
  html body .m-flip-label{margin-top:9px;font-size:10px}
  html body .m-flip-text{font-size:13.5px;line-height:1.4}
  html body .m-flip-job{font-size:14px;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){html body .m-flip-back{transition:none}}
html body .m-flip-back{z-index:2}

/* ================================================================
   RHYTHM (2026-10-24). Kelty: "your spacing is getting kind of bad."
   One scale everywhere, measured at 390 with tools/audit.sh:
     10  under a label        12  headline to lead, between list items
     26  heading block to content, content to its button
     64  section padding on phones (88 on wider screens)
   Loaded last on purpose so it wins over the earlier rounds.
   ================================================================ */
:root{--r-label:10px;--r-lead:12px;--r-block:26px;--r-sec:64px}
@media (min-width:761px){:root{--r-sec:88px}}

/* section padding */
html body .m-believe,html body .m-myth,html body .m-types,html body .m-job,html body .m-drives,
html body .plan-section,html body .reviews-section,html body .proof-wall,html body .m-social,html body .cta-strip,
html body .t-signs-sec,html body .t-why-sec,html body .t-steps-sec,html body .t-faq-sec,html body .t-others-sec{padding:var(--r-sec) 0!important}
html body .m-nose{padding:0 0 var(--r-sec)!important}
html body .t-meter-sec{padding:var(--r-block) 0 0!important}
html body .m-strip{padding:16px 0 12px!important}

/* label, headline, lead */
html body section .eyebrow{margin-bottom:var(--r-label)!important}
html body section .container > h2,html body .m-nose-text h2{margin:0!important}
html body section .container > .m-lead,html body section .m-nose-text p,html body .t-why-p{margin-top:var(--r-lead)!important}

/* heading block to the main content */
html body .m-beliefs,html body .m-myth-list,html body .m-dial,html body .m-flip-grid,html body .plan-steps,
html body .proof-grid,html body .m-pills,html body .t-signs,html body .t-steps,html body .t-faqs,html body .t-others,
html body .t-meter{margin-top:var(--r-block)!important}
html body .m-panels{margin-top:0!important}

/* content to its note or button */
html body .m-ctas,html body .m-note,html body .m-myth-close,html body .t-tally,html body .t-why-link,
html body .proof-cap,html body .plan-section .container > div.fade-up:last-child,html body .m-nose-text .btn{margin-top:var(--r-block)!important}
html body .m-note + .m-ctas{margin-top:var(--r-lead)!important}
html body .t-tally + .m-ctas{margin-top:var(--r-lead)!important}

/* hero: label, headline, line, buttons */
html body .hero-eyebrow-row,html body .page-hero-content .eyebrow{margin-bottom:var(--r-label)!important}
html body .hero h1,html body .page-hero-content h1{margin:0!important}
html body .hero-sub,html body .page-hero-content > p{margin-top:16px!important}
html body .hero-ctas,html body .page-hero-content > div:last-child{margin-top:var(--r-block)!important}

/* inside cards */
html body .m-belief .n{margin-bottom:6px}
html body .m-belief h3{margin:0 0 6px!important}
html body .m-dial-track{margin-top:10px}
html body .m-dial-now{margin-top:10px!important}
html body .m-stops{margin-top:12px!important}
html body .m-type-body{gap:16px!important}
html body .m-type-label{margin-bottom:8px!important}
html body .m-chips{margin:0!important}
html body .t-other i{margin-top:10px!important}

/* lists */
html body .m-beliefs,html body .t-steps,html body .t-faqs,html body .t-others,html body .m-type-list{gap:12px!important}
html body .m-nose-text p{margin-bottom:0!important}
html body .m-type-body{gap:0!important}
html body .m-type-body > * + *{margin-top:16px!important}
html body .m-type-body > .m-type-label + .m-chips{margin-top:var(--r-label)!important}
html body .m-type-row .m-type-label{margin-bottom:6px!important}
html body .reviews-summary,html body .reviews-grid{margin-top:var(--r-block)!important}
html body .reviews-pagination,html body .reviews-write-btn{margin-top:var(--r-lead)!important}

/* ================================================================
   KIT sections (kit.py) used by every rebuilt inner page.
   ================================================================ */
html body .k-sec{background:#fff;padding:var(--r-sec) 0}
html body .k-sec.k-alt{background:#f3f2ec}
html body .k-sec.k-dark{background:var(--charcoal)}
html body .k-sec h2{color:var(--charcoal);margin:0}
html body .k-sec h2 em{color:var(--sage);font-style:normal}
html body .k-sec.k-dark h2{color:#fff}
html body .k-sec.k-dark .m-lead{color:rgba(254,254,254,.85)}
html body .k-sec .m-lead{color:#55594f;max-width:680px}
html body .k-sec .m-ctas{display:flex;flex-wrap:wrap;gap:12px}
html body .k-tiles,html body .k-prices{margin-top:var(--r-block)}
html body .k-sec .m-ctas,html body .k-prices + .m-note{margin-top:var(--r-block)!important}

html body .k-tiles{display:grid;gap:12px}
html body .k-cols-3{grid-template-columns:repeat(3,1fr)}
html body .k-cols-2{grid-template-columns:repeat(2,1fr)}
html body .k-tile{background:#f3f2ec;border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
html body .k-alt .k-tile{background:#fff}
html body .k-tile b{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.1;color:var(--charcoal)}
html body .k-tile span{font-size:15px;line-height:1.5;color:#55594f}
html body .k-tile a{color:var(--sage)}

html body .k-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
html body .k-price{position:relative;background:#fff;border-radius:var(--m-r-lg);padding:24px 22px;box-shadow:var(--m-shadow);
  display:flex;flex-direction:column;border:2px solid transparent}
html body .k-price.k-feature{border-color:var(--sage);box-shadow:var(--m-shadow),0 0 28px rgba(129,143,107,.3)}
html body .k-tag{position:absolute;top:-12px;left:22px;background:var(--sage);color:#fff;font-family:var(--font-h);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:6px 12px;box-shadow:0 0 16px rgba(129,143,107,.5)}
html body .k-price-name{font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
html body .k-price-amt{margin-top:var(--r-label);font-family:var(--font-h);font-weight:800;font-size:48px;line-height:1;color:var(--charcoal)}
html body .k-price-amt small{font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6f63;margin-left:8px}
html body .k-price-line{margin-top:var(--r-lead);font-size:15.5px;line-height:1.5;color:#45493f}
html body .k-price .m-type-label{margin-top:18px;margin-bottom:8px}
html body .k-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html body .k-checks li{position:relative;padding-left:24px;font-size:15px;line-height:1.4;color:#45493f}
html body .k-checks li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--sage);box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--sage)}
html body .k-more{margin-top:16px;border-top:1px solid rgba(45,48,42,.1);padding-top:12px}
html body .k-more summary{list-style:none;cursor:pointer;font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal)}
html body .k-more summary::-webkit-details-marker{display:none}
html body .k-more summary::after{content:" +";color:var(--sage)}
html body .k-more[open] summary::after{content:" \2212"}
html body .k-more .k-checks{margin-top:10px}
html body .k-price .btn{margin-top:20px;width:100%}

@media (max-width:900px){html body .k-prices{grid-template-columns:1fr;gap:20px}}
@media (max-width:760px){
  html body .k-cols-3,html body .k-cols-2{grid-template-columns:1fr}
  html body .k-sec .m-ctas .btn{width:100%}
}
html body .k-price .m-type-label{margin-top:20px!important;margin-bottom:10px!important}
html body .k-more{margin-top:20px}
/* Same 20px phone margin on every page (inner pages used 48) */
@media (max-width:600px){html body .container{padding-left:20px!important;padding-right:20px!important}}

/* Call-to-action strip and its buttons, for every page (they used to live only
   in the homepage's own styles, so inner pages showed white text on white). */
html body .btn-outline-white{background:transparent;color:#fefefe;border:2px solid rgba(255,255,255,.45)}
html body .btn-dark{background:var(--charcoal);color:#fefefe}
html body .cta-strip{background:var(--sage);position:relative;overflow:hidden}
html body .cta-strip::before{content:'';position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
html body .cta-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
html body .cta-strip h2{font-size:clamp(28px,4.5vw,52px);color:#fefefe;margin:0}
html body .cta-strip-sub{margin-top:var(--r-lead);font-family:var(--font-sub);font-size:16px;font-style:italic;color:rgba(255,255,255,.85);max-width:540px;line-height:1.7}
html body .cta-strip-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex-shrink:0}
@media (max-width:760px){
  html body .cta-strip-inner{flex-direction:column;text-align:center;gap:var(--r-block)}
  html body .cta-strip h2{font-size:clamp(26px,8vw,40px)}
  html body .cta-strip-sub{font-size:15px;margin-left:auto;margin-right:auto}
  html body .cta-strip-actions{align-items:center;width:100%}
  html body .cta-strip-actions .btn{width:100%;max-width:320px;justify-content:center}
}

/* ===== PHONE MENU: four choices, light, calm (10-24) ===== */
html body .sk9-mobile-menu{top:76px;bottom:0;background:#f7f5ef;padding:12px 24px 32px;border-top:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
html body .sk9-mobile-menu.open{display:flex;flex-direction:column;animation:sk9MenuIn .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes sk9MenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html body .sk9-mobile-menu a,
html body .sk9-mobile-menu summary{font-family:var(--font-h,'Barlow Condensed'),sans-serif;font-size:27px;line-height:1.1;letter-spacing:.01em;font-weight:700;text-transform:uppercase;
  color:#2d302a;padding:20px 0;border-bottom:1px solid rgba(45,48,42,.09);text-decoration:none;display:flex;align-items:center;justify-content:space-between}
html body .sk9-mobile-menu summary{list-style:none;cursor:pointer}
html body .sk9-mobile-menu summary::-webkit-details-marker{display:none}
html body .sk9-mobile-menu .sk9-m-arrow{width:10px;height:10px;border-right:2px solid #818f6b;border-bottom:2px solid #818f6b;transform:rotate(-45deg);margin-right:6px;flex:none}
html body .sk9-mobile-menu summary .sk9-m-arrow{transform:rotate(45deg);transition:transform .25s ease}
html body .sk9-mobile-menu details[open] summary .sk9-m-arrow{transform:rotate(225deg)}
html body .sk9-mobile-menu details[open] summary{border-bottom-color:transparent}
html body .sk9-mobile-menu .sk9-m-more-list{padding:0 0 14px 18px;border-left:2px solid #c9cfbd;margin:0 0 4px 2px;animation:sk9MenuIn .25s ease both}
html body .sk9-mobile-menu .sk9-m-more-list a{font-size:21px;color:#5a6148;padding:12px 0;border:0}
html body .sk9-mobile-menu details{border-bottom:1px solid rgba(45,48,42,.09)}
html body .sk9-mobile-menu details summary{border-bottom:0}
html body .sk9-mobile-menu .sk9-m-cta{margin-top:26px;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fefefe!important;background:#818f6b;border-radius:999px;padding:17px 20px;border:0}
html body .sk9-mobile-menu .sk9-m-foot{display:flex;justify-content:center;gap:28px;margin-top:22px}
html body .sk9-mobile-menu .sk9-m-foot a{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5a6148;padding:8px 0;border:0}
html:has(.sk9-mobile-menu.open){overflow:hidden}
html body:has(.sk9-mobile-menu.open) .sk9-hamburger span{transition:transform .25s ease,opacity .2s ease}
html body:has(.sk9-mobile-menu.open) .sk9-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html body:has(.sk9-mobile-menu.open) .sk9-hamburger span:nth-child(2){opacity:0}
html body:has(.sk9-mobile-menu.open) .sk9-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){html body .sk9-mobile-menu.open,html body .sk9-mobile-menu .sk9-m-more-list{animation:none}}

/* Light header: the name stands alone in dark type on white, and the hero is a rounded card below it */
html body .sk9-nav,html body .sk9-nav.scrolled{top:0;left:0;right:0;width:100%!important;max-width:none;margin:0;border-radius:0;border:0;
  background:rgba(254,254,254,.9);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:none}
html body .sk9-nav.scrolled{box-shadow:0 1px 0 rgba(45,48,42,.08)}
html body .sk9-nav-inner{height:76px;padding:0 24px;max-width:1280px}
html body .sk9-nav-brand img{width:46px;height:46px;min-width:46px;max-width:46px}
html body .sk9-nav-brand span{color:#1f221d}
html body .sk9-nav-links a,html body .sk9-nav-drop-btn{color:#3a3e35}
html body .sk9-nav-links a:hover,html body .sk9-nav-drop-btn:hover,html body .sk9-nav-drop:hover .sk9-nav-drop-btn,html body .sk9-nav-drop.open .sk9-nav-drop-btn{color:#818f6b}
html body .sk9-nav-phone{color:#6b6f63!important}
html body .sk9-nav-cta,html body .sk9-nav-links a.sk9-nav-cta{color:#fefefe!important}
html body .sk9-nav-drop{padding:27px 0}
html body .sk9-nav-panel{border-radius:16px;overflow:hidden;top:100%}
html body .sk9-hamburger span{background:#1f221d}
html body .hero,html body .page-hero{margin:76px 12px 0;border-radius:28px;padding-top:0}
html body .sk9-mobile-menu{top:76px;padding-top:12px;z-index:9998}
@media (max-width:760px){
  html body .sk9-nav-inner{height:68px;padding:0 16px}
  html body .sk9-nav-brand img{width:40px;height:40px;min-width:40px;max-width:40px}
  html body .hero,html body .page-hero{margin:68px 10px 0;border-radius:22px;padding-top:0}
  html body .sk9-mobile-menu{top:68px}
}

/* Calmer photos: one still row you can swipe, no zooming as you scroll */
html body .m-marquee.m-right{display:none}
html body .m-marquee{overflow-x:auto;scrollbar-width:none;margin-bottom:0}
html body .m-marquee::-webkit-scrollbar{display:none}
html body .m-marquee-track{animation:none!important;padding:0 12px}
html body .section-photo-wrap img,html body .m-nose-card img,html body .proof-cell img,
html body .m-flip-front img,html body .hero-photo,html body .hero-content{animation:none!important;transform:none!important}
html body .post-hero,html body .blog-hero,html body .seo-hero,
html body:not(:has(.hero,.page-hero,.post-hero,.blog-hero,.seo-hero)) section[style*="charcoal"][style*="padding-top:80px"]:first-of-type{margin:76px 12px 0;border-radius:28px;padding-top:48px!important;border-bottom:0}
@media (max-width:760px){html body .post-hero,html body .blog-hero,html body .seo-hero,
  html body:not(:has(.hero,.page-hero,.post-hero,.blog-hero,.seo-hero)) section[style*="charcoal"][style*="padding-top:80px"]:first-of-type{margin:68px 10px 0;border-radius:22px;padding-top:36px!important}}

/* Quiz link above the meter */
html body .m-quizlink{color:var(--sage);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-family:var(--font-sub);font-size:1.08em}
html body .m-quizlink:hover{color:#5f6b52}
html body .m-quizlink + *{margin-top:0}

/* Closing line under the wrong-word list: the italic serif, not the headline caps */
html body .m-myth-close{font-family:var(--font-sub);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(20px,2.4vw,27px);line-height:1.45;color:var(--charcoal)}
html body .m-myth-close em{font-style:italic;color:var(--sage)}