/* Bella Mobile colour swatch sheet — hero derived from #068CC6, navy-family support. No electric blue #0057FF. */
  :root{
    --cerulean:#0E9BD6;
    --navy:#000E19;
    --navy7:#13344F;
    --navy5:#2E5A7D;
    --cream:#F3F1EC;
    --black:#1B1B1B;
    --gray:#EEEEEE;
    --white:#FFFFFF;
    --ink:#000E19;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;background:#fff;color:var(--ink);
    font-family:"Host Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .page{max-width:1260px;margin:0 auto;padding:40px 28px 56px;}
  .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:26px;}
  .head h1{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0;}
  .head .sub{font-size:.82rem;color:#6B7A8D;letter-spacing:.02em;}
  .head .v{font-size:.74rem;font-weight:700;color:var(--cerulean);text-transform:uppercase;letter-spacing:.14em;}

  /* Layout mirrors the reference: tall hero left, 4-up grid right that wraps to two rows */
  .board{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr 1fr;
    grid-template-rows:auto auto;
    gap:14px;
  }
  .tile{position:relative;border-radius:4px;overflow:hidden;min-height:248px;padding:24px;display:flex;flex-direction:column;}
  .hero{grid-row:1 / span 2;min-height:510px;}
  .tile .label{font-size:.92rem;font-weight:700;letter-spacing:-.01em;}
  .specs{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:3px 18px;font-size:.78rem;line-height:1.5;font-variant-numeric:tabular-nums;}
  .specs .t{font-weight:600;opacity:.85;letter-spacing:.02em;}
  .border{border:1px solid #E2E2DE;}

  @media(max-width:920px){
    .board{grid-template-columns:1fr 1fr;}
    .hero{grid-row:auto;grid-column:1 / -1;min-height:240px;}
  }
  @media(max-width:560px){
    .board{grid-template-columns:1fr;}
    .hero{grid-column:auto;}
  }

  .note{margin-top:26px;font-size:.8rem;color:#6B7A8D;line-height:1.6;max-width:80ch;}
  .note strong{color:var(--ink);}
  .swatch-mark{position:absolute;top:18px;right:18px;height:46px;width:auto;}