:root{
  --navy:#223649;
  --trust:#3F5A74;
  --mist:#D9EEF4;
  --apricot:#F5CAB3;
  --charcoal:#2F3133;
  --porcelain:#F9F7F4;
  --white:#FFFFFF;
  --line:rgba(63,90,116,.16);
  --soft-line:rgba(34,54,73,.09);
  --wide:1180px;
  --head:860px;
  --read:660px;
}
*{box-sizing:border-box}
html{background:#ece9e4;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--charcoal);background:#ece9e4;overflow-x:hidden}
.page{width:100%;background:var(--porcelain);min-height:100vh;padding-top:72px}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:"M PLUS Rounded 1c",Inter,sans-serif;color:var(--navy);letter-spacing:-.035em;margin:0}
h1{font-size:35px;line-height:1.08;font-weight:800}
h2{font-size:29px;line-height:1.12;font-weight:800}
h3{font-size:21px;line-height:1.16;font-weight:800}
p{font-size:16px;line-height:1.58;margin:0 0 14px}
strong{color:var(--navy);font-weight:700}
.shell{width:min(var(--wide),calc(100% - 40px));margin-inline:auto}
.primary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;background:var(--trust);color:#fff;text-decoration:none;font-size:15px;font-weight:700;box-shadow:0 8px 18px rgba(63,90,116,.18)}

/* Header: same calm fixed behavior as V22 */
header{height:72px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(249,247,244,.97);border-bottom:1px solid rgba(34,54,73,.045);position:fixed;top:0;left:0;width:100%;z-index:1000;backdrop-filter:blur(14px);transition:height .22s ease}
.menu{appearance:none;border:0;background:transparent;width:38px;height:38px;padding:0;display:grid;place-items:center;flex:0 0 auto}
.menu i,.menu i:before,.menu i:after{width:19px;height:2px;border-radius:99px;background:var(--navy);display:block;position:relative}
.menu i:before,.menu i:after{content:"";position:absolute;left:0}
.menu i:before{top:-6px} .menu i:after{top:6px}

/* Hero: V22 proportion, horse-specific image */
.horse-hero{padding:27px 0 54px;background:linear-gradient(180deg,rgba(217,238,244,.36) 0%,rgba(249,247,244,0) 45%)}
.horse-hero-copy{padding:0 20px}
.eyebrow{font-size:14px;line-height:1.42;color:var(--trust);font-weight:600;margin:0 0 12px}
.horse-hero h1{margin-bottom:15px}
.hero-lead{font-family:"M PLUS Rounded 1c",Inter,sans-serif;color:var(--trust);font-size:20px;line-height:1.32;font-weight:700;max-width:620px;margin-bottom:14px}
.hero-description{max-width:590px;margin-bottom:10px}
.hero-usecase{font-size:14.5px;line-height:1.45;color:var(--trust);font-style:italic;margin-bottom:0}
.horse-hero .primary{margin-top:21px}
.horse-hero-media{margin:24px 0 0;position:relative;line-height:0;overflow:hidden}
.horse-hero-media:before{content:"";position:absolute;z-index:2;left:-4%;right:-5%;top:-8px;height:20px;background:var(--apricot);border-radius:48% 52% 45% 55% / 62% 55% 45% 38%;transform:rotate(-1.1deg)}
.horse-hero-media img{width:100%;height:auto;position:relative;z-index:1}
.horse-hero-media:after{content:"";position:absolute;z-index:3;left:-6%;right:-6%;bottom:-7px;height:18px;background:var(--porcelain);border-radius:48% 52% 0 0 / 82% 82% 0 0;transform:rotate(.5deg)}

/* Problem: open editorial composition, not a block */
.horse-problem{padding:76px 0 92px;background:var(--porcelain)}
.problem-head{padding:0 20px;max-width:900px}
.problem-head h2{max-width:820px}
.problem-body{padding:34px 20px 0}
.problem-intro{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:15px}
.known-list{font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-size:20px;line-height:1.47;color:var(--trust);font-weight:700;max-width:720px}
.marker{position:relative;display:inline;z-index:0}
.marker:after{content:"";position:absolute;z-index:-1;left:-3px;right:-4px;bottom:.03em;height:.34em;background:rgba(245,202,179,.72);border-radius:53% 47% 54% 46%;transform:rotate(-.65deg)}
.problem-close{font-weight:700;color:var(--navy);margin-top:20px}

