/* Shared by every page (home, legal pages, 404 and the tool landings), prepended to the page's
   own stylesheet at build time: fonts, brand tokens, reset, the header with its language menu,
   the footer and the blocks of components/blocks.mjs. Pages set the colours through the custom
   properties below and add their own design on top (src/styles.css, src/landings/<tool>/styles.css). */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand (design/README.md) */
  --bg: #FFF5E4;
  --surface: #FFFFFF;
  --border: #F1E3CB;
  --text: #2B2240;
  --muted: #6B6280;
  --accent: #5B3FD0;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --r-card: 34px;
  --r-btn: 30px;
  --r-chip: 23px;
  --shadow: 0 10px 0 var(--border);
  --gutter: 16px;
  --max: 1080px;
  /* Header and footer */
  --chrome-bg: var(--bg);
  --chrome-fg: var(--text);
  --chrome-muted: var(--muted);
  --chrome-line: var(--border);
  --chrome-panel: var(--surface);
  --chrome-current: var(--accent);
  /* Buttons and focus */
  --btn-bg: var(--text);
  --btn-fg: #fff;
  --btn-hover: #3a2f57;
  --btn-shadow: none;
  --focus: var(--accent);
  /* Chips and bullets */
  --chip-bg: rgba(91, 63, 208, .1);
  --chip-fg: var(--accent);
  --chip-ring: rgba(91, 63, 208, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 17px/1.55 var(--font); overflow-wrap: anywhere; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, figure { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 24px; height: 24px; flex: none; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  padding: 12px 20px; border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Header (templates/layout.html) */
.site-header { background: var(--chrome-bg); color: var(--chrome-fg); border-bottom: 1px solid var(--chrome-line); }
.bar {
  max-width: var(--max); margin: 0 auto; padding: 10px var(--gutter); min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--chrome-fg);
  font-weight: 900; font-size: 21px; letter-spacing: -0.02em; text-decoration: none;
}
.brand img { border-radius: 9px; }

/* Language menu: a <details> drop-down, no JavaScript (build.mjs langLinks). */
.lang { position: relative; }
.lang-menu > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 16px;
  border: 1.5px solid var(--chrome-line); border-radius: var(--r-chip); background: var(--chrome-panel);
  color: var(--chrome-fg); font-weight: 800; font-size: 14px; cursor: pointer; list-style: none;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary .icon { width: 18px; height: 18px; transition: transform .2s; }
.lang-menu[open] > summary .icon { transform: rotate(180deg); }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 210px;
  list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
  box-shadow: 0 14px 32px rgba(43, 34, 64, .16);
}
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px;
  padding: 0 14px; border-radius: 14px; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.lang-menu a b { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); }
