/* The Hello Geometry call-to-action row, shared (11 Nov 2026, Heike: "the same on all pages"). Copied from index.html #hg-row (which still has its own inline copy).
   Markup: see about-new.html <section id="hg-row">; needs styles.css (.container .label .section-title .gold-divider .body-text .btn .hero-buttons) + /watch-free.js. */
    #hg-row { padding: 84px 0; color: #F4EFE6; background: radial-gradient(ellipse at 75% 55%, rgba(95,196,186,.18), transparent 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%232FAFA7' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97'/%3E%3C/g%3E%3C/svg%3E") center / 56px 97px, #0B1312; }
    #hg-row .hg-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
    #hg-row .label { color: #5FC4BA; }
    #hg-row .section-title { color: #F4EFE6; }
    #hg-row .gold-divider { background: #5FC4BA; }
    #hg-row .body-text { color: #C9C3B6; }
    #hg-row .hg-qs { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.45; color: #F4EFE6; margin: 0 0 16px; }
    html[data-theme="light"] #hg-row .hg-qs { color: #F4EFE6; }
    #hg-row .hg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 26px; }
    #hg-row .hg-fact { display: flex; flex-direction: column; padding: 16px 18px; border: 1px solid rgba(95,196,186,.28); border-radius: 10px; background: rgba(255,253,249,.04); }
    #hg-row .hg-fact--price { border: 2px solid #5FC4BA; background: rgba(95,196,186,.08); }
    #hg-row .hg-fact-label { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5FC4BA; }
    #hg-row .hg-fact-big { font-family: var(--font-serif); font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.1; color: #F4EFE6; margin: 4px 0; white-space: nowrap; }
    #hg-row .hg-fact-small { font-family: var(--font-sans); font-size: .85rem; line-height: 1.45; color: #C9C3B6; }
    #hg-row .hero-buttons { justify-content: flex-start; gap: 12px; margin-top: 28px; }
    @media (min-width: 901px) { #hg-row .hero-buttons { flex-wrap: nowrap; } #hg-row .hero-buttons .btn { padding-left: 26px; padding-right: 26px; white-space: nowrap; } }
    #hg-row .hg-start { display: inline-block; margin: 0; }
    /* both buttons the same size (9 Nov 2026, Heike) */
    #hg-row .hg-start, #hg-row .hg-more { width: 250px; box-sizing: border-box; }
    #hg-row .hg-start .wf-btn { width: 100%; min-height: 54px; box-sizing: border-box; justify-content: center; font-size: 1rem; padding: 14px 24px; }
    #hg-row .hg-more { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; }
    #hg-row .hg-buy { background: #5FC4BA; border-color: #5FC4BA; color: #0B1312; font-weight: 500; }
    #hg-row .hg-buy:hover { background: #7FD3CA; border-color: #7FD3CA; color: #0B1312; }
    #hg-row .hg-more { color: #F4EFE6; border: 1px solid rgba(244,239,230,.55); background: transparent; }
    #hg-row .hg-more:hover { background: #F4EFE6; color: #0B1312; }
    .hg-devices { position: relative; display: block; width: 100%; aspect-ratio: 1060 / 640; }
    .hg-devices img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
    .hgd-laptop { position: absolute; left: 10%; top: 0; width: 80%; filter: drop-shadow(0 26px 40px rgba(0,0,0,.6)); }
    .hgd-screen { display: block; aspect-ratio: 1440 / 900; border: clamp(4px, .8vw, 9px) solid #1c2523; border-bottom-width: clamp(7px, 1.1vw, 12px); border-radius: 12px 12px 0 0; overflow: hidden; background: #000; }
    .hgd-base { display: block; height: clamp(6px, 1vw, 12px); margin: 0 -7%; background: linear-gradient(#3a4644, #151c1b); border-radius: 0 0 12px 12px / 0 0 100% 100%; }
    .hgd-tablet { position: absolute; left: 0; bottom: 0; width: 26%; aspect-ratio: 820 / 1180; border: clamp(4px, .7vw, 8px) solid #1c2523; border-radius: clamp(10px, 1.6vw, 20px); overflow: hidden; background: #000; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
    .hgd-phone { position: absolute; right: 2%; bottom: 0; width: 16.5%; aspect-ratio: 585 / 1266; border: clamp(3px, .6vw, 7px) solid #1c2523; border-radius: clamp(12px, 2vw, 24px); overflow: hidden; background: #000; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
    @media (max-width: 900px) {
      #hg-row { padding: 56px 0; }
      #hg-row .hg-grid { grid-template-columns: 1fr; gap: 36px; }
      #hg-row .hero-buttons { flex-direction: column; max-width: none; }
      #hg-row .hero-buttons .btn { width: 100%; text-align: center; }
      #hg-row .hg-start, #hg-row .hg-more { width: 100%; }
      #hg-row .hg-devices { order: -1; }   /* phone: laptop, tablet and phone above the title (9 Nov 2026, Heike) */
    }
    @media (max-width: 420px) { #hg-row .hg-fact { padding: 14px; } #hg-row .hg-fact-big { font-size: 1.6rem; } }
    /* the homepage's own base rules for these parts, scoped, so the block looks the same on any page */
    #hg-row .label { display: block; font-family: var(--font-sans, 'Outfit', sans-serif); font-size: .95rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 16px; }
    #hg-row .section-title { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 600; line-height: 1.15; margin: 0 0 24px; }
    #hg-row .body-text { font-size: 1.05rem; line-height: 1.8; max-width: 680px; margin: 0; }
    #hg-row .gold-divider { width: 48px; height: 1px; margin: 0 0 32px; }
    #hg-row .hg-qs { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }