/* Homepage body (31 Oct 2026 design). Header, footer and palette come from shell.css. */
.home{background:var(--surface);color:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.home *,.home *::before,.home *::after{box-sizing:border-box}
.home a{color:inherit;text-decoration:none}
.home img,.home svg{display:block;max-width:100%}
.home .container{width:min(calc(100% - 48px),1180px);margin-inline:auto}
.home h1,.home h2,.home h3{margin:0;color:var(--navy);font-family:var(--serif);letter-spacing:-.025em}
.hero{padding:54px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:54px}
.home h1{font-size:clamp(48px,5.2vw,72px);line-height:.98;max-width:780px}
.accent{color:var(--coral)}
.subheadline{margin:22px 0 0;max-width:690px;color:var(--muted);font-size:20px;line-height:1.55}
.hero-photo{width:100%;height:auto;aspect-ratio:1.68/1;object-fit:cover;object-position:52% 42%;border-radius:28px;box-shadow:0 12px 34px rgba(25,49,86,.08);opacity:.96}
.trust-desktop{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px;color:var(--navy);font-weight:700}
.trust-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.trust-icon{width:28px;height:28px;flex:0 0 auto;color:var(--coral)}
.trust-item:nth-child(2) .trust-icon,.trust-item:nth-child(3) .trust-icon{color:#3975e8}
.trust-mobile{display:none}
.calculators{padding:8px 0 18px}
.calculator-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.calc-card{min-height:286px;border-radius:28px;padding:26px 28px;display:grid;grid-template-columns:.82fr 1.18fr;grid-template-rows:1fr auto;align-items:center;column-gap:24px;row-gap:14px;border:1px solid rgba(240,41,79,.08);box-shadow:0 10px 28px rgba(20,43,77,.05);overflow:hidden}
.calc-card.clothing{background:linear-gradient(135deg,#fff8fa 0%,#fff0f4 100%)}
.calc-card.shoes{background:linear-gradient(135deg,#f7fbff 0%,#eaf6ff 100%);border-color:rgba(57,117,232,.08)}
.card-art{grid-column:1;grid-row:1/3;display:grid;place-items:center;min-height:190px}
.product-thumb{width:min(225px,100%);height:auto;object-fit:contain;border-radius:18px;filter:drop-shadow(0 10px 15px rgba(25,49,86,.08))}
.card-copy{grid-column:2;grid-row:1;align-self:end}
.title-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:14px}
.calc-badge{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;color:#fff;flex:0 0 auto}
.clothing .calc-badge{background:linear-gradient(145deg,#ff8aa1,var(--coral))}
.shoes .calc-badge{background:linear-gradient(145deg,#4ca9ff,#1976d2)}
.calc-badge svg{width:31px;height:31px}
.card-copy h2{font-size:38px;line-height:1.02;color:#0f2f63}
.card-copy p{margin:14px 0 0;font-size:18px;color:#4d5e79}
.cta{grid-column:2;grid-row:2;justify-self:stretch;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 28px;border-radius:999px;background:#d91e43;color:#fff!important;font-size:18px;font-weight:800;box-shadow:0 8px 20px rgba(240,41,79,.19);transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.cta:hover{background:#c0173a;transform:translateY(-1px);box-shadow:0 10px 22px rgba(240,41,79,.25)}
.home .cta:focus-visible,.home .secondary-link:focus-visible{outline:3px solid rgba(240,41,79,.35);outline-offset:4px}
.arrow{font-size:24px;line-height:1}
.secondary{padding:0 0 22px}
.secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.secondary-link{min-height:94px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 5px 16px rgba(20,43,77,.035)}
.secondary-link:hover{border-color:#d7deea;box-shadow:0 8px 20px rgba(20,43,77,.07)}
.secondary-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--pink-tint);color:var(--coral)}
.secondary-link:nth-child(2) .secondary-icon{background:var(--blue-tint);color:#2c80d9}
.secondary-icon svg{width:31px;height:31px}
.secondary-copy h2{font-size:24px;line-height:1.05}
.secondary-copy p{margin:5px 0 0;color:var(--muted);font-size:16px}
.secondary-arrow{font-size:32px;color:var(--coral)}
.how{background:linear-gradient(90deg,#fff8f9 0%,#f7fbff 100%);border-top:1px solid #f2f4f8;border-bottom:1px solid #f2f4f8}
.how-inner{padding:32px 0 34px;display:grid;grid-template-columns:1fr 180px;gap:32px;align-items:center}
.how h2{font-size:34px;color:#0f2f63}
.how p{margin:10px 0 0;max-width:860px;color:#3f516f;font-size:17px}
.measure-art{justify-self:end;width:150px;opacity:.92}
.home .site-footer{margin-top:0}
@media (max-width:980px){
  .hero-grid{gap:28px}
  .calc-card{grid-template-columns:.74fr 1.26fr;padding:22px}
  .card-copy h2{font-size:32px}
}
@media (max-width:760px){
  .home .container{width:min(calc(100% - 28px),620px)}
  .hero{padding:26px 0 10px}
  .hero-grid{display:block}
  .home .hero-photo{display:none}
  .home h1{font-size:clamp(40px,12vw,52px);line-height:1;max-width:100%}
  .subheadline{margin-top:13px;font-size:16px;line-height:1.45}
  .trust-desktop{display:none}
  .trust-mobile{display:block;margin:12px 0 0;color:var(--navy);font-weight:750;font-size:16px;line-height:1.35}
  .calculators{padding:8px 0 12px}
  .calculator-grid{grid-template-columns:1fr;gap:10px}
  .calc-card{min-height:0;grid-template-columns:128px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:10px;padding:14px;border-radius:20px}
  .card-art{min-height:0;grid-column:1;grid-row:1;align-self:center}
  .product-thumb{width:122px;max-height:118px;object-fit:contain;border-radius:14px;filter:none}
  .card-copy{grid-column:2;grid-row:1;align-self:center}
  .title-row{grid-template-columns:44px 1fr;gap:9px}
  .calc-badge{width:44px;height:44px}
  .calc-badge svg{width:25px;height:25px}
  .card-copy h2{font-size:24px;line-height:1.02}
  .card-copy p{margin:7px 0 0;font-size:16px;line-height:1.32}
  .cta{grid-column:1/-1;grid-row:2;width:100%;min-height:50px;font-size:17px;padding-inline:18px}
  .secondary{padding-bottom:12px}
  .secondary-grid{grid-template-columns:1fr;gap:10px}
  .secondary-link{min-height:78px;padding:13px 14px;gap:12px;border-radius:18px}
  .secondary-icon{width:46px;height:46px}
  .secondary-icon svg{width:27px;height:27px}
  .secondary-copy h2{font-size:22px}
  .secondary-copy p{font-size:16px;line-height:1.3}
  .how-inner{display:block;padding:24px 0 26px}
  .how h2{font-size:30px}
  .how p{font-size:16px;line-height:1.5}
  .home .measure-art{display:none}
}
@media (max-width:390px){
  .home .container{width:calc(100% - 24px)}
  .hero{padding-top:20px}
  .home h1{font-size:40px}
  .trust-mobile{font-size:15px}
  .calc-card{padding:12px;grid-template-columns:112px 1fr}
  .product-thumb{width:108px;max-height:106px}
  .title-row{grid-template-columns:40px 1fr;gap:8px}
  .calc-badge{width:40px;height:40px}
  .calc-badge svg{width:23px;height:23px}
  .card-copy h2{font-size:22px}
  .card-copy p{margin-top:6px}
  .cta{min-height:48px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .how{background:linear-gradient(90deg,#1b1f30 0%,#16223a 100%);border-color:var(--line)}
  :root:not([data-theme="light"]) .how p{color:var(--text)}
  :root:not([data-theme="light"]) .how h2{color:var(--navy)}
  :root:not([data-theme="light"]) .measure-art path[fill="#fff"]{fill:var(--surface)}
}
@media (prefers-reduced-motion:reduce){.cta{transition:none}}

/* 6 Nov 2026: the shoe calculator is labelled Beta on its card (link unchanged) */
.beta-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:99px;font:700 11px/1.4 var(--body,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#1565c0;background:#e8f2fd;border:1px solid #c6ddf7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .beta-tag{color:#9ccbff;background:#16263d;border-color:#2b4466}}

/* 7 Nov 2026: compact above-the-fold layout on desktop and laptop screens (≥761 px wide).
   Goal: header, hero introduction, both calculator cards and both "Find … Size" buttons inside the first screen at 768 px tall
   (best effort at 720 px). Spacing and image height follow the viewport height, so tall screens keep the roomier approved look.
   Phones (≤760 px) keep their existing rules above. Nothing is hidden or clipped except the hero photo's crop. */
@media (min-width:761px){
  .hero{padding:clamp(18px,3.6vh,44px) 0 clamp(14px,2.4vh,26px)}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:clamp(28px,3.6vw,52px)}
  .home h1{font-size:clamp(42px,4.1vw,64px);line-height:1.02}
  .subheadline{margin-top:clamp(10px,1.6vh,18px);font-size:clamp(17px,1.35vw,19px);line-height:1.5}
  .trust-desktop{margin-top:clamp(12px,2vh,22px);gap:10px 24px}
  .trust-icon{width:24px;height:24px}
  .hero-photo{aspect-ratio:auto;height:clamp(200px,32vh,320px);object-position:52% 40%}
  .calculators{padding:0 0 18px}
  .calc-card{min-height:0;padding:clamp(16px,2.2vh,24px) 24px;row-gap:12px;column-gap:20px}
  .card-art{min-height:0}
  .product-thumb{width:min(clamp(150px,21vh,200px),100%)}
  .card-copy h2{font-size:clamp(28px,2.35vw,34px);line-height:1.05}
  .card-copy p{margin-top:8px;font-size:16.5px;line-height:1.45}
  .title-row{grid-template-columns:52px 1fr;gap:12px}
  .calc-badge{width:52px;height:52px}
  .calc-badge svg{width:28px;height:28px}
  .cta{min-height:50px;font-size:17px;align-self:end}
}
@media (min-width:761px) and (max-width:1100px){
  .hero-grid{grid-template-columns:1.2fr .8fr}
  .calc-card{grid-template-columns:.62fr 1.38fr;padding:16px 18px}
  .card-copy h2{font-size:26px}
  .title-row{grid-template-columns:44px 1fr;gap:10px}
  .calc-badge{width:44px;height:44px}
  .calc-badge svg{width:24px;height:24px}
}
@media (min-width:761px) and (max-width:920px){
  .card-art{grid-row:1}
  .cta{grid-column:1/-1;white-space:nowrap}
}