.lang-menu a:hover { background: var(--bg); }
.lang-menu a[aria-current="page"], .lang-menu a[aria-current="page"] b { background: var(--text); color: #fff; }

/* Footer (templates/layout.html) */
.site-footer {
  background: var(--chrome-bg); color: var(--chrome-muted); border-top: 1px solid var(--chrome-line);
  padding: 36px 0 44px; font-size: 15px;
}
.footer-tools { margin-bottom: 10px; }
.footer-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chrome-muted); }
.footer-links { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { display: inline-block; padding: 8px 0; color: var(--chrome-fg); font-weight: 700; }
.footer-links a[aria-current] { color: var(--chrome-current); }
.rights { margin: 0; }

/* Blocks (components/blocks.mjs) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px;
  padding: 12px 28px; border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--btn-shadow); font: 900 18px/1.2 var(--font); text-decoration: none; text-align: center;
}
.btn:hover { background: var(--btn-hover); }
.btn .icon { width: 20px; height: 20px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.store { font-size: 14px; font-weight: 700; color: var(--muted); }

.crumbs { font-size: 13px; padding-block: 0 4px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: '›'; margin-right: 6px; }

.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sec-head { display: grid; gap: 12px; max-width: 40em; }

.faq { display: grid; gap: 12px; margin-top: 26px; max-width: 760px; }
.faq details { border-radius: 24px; background: var(--surface); border: 1.5px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 20px; min-height: 56px; font-weight: 900; font-size: 17px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--accent); font-size: 20px; font-weight: 800; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 20px 20px; color: var(--muted); }

.ai-line { font-size: 13px; color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 6px 14px; border-radius: var(--r-chip); background: var(--chip-bg);
  color: var(--chip-fg); font-weight: 800; font-size: 14px;
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--chip-fg); box-shadow: 0 0 0 4px var(--chip-ring); }

.perks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--muted); }
.perks li { display: inline-flex; align-items: center; gap: 7px; }
.perks li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-fg); }

/* Closing band of a landing (closing); its colours come from the page. */
.close { text-align: center; padding-block: 64px 48px; }
.close .inner { display: grid; justify-items: center; gap: 18px; }
.close h2 { font-weight: 900; font-size: clamp(30px, 7vw, 44px); line-height: 1.08; }
.close p { max-width: 30em; }
.close .ai-line { margin-top: 10px; }

/* Link cards in a row of continuations (linkCard): a list on the phone, three columns from 720 px. */
.more { display: grid; gap: 16px; margin-top: 28px; }
.card {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 12px;
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--text);
}
.card .ph { position: relative; }
.card .ph > img, .card video, .card .still { width: 112px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; background: var(--border); }
.card .still { display: none; }
@media (prefers-reduced-motion: reduce) { .card video { display: none; } .card .still { display: block; } }
.card h3 { font-weight: 900; font-size: 19px; line-height: 1.2; }
.card p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 900; color: var(--accent); font-size: 15px; }
.card .go .icon { width: 18px; height: 18px; transition: transform .2s; }
.card:hover .go .icon { transform: translateX(3px); }
@media (min-width: 720px) {
  .more { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; align-content: start; padding: 14px 14px 20px; }
  .card .ph > img, .card video, .card .still { width: 100%; }
}
/* Landing "what would our baby look like": two halves. Mom's pink and dad's blue meet in the brand
   violet, and their gradient runs through the page (the baby's frame, the slider, the underlines),
   never behind long text. One light look by design, so every colour is set explicitly (no
   dark-mode variant). */

:root {
  --mom: #FFB3CC;
  --mom-tint: #FFEAF1;
  --mom-ink: #A3305F;     /* pink text and dots on white (6.6:1) */
  --dad: #A9D4FF;
  --dad-tint: #E8F3FF;
  --dad-ink: #1D5C9E;     /* blue text and dots on white (6.9:1) */
  --mix: linear-gradient(90deg, var(--mom), var(--accent), var(--dad));
  /* The shared components (components.css) on a white page. */
  --bg: #FFFFFF;
  --border: #EEE6F2;
  --shadow: 0 10px 0 var(--border);
  --chrome-bg: #FFFFFF;
  color-scheme: light;
}

.sec { padding-block: 56px; }
.sec h2, .halves h2 { font-weight: 900; font-size: clamp(28px, 6.6vw, 40px); line-height: 1.1; }
.sec-head p { color: var(--muted); }
.eyebrow { color: var(--accent); }
.sec .cta-row, .halves .cta-row { margin-top: 30px; }

/* ---------- Hero: the baby held by both photos ---------- */
.hero { display: grid; gap: 26px; padding-block: 18px 40px; grid-template-areas: 'copy' 'visual' 'cta'; }
.hero-copy { grid-area: copy; display: grid; gap: 16px; min-width: 0; }
.hero-visual { grid-area: visual; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.hero-cta { grid-area: cta; display: grid; gap: 16px; }
.hero h1 { font-weight: 900; font-size: clamp(34px, 9vw, 58px); line-height: 1.04; letter-spacing: -.01em; }
.hero h1 em, .close h2 em { font-style: normal; background: var(--mix) 0 92% / 100% .16em no-repeat; }
.lede { font-size: 18px; color: var(--muted); max-width: 34em; }

.held { position: relative; width: min(100%, 400px); padding: 50px 22px 0; }
.frame { padding: 5px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--mom), var(--accent) 55%, var(--dad)); box-shadow: 0 18px 40px rgba(91, 63, 208, .18); }
.frame img { width: 100%; aspect-ratio: 720 / 894; object-fit: cover; border-radius: 29px; }
.parent { position: absolute; top: 0; display: grid; justify-items: center; gap: 4px; }
.p-mom { left: 0; }
.p-dad { right: 0; }
.parent img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); box-shadow: 0 0 0 4px var(--mom); }
.p-dad img { box-shadow: 0 0 0 4px var(--dad); }
.parent b { padding: 2px 12px; border-radius: 12px; font-size: 13px; font-weight: 900; background: var(--mom-tint); color: var(--mom-ink); }
.p-dad b { background: var(--dad-tint); color: var(--dad-ink); }

/* The app's mix bar, at 50/50. */
.mixbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: min(100%, 400px); font-weight: 900; font-size: 15px; }
.mixbar span:first-child { color: var(--mom-ink); }
.mixbar span:last-child { color: var(--dad-ink); }
.track { position: relative; height: 10px; border-radius: 5px; background: var(--mix); }
.track i, .rail i {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--accent); box-shadow: 0 3px 8px rgba(43, 34, 64, .25);
}
.mix-hint { max-width: 30em; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- Feature by feature ---------- */
.traits { display: grid; gap: 22px; margin-top: 26px; align-items: center; }
.trait-face { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; background: var(--mom-tint); }
.trait-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pin {
  position: absolute; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 2px solid var(--surface); color: var(--surface); font: 900 13px/1 var(--font);
  box-shadow: 0 2px 6px rgba(43, 34, 64, .3);
}
.pin-1 { left: 17%; top: 72%; } .pin-2 { left: 75%; top: 36%; } .pin-3 { left: 63%; top: 64%; }
.pin-4 { left: 56%; top: 50%; } .pin-5 { left: 32%; top: 58%; }
.mom.pin, .trait-list b.mom { background: var(--mom-ink); }
.dad.pin, .trait-list b.dad { background: var(--dad-ink); }
.both.pin, .trait-list b.both { background: var(--accent); }
.trait-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trait-list li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px;
  border-radius: 20px; background: var(--surface); border: 1.5px solid var(--border); font-weight: 800;
}
.trait-list b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--surface); font-size: 13px; }
.trait-list em { font-style: normal; font-size: 14px; font-weight: 900; padding: 4px 12px; border-radius: 14px; white-space: nowrap; }
.trait-list em.mom { background: var(--mom-tint); color: var(--mom-ink); }
.trait-list em.dad { background: var(--dad-tint); color: var(--dad-ink); }
.trait-list em.both { background: linear-gradient(90deg, var(--mom-tint), var(--dad-tint)); color: var(--accent); }

/* ---------- The resemblance slider: three radios, one picture each ---------- */
.halves { padding-block: 64px; background: linear-gradient(90deg, var(--mom-tint) 50%, var(--dad-tint) 50%); }
.halves .cta-row { justify-content: center; }
.mixer { display: grid; justify-items: center; gap: 18px; min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.mixer legend { margin: 0 auto 14px; padding: 0; font-weight: 900; font-size: 15px; }
.mx-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.frames { position: relative; width: min(100%, 400px); aspect-ratio: 720 / 894; }
.frames figure { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.frames img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); box-shadow: 0 18px 40px rgba(43, 34, 64, .16); }
.frames figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .92); font-weight: 900; font-size: 15px; line-height: 1.3; text-align: center;
}
#mix-mom:checked ~ .frames .f-mom, #mix-even:checked ~ .frames .f-even, #mix-dad:checked ~ .frames .f-dad { opacity: 1; }
.stops { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 440px); padding-top: 30px; }
.rail { position: absolute; left: 16.66%; right: 16.66%; top: 9px; height: 10px; border-radius: 5px; background: var(--mix); }
.rail i { transition: left .35s; }
#mix-mom:checked ~ .stops .rail i { left: 0; }
#mix-dad:checked ~ .stops .rail i { left: 100%; }
.stops label {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 2px; padding: 0 4px;
  border-radius: 24px; font-weight: 900; font-size: clamp(14px, 3.9vw, 15px); line-height: 1.2; text-align: center; cursor: pointer;
}
#mix-mom:checked ~ .stops label[for="mix-mom"] { background: var(--mom-ink); color: var(--surface); }
#mix-even:checked ~ .stops label[for="mix-even"] { background: var(--accent); color: var(--surface); }
#mix-dad:checked ~ .stops label[for="mix-dad"] { background: var(--dad-ink); color: var(--surface); }
#mix-mom:focus-visible ~ .stops label[for="mix-mom"],
#mix-even:focus-visible ~ .stops label[for="mix-even"],
#mix-dad:focus-visible ~ .stops label[for="mix-dad"] { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .frames figure, .rail i { transition: none; } }

