/* Picture Medic — landing page
   Design rules for a 45+ audience:
   - body text >= 20px, headings >= 28px
   - AAA contrast on text
   - one primary action per screen, buttons >= 64px tall
   - no hover-only controls, no icon-only buttons, no hamburger
   - phone first, RTL-ready
*/

:root{
  /* Picture Medic brand palette (see /brand/BRAND.md)
     primary #001D3D · white #FFFFFF · accent grey #F5F5F5 */
  --cream:#F5F5F5;
  --paper:#FFFFFF;
  --ink:#001D3D;
  --ink-soft:#44536B;
  --care:#001D3D;
  --care-dark:#001227;
  --care-tint:#E9EEF6;
  --clay:#1B4F8F;
  --line:#E1E4EA;
  --shadow:0 2px 4px rgba(0,29,61,.05), 0 12px 32px rgba(0,29,61,.07);
  --radius:22px;
  --maxw:1080px;
  --font-head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 21px/1.68 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--care-dark);text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;background:#fff;padding:14px 20px;border-radius:12px;z-index:99}

/* ---------- header ---------- */
.site-header{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;padding:18px 0 10px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{width:46px;height:46px;flex:0 0 auto;display:block}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:.07em;text-transform:uppercase}
.mainnav{display:flex;gap:22px;flex-wrap:wrap;margin:0 auto 0 26px}
.mainnav a{font-size:19px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent;padding:6px 0}
.mainnav a:hover{border-bottom-color:var(--care)}
.nav-login{color:var(--care-dark)!important;border-bottom-color:#D6DEE9!important}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0}
.chips li{font-size:18px;font-weight:700;color:var(--care-dark);background:var(--care-tint);
  border:1px solid #D6DEE9;border-radius:999px;padding:9px 16px}
.lang{display:flex;gap:6px;flex-wrap:wrap}
.lang a{font-size:17px;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink-soft);border:1px solid transparent}
.lang a[aria-current]{background:var(--care-tint);color:var(--care-dark);font-weight:700;border-color:#D6DEE9}
.lang a:hover{border-color:var(--line)}

/* ---------- hero ----------
   The copy is a centred statement block now, and the two big pictures are full-width
   sections of their own underneath it (owner's overhaul, 2026-09-17). The old two-column
   grid only ever gave the picture 450px, which is not a hero. */
.hero{padding:28px 0 6px;text-align:center}
.hero-copy{max-width:880px;margin:0 auto}
.hero-copy .lede{margin-left:auto;margin-right:auto}
.hero-copy .chips{justify-content:center}
.eyebrow{display:inline-block;font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);background:#EDF1F7;border-radius:999px;padding:8px 18px;margin:0 0 22px}
h1{font-family:var(--font-head);font-size:clamp(36px,5.5vw,58px);line-height:1.08;letter-spacing:.005em;margin:0 0 16px;font-weight:700}
h1 em{font-style:normal;color:var(--care-dark);background:linear-gradient(transparent 58%, #C7D6EC 58%);padding:0 4px;border-radius:4px}
.lede{font-size:clamp(21px,2.3vw,24px);color:var(--ink-soft);max-width:33em;margin:0 auto 26px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;font-family:var(--font-head);font-weight:700;letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--care);color:#fff;box-shadow:0 6px 0 var(--care-dark)}
.btn-primary:hover{background:#0B3A6B}
.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 var(--care-dark)}
.btn-hero{font-size:clamp(23px,2.8vw,28px);padding:22px 40px;width:min(520px,100%);min-height:74px}
.under-btn{font-size:20px;color:var(--ink-soft);margin:14px 0 0}
.hero-note{font-size:18px;color:var(--ink-soft);max-width:38em;margin:26px auto 0}

/* ---------- before / after ----------
   The repaired half sits to the LEFT of the divider and grows as the divider is dragged right, so
   dragging right reveals the repair rather than pushing it off the frame (owner, 2026-09-17). */
.ba{margin:38px 0 0;position:relative}
.ba-stage{
  position:relative;overflow:hidden;border-radius:var(--radius);
  box-shadow:var(--shadow);background:#0B1626;touch-action:pan-y;
  cursor:ew-resize;
}
.ba-stage img{user-select:none;-webkit-user-drag:none}
.ba-before{position:relative;width:100%;height:auto;display:block;z-index:1}
.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);will-change:clip-path}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;z-index:3;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 22px rgba(0,0,0,.35)}
.ba-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:#fff;color:var(--care-dark);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.85);pointer-events:none
}
.ba-grip svg{width:30px;height:30px}
.ba-tag{
  position:absolute;bottom:16px;z-index:4;font-size:16px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:9px 15px;border-radius:999px;color:#fff;background:rgba(22,35,42,.72);backdrop-filter:blur(4px)
}
.ba-tag-before{right:16px}
.ba-tag-after{left:16px;background:rgba(0,29,61,.9)}
.ba-hint{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:5;
  background:rgba(255,255,255,.95);color:var(--care-dark);font-size:17px;font-weight:800;
  padding:10px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.22);pointer-events:none;
  animation:hintpulse 2.6s ease-in-out infinite
}
@keyframes hintpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
.ba-cap-small{font-size:19px;color:var(--ink-soft);margin:14px 0 0;text-align:left}
.ba-caption{font-size:19px;color:var(--ink-soft);text-align:center;margin:16px 0 0}
.ba-live{font-weight:800;color:var(--clay);text-transform:uppercase;letter-spacing:.05em}

/* ---------- sections ---------- */
section{padding:64px 0}
h2{font-family:var(--font-head);font-size:clamp(30px,4.4vw,46px);line-height:1.14;letter-spacing:.005em;margin:0 0 14px;font-weight:700}
h3{font-family:var(--font-head);font-size:23px;margin:0 0 6px;font-weight:700;letter-spacing:0}
.section-lede{font-size:21px;color:var(--ink-soft);max-width:38em;margin:0 0 36px}
.proof{background:linear-gradient(180deg,var(--cream),#EFEFF1 60%,var(--cream))}
.proof-grid{display:grid;grid-template-columns:1fr;gap:30px}
.proof-grid .ba{margin:0}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.steps li{display:flex;gap:18px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
.steps p{margin:0;color:var(--ink-soft);font-size:20px}
.num{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--care-tint);color:var(--care-dark);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800
}

/* ---------- pricing ---------- */
.pricing{background:var(--cream)}
.plans{display:grid;grid-template-columns:1fr;gap:22px}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow);position:relative}
.plan-featured{border:3px solid var(--care)}
.badge{position:absolute;top:-16px;left:28px;background:var(--care);color:#fff;font-size:16px;font-weight:800;padding:8px 16px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.price{font-size:56px;font-weight:800;letter-spacing:-2px;margin:10px 0 0;line-height:1}
.cur{font-size:30px;vertical-align:super;margin-right:2px}
.per{color:var(--ink-soft);margin:6px 0 18px;font-size:19px}
.plan ul{margin:0;padding-left:0;list-style:none}
.plan li{padding:9px 0 9px 34px;position:relative;font-size:20px;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li::before{content:"";position:absolute;left:6px;top:20px;width:12px;height:7px;border-left:3px solid var(--care);border-bottom:3px solid var(--care);transform:rotate(-45deg)}
.pricing-note{font-size:20px;color:var(--ink-soft);margin-top:26px}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:1fr;gap:20px}
.trust-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.trust-item p{margin:0;color:var(--ink-soft);font-size:20px}

/* ---------- faq ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin-bottom:14px;box-shadow:var(--shadow)}
.faq summary{font-size:22px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-size:30px;line-height:1;color:var(--care);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;color:var(--ink-soft);font-size:20px}

/* ---------- footer ---------- */
.site-footer{background:#001D3D;color:#DCE5F3;padding:52px 0}
.footer-inner{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.footer-brand{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:.07em;text-transform:uppercase;color:#fff;margin:0 0 8px}
.footer-note{color:#B9C6DA;font-size:20px;margin:0;max-width:34em}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.site-footer nav a{color:#DCE5F3;font-size:19px}

/* ---------- sticky cta ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transform:translateY(120%);transition:transform .32s ease;box-shadow:0 -6px 24px rgba(22,35,42,.09)
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-text{font-size:19px;font-weight:700}
.sticky-cta .btn{padding:18px 26px;font-size:20px;min-height:64px;flex:0 0 auto}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(3,1fr)}
  .trust-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .header-inner{gap:10px}
  .mainnav{order:3;width:100%;margin:0;gap:18px;justify-content:flex-start;border-top:1px solid var(--line);padding-top:12px}
  .lang{order:2;margin-left:auto}
}
@media (max-width:600px){
  body{font-size:20px}
  .wrap{padding:0 18px}
  .hero{padding:34px 0 12px}
  section{padding:48px 0}
  .ba-grip{width:64px;height:64px}
  .ba-grip svg{width:26px;height:26px}
  .sticky-text{display:none}
  .sticky-cta .btn{width:100%;justify-content:center}
  .steps li{padding:20px}
  .plan{padding:26px 22px}
}

/* RTL-ready: flip the divider direction under dir="rtl" */
[dir="rtl"] .ba-after{clip-path:inset(0 0 0 calc(100% - var(--pos,50%)))}
[dir="rtl"] .ba-tag-before{right:auto;left:16px}
[dir="rtl"] .ba-tag-after{left:auto;right:16px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}


/* ---------- mobile: the picture is its own section now ----------
   The height caps that used to crop the hero band (28vh/31vh/33vh/46vh) are gone: they
   existed only to keep the button on the first screen while the picture sat beside the
   copy. The copy sits above the picture now, and the annotated frame must be COMPLETE or
   the numbered points fall outside it. */
@media (max-width:979px){
  .ba-hero .ba-caption{font-size:15px;margin-top:8px}
  .hero-note{text-align:center}
}

/* ---------- compact language picker --------------------------------------
   The full row of language links is gone (owner's call 2026-09-15): one dropdown
   pill on the right of the header, at every width. */
.langpick{display:block;position:relative;margin-left:auto}
.langpick summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-size:18px;font-weight:700;color:var(--care-dark);background:var(--care-tint);
  border:1px solid #D6DEE9;border-radius:999px;padding:12px 18px;min-height:52px
}
.langpick .chev{transition:transform .2s ease}
.langpick[open] .chev{transform:rotate(180deg)}
.langpick summary::-webkit-details-marker{display:none}
.langpick[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.langpick-menu{
  position:absolute;right:0;top:100%;z-index:50;background:#fff;border:1px solid var(--line);
  border-radius:16px;border-top-right-radius:0;box-shadow:var(--shadow);padding:8px;min-width:200px
}
.langpick-menu a{display:block;padding:14px 16px;font-size:19px;text-decoration:none;color:var(--ink);border-radius:10px}
.langpick-menu a[aria-current]{background:var(--care-tint);font-weight:700}

/* ---------- header density ---------- */
.nav-login{border-bottom:0!important;color:var(--care-dark)!important}
@media (max-width:979px){
  .lang{display:none}
  .langpick{display:block}
  .header-inner{min-height:0;padding-top:12px;padding-bottom:12px}
  .mainnav{order:3;width:100%;margin:10px 0 0;gap:16px;border-top:1px solid var(--line);padding-top:12px}
  .mainnav a{font-size:18px}
}
/* eyebrow: brand navy tint + sentence case reads faster than all caps */
.eyebrow{color:#0B3A6B!important;background:#E9EEF6!important;text-transform:none!important;font-size:19px!important;letter-spacing:0!important}


/* ---------- brand identity (2026-09-15): Montserrat for UI, Open Sans for reading ---------- */
.mainnav a,.num,.badge,.faq summary,.price,.sticky-text,.ba-tag,.ba-hint,
.chips li,.langpick summary,.trust-item h3,.plan h3,
.steps li b,.plan li b{font-family:var(--font-head)}
.mainnav a,.faq summary,.price,.sticky-text{font-weight:700}
.num{font-weight:700}


/* ---------- mobile: fit picture + button on the first screen ---------- */
@media (max-width:979px){
  .hero{padding-top:22px}
  .eyebrow{font-size:17px!important;padding:7px 14px;margin-bottom:14px}
  .hero-copy > h1{font-size:clamp(32px,8.6vw,42px);letter-spacing:-.8px;margin-bottom:14px}
  .ba-hero{margin:0}
  .ba-hero .ba-hint{font-size:16px;padding:8px 14px;top:12px}
  .hero-copy > .lede{font-size:20px;margin:16px auto 18px;max-width:26em}
  .btn-hero{font-size:24px;padding:22px 20px;min-height:72px}
  .under-btn{margin-top:14px;font-size:19px}
  .chips{margin-top:18px;gap:8px}
  .chips li{font-size:16px;padding:7px 12px}
  .mainnav a:nth-child(2){display:none}   /* "How it works" is still on the page below */
  .mainnav{gap:18px}
}


/* ---------- mobile: get BOTH the proof and the button on the first screen ---------- */
@media (max-width:979px){
  /* header: one compact row for the nav instead of two */
  .header-inner{min-height:0;padding:10px 18px}
  .mainnav{
    order:3;width:100%;margin:8px 0 0;padding-top:9px;gap:16px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)
  }
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{font-size:17px;white-space:nowrap;padding:4px 0}
  .hero{padding-top:18px}
  .hero-copy > h1{font-size:clamp(30px,7.6vw,38px);margin-bottom:12px}
  .ba-caption{font-size:16px;margin-top:10px}
  .hero-copy > .lede{font-size:19px;margin:12px auto 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .btn-hero{font-size:22px;padding:18px 16px;min-height:62px}
  .under-btn{font-size:17px;margin-top:12px}
  .chips{margin-top:20px;gap:8px}  /* now under the picture: they reassure without pushing it off screen */
}

.lede-short{display:none}
@media (max-width:979px){
  /* NOTE: must out-specify `.hero-copy > .lede{display:-webkit-box}` above, otherwise
     both ledes render and the hero button falls below the fold (found 2026-09-14). */
  .hero-copy > .lede-full{display:none}
  .hero-copy > .lede-short{display:block;font-size:20px}
}


/* ---------- brand identity: the first screen after the Montserrat switch ----------
   Montserrat is wider than the system font it replaced. On a 390x844 phone the
   wider wordmark pushed the language pill onto a second header row and the wider
   eyebrow onto a second line, so the primary button fell below the fold
   (measured on the live site 2026-09-15: header 201px, button top 837 of 844).
   The smallest changes that restore the 45+ rule — proof AND button on the first
   screen: header 145px, button 739..812 with 32px to spare. The proof picture
   itself is untouched. */
@media (max-width:600px){
  .brand-name{font-size:17px;letter-spacing:.04em}
  /* The language pill has to share the row with the wordmark on a 390px phone.
     The globe icon gives way to the chevron — the chevron is the cue that says
     "this is a dropdown", and the pill stays a comfortable tap target. */
  .langpick summary{padding:10px 14px;font-size:17px;gap:6px}
  .langpick summary svg:first-child{display:none}
}
@media (max-width:979px){
  .eyebrow{font-size:16px!important;padding:5px 12px!important}
  .ba-hero .ba-caption{font-size:15px;margin-top:6px}
  .hero{padding-top:12px}
}

/* ---------- legal & policy pages (terms, privacy, refunds, contact) ---------- */
.legal{padding:54px 0 76px}
.legal .wrap{max-width:780px}
.legal h1{font-family:var(--font-head);font-weight:700;font-size:clamp(30px,4.4vw,44px);letter-spacing:.01em;margin:0 0 10px;line-height:1.16}
.legal .updated{color:var(--ink-soft);font-size:17px;margin:0 0 30px}
.legal h2{font-family:var(--font-head);font-weight:700;font-size:clamp(21px,2.6vw,26px);margin:40px 0 12px;line-height:1.25}
.legal h3{font-family:var(--font-head);font-weight:700;font-size:19px;margin:26px 0 8px}
.legal p,.legal li{font-size:18px;line-height:1.72}
.legal p{margin:0 0 16px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:24px}
.legal li{margin:9px 0}
.legal .back{margin:48px 0 0;font-weight:700}
.callout{background:var(--care-tint);border:1px solid #D6DEE9;border-radius:var(--radius);padding:20px 22px;margin:0 0 26px}
.callout p{margin:0;font-size:18px}

/* ---------- contact form ---------- */
.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin:26px 0 30px;box-shadow:var(--shadow)}
.contact-form label{display:block;font-weight:700;font-size:17px;margin:0 0 7px}
.contact-form .req{color:var(--clay)}
.contact-form input,.contact-form textarea{width:100%;font:inherit;font-size:18px;color:var(--ink);
  background:#fff;border:1px solid #D6DEE9;border-radius:14px;padding:14px 16px;margin:0 0 18px}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid var(--care-tint);border-color:var(--care)}
.contact-form textarea{resize:vertical;min-height:150px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.contact-form .btn{width:100%;font-size:20px;padding:18px 24px}
.formnote{color:var(--ink-soft);font-size:16px;margin:14px 0 0;text-align:center}
.formstate{margin:16px 0 0;border-radius:14px;font-size:18px}
.formstate.good{padding:14px 16px;background:#E8F5EE;border:1px solid #BEE3CD;color:#1B5E3A}
.formstate.bad{padding:14px 16px;background:#FDECEC;border:1px solid #F3C6C6;color:#8A2B2B}
.formstate:empty{padding:0;background:none;border:0}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){
  .legal{padding:34px 0 60px}
  .field-row{grid-template-columns:1fr}
  .contact-form{padding:18px}
}

/* On a phone the section nav must never run past the edge of the screen. Measured at 390px:
   with the longer labels on the policy pages the last item ("Log in") ended 7px past the
   viewport and was cut off. Giving the nav its own full row lets the links wrap safely inside
   it — and it fixes the same latent risk on the home page. */
@media (max-width:640px){
  .header-inner{gap:10px}
  .mainnav{flex:1 1 100%;margin:0;gap:8px 18px}
  .mainnav a{font-size:17px;padding:4px 0}
  .brand-name{font-size:19px}
  .mark{width:40px;height:40px}
}

/* Policy pages: unlike the home page, the header nav here must show every link. On the home
   page the nav becomes a swipeable strip with one item hidden; on a policy page that leaves
   "Log in" off-screen (measured: it ended 13px past a 390px viewport). Scoped to .legal-page so
   the home page header is untouched. */
@media (max-width:900px){
  .legal-page .mainnav{flex:1 1 100%;flex-wrap:wrap;overflow:visible;margin:0;gap:8px 18px;
    border-top:0;padding-top:0;order:3;width:100%}
  .legal-page .mainnav a{font-size:17px;white-space:normal}
  .legal-page .mainnav a:nth-child(2){display:block}   /* do not hide a link on these pages */
}


/* ---------- showcase: the two big pictures (owner's overhaul, 2026-09-17) ----------
   Each is a full-width section of its own under the copy. The sample grid stays in
   .proof, smaller, at the bottom of the page. */
.showcase{padding:10px 0 6px}
.showcase .ba{margin:0}
.showcase .ba-stage{box-shadow:0 12px 40px rgba(0,25,55,.18)}

/* ---------- the numbered faults on the first picture ----------
   A dot sits on the fault itself, a curved leader runs to a label, and both clear as the
   divider passes them, so the drag is what "cleans" the photograph. Positions come from
   app.js using data-x/data-y, which are the PHOTOGRAPH'S OWN coordinates: the mapping from
   photograph to frame is worked out at runtime, so a dot lands on the same fault on a
   1440px desktop and on a 390px phone, cropped or not. */
.diag{position:absolute;inset:0;z-index:3;pointer-events:none}
.diag-item{position:absolute;left:var(--x,50%);top:var(--y,50%);width:0;height:0;
  transition:opacity .34s ease,transform .34s ease}
.diag-item.is-cleared{opacity:0;transform:scale(.82)}
/* An arrowhead with its tip exactly on the fault and a short shaft running off towards the label.
   It replaces a filled 22px disc (30px on a phone) that covered the very detail it pointed at. The tip
   is what sits on the coordinate, so nothing is pushed off-target by half a bubble, and the rotations
   are the leader line's own, so the two always agree. */
.diag-arrow{position:absolute;left:-17px;top:-7px;width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:17px solid #fff;
  filter:drop-shadow(0 0 1.7px rgba(0,18,39,.98)) drop-shadow(0 1px 3px rgba(0,18,39,.45))}
.diag-arrow::after{content:"";position:absolute;top:-1.5px;right:17px;width:26px;height:3px;
  border-radius:2px;background:#fff;box-shadow:0 0 0 2px rgba(0,18,39,.7)}
.diag-e .diag-arrow{transform:rotate(0deg)}
.diag-w .diag-arrow{transform:rotate(180deg)}
.diag-s .diag-arrow{transform:rotate(90deg)}
.diag-se .diag-arrow{transform:rotate(28deg)}
.diag-sw .diag-arrow{transform:rotate(152deg)}
.diag-ne .diag-arrow{transform:rotate(-14deg)}
.diag-e .diag-arrow,.diag-w .diag-arrow,.diag-s .diag-arrow,
.diag-ne .diag-arrow,.diag-se .diag-arrow,.diag-sw .diag-arrow{transform-origin:17px 7px}
.diag-lead{position:absolute;left:0;top:-60px;width:170px;height:120px;overflow:visible}
.diag-lead path{fill:none;stroke-linecap:round}
/* The line is white drawn over a navy halo. A white-only line disappears on the pale sky and
   the shopfront, which is exactly where half of these faults live. */
.diag-lead .lead-halo{stroke:rgba(0,18,39,.9);stroke-width:6.5}
.diag-lead .lead-line{stroke:#fff;stroke-width:3}
.diag-e .diag-lead{transform:rotate(0deg)}
.diag-w .diag-lead{transform:rotate(180deg)}
.diag-s .diag-lead{transform:rotate(90deg)}
.diag-se .diag-lead{transform:rotate(28deg)}
.diag-sw .diag-lead{transform:rotate(152deg)}
.diag-ne .diag-lead{transform:rotate(-14deg)}
.diag-e .diag-lead,.diag-w .diag-lead,.diag-s .diag-lead,
.diag-ne .diag-lead,.diag-se .diag-lead,.diag-sw .diag-lead{transform-origin:6px 60px}
.diag-chip{
  position:absolute;white-space:nowrap;font-family:var(--font-head);font-weight:700;font-size:15px;
  color:#001227;background:rgba(255,255,255,.97);border:2px solid rgba(0,18,39,.85);
  border-radius:999px;padding:7px 13px;box-shadow:0 4px 14px rgba(0,18,39,.3)
}
.diag-e .diag-chip{left:176px;top:-18px}
.diag-w .diag-chip{left:-152px;top:-18px;transform:translateX(-100%)}
.diag-s .diag-chip{left:0;top:134px;transform:translateX(-50%)}
.diag-se .diag-chip{left:132px;top:52px}
.diag-sw .diag-chip{left:-126px;top:52px;transform:translateX(-100%)}
/* The fourth point sits low on the road, 600px from its neighbour. An east label there put it 2px out
   of the bottom of the frame, and two east arrows side by side read as one fault: it points up-right. */
.diag-ne .diag-chip{left:150px;top:-56px}

/* The same list, spelled out. This is the accessible copy of the labels (the arrows are
   aria-hidden), and on a phone it replaces the labels outright: chips on a 354px frame would cover
   the very fault they point at. It reads as one sentence, because the arrows carry no numbers. */
.diag-legend{list-style:none;padding:0;margin:18px 0 0;font-size:17px;color:var(--ink-soft)}
.diag-legend li{display:inline}
.diag-legend li+li::before{content:" \00b7 ";color:var(--care-dark);font-weight:700}
/* The corner badges belong to their own half. Push the divider to one end and the far half is
   a sliver, so its badge has to go rather than float over the other side's content. */
.ba-tag{transition:opacity .3s ease}
.ba.is-before-only .ba-tag-after{opacity:0}
.ba.is-after-only .ba-tag-before{opacity:0}

@media (min-width:980px){
  /* sighted visitors read the labels on the picture; assistive tech still gets the list */
  .diag-legend{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Five samples at three across leaves two on the last row: a grid leaves them stranded on
     the left, flex centres them. */
  .proof-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
  .proof-grid .ba{flex:0 1 calc((100% - 48px) / 3)}
}
@media (max-width:979px){
  /* on a phone there are no chips: the arrows show where, the list underneath says what */
  .diag-lead,.diag-chip{display:none}
}
@media (max-width:520px){
  .proof-grid{gap:22px}
}
.proof-grid .ba-caption,.proof-grid .ba-cap-small{font-size:17px}

/* On a phone the "Drag to compare" pill sat on top of one of the numbered points at the top
   centre. Top-left is the one part of the frame that carries no point, so it moves there. */
@media (max-width:979px){
  .ba-hero .ba-hint{left:16px;transform:none}
  .ba-hero .ba-hint{animation:none}
}

/* The reassurance chips sit under the big picture rather than above it: they used to push the
   picture off the first screen entirely (measured at 1440x900 on 2026-09-17: the picture began
   at y=858 of 900, so a visitor saw 42px of it). Every claim is still on the page. */
.showcase .chips{justify-content:center;margin-top:24px}

/* The sample strip: one uniform card shape. Five photographs with five different shapes made
   ragged rows with captions at five different heights, which read as unfinished rather than as
   a gallery (owner's overhaul run, 2026-09-17). Every card is the same 4:3 box and the
   photograph fills it, biased towards the top so a head stays in frame. */
@media (min-width:760px){
  .proof-grid .ba-stage{aspect-ratio:4 / 3;height:auto;background:#EFEFF1}
  .proof-grid .ba-before,
  .proof-grid .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .proof-grid .ba-cap-small{min-height:3em}
}

/* The two corner badges go on a phone: the picture is only ~266px tall there and the dust and hair
   points sit in the bottom band, so the badges would land on two of the numbered points. The
   caption now says which side is which in words instead. */
@media (max-width:979px){
  .ba-hero .ba-tag{display:none}
}

/* ---------- two people, one photograph (owner, 2026-09-17) ----------
   The two photographs side by side with a plus between them, and the result underneath. Chosen over a
   second slider: this reads at a glance, needs no gesture, and takes a fraction of the height. The
   movement is small on purpose: the two come in from their own sides, the plus beats, the result rises
   into place. All three are percentages, so a phone and a desktop get the same arrangement. */
.pairup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4% 5%;
  max-width:460px;margin:0 auto 24px}
.pairup-shot{margin:0;background:#fff;border-radius:14px;padding:1.6%;box-shadow:var(--shadow)}
.pairup-shot:first-of-type{animation:pairup-left .8s cubic-bezier(.2,.7,.3,1) both}
.pairup-shot:last-of-type{animation:pairup-right .8s cubic-bezier(.2,.7,.3,1) both}
.pairup-shot img{display:block;width:100%;height:auto;border-radius:9px}
.pairup-plus{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,4.4vw,54px);
  color:var(--care-dark);line-height:1;animation:pairup-beat 3.2s ease-in-out infinite}
.pairup-result{margin:0 auto;max-width:660px}
.pairup-result img{display:block;width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,25,55,.18);animation:pairup-rise .9s .3s cubic-bezier(.2,.7,.3,1) both}
.pairup-result .ba-caption{margin-top:14px}
@keyframes pairup-left{from{transform:translateX(-4%) scale(.97);opacity:.55}to{transform:none;opacity:1}}
@keyframes pairup-right{from{transform:translateX(4%) scale(.97);opacity:.55}to{transform:none;opacity:1}}
@keyframes pairup-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes pairup-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:600px){
  .pairup{max-width:420px;gap:3% 4%;margin-bottom:20px}
  .pairup-plus{font-size:32px}
}