/* Care plan: the single deliberate Mist field */
.horse-plan{position:relative;padding:83px 0 92px;background:rgba(217,238,244,.33);overflow:hidden}
.horse-plan:before{content:"";position:absolute;top:0;left:-5%;right:-5%;height:16px;background:var(--porcelain);border-radius:0 0 52% 48% / 0 0 70% 70%;transform:rotate(.4deg)}
.horse-plan-copy{padding:0 20px}
.horse-plan-copy h2{max-width:660px}
.horse-plan-copy>p{max-width:580px;margin-top:18px}
.care-details{margin-top:26px;display:flex;flex-wrap:wrap;gap:0;font-family:"M PLUS Rounded 1c",Inter,sans-serif;font-size:16.5px;line-height:1.8;color:var(--navy);font-weight:700}
.care-details span:not(:last-child):after{content:" · ";padding-inline:6px;color:var(--trust)}
.qr-line{font-weight:700;color:var(--trust)}
.product-visual{position:relative;min-height:480px;margin-top:34px;display:grid;place-items:center}
.product-visual:before{content:"";position:absolute;width:116%;height:290px;left:-8%;top:108px;background:rgba(249,247,244,.76);border-radius:48% 52% 44% 56% / 51% 48% 52% 49%;transform:rotate(-1.2deg)}
.product-visual:after{content:"";position:absolute;width:64px;height:7px;left:14%;top:121px;background:var(--apricot);border-radius:99px;transform:rotate(-5deg)}
.device{width:230px;background:#111a22;border-radius:34px;padding:8px;position:relative;z-index:2;box-shadow:0 17px 36px rgba(34,54,73,.16)}
.screen{background:#fff;border-radius:27px;min-height:425px;padding:18px 15px 16px}
.notch{width:74px;height:7px;border-radius:99px;background:rgba(34,54,73,.14);margin:0 auto 18px}
.profile{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--apricot),var(--mist));border:1px solid rgba(34,54,73,.08)}
.profile-lines{display:grid;gap:7px;flex:1}
.bar{height:8px;border-radius:99px;background:rgba(63,90,116,.15)}
.bar.short{width:57%}
.screen-row{height:48px;border-radius:13px;background:rgba(217,238,244,.48);margin-bottom:9px;display:flex;align-items:center;padding:0 13px;font-size:12px;font-weight:700;color:var(--trust);border:1px solid rgba(63,90,116,.06)}
.qr-panel{width:58px;height:58px;background:#fff;border-radius:14px;position:absolute;right:35px;bottom:20px;z-index:3;box-shadow:0 8px 20px rgba(34,54,73,.12);padding:8px}
.qr{width:100%;height:100%;background:linear-gradient(90deg,var(--trust) 20%,transparent 20% 40%,var(--trust) 40% 60%,transparent 60% 80%,var(--trust) 80%),linear-gradient(var(--trust) 20%,transparent 20% 40%,var(--trust) 40% 60%,transparent 60% 80%,var(--trust) 80%);background-size:15px 15px;border-radius:4px;opacity:.92}

/* Handoff: the only strong card system */
.horse-handoff{padding:92px 20px 100px;background:var(--porcelain)}
.handoff-head{max-width:760px}
.handoff-head h2{max-width:740px}
.handoff-grid{display:grid;gap:16px;margin-top:34px}
.handoff-card{border:1px solid rgba(63,90,116,.12);border-radius:22px;padding:28px 22px 25px;text-align:center;background:rgba(255,255,255,.66)}
.handoff-icon{width:64px;height:64px;margin:0 auto 16px;display:grid;place-items:center}
.handoff-icon svg{width:58px;height:58px;overflow:visible}
.handoff-card h3{max-width:260px;margin:0 auto}
.handoff-card p{font-size:15px;line-height:1.48;max-width:290px;margin:9px auto 0}

/* Scenarios: ruled editorial list, no cards */
.horse-scenarios{padding:0 20px 110px;background:var(--porcelain)}
.scenarios-inner{max-width:1180px;margin:0 auto}
.scenarios-head h2{max-width:650px}
.scenario-list{margin-top:38px;border-top:1px solid var(--line)}
.scenario{padding:22px 0;border-bottom:1px solid var(--line)}
.scenario h3{font-size:18px;margin-bottom:7px}
.scenario p{font-size:15px;line-height:1.5;margin:0;max-width:560px}
.routine{margin-top:31px;padding-left:16px;border-left:3px solid var(--apricot);font-size:14.5px;line-height:1.5;color:var(--trust);max-width:660px}

/* Final outcome */
.final-cta{position:relative;padding:94px 20px 100px;background:var(--navy);color:var(--porcelain);text-align:center}
.final-cta:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--apricot)}
.final-cta .small{font-size:15px;line-height:1.5;font-weight:700;color:var(--apricot);margin-bottom:17px}
.final-cta h2{color:var(--porcelain);font-size:34px;line-height:1.08;max-width:760px;margin:0 auto}
.final-cta .primary{margin:28px auto 0;background:var(--porcelain);color:var(--navy);box-shadow:none;max-width:300px}

