
body{padding-bottom:0}
.claimbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#fff;
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.5);border-top:3px solid var(--coral)}
.claimbar .wrap{display:flex;align-items:center;gap:16px;justify-content:space-between;
  min-height:64px;padding-block:10px;flex-wrap:wrap}
.claimbar p{margin:0;font-size:.95rem;color:color-mix(in srgb,#fff 84%,var(--blue))}
.claimbar b{color:#fff}
.claimbar .cb-count{display:inline-block;margin-left:6px;color:var(--coral);font-weight:700}
.claimbar .cb-short{display:none}
.claimbar .btn{min-height:44px;padding:0 20px;font-size:.92rem}
main{padding-bottom:90px}
@media (max-width:640px){
  /* One slim strip, so the client's own call to action keeps the spotlight. */
  .claimbar{border-top-width:2px}
  .claimbar .wrap{flex-wrap:nowrap;min-height:50px;padding-block:6px;gap:10px}
  .claimbar p{font-size:.8rem;line-height:1.3;min-width:0}
  .claimbar p b{display:block;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .claimbar .cb-count{display:block;margin-left:0;font-size:.78rem}
  .claimbar .cb-long{display:none}
  .claimbar .cb-short{display:inline}
  .claimbar .btn{flex:none;min-height:38px;padding:0 14px;font-size:.82rem}
  .claimbar .btn svg{display:none}
  /* The visitor-facing bar sits above it, which is what the owner is judging. */
  .actionbar{bottom:50px;box-shadow:0 -6px 18px -10px color-mix(in srgb,var(--navy) 28%,transparent)}
  .actionbar .btn{min-height:46px;font-size:.94rem}
  main{padding-bottom:112px}
}
.claim{background:linear-gradient(180deg,var(--aqua) 0%,#fff 100%)}
.claim-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:clamp(24px,4vw,44px);align-items:start}
/* Card is first in the DOM (phones see the price first); on desktop it is
   ordered back into the right column beside the inclusions. */
.claim-listwrap{order:1;min-width:0}
.claim-card{order:2}
.claim-listhead{font-size:1.05rem;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em}
@media (max-width:900px){
  .claim-grid{grid-template-columns:1fr}
  .claim-listwrap,.claim-card{order:0}
  .claim-listhead{margin-top:8px}
}
.claim-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
/* Two columns at desktop so the inclusions and the price card finish at
   roughly the same height instead of leaving a hole beside the last rows. */
@media (min-width:1100px){
  .claim-list{grid-template-columns:1fr 1fr}
  /* Odd item count: let the last one run full width rather than sit as an orphan. */
  .claim-list li:last-child:nth-child(odd){grid-column:1/-1}
}
.claim-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 18px;box-shadow:var(--shadow)}
.claim-list .ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--aqua-2);
  display:grid;place-items:center;color:var(--blue)}
.claim-list .ico svg{width:22px;height:22px}
.claim-list b{display:block;color:var(--navy);font-size:1.02rem}
.claim-list span{color:var(--muted);font-size:.93rem;line-height:1.55}
.claim-card{position:sticky;top:100px;background:var(--navy);color:color-mix(in srgb,#fff 84%,var(--blue));border-radius:var(--radius);
  padding:clamp(24px,3vw,32px);box-shadow:var(--shadow-lg)}
.claim-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.claim-price b{font-size:clamp(2.4rem,2rem + 2vw,3.2rem);color:#fff;line-height:1;letter-spacing:-.03em}
.claim-price span{color:color-mix(in srgb,#fff 66%,var(--blue));font-size:.95rem}
.claim-anchor{margin:12px 0 0;font-size:.92rem;color:color-mix(in srgb,#fff 66%,var(--blue));padding-left:14px;
  border-left:3px solid var(--coral);line-height:1.5}
.claim-sub{margin:14px 0 20px;font-size:.95rem;color:color-mix(in srgb,#fff 66%,var(--blue))}
.claim-count{margin:14px 0 0;text-align:center;font-size:.9rem;color:var(--coral);font-weight:700;min-height:1.2em}
.claim-mini{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;font-size:.92rem}
.claim-mini li{display:flex;gap:10px;align-items:flex-start}
.claim-mini svg{width:18px;height:18px;flex:none;color:var(--sky);margin-top:3px}
/* Declared after the base rules above so it wins on source order: in one
   column a sticky card would float over the list it belongs beside. */
@media (max-width:900px){.claim-card{position:static;top:auto}}
.claim-mini svg{width:18px;height:18px}

/* No .crumbs rules here. base.css styles the breadcrumb now, and anything
   this file says about it loads later and silently wins on previews, which
   is how a live site and its own preview ended up looking different. */

