/* SUNHOMEE design-system — home sample (Phase 2)
   Scoped to body.ds-home so v10 detail pages do not get home CTA/teal rules; only global accent fallback unify (#e8891d→#e8871e) may cause ~0.1% pixel delta.
   Approved 2026-10-28: accent lock, CTA AA, teal demotion, btn radius 12.
*/
body.ds-home{
  --ds-cta-radius:12px;
}
/* Links: ink + underline (teal demoted). Static prices never underlined. */
body.ds-home a{
  color:var(--ink,#1d2433);
  text-decoration:underline;
  text-underline-offset:.12em;
  text-decoration-thickness:1px;
}
body.ds-home a.btn,
body.ds-home a.logo,
body.ds-home a.card,
body.ds-home nav.main a,
body.ds-home .market a,
body.ds-home .topbar a,
body.ds-home footer.site a,
body.ds-home .gal a,
body.ds-home .zoom,
body.ds-home .btn.ghost,
body.ds-home .btn.light,
body.ds-home .btn.sm{
  text-decoration:none;
}
body.ds-home nav.main a.on{
  color:var(--ink,#1d2433);
  font-weight:800;
}
/* Market switcher: keep contrast on navy / selected pills (P0 Claude) */

body.ds-home footer.site a{color:rgba(255,255,255,.82)}
body.ds-home footer.site a:hover{color:#fff}

/* Primary CTA: accent + ink (AA 5.85:1). Hover: same fill, slight darken — NOT accent-ink fill. */
body.ds-home .btn{
  border-radius:var(--ds-cta-radius);
  background:var(--accent,#e8871e);
  border-color:var(--accent,#e8871e);
  color:var(--ink,#1d2433);
}
body.ds-home .btn:hover{
  background:var(--accent,#e8871e);
  border-color:var(--accent,#e8871e);
  color:var(--ink,#1d2433);
  filter:brightness(.95);
}
body.ds-home .btn:focus-visible,
body.ds-home .btn.sm.hq:focus-visible{
  outline:2px solid var(--ink,#1d2433);
  outline-offset:2px;
}
/* Header Build uses the global primary style in site.css. */
/* Secondary */
body.ds-home .btn.light,
body.ds-home .btn.ghost{
  border-radius:var(--ds-cta-radius);
  background:transparent;
  color:var(--ink,#1d2433);
  border:1.5px solid var(--line,#e3e6eb);
  font-weight:700;
}
body.ds-home .home-hero .btn.light{
  color:#fff;
  border-color:rgba(255,255,255,.85);
}
body.ds-home .home-hero .btn.light:hover{
  filter:none;
  background:rgba(255,255,255,.08);
}
body.ds-home .home-hero .btn:hover{filter:brightness(.95)}

/* From price: ink, not teal; never underline */
body.ds-home .card .from b,
body.ds-home .from b{
  color:var(--ink,#1d2433)!important;
  text-decoration:none!important;
  font-variant-numeric:tabular-nums lining-nums;
}
body.ds-home .card .from,
body.ds-home .price-split,
body.ds-home .also{
  color:var(--muted,#5f6878);
  text-decoration:none;
}

/* Cards: single-layer, quieter */
body.ds-home .card.hc{
  border:1px solid var(--line,#e3e6eb);
  border-radius:14px;
  box-shadow:none;
  background:var(--card,#fff);
}
body.ds-home .card.hc:hover{
  border-color:#cfd5de;
}
body.ds-home .card.hc .btn.ghost{
  margin-top:auto;
}

/* Eyebrows / dealers band: no gold second accent */
body.ds-home .eyebrow{
  color:var(--muted,#5f6878)!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:700;
}
body.ds-home .band .eyebrow,
body.ds-home #dealers .eyebrow{
  color:#c9d1de!important;
}
body.ds-home .band{
  border-radius:16px;
}

/* Section rhythm */
body.ds-home .section-head h2{
  font-family:"Barlow Semi Condensed",Lato,system-ui,sans-serif;
  letter-spacing:-.01em;
}
body.ds-home .hc-note{
  color:var(--muted,#5f6878);
  max-width:72ch;
  margin-inline:auto;
  text-align:center;
}
body.ds-home .faq details summary{
  color:var(--ink,#1d2433);
  font-weight:700;
}
body.ds-home .faq a{
  text-decoration:underline;
}

/* Hero: one primary action already; tighten lead */
body.ds-home .home-hero .lead{
  max-width:30rem;
  color:#fff;
  opacity:1;
}
body.ds-home .home-hero .lead,
body.ds-home .home-hero .hero-link{
  text-shadow:none;
}
body.ds-home .home-hero .actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

body.ds-home .hc .fitl u,
body.ds-home .fitl u{
  color:var(--ink,#1d2433)!important;
  text-decoration:underline;
  text-underline-offset:.12em;
}

/* US-home v3: restrained type tiers and scoped responsive layout. */
body.ds-home{--fs-xl:clamp(3rem,5vw,4.25rem);--fs-card:1.5rem;--fs-l:1.75rem;--fs-m:1.125rem;--fs-s:1rem;--fs-xs:.8125rem;--sp-4:40px;--sp-5:64px;font-size:var(--fs-s)}
body.ds-home h1{font-size:var(--fs-xl)}
body.ds-home h2{font-size:var(--fs-l)}
body.ds-home h3,body.ds-home .card h3,body.ds-home .why:has(>i) h3{font-size:var(--fs-m)}
body.ds-home p,body.ds-home .home-hero p.lead,body.ds-home .btn,body.ds-home .btn.sm,body.ds-home .from,body.ds-home .from b,body.ds-home .faq summary,body.ds-home nav.main a{font-size:var(--fs-s)}
body.ds-home .eyebrow,body.ds-home .hc .mount,body.ds-home .price-split,body.ds-home .price-split b,body.ds-home .hc-note,body.ds-home footer.site,body.ds-home footer.site p,body.ds-home footer.site h4,body.ds-home footer.site .fine,body.ds-home .mkt-sw,body.ds-home .lb-count{font-size:var(--fs-xs)}
body.ds-home .eyebrow,body.ds-home .hc .mount,body.ds-home footer.site h4{letter-spacing:.08em}
body.ds-home .section{padding-block:var(--sp-5)}
body.ds-home .topbar{display:flex}
body.ds-home .topbar .market{display:none}
body.ds-home .topbar .wrap{width:100%}
body.ds-home .topbar .tagline{display:inline}
body.ds-home nav.main a.on{background:transparent}
body.ds-home header.site .wrap{gap:16px}
body.ds-home header.site .logo img{height:32px!important;width:auto}
body.ds-home .btn,body.ds-home .hero-link{min-height:44px}
body.ds-home .burger{font-size:var(--fs-l);min-width:44px;min-height:44px;text-align:center}
body.ds-home .home-hero,body.ds-home .band,body.ds-home footer.site{background-color:var(--navy)!important}
body.ds-home .home-hero h1{font-size:var(--fs-xl);max-width:20ch;line-height:1.08;text-wrap:balance}
body.ds-home .home-hero .hero-link{color:#fff;display:inline-flex;align-items:center;padding:10px 8px}
body.ds-home .home-hero .wrap{padding-block:40px}
body.ds-home .hc-row1{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
body.ds-home a.card.hc{padding:0 0 24px;text-align:center;overflow:hidden;gap:12px}
body.ds-home a.card.hc:hover{transform:none;box-shadow:0 8px 24px rgba(16,24,40,.08);border-color:#cfd5de}
body.ds-home .hc>h3,body.ds-home .hc>.mount,body.ds-home .hc>.from,body.ds-home .hc>.desc{margin:0 24px}
body.ds-home .hc>.img{order:-1;width:100%;aspect-ratio:4/3;margin:0 0 8px;border-radius:13px 13px 0 0}
body.ds-home .hc>.img img{object-position:var(--photo-position,center)}
body.ds-home .hc>h3{font-size:var(--fs-card)}
body.ds-home .hc>.from,body.ds-home .hc>.from>b{font-size:var(--fs-m)}
body.ds-home .hc>.mount{line-height:1.5;letter-spacing:.06em;color:var(--ink-2,#505a69)}
body.ds-home .hc>.desc{font-size:var(--fs-s);line-height:1.5;flex:0}
body.ds-home .hc>.img img{transition:transform 180ms ease}
body.ds-home a.card.hc:hover .img img{transform:scale(1.02)}
body.ds-home .hc>.from{flex:1}
body.ds-home .hc .price-split{display:block;margin-top:8px;padding-top:0;border-top:0;line-height:1.5}
body.ds-home .hc>.btn.ghost{align-self:center;justify-self:center;margin:8px auto 0}
@supports(grid-template-rows:subgrid){
  body.ds-home a.card.hc{display:grid;grid-row:span 6;grid-template-rows:subgrid}
  body.ds-home .hc>.img{grid-row:1}
  body.ds-home .hc>h3{grid-row:2}
  body.ds-home .hc>.mount{grid-row:3}
  body.ds-home .hc>.desc{grid-row:4}
  body.ds-home .hc>.from{grid-row:5}
  body.ds-home .hc>.btn{grid-row:6}
  body.ds-home .hc>.btn.ghost{align-self:end}
}
body.ds-home .why:has(>i){border-top:1px solid var(--line)}
body.ds-home .btn.ghost:hover{background:var(--bg);color:var(--ink);border-color:var(--line);filter:none}
body.ds-home .band .btn.light,body.ds-home .band .btn.light:hover{color:#fff;border-color:#fff;background:transparent;filter:none}
body.ds-home .band .btn.light:hover{background:rgba(255,255,255,.08)}
body.ds-home .gal img{transition:transform 180ms ease}
body.ds-home .gal a:hover img{transform:scale(1.02)}
body.ds-home .faq details{background:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:0}
body.ds-home .faq summary{padding:20px 0;min-height:44px;cursor:pointer}
body.ds-home .faq details p{padding:0 0 20px;margin:0}
body.ds-home .faq-toggle,body.ds-home .faq-more{display:none}
body.ds-home a:focus-visible,body.ds-home button:focus-visible,body.ds-home summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body.ds-home .home-hero a:focus-visible,body.ds-home .band a:focus-visible,body.ds-home footer.site a:focus-visible{outline-color:#fff}
body.ds-home .lb button{font-size:var(--fs-l);min-width:44px;min-height:44px}
@media(min-width:641px){
  body.ds-home .home-hero{min-height:min(78vh,680px)!important}
  body.ds-home .hero.home-hero:before{background:linear-gradient(90deg,rgba(8,12,18,.5),rgba(8,12,18,.45) calc(max(0px,(100% - var(--max))/2) + 20px + 30rem),rgba(8,12,18,0)),linear-gradient(rgba(8,12,18,.28),rgba(8,12,18,.28))!important}
}

@media(max-width:960px){body.ds-home .hc-row1{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  body.ds-home{--fs-xl:2.5rem}
  body.ds-home .section{padding-block:var(--sp-4)}
  body.ds-home .hc-row1{grid-template-columns:minmax(0,1fr);row-gap:32px}
  body.ds-home a.card.hc{display:flex;grid-row:auto;gap:12px}
  body.ds-home .hc>.btn.ghost{align-self:center}
  body.ds-home .home-hero .actions .btn{width:100%;justify-content:center}
  body.ds-home .hero.home-hero:before{background:none!important}
  body.ds-home .gal>a:nth-child(n+5){display:none}
  body.ds-home .faq-toggle{display:block;position:absolute;opacity:0;width:1px;height:1px}
  body.ds-home .faq-more{display:flex;align-items:center;min-height:44px;text-decoration:underline;cursor:pointer;margin-bottom:12px}
  body.ds-home .faq-toggle:focus-visible+.faq-more{outline:2px solid var(--ink);outline-offset:2px}
  body.ds-home .faq-toggle:not(:checked)~details:nth-of-type(n+6){display:none}
  body.ds-home .faq-toggle:checked+.faq-more{font-size:0}
  body.ds-home .faq-toggle:checked+.faq-more:after{content:'Fewer questions';font-size:var(--fs-s)}
}
@media(prefers-reduced-motion:reduce){
  body.ds-home .gal img,body.ds-home a.card.hc,body.ds-home a.card.hc .img img{transition:none!important;animation:none!important;transform:none!important;scroll-behavior:auto!important}
}
@media(max-width:640px){
  body.ds-home .faq>.wrap{display:flex;flex-direction:column}
  body.ds-home .faq-more{order:2;margin:12px 0 0}
}

body.ds-home .hc-note{max-width:960px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
body.ds-home .hc-note>span{max-width:72ch}
body.ds-home .hc-note .btn{margin:0;flex-shrink:0}

/* US-home v3c: phone-only polish; approved desktop rules stay untouched. */
@media (max-width:640px){
  body.ds-home .topbar{font-size:12px;line-height:16px;margin:0}
  body.ds-home .topbar .wrap{min-height:28px;padding-block:6px;justify-content:center;flex-wrap:nowrap;text-align:center}
  body.ds-home .topbar .tagline{white-space:nowrap}
  body.ds-home header.site .wrap{min-height:55px;padding-block:5.5px;gap:8px}
  body.ds-home header.site .logo{display:flex;align-items:center;min-height:44px}
  body.ds-home header.site .logo img{height:28px!important}
  body.ds-home header.site .burger{margin-left:auto;line-height:1;padding-block:8px}
  body.ds-home header.site nav.main{top:100%}
  body.ds-home header.site nav.main a{min-height:44px}

  /* Override the inline source ratio only on phones. The photo and its reserved
     space share one ratio; the separate photo layer never sits behind copy. */
  body.ds-home .home-hero{--arn:calc(4 / 3)!important;padding-top:calc(100vw / var(--arn,2));background-image:none!important}
  body.ds-home .hero.home-hero:before{inset:0 0 auto;height:calc(100vw / var(--arn,2));background-image:var(--mimg)!important;background-size:cover!important;background-position:var(--mpos,65% 70%)!important;background-repeat:no-repeat!important}
  body.ds-home .home-hero .wrap{padding-block:24px 32px}
  body.ds-home .home-hero .lead{max-width:none;line-height:1.5}
  body.ds-home .home-hero .actions .btn{display:flex;align-items:center;min-height:52px;border-width:1.5px;box-sizing:border-box}

  body.ds-home .section{padding-block:48px}
  body.ds-home .section-head{text-align:left;margin-bottom:24px}
  body.ds-home a.card.hc{gap:8px;padding-bottom:20px;border-radius:16px}
  body.ds-home .hc>.img{aspect-ratio:16/10;margin-bottom:0;border-radius:15px 15px 0 0}
  body.ds-home .hc>h3{font-size:1.375rem}
  body.ds-home .hc>.desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  body.ds-home .hc>.desc{flex:none;min-height:0;}
  body.ds-home .hc>.from{flex:none;}
  body.ds-home .hc .price-split{line-height:1.4;margin-top:4px}
  body.ds-home .hc>.btn.ghost{align-self:stretch;width:auto;margin:8px 24px 0;justify-content:center}
  body.ds-home .hc[href="slide-in-campers/"]{--photo-position:center 60%}
  body.ds-home .hc-note{flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  body.ds-home .hc-note .btn{width:100%;margin:0}

  body.ds-home .btn{border-radius:12px}
  body.ds-home .band,body.ds-home .cta2 .box{border-radius:16px}
  body.ds-home .gal a{border-radius:12px}
  body.ds-home .cta2 .box .btn,body.ds-home .band .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding-inline:12px}
  body.ds-home footer.site a{display:flex;align-items:center;min-height:44px}
}

/* US-home v3e: phone-only type & rhythm; desktop frozen. */
@media (max-width:640px){
  body.ds-home .home-hero .wrap{padding-block:32px 40px;text-align:center}
  body.ds-home .home-hero h1{font-size:2.375rem;font-weight:700;line-height:1.04;letter-spacing:-.01em;margin:0 auto 12px;max-width:16ch;text-wrap:balance}
  body.ds-home .home-hero p.lead{font-size:1.0625rem;line-height:1.47;color:rgba(255,255,255,.86);max-width:32ch;margin:0 auto;text-wrap:balance}
  body.ds-home .home-hero .actions{margin-top:28px;gap:12px}
  body.ds-home .home-hero .actions .btn{font-size:1rem;font-weight:700;letter-spacing:0}
  body.ds-home .home-hero .btn.light{border-color:rgba(255,255,255,.6)}

  body.ds-home a.card.hc{gap:0;padding-bottom:28px}
  body.ds-home .hc>h3{font-size:1.625rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:20px 24px 0}
  body.ds-home .hc>.mount{font-size:.75rem;font-weight:700;letter-spacing:.1em;line-height:1.4;color:var(--muted,#5f6878);margin:6px 24px 0}
  body.ds-home .hc>.desc{font-size:.9375rem;line-height:1.47;color:var(--muted,#5f6878);max-width:34ch;margin:12px auto 0;padding-inline:24px;text-wrap:balance}
  body.ds-home .hc>.from{margin:16px 24px 0;font-size:1.125rem;line-height:1.35}
  body.ds-home .hc>.from>b{font-size:1.125rem;font-weight:700}
  body.ds-home .hc .price-split{font-size:.8125rem;line-height:20px;margin-top:2px}
  body.ds-home .hc .price-split:first-of-type{margin-top:6px}
  body.ds-home .hc .price-split b{font-size:.8125rem;font-weight:400;color:var(--ink,#1d2433)!important}
  body.ds-home .card.hc .btn.ghost{display:inline-flex;align-items:center;justify-content:center;align-self:center;width:auto;min-width:184px;min-height:44px;padding:0 28px;margin:20px auto 0;font-size:.9375rem;font-weight:700}
}

/* AU two-card desktop row; phone layout and US cards retain their rules. */
@media(min-width:641px){
  body.ds-home .hc-row1.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(100% * 2 / 3);margin-inline:auto}
}

/* Keep secondary buttons aligned with the shared home-card grid. */
body.ds-home .hc>.btn.secondary{align-self:center;justify-self:center;margin:20px auto 0}
body.ds-home .hc-note{flex-direction:column;align-items:center;text-align:center;gap:12px}
body.ds-home .hc-note .btn.secondary{margin:0;flex-shrink:0;width:auto}
@supports(grid-template-rows:subgrid){body.ds-home .hc>.btn.secondary{grid-row:6}}

/* Frosted home hero secondary: shares the series hero WhatsApp treatment. */
body.ds-home .home-hero .actions{align-items:stretch}
body.ds-home .home-hero .actions .btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
body.ds-home .home-hero .actions .btn.hero-secondary{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.35);border-radius:12px;color:#fff;
  filter:none;
}
body.ds-home .home-hero .actions .btn.hero-secondary:hover{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff;filter:none;
}

/* Home quote actions use the same full-height rows as the shared quote cards. */
body.ds-home #quote .box{display:flex;flex-direction:column}
body.ds-home #quote .box>p{flex:1 0 auto}
body.ds-home #quote .box>.actions{margin-top:auto}
body.ds-home .quote-cards .quote-actions .btn{height:52px;min-height:52px;margin:0}