/* Footer: V22 architecture */

/* Tablet */
@media (min-width:600px){
  .shell{width:min(var(--wide),calc(100% - 88px))}
  .horse-hero-copy,.problem-head,.problem-body,.horse-plan-copy{padding-left:44px;padding-right:44px}
  .horse-handoff,.horse-scenarios{padding-left:44px;padding-right:44px}
  .horse-hero h1{font-size:48px}
  .hero-lead{font-size:23px}
  .horse-hero .primary{display:inline-flex;width:auto;min-width:238px}
  .problem-body{max-width:760px;margin-left:auto;margin-right:auto}
  .known-list{font-size:23px}
  .horse-plan{padding-top:95px;padding-bottom:100px}
  .handoff-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .handoff-card{min-height:245px}
}

/* Compact desktop */
@media (min-width:900px){
  .page{padding-top:78px}
  header{height:78px;padding:0 40px}
  h1{font-size:clamp(44px,4.7vw,52px);line-height:1.03}
  h2{font-size:clamp(35px,3.4vw,40px);line-height:1.08;font-weight:700;text-wrap:balance}
  p{font-size:16.5px;text-wrap:pretty}
  .primary{border-radius:14px}

  .horse-hero{width:min(1120px,calc(100% - 80px));margin:0 auto;padding:70px 0 74px;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:50px;align-items:center;background:linear-gradient(180deg,rgba(217,238,244,.23),rgba(249,247,244,0) 70%)}
  .horse-hero-copy{padding:0}
  .horse-hero-media{width:430px;margin:18px 0 0;overflow:hidden}
  .horse-hero-media img{height:570px;object-fit:cover;object-position:center 45%}
  .hero-description{max-width:545px}
  .horse-hero .primary{display:inline-flex;width:auto;min-width:242px}

  .horse-problem{width:min(1120px,calc(100% - 80px));margin:0 auto;padding:112px 0 114px}
  .problem-head{padding:0;max-width:880px}
  .problem-body{padding:0;margin:52px 0 0 auto;max-width:720px}
  .problem-intro{font-size:18px}
  .known-list{font-size:24px;max-width:720px}

  .horse-plan{padding:106px 40px 112px}
  .plan-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:76px;align-items:center}
  .horse-plan-copy{padding:0}
  .product-visual{margin:0;min-height:540px}
  .product-visual:before{height:330px;top:120px}
  .device{width:244px}
  .screen{min-height:448px}
  .qr-panel{right:45px;bottom:34px}

  .horse-handoff{padding:108px 40px 116px}
  .horse-handoff-inner{max-width:1120px;margin:0 auto}
  .handoff-head{max-width:790px}
  .handoff-grid{margin-top:45px;gap:20px}
  .handoff-card{min-height:250px;padding:31px 26px 28px;border-radius:18px}

  .horse-scenarios{padding:0 40px 126px}
  .scenarios-inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:76px;align-items:start}
  .scenario-list{margin-top:0}
  .scenario{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:25px 0}
  .scenario h3{margin:0}
  .routine{grid-column:2;margin-top:34px}

  .final-cta{padding:110px 40px 116px}
  .final-cta h2{font-size:44px}
  .final-cta .primary{display:inline-flex;width:auto;min-width:260px}
}