/* ---------- Girl, boy or surprise ---------- */
.sexes { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 14px; margin-top: 26px; }
.kid { position: relative; border-radius: 28px; overflow: hidden; background: var(--surface); }
.kid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kid figcaption {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px; border-radius: 16px; background: var(--surface); font-weight: 900; font-size: 15px;
}
.kid figcaption .icon { width: 20px; height: 20px; color: var(--accent); }
.girl figcaption .icon { color: var(--mom-ink); }
.boy figcaption .icon { color: var(--dad-ink); }
.gift { grid-column: 1 / -1; background: linear-gradient(135deg, var(--mom-tint), var(--dad-tint)); }
.gift summary { list-style: none; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 26px 20px; text-align: center; }
.gift summary::-webkit-details-marker { display: none; }
.gift .box { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--accent); color: var(--surface); box-shadow: 0 8px 0 rgba(91, 63, 208, .25); }
.gift .box .icon { width: 32px; height: 32px; }
.gift summary b { font-size: 22px; font-weight: 900; }
.gift summary span:last-child { font-size: 15px; font-weight: 800; color: var(--accent); }
.gift[open] summary { padding-bottom: 14px; }
.gift[open] summary span:last-child { display: none; } /* "tap to find out" once it is open */
.gift figure { position: relative; padding: 0 14px 14px; }
.gift figure img { border-radius: 22px; }
.gift figcaption { left: 24px; bottom: 24px; }

/* ---------- Gallery: every couple, their baby ---------- */
.couples { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; margin-top: 26px; }
.kid-ph { position: relative; margin-bottom: 40px; }
.kid-ph > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.kid-ph .tag { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 10px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 900; }
.duo { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); display: flex; }
.duo img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--surface); }
.duo .mom { box-shadow: 0 0 0 3px var(--mom); }
.duo .dad { margin-left: -10px; box-shadow: 0 0 0 3px var(--dad); }
.couple figcaption { text-align: center; font-weight: 800; font-size: 15px; line-height: 1.35; }

/* ---------- After: the ages and the other tools ---------- */
.grow {
  display: grid; gap: 14px; margin-top: 24px; padding: 18px; border-radius: var(--r-card);
  background: linear-gradient(90deg, var(--mom-tint), var(--dad-tint)); color: var(--text); text-decoration: none;
}
.age-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.age-chips li { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 19px; background: var(--surface); font-weight: 900; font-size: 15px; }
.grow .go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--accent); }
.grow .go .icon { width: 18px; height: 18px; transition: transform .2s; }
.grow:hover .go .icon { transform: translateX(3px); }
.more-title { margin-top: 40px; font-weight: 900; font-size: 22px; line-height: 1.2; }
.sec .more { margin-top: 18px; }

/* ---------- FAQ and closing ---------- */
.faq summary::after { background: linear-gradient(135deg, var(--mom-tint), var(--dad-tint)); }
.close { background: linear-gradient(135deg, var(--mom-tint), #EFE9FF 50%, var(--dad-tint)); }
.close p { color: var(--muted); }

@media (min-width: 720px) {
  .sexes { grid-template-columns: repeat(3, 1fr); }
  .gift { grid-column: auto; }
  .gift:not([open]) summary { aspect-ratio: 4 / 5; } /* as tall as the two photos beside it */
  .couples { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.05fr .95fr; grid-template-areas: 'copy visual' 'cta visual'; column-gap: 48px; padding-block: 30px 72px; }
  .hero-copy { align-self: end; }
  .hero-cta { align-self: start; }
  .traits { grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; }
  /* The slider beside its text. */
  .halves .wrap { display: grid; grid-template-columns: 1fr 440px; grid-template-areas: 'head mixer' 'cta mixer'; column-gap: 56px; }
  .halves .sec-head { grid-area: head; align-self: end; }
  .halves .mixer { grid-area: mixer; margin-top: 0; }
  .halves .cta-row { grid-area: cta; align-self: start; justify-content: start; }
}