/* Homepage composition; scoped apart from inner-page and legacy hero styles. */
.home-hero {
  --hh-ink:var(--text); --hh-muted:var(--muted); --hh-accent:var(--accent);
  position:relative; isolation:isolate; width:min(1240px,calc(100% - 4rem));
  margin:0 auto; padding:70px 0 30px; color:var(--hh-ink);
}
.hh-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:44px; }
.hh-copy,.hh-art { min-width:0; }
.hh-copy { position:relative; z-index:1; }
.hh-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--hh-accent); font:750 11px/1.5 var(--body-font); letter-spacing:.12em; text-transform:uppercase; }
.hh-eyebrow>span { display:block; flex:none; width:7px; height:7px; background:currentColor; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 10%,transparent); }
body[data-brand] .hh-title { max-width:none; margin:0; color:var(--hh-ink); font-family:var(--body-font); font-size:clamp(42px,4.5vw,64px); font-weight:780; letter-spacing:-.058em; line-height:1.045; text-transform:none; text-wrap:balance; }
.hh-title>span { display:block; }
.hh-title-accent { color:var(--hh-accent); }
.hh-lead { max-width:47ch; margin:24px 0 0; color:var(--hh-muted); font-size:17px; line-height:1.7; }
.hh-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; margin:25px 0 0; font-size:13px; color:var(--hh-muted); }
.hh-price strong { margin-left:3px; color:var(--hh-ink); font-size:26px; font-weight:780; letter-spacing:-.045em; }
.hh-price>span { font-size:12px; }
.hh-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-top:17px; }
.hh-actions a { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:13px 20px; font-size:13px; line-height:1.5; font-weight:750; text-decoration:none; border-radius:9px; transition:background .16s,transform .16s; }
.hh-actions svg,.hh-hardware>svg { width:20px; height:20px; flex:none; }
.hh-primary { background:var(--hh-accent); border:1px solid var(--hh-accent); color:var(--accent-ink); box-shadow:0 5px 15px color-mix(in srgb,var(--hh-accent) 14%,transparent); }
.hh-actions .hh-secondary { padding-inline:2px; color:var(--hh-ink); }
.hh-secondary svg { width:17px; height:17px; }
.hh-primary:hover { transform:translateY(-2px); }
.hh-secondary:hover { text-decoration:underline; text-underline-offset:5px; }
.home-hero a:focus-visible { outline:3px solid var(--hh-accent); outline-offset:5px; }
.hh-facts { display:flex; flex-wrap:wrap; gap:8px 17px; padding:0; margin:23px 0 0; list-style:none; color:var(--hh-muted); font-size:11px; line-height:1.5; }
.hh-facts li { display:flex; align-items:center; gap:5px; }
.hh-facts svg { width:14px; height:14px; flex:none; color:var(--hh-accent); }
.hh-hardware { display:flex; align-items:center; gap:14px; margin-top:34px; padding:17px 20px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--surface) 80%,transparent); color:var(--hh-muted); font-size:12px; line-height:1.5; text-decoration:none; transition:border-color .16s; }
.hh-hardware:hover { border-color:var(--hh-accent); }
.hh-hardware strong { color:var(--hh-ink); margin-right:4px; }
.hh-hardware-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:var(--surface-alt); color:var(--hh-accent); }
.hh-hardware-icon svg { width:23px; height:23px; }
.hh-hardware-price { margin-left:auto; white-space:nowrap; color:var(--hh-ink); font-size:19px; font-weight:750; letter-spacing:-.025em; }
.hh-hardware-price small { font-size:11px; font-weight:500; letter-spacing:0; color:var(--hh-muted); }
.hh-hardware>svg { color:var(--hh-accent); }