/* Full desktop */
@media (min-width:1100px){
  .page{padding-top:86px}
  header{height:86px;padding:0 max(44px,calc((100vw - 1180px)/2))}
  .menu{display:none}

  .horse-hero{width:min(1180px,calc(100% - 88px));padding:86px 0 82px;grid-template-columns:minmax(0,1fr) 478px;gap:62px}
  .eyebrow{font-size:16px;margin-bottom:16px}
  .horse-hero h1{font-size:clamp(50px,4.25vw,61px);max-width:700px;letter-spacing:-.042em}
  .hero-lead{font-size:26px;line-height:1.28;max-width:600px;margin-top:3px}
  .hero-description{max-width:575px;font-size:17.5px;line-height:1.62}
  .hero-usecase{max-width:560px;font-size:15.5px}
  .horse-hero-media{width:478px;margin-top:28px}
  .horse-hero-media img{height:625px;object-position:center 44%}

  .horse-problem{width:min(1180px,calc(100% - 88px));padding:126px 0 124px}
  .problem-head h2{font-size:clamp(37px,2.9vw,43px);max-width:860px}
  .problem-body{max-width:720px;margin-top:58px}
  .known-list{font-size:25px;line-height:1.48}

  .horse-plan{padding:116px 0 120px}
  .plan-inner{max-width:1180px;grid-template-columns:minmax(390px,.88fr) minmax(500px,1.12fr);gap:84px}
  .horse-plan-copy h2{font-size:clamp(37px,2.8vw,42px);max-width:620px}
  .product-visual{min-height:575px}
  .product-visual:before{height:356px;top:130px}
  .product-visual:after{width:86px;height:8px;left:10%;top:146px}
  .device{width:252px}
  .screen{min-height:462px}

  .horse-handoff{padding:116px 0 120px}
  .horse-handoff-inner{max-width:1180px}
  .handoff-head h2{font-size:clamp(38px,2.9vw,43px);max-width:760px}
  .handoff-grid{gap:20px;margin-top:48px}
  .handoff-card{min-height:252px;padding:32px 26px 29px}

  .horse-scenarios{padding:4px 0 138px}
  .scenarios-inner{max-width:1180px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:84px}
  .scenarios-head h2{font-size:clamp(38px,2.9vw,43px);max-width:620px}
  .scenario{grid-template-columns:190px 1fr;padding:27px 0}
  .routine{max-width:620px}

  .final-cta{padding:116px 40px 122px}
  .final-cta h2{font-size:clamp(43px,3.2vw,49px);font-weight:700;letter-spacing:-.035em;max-width:800px}
}

@media (min-width:1500px){
  .horse-hero,.horse-problem,.plan-inner,.horse-handoff-inner,.scenarios-inner{max-width:1220px}
}

/* V4: source-locked hero + mobile image reveal */
@media (max-width:599px){
  .horse-hero{
    padding-top:22px;
  }
  .horse-hero h1{
    margin-top:0;
  }
  .horse-hero-media{
    margin-top:15px;
  }
  .hero-lead{
    margin-bottom:11px;
  }
  .hero-description{
    margin-bottom:8px;
  }
  .horse-hero .primary{
    margin-top:17px;
  }
}


/* ==========================================================
   V5 MOBILE HERO FOLD
   Preserve the source image; art-direct only the mobile crop.
   Goal: reveal ears, mane, both eyes and a little cheek much
   earlier in the first mobile viewport.
   ========================================================== */
@media (max-width:599px){
  /* Slightly tighter mobile chrome without changing tablet/desktop. */
  .page{
    padding-top:64px;
  }
  header{
    height:64px;
    padding-left:18px;
    padding-right:18px;
  }

  /* Compress only the mobile hero, not the rest of the page. */
  .horse-hero{
    padding-top:16px;
    padding-bottom:34px;
  }
  .horse-hero-copy{
    padding-left:18px;
    padding-right:18px;
  }
  .horse-hero h1{
    font-size:31px;
    line-height:1.025;
    margin-bottom:10px;
  }
  .hero-lead{
    font-size:18.5px;
    line-height:1.25;
    margin-bottom:10px;
  }
  .hero-description{
    font-size:14.7px;
    line-height:1.47;
    margin-bottom:8px;
  }
  .hero-usecase{
    font-size:13.5px;
    line-height:1.38;
  }
  .horse-hero .primary{
    min-height:44px;
    margin-top:14px;
    font-size:14.5px;
  }

  /* The key change:
     turn the portrait into a deliberate mobile viewport rather
     than displaying all 1402px of its native portrait height. */
  .horse-hero-media{
    height:315px;
    margin-top:11px;
  }
  .horse-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }
  .horse-hero-media:before{
    height:18px;
  }
}