/* A: precise cobalt editorial. */
body[data-brand="site-a"] .home-hero { width:min(1320px,calc(100% - 5rem)); padding-top:62px; }
body[data-brand="site-a"] .hh-title { font-size:clamp(44px,4.8vw,70px); font-weight:850; letter-spacing:-.065em; }
body[data-brand="site-a"] .hh-title-accent { width:fit-content; padding-bottom:5px; border-bottom:4px solid #1557ff; }
body[data-brand="site-a"] .hh-actions a { border-radius:2px; }
body[data-brand="site-a"] .hh-primary { box-shadow:4px 4px 0 #0a0d16; }
body[data-brand="site-a"] .hh-hardware { border-radius:2px; border-color:#cad4ec; background:#fff; }

/* B: a creator studio with lime type and an oversized, open composition. */
body[data-brand="site-b"] .home-hero { padding-top:60px; }
body[data-brand="site-b"] .hh-layout { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:30px; }
body[data-brand="site-b"] .hh-title { font-size:clamp(46px,5.4vw,76px); font-weight:850; letter-spacing:-.07em; }
body[data-brand="site-b"] .hh-title-accent { color:#c6ff35; }
body[data-brand="site-b"] .hh-eyebrow { color:#f4a0cf; }
body[data-brand="site-b"] .hh-primary { color:#1a2110; border-radius:2px; box-shadow:4px 4px 0 #e950a8; }
body[data-brand="site-b"] .hh-hardware { background:#2c1732; border-radius:2px; }
body[data-brand="site-b"] .hh-hardware-icon { color:#211226; background:#c6ff35; }

/* C: an organised, spacious product workspace. */
body[data-brand="site-c"] .home-hero { width:min(1240px,calc(100% - 4rem)); padding-top:70px; }
body[data-brand="site-c"] .hh-layout { grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); gap:38px; }
body[data-brand="site-c"] .hh-title { font-size:clamp(42px,4.35vw,62px); }
body[data-brand="site-c"] .hh-hardware { background:#fff; border-color:#d2e1db; box-shadow:0 10px 30px #0c1b2a05; }

/* D: a warm, quiet storefront focused on the choice of device. */
body[data-brand="site-d"] .home-hero { margin-top:22px; padding:48px 38px 26px; border:1px solid #dfd1c0; border-radius:26px; background:#fffaf2; }
body[data-brand="site-d"] .hh-layout { gap:30px; }
body[data-brand="site-d"] .hh-title { font-size:clamp(42px,4.4vw,62px); font-weight:720; }
body[data-brand="site-d"] .hh-title-accent { font-family:Georgia,'Times New Roman',serif; font-weight:500; font-style:italic; letter-spacing:-.055em; }
body[data-brand="site-d"] .hh-hardware { border-color:#e1cfba; background:#f3e8d9; }
body[data-brand="site-d"] .hh-primary { background:#963b24; box-shadow:0 4px 0 #6e2a19; }

@media (min-width:1600px) { .home-hero { padding-top:86px; } }
@media (max-width:1050px) {
  .home-hero,body[data-brand="site-a"] .home-hero,body[data-brand="site-c"] .home-hero { width:calc(100% - 3rem); }
  .hh-layout,body[data-brand="site-b"] .hh-layout,body[data-brand="site-c"] .hh-layout { gap:24px; }
  body[data-brand] .hh-title { font-size:clamp(38px,4.6vw,51px); }
  .hh-lead { font-size:15px; }
  .hh-actions { gap:12px; }
  .hh-actions a { padding-inline:14px; font-size:12px; }
  .hh-facts { gap:7px 12px; }
  body[data-brand="site-d"] .home-hero { padding-inline:25px; }
}
@media (max-width:800px) {
  .home-hero,body[data-brand="site-a"] .home-hero,body[data-brand="site-c"] .home-hero,body[data-brand="site-b"] .home-hero { padding-top:40px; }
  .hh-layout,body[data-brand="site-b"] .hh-layout,body[data-brand="site-c"] .hh-layout { grid-template-columns:1fr; gap:26px; }
  .hh-copy { max-width:590px; }
  body[data-brand] .hh-title { font-size:clamp(40px,7.9vw,62px); }
  .hh-art { width:min(100%,560px); margin-inline:auto; }
  .hh-eyebrow { margin-bottom:17px; font-size:10px; }
  .hh-lead { max-width:53ch; margin-top:20px; font-size:16px; }
  .hh-price { margin-top:18px; }
  .hh-hardware { margin-top:22px; padding:14px; flex-wrap:wrap; gap:10px; }
  .hh-hardware>span:nth-child(2) { flex:1; }
  .hh-hardware>span:nth-child(2) strong { display:block; }
  .hh-hardware-price { margin-left:44px; }
  .hh-hardware>svg { margin-left:auto; }
  body[data-brand="site-d"] .home-hero { padding:32px 24px 20px; }
}
@media (max-width:480px) {
  .home-hero,body[data-brand="site-a"] .home-hero,body[data-brand="site-c"] .home-hero { width:calc(100% - 2rem); }
  body[data-brand] .hh-title { font-size:clamp(35px,10vw,47px); }
  .hh-actions { align-items:stretch; gap:10px 16px; }
  .hh-actions a { min-height:48px; padding:12px 15px; }
  .hh-facts { gap:8px 11px; font-size:10px; }
  .hh-lead { font-size:15px; line-height:1.65; }
  body[data-brand="site-d"] .home-hero { width:calc(100% - 1.2rem); padding-inline:18px; border-radius:19px; margin-top:12px; }
  .hh-hardware-price { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { .hh-actions a,.hh-hardware { transition:none; } .hh-primary:hover { transform:none; } }
/* The purchase scope stays adjacent to the commercial claim, including on mobile. */
.hh-purchase { margin: 18px 0; font-size: .92rem; line-height: 1.65; }
.hh-purchase a { color: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: .2em; }
.hh-purchase span { display: block; margin-top: 4px; color: inherit; max-width: 60ch; }
.home-purchase-facts .product-plan-table { min-width: 0; width: 100%; }
.home-purchase-facts td, .home-purchase-facts th { overflow-wrap: anywhere; }
.home-purchase-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:2rem 0; }
.home-purchase-benefits article { padding:1.6rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.home-purchase-index { color:var(--accent); font-size:.75rem; font-weight:800; }
.home-purchase-benefits h3 { margin:.8rem 0; color:var(--text); font-size:1.2rem; line-height:1.35; }
.home-purchase-benefits p { color:var(--muted); line-height:1.7; margin:0; }
.home-purchase-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; }
.home-purchase-actions > a:not(.btn) { color:var(--text); font-weight:650; text-underline-offset:.25em; }
.home-purchase-note { color:var(--muted); font-size:.85rem; line-height:1.6; margin:1rem 0 2rem; }
.home-purchase-details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.25rem 0; }
.home-purchase-details summary { cursor:pointer; color:var(--text); font-weight:650; line-height:1.6; }
.home-purchase-details .product-table-wrap { margin-top:1.5rem; }
@media (max-width:760px) {
  .home-purchase-benefits { grid-template-columns:1fr; }
  .home-purchase-facts .product-plan-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .home-purchase-facts .product-plan-table tr,.home-purchase-facts .product-plan-table tbody { display:block; width:100%; }
  .home-purchase-facts .product-plan-table th,.home-purchase-facts .product-plan-table td { display:block; width:auto; border:0; }
  .home-purchase-facts .product-plan-table tr + tr { border-top:1px solid var(--line); }
}