/* Taller phones can afford a little more photograph while keeping
   the same composition and source asset. */
@media (max-width:599px) and (min-height:820px){
  .horse-hero{
    padding-top:19px;
  }
  .horse-hero h1{
    font-size:32px;
  }
  .hero-lead{
    font-size:19px;
  }
  .hero-description{
    font-size:15px;
  }
  .horse-hero-media{
    height:335px;
    margin-top:13px;
  }
}


/* ==========================================================
   V6 MOBILE HERO PHOTO
   Restore the full portrait reveal while keeping the tighter
   mobile copy/header spacing from V5.
   ========================================================== */
@media (max-width:599px){
  .horse-hero-media{
    height:auto !important;
    margin-top:11px;
    overflow:hidden;
  }

  .horse-hero-media img{
    width:100%;
    height:auto !important;
    object-fit:initial !important;
    object-position:initial !important;
  }
}

@media (max-width:599px) and (min-height:820px){
  .horse-hero-media{
    height:auto !important;
    margin-top:13px;
  }
}


/* ==========================================================
   V10 — V6 RHYTHM + MOBILE ART-DIRECTED HORSE IMAGE
   ========================================================== */

/* Preserve V6 hero/header spacing. Restore comfortable separation
   between the CTA and photograph rather than overlapping them. */
@media (max-width:599px){
  .horse-hero-media{
    height:auto !important;
    margin-top:20px !important;
    overflow:hidden;
  }

  .horse-hero-media picture{
    display:block;
    width:100%;
  }

  .horse-hero-media img{
    display:block;
    width:100%;
    height:auto !important;
    object-fit:initial !important;
    object-position:initial !important;
  }
}

@media (max-width:599px) and (min-height:820px){
  .horse-hero-media{
    margin-top:21px !important;
  }
}

/* Broader editorial marker treatment from V8, raised slightly so
   the Apricot reads as a confident marker stroke through the lower
   portion of the phrase rather than hanging beneath it. */
.marker{
  position:relative;
  z-index:0;
  display:inline;
  padding:0 .03em;
  background-image:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 66%,
    rgba(245,202,179,.80) 66%,
    rgba(245,202,179,.80) 85%,
    transparent 85%,
    transparent 100%
  );
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.marker:after{
  display:none !important;
}


/* ==========================================================
   V11 — USER-SELECTED HORSE PHOTO + HOMEPAGE USE-CASE ICONS
   ========================================================== */

/* Use the attached horse image directly. Preserve the full scrolling
   portrait on mobile; no outpainting and no forced mobile crop. */
@media (max-width:599px){
  .horse-hero-media{
    height:auto !important;
    margin-top:20px !important;
    overflow:hidden;
  }

  .horse-hero-media img{
    display:block;
    width:100%;
    height:auto !important;
    object-fit:initial !important;
    object-position:initial !important;
  }
}

/* Keep tablet/desktop portrait behavior, but tune the crop to the new source. */
@media (min-width:900px){
  .horse-hero-media img{
    width:100%;
    height:570px;
    object-fit:cover;
    object-position:center 44%;
  }
}

@media (min-width:1100px){
  .horse-hero-media img{
    height:625px;
    object-position:center 43%;
  }
}

/* Reuse the V22 homepage scenario icon language without turning the
   list into cards. The list remains editorial/ruled. */
.scenario{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.scenario-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--trust);
}

.scenario-icon svg{
  width:34px;
  height:34px;
  display:block;
  overflow:visible;
}

.scenario-copy{
  min-width:0;
}

.scenario-copy h3{
  margin:0 0 7px;
}

.scenario-copy p{
  margin:0;
}

@media (min-width:900px){
  .scenario{
    grid-template-columns:44px 170px minmax(0,1fr);
    gap:16px 20px;
    align-items:start;
  }

  .scenario-icon{
    grid-column:1;
    grid-row:1;
    margin-top:1px;
  }

  .scenario-copy{
    grid-column:2 / -1;
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    gap:20px;
  }

  .scenario-copy h3{
    margin:0;
  }

  .scenario-copy p{
    max-width:560px;
  }
}

@media (min-width:1100px){
  .scenario{
    grid-template-columns:46px 180px minmax(0,1fr);
    gap:18px 22px;
  }

  .scenario-copy{
    grid-template-columns:180px minmax(0,1fr);
    gap:22px;
  }
}


/* ==========================================================
   V12 — MOBILE-ONLY CROPPED HERO IMAGE
   Keep V11 spacing. Use a top/left-cropped version of the same
   horse photo on mobile only, preserving the lower-right content.
   ========================================================== */
.horse-hero-media picture{
  display:block;
  width:100%;
}
.horse-hero-media picture img{
  display:block;
  width:100%;
}

@media (max-width:599px){
  .horse-hero-media{
    margin-top:20px !important;
    overflow:hidden;
  }
  .horse-hero-media img{
    width:100%;
    height:auto !important;
    object-fit:initial !important;
    object-position:initial !important;
  }
}




/* ==========================================================
   V16 VISUAL-SYSTEM PASS
   Full-bleed hero field, softer Misty care-plan field, and
   editorial treatment for sentence-length section statements.
   ========================================================== */
.horse-hero{
  isolation:isolate;
  background:none !important;
  overflow:visible;
}
.horse-hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(217,238,244,.34) 0%,rgba(217,238,244,.15) 50%,rgba(249,247,244,0) 100%);
  pointer-events:none;
}
.horse-plan{
  background:linear-gradient(
    180deg,
    rgba(249,247,244,0) 0%,
    rgba(217,238,244,.27) 10%,
    rgba(217,238,244,.29) 88%,
    rgba(249,247,244,0) 100%
  ) !important;
}
.horse-problem h2,
.horse-scenarios h2{
  font-family:Inter,sans-serif;
  font-weight:600;
  letter-spacing:-.026em;
  line-height:1.17;
}

@media (min-width:900px){
  .horse-problem h2{
    font-size:34px;
    max-width:800px;
  }
  .horse-scenarios h2{
    font-size:32px;
    max-width:720px;
  }
}



/* ==========================================================
   V17 RESPONSIVE REFINEMENT
   Misty inverse CTA, pricing note, and intentional desktop
   problem-section composition without an implied photo slot.
   ========================================================== */
.final-cta .primary{
  background:var(--mist) !important;
  color:var(--navy) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.horse-final-meta{
  margin:14px auto 0;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.70);
}

/* Remove the accidental "missing image" feeling on wider screens.
   Keep the section editorial rather than adding photography by default. */
@media (min-width:900px){
  .problem-body{
    margin:42px 0 0 8% !important;
    max-width:760px !important;
  }
}



/* V18: restore ivory CTA, Misty supporting line, mobile pacing + pill geometry */
.final-cta .small{
  color:var(--mist) !important;
}
.final-cta .primary{
  background:var(--porcelain) !important;
  color:var(--navy) !important;
}
@media (max-width:599px){
  .horse-problem{padding-top:56px !important;padding-bottom:66px !important}
  .horse-plan{padding-top:62px !important;padding-bottom:68px !important}
  .horse-handoff{padding-top:66px !important;padding-bottom:72px !important}
  .horse-scenarios{padding-bottom:76px !important}
  .final-cta{padding-top:70px !important;padding-bottom:74px !important}
  .final-cta .primary{
    border-radius:999px !important;
  }
}
@media (min-width:600px){
  .final-cta .primary{
    border-radius:14px !important;
  }
}



/* Shared action-button shape system */
@media (max-width:899px){
  .primary{border-radius:999px !important}
}
@media (min-width:900px){
  .primary{border-radius:14px !important}
}



/* V20: softened Apricot inverse-primary on Navy CTA band */
.final-cta .primary{

  background:linear-gradient(180deg,rgba(245,202,179,.96),rgba(245,202,179,.86)) !important;
  color:var(--navy) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 7px 18px rgba(13,28,40,.12), inset 0 1px 0 rgba(255,255,255,.28) !important;

}