/* Launch pieces for The Offer Upgrade: countdown bar, price ladder, checkout, waitlist gate, thank-you.
   Uses the tokens from offer-brand.css (--paper, --ink, --blue, --lime). Loaded only on /offer-upgrade pages. */
.offer-brand .launch-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:18px 0 0;padding:12px 20px;background:var(--blue);color:var(--paper);border-radius:30px;font:600 13px/1.4 'DM Sans',sans-serif;letter-spacing:1px}
.offer-brand .launch-bar[hidden]{display:none}
.offer-brand .launch-bar-label{background:var(--lime);color:var(--blue);border-radius:20px;padding:4px 12px}
.offer-brand .launch-bar-time{font-variant-numeric:tabular-nums;letter-spacing:.5px}
.offer-brand .launch-bar a{color:var(--lime);text-underline-offset:4px}

.offer-brand .regular-price{font-size:16px;line-height:1.6}
.offer-brand .tier-ladder{list-style:none;padding:0;margin:18px 0 6px;border-top:1px solid rgba(250,247,242,.18)}
.offer-brand .tier-ladder li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid rgba(250,247,242,.18);font-size:16px;line-height:1.5;margin:0}
.offer-brand .tier-ladder li:before{content:none}
.offer-brand .tier-ladder small{grid-column:1/-1;font-size:14px;color:#becbc4}
.offer-brand .tier-ladder .is-now{color:var(--lime);font-weight:600}
.offer-brand .tier-ladder .is-past{opacity:.5;text-decoration:line-through}

.offer-brand .offer-card .signup-status{color:var(--lime)}
.offer-brand .checkout-wrap{grid-column:1/-1;background:#fff;border:1px solid #dedbd2;border-radius:18px;padding:22px;margin-top:10px}
.offer-brand .checkout-wrap[hidden]{display:none}
.offer-brand .checkout-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font:600 13px 'DM Sans',sans-serif;letter-spacing:1.5px;color:var(--blue)}
.offer-brand .checkout-head .quiet{font-size:14px}
.offer-brand .site-footer a{color:var(--blue)}

/* Waitlist gate */
.ou-gate{min-height:calc(100vh - 95px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:6%;align-items:center;padding:48px 0 64px}
.ou-gate h1{font:400 clamp(44px,5.6vw,84px)/1.02 'Playfair Display',Georgia,serif;letter-spacing:-2px;margin:18px 0 22px;color:var(--blue)}
.ou-gate h1 em{font-style:normal;background:linear-gradient(transparent 70%,var(--lime) 70%)}
.ou-gate .lede{font-size:19px;line-height:1.65;max-width:560px;margin:0 0 14px}
.ou-gate .hand{display:block;font:30px/1 'This Notes',cursive;color:var(--blue);transform:rotate(-4deg);margin-top:26px}
.ou-form{background:var(--blue);color:var(--paper);border-radius:22px;padding:36px}
.ou-form h2{font:400 34px/1.15 'Playfair Display',Georgia,serif;margin:0 0 10px}
.ou-form p{font-size:16px;line-height:1.6;margin:0 0 20px;color:#dfe6e1}
.ou-form label{display:block;font:600 14px 'DM Sans',sans-serif;letter-spacing:.5px;margin:0 0 6px}
.ou-form input{display:block;width:100%;box-sizing:border-box;font:16px 'DM Sans',sans-serif;padding:14px 16px;border-radius:12px;border:1px solid #bfc6bc;background:var(--paper);color:var(--ink);margin:0 0 16px}
.ou-form input:focus{outline:3px solid var(--lime);outline-offset:1px}
.ou-form .primary{width:100%;justify-content:center;border:0;cursor:pointer;font-size:16px}
.ou-form .primary[disabled]{opacity:.6;cursor:wait}
.ou-form .fine{font-size:14px;line-height:1.6;color:#becbc4;margin:16px 0 0}
.ou-form .fine a{color:var(--lime)}
.ou-form .err{color:var(--lime);font-size:15px;margin:0 0 12px}
.ou-form .err[hidden]{display:none}

/* Thank-you */
.ou-thanks{max-width:860px;margin:0 auto;padding:56px 0 72px}
.ou-thanks h1{font:400 clamp(42px,5vw,72px)/1.05 'Playfair Display',Georgia,serif;letter-spacing:-1.5px;color:var(--blue);margin:16px 0 18px}
.ou-thanks .lede{font-size:19px;line-height:1.65;margin:0 0 30px}
.ou-steps{list-style:none;padding:0;margin:0 0 36px;display:grid;gap:16px}
.ou-steps li{background:#fff;border:1px solid #dedbd2;border-radius:18px;padding:24px 26px;font-size:17px;line-height:1.6}
.ou-steps h2{font:600 20px/1.3 'DM Sans',sans-serif;color:var(--blue);margin:0 0 6px}
.ou-steps p{margin:0 0 12px}
.ou-steps p:last-child{margin:0}
.ou-oto{background:var(--blue);color:var(--paper);border-radius:22px;padding:30px}
.ou-oto h2{font:400 30px/1.2 'Playfair Display',Georgia,serif;margin:0 0 10px}
.ou-oto p{font-size:17px;line-height:1.6;margin:0 0 20px;color:#dfe6e1}

@media(max-width:1000px){.ou-gate{grid-template-columns:1fr;gap:34px;min-height:0}}
@media(max-width:767px){
  .offer-brand .launch-bar{border-radius:18px;gap:8px 14px;font-size:13px}
  .ou-form{padding:26px 22px}
  .ou-thanks{padding:36px 0 56px}
  .ou-steps li{padding:20px}
  .offer-brand .checkout-wrap{padding:14px}
}

/* The offer grid's 9% gap is a percentage of the section's own height, so it gets added
   after the rows are sized and pushed the open checkout over the FAQ. Fixed row gap instead. */
.offer-brand .offer-section{row-gap:40px}

/* Start page (delivery) */
.ou-start .ou-bookmark{font-size:16px;line-height:1.6;background:#fff;border:1px dashed #bfc6bc;border-radius:14px;padding:14px 18px;margin:0 0 26px}
.ou-steps .ou-substeps{margin:0 0 14px;padding-left:22px}
.ou-steps .ou-substeps li{background:none;border:0;padding:4px 0;font-size:17px;line-height:1.6;border-radius:0}
.ou-shot{margin:14px 0 18px;border:1px solid #dedbd2;border-radius:14px;overflow:hidden;background:var(--paper)}
.ou-shot img{display:block;width:100%;height:auto}
.ou-shot span{display:block;padding:34px 18px;text-align:center;font-size:15px;color:var(--muted)}
.ou-say{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper);border:1px solid #dedbd2;border-radius:12px;padding:12px 14px}
.ou-say code{flex:1 1 220px;font:16px/1.5 'DM Sans',sans-serif;color:var(--blue);white-space:normal}
.ou-say .ou-copy{font-size:15px;border:1px solid #bfc6bc;border-radius:20px;padding:6px 14px;background:#fff;cursor:pointer}
.ou-steps a:not(.primary),.ou-thanks .lede a{color:var(--blue);text-underline-offset:4px}
.ou-start .ou-desktop{background:#fff;border:2px solid var(--blue);border-radius:18px;padding:20px 22px;margin:0 0 18px}.ou-start .ou-desktop h2{font-size:21px;margin:0 0 8px}.ou-start .ou-desktop p{font-size:17px;line-height:1.6;margin:0 0 14px}.ou-start .ou-desktop p:last-child{margin:0}

/* Start + thank-you pages: square corners everywhere (Monika, 2026-10-29) and the sales page's
   personality: handwritten notes, pink star, mono step labels, sage band. */
.ou-thanks .primary,.ou-thanks .ou-steps li,.ou-thanks .ou-oto,.ou-shot,.ou-say,.ou-say .ou-copy,.ou-start .ou-desktop,.ou-start .ou-bookmark{border-radius:0}
.ou-thanks .primary{border:1.5px solid var(--blue);font-weight:600;letter-spacing:.2px}
.ou-thanks .primary:hover,.ou-thanks .primary:focus-visible{background:var(--blue);color:#fff;transform:translateY(-1px)}
.ou-thanks .ou-oto .primary:hover,.ou-thanks .ou-oto .primary:focus-visible{background:#fff;color:var(--blue)}
.ou-thanks .ou-oto .primary{border-color:var(--lime)}
.ou-hero{position:relative}
.ou-kicker{display:block;font:600 12px 'DM Sans',sans-serif;letter-spacing:2px;color:var(--blue)}
.ou-kicker i,.ou-star{color:#c41472;font-style:normal}
.ou-thanks h1 em{position:relative;font-style:italic;isolation:isolate}
.ou-thanks h1 em:after{content:'';position:absolute;left:0;bottom:4px;width:96%;height:12px;background:var(--lime);z-index:-1;transform:rotate(-2deg)}
.ou-hand{display:block;width:fit-content;margin:-6px 0 26px auto;font:30px/1 'This Notes',cursive;color:var(--blue);transform:rotate(-5deg);text-align:right}
.ou-start .ou-desktop{background:#e8e9df;border:0;border-left:5px solid var(--blue);padding:24px 26px}
.ou-start .ou-desktop .ou-star{font-size:.85em;margin-right:8px;vertical-align:.08em}
.ou-start .ou-desktop h2{font:400 26px/1.2 'Playfair Display',Georgia,serif;color:var(--blue)}
.ou-start .ou-bookmark{background:#c6b6a2;border:0;color:var(--ink);transform:rotate(-1deg);max-width:440px;padding:16px 20px;margin:8px 0 34px;box-shadow:0 5px 10px #7672501a}
.ou-hand-inline{display:block;font:30px/1 'This Notes',cursive;margin:0 0 6px}
.ou-num{display:block;font:600 12px 'DM Sans',sans-serif;letter-spacing:2px;color:#66736e;margin:0 0 6px}
.ou-steps li>h2{font:400 28px/1.2 'Playfair Display',Georgia,serif;letter-spacing:-.4px;margin:0 0 10px}
.ou-steps li{border-top:4px solid var(--blue)}
.ou-steps .ou-substeps li{border-top:0}
.ou-say{border-left:4px solid var(--lime)}
.ou-say .ou-copy{border-color:var(--blue);color:var(--blue);font-weight:600}
.ou-oto{position:relative}
.ou-sig{display:block;width:150px;height:auto;margin:22px 0 0;opacity:.95}
.ou-footer{flex-wrap:wrap;margin-top:10px}
.ou-footer a{color:var(--blue)}
.ou-footer small{flex-basis:100%;font-size:12px;color:#66736e;letter-spacing:.5px}
@media(max-width:767px){
  .ou-hand{margin:0 0 24px;font-size:26px;text-align:left}
  .ou-steps li>h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.ou-thanks .primary:hover{transform:none}}

/* Sales page + gate buttons: square, no pills (Monika, 2026-10-29). Lime buttons hover blue with
   white text; on blue surfaces they hover white with blue text so they stay visible. */
.offer-brand .primary,.offer-brand .brand-top-nav .nav-cta,.offer-brand .quiet,.offer-brand .launch-bar,.offer-brand .launch-bar-label,.offer-brand .checkout-wrap,.ou-form,.ou-form input{border-radius:0}
.offer-brand .primary{border:1.5px solid var(--blue);transition:background .2s,color .2s,transform .2s,box-shadow .2s,border-color .2s}
.offer-brand .primary:hover,.offer-brand .primary:focus-visible{background:var(--blue);color:#fff;transform:translateY(-1px)}
.offer-brand .ou-form .primary,.offer-brand .ou-oto .primary{border-color:var(--lime)}
.offer-brand .ou-form .primary:hover,.offer-brand .ou-form .primary:focus-visible,.offer-brand .ou-oto .primary:hover,.offer-brand .ou-oto .primary:focus-visible{background:#fff;color:var(--blue)}
.offer-brand .brand-top-nav .nav-cta:hover,.offer-brand .brand-top-nav .nav-cta:focus-visible,.offer-brand .quiet:hover,.offer-brand .quiet:focus-visible{background:var(--blue);color:#fff;border-color:var(--blue)}
@media(prefers-reduced-motion:reduce){.offer-brand .primary:hover{transform:none}}

/* Hover (Monika, 2026-10-29): buttons stay lime with blue text and do a little bounce. No glow, no border change.
   Outline buttons fill lime too. */
@keyframes ou-bounce{0%{transform:translateY(0)}35%{transform:translateY(-6px)}60%{transform:translateY(1px)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.offer-brand{--pink:#e0247f}
.offer-brand .primary:hover,.offer-brand .primary:focus-visible,.ou-thanks .primary:hover,.ou-thanks .primary:focus-visible,
.offer-brand .offer-card .primary:hover,.offer-brand .offer-card .primary:focus-visible,.offer-brand .ou-form .primary:hover,.offer-brand .ou-form .primary:focus-visible,.offer-brand .ou-oto .primary:hover,.offer-brand .ou-oto .primary:focus-visible,.ou-thanks .ou-oto .primary:hover,.ou-thanks .ou-oto .primary:focus-visible,
.offer-brand .brand-top-nav .nav-cta:hover,.offer-brand .brand-top-nav .nav-cta:focus-visible,.offer-brand .quiet:hover,.offer-brand .quiet:focus-visible,.ou-say .ou-copy:hover,.ou-say .ou-copy:focus-visible{background:var(--lime);color:var(--blue);box-shadow:none;animation:ou-bounce .5s ease}
.offer-brand .build-link:hover,.offer-brand .build-link:focus-visible{color:var(--pink)}
@media(prefers-reduced-motion:reduce){.offer-brand .primary:hover,.offer-brand .quiet:hover,.offer-brand .brand-top-nav .nav-cta:hover,.ou-say .ou-copy:hover{animation:none}}

/* "What you want for them" list in the recognition section */
.offer-brand .wants{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:10px}
.offer-brand .wants li{position:relative;padding-left:28px}
.offer-brand .wants li:before{content:'✦';position:absolute;left:0;top:0;color:var(--pink)}

/* Bigger type on every Offer Upgrade page (Monika, 2026-10-29: "way way too small"). Reading text 19px,
   lead paragraphs 20-21px, buttons and nav 16px, caps labels 14px. Mockups and demos keep their own sizes. */
body.offer-brand main :is(p,li,summary):not(.weekend,.recog-note,.portal *,.papers *,.studio-sheet *,.look *,.ou-shot *,.tier-ladder *,.checkout-wrap *,.sample-offer *){font-size:19px;line-height:1.65}
body.offer-brand main :is(.section-copy,.under p,.lede,.recognition-copy p:first-child){font-size:21px;line-height:1.6}
body.offer-brand .studio-section .section-copy{font-size:21px}
body.offer-brand main .clinic-lead{font-size:24px;line-height:1.4}
body.offer-brand main .faq summary{font-size:20px}
body.offer-brand .primary,body.offer-brand .ou-say .ou-copy{font-size:16px}
body.offer-brand .brand-top-nav a,body.offer-brand .section-nav a,body.offer-brand .quiet,body.offer-brand .build-link{font-size:16px}
body.offer-brand .launch-bar,body.offer-brand .launch-bar a,body.offer-brand .launch-bar span{font-size:15px}
body.offer-brand :is(.caption span,.bottom span){font-size:15px}
body.offer-brand :is(.eyebrow,.ou-kicker,.ou-num,.founding-label,.concept-art small,.clinic-stamp){font-size:14px}
body.offer-brand main :is(.offer-footnote,.moodboard-note,.regular-price,.price span){font-size:17px}
body.offer-brand .tier-ladder :is(span,small){font-size:16px}
body.offer-brand .site-footer :is(a,span){font-size:16px}
body.offer-brand .site-footer small{font-size:14px}
body.offer-brand .look-board small{font-size:14px}
body.offer-brand .look-label{font-size:12px}
body.offer-brand .ou-steps li{font-size:19px}
body.offer-brand .ou-steps .ou-substeps li{font-size:19px}
body.offer-brand .ou-say code{font-size:18px}
@media(max-width:767px){
  body.offer-brand main :is(p,li,summary):not(.weekend,.recog-note,.portal *,.papers *,.studio-sheet *,.look *,.ou-shot *,.tier-ladder *,.checkout-wrap *,.sample-offer *){font-size:18px}
  body.offer-brand main :is(.section-copy,.under p,.lede,.recognition-copy p:first-child){font-size:19px}
  body.offer-brand .studio-section .section-copy{font-size:19px}
  body.offer-brand .ou-steps li,body.offer-brand .ou-steps .ou-substeps li{font-size:18px}
}

/* Round 3 (Monika, 2026-10-29) */
/* Heading highlights, same lime swipe as the waitlist page. On dark bands the word turns lime instead. */
.offer-brand .sales-section h2 em{font-style:normal;background:linear-gradient(transparent 68%,var(--lime) 68%);padding:0 .05em}
.offer-brand .recognition h2 em,.offer-brand .final-invite h2 em{background:none;color:var(--lime);font-style:italic}
.offer-brand .hl-pink{color:var(--pink);font-style:italic}

/* You already did the hard part: note sits under the heading so the left column isn't empty */
.offer-brand .recognition{grid-template-columns:40px minmax(0,.85fr) minmax(0,1.15fr);gap:28px 48px;align-items:start}
.offer-brand .recog-head h2{margin:0}
.offer-brand .recog-note{font:28px/1.15 'This Notes',cursive;color:#d4dfd6;transform:rotate(-4deg);margin:34px 0 0;max-width:340px}
@media(max-width:767px){.offer-brand .recognition{grid-template-columns:1fr;gap:14px}.offer-brand .recog-note{font-size:24px;margin-top:18px}}

/* How it works: heading beside its intro, then the steps beside the Build Steps mockup */
.hiw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%;align-items:end;margin:0 0 44px}
.hiw-head h2{margin:0}
.offer-brand .hiw-head .section-copy{margin:0 0 8px;max-width:none}
.hiw-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5%;align-items:center}
.hiw-body h3{font:400 30px/1.2 'Playfair Display',Georgia,serif;color:var(--blue);margin:0 0 12px}
.hiw-label{display:block;font:600 14px 'DM Sans',sans-serif;letter-spacing:2px;color:var(--blue);margin:26px 0 10px}
.hiw-steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hiw-steps li{position:relative;padding-left:28px}
.hiw-steps li:before,.offer-brand .clinic-details li:before{content:'✦';position:absolute;left:0;top:0;color:var(--pink)}
.builder-shot{margin:0}
.screen-frame{background:#1f2a2e;padding:12px 12px 14px;box-shadow:0 18px 40px rgba(0,60,77,.18)}
.screen-frame img{display:block;width:100%;height:auto}
.builder-shot figcaption{font:24px 'This Notes',cursive;color:var(--blue);margin:16px 0 0;transform:rotate(-2deg)}
@media(max-width:860px){.hiw-head,.hiw-body{grid-template-columns:1fr;gap:22px}}

/* Three starting points: buttons open a pop-up of finished builds in that shape */
.offer-brand .steps .build-link{background:none;border:0;padding:0;font:600 16px 'DM Sans',sans-serif;color:var(--blue);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.offer-brand .steps .build-link span{color:var(--pink)}
.path-pop{border:0;padding:28px;width:min(1120px,94vw);max-height:90vh;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.path-pop::backdrop{background:rgba(0,40,52,.6)}
.path-pop-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.path-pop h3{font:400 36px/1.1 'Playfair Display',Georgia,serif;color:var(--blue);margin:0}
.path-pop-copy{font-size:19px;line-height:1.6;margin:8px 0 24px}
.path-pop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.path-pop-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.path-pop-grid figure{margin:0}
.path-pop-grid figcaption{font-size:16px;color:var(--blue);margin-top:12px}
@media(max-width:760px){.path-pop{padding:20px}.path-pop-grid,.path-pop-grid[data-count="3"]{grid-template-columns:1fr}.path-pop h3{font-size:28px}}

/* Clinic: the three lines are the lead under the heading, in the body font */
.offer-brand .clinic{align-items:center}
.offer-brand .clinic-heading .clinic-lead{font:600 22px/1.4 'DM Sans',sans-serif;color:var(--blue);margin:0 0 14px}
.offer-brand .clinic-heading p{max-width:520px}
.offer-brand .clinic-details ul{list-style:none;padding:0}
.offer-brand .clinic-details li{position:relative;padding-left:28px;margin:0 0 8px}

/* Ending band: deep blue with the lime button, instead of sage + lime */
.offer-brand .final-invite{background:var(--blue);color:var(--paper);border-top:0}
.offer-brand .final-invite h2{color:#fff}
.offer-brand .final-invite p{color:#cfdcd6}

/* Continuity (2026-10-30): every page's headline highlight is the same upright lime band */
.ou-thanks h1 em{font-style:normal}
.ou-thanks h1 em:after{display:none}
.ou-thanks h1 em{background:linear-gradient(transparent 68%,var(--lime) 68%);padding:0 .05em}

/* Round 4 (2026-10-30) */
body.offer-brand main .under p:first-of-type{font-size:19px}
@media(min-width:768px){body.offer-brand main p.weekend{font-size:23px}}
@media(max-width:767px){body.offer-brand main .under p:first-of-type{font-size:17px}body.offer-brand main p.weekend{font-size:18px}}
.offer-brand .steps-note{font-size:17px;color:#4f625d;margin:-10px 0 0}
.offer-brand .steps-note span{color:var(--pink);margin-right:6px}
/* Clinic: the left column sits down so both columns end on the same line */
.offer-brand .clinic{align-items:end}

/* Round 5 (2026-10-30): more air above the hero line; hard-part star sits above the heading and the left side centers on the copy */
.offer-brand .under{padding-top:26px}
.offer-brand .recognition{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.offer-brand .recog-head{width:fit-content;max-width:100%}
.offer-brand .recog-head .large-star{display:block;margin:0 0 16px;text-align:center}
@media(max-width:767px){.offer-brand .under{padding-top:14px}.offer-brand .recognition{grid-template-columns:1fr}}

/* Draws the eye to the one choice buyers must get right (Cowork) */
.ou-mark{background:linear-gradient(transparent 55%,var(--lime) 55%);color:inherit;padding:0 .1em}

/* Start page (2026-10-30): headline highlight stays on one line; bookmark note now sits above the desktop card */
.ou-start h1 em{white-space:nowrap}
.ou-start .ou-desktop{margin-bottom:30px}

/* Proof (2026-10-30): client and buyer quotes from custom builds, labeled with what each person actually got */
.ou-proof{margin:30px 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--lime);max-width:560px}
.ou-proof blockquote{margin:0 0 10px;font-size:18px;line-height:1.6;color:var(--ink)}
.ou-proof figcaption{font-size:15px;color:#4f625d}
.ou-proof-section .proof-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%;align-items:end;margin:0 0 34px}
.ou-proof-section .section-copy{font-size:17px;line-height:1.7;margin:0;max-width:560px}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.proof-card{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:22px;background:#fff;border:1px solid #dedbd2;border-top:4px solid var(--blue);padding:26px 26px 22px;border-radius:0}
.proof-card blockquote{margin:0;font-size:18px;line-height:1.65;color:var(--ink)}
.proof-card figcaption{display:flex;flex-direction:column;gap:4px;font-size:15px;color:#4f625d}
.proof-card figcaption strong{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:21px;color:var(--blue)}
@media(max-width:767px){.ou-proof-section .proof-head{grid-template-columns:1fr;gap:14px}.proof-grid{grid-template-columns:1fr}}
/* Gate (2026-10-30): on phones and tablets the sign-up form sits right under the headline, above the rest of the copy */
@media(max-width:1000px){
  .ou-gate{display:flex;flex-direction:column;gap:0}
  .ou-gate>div{display:contents}
  .ou-gate .eyebrow{order:1;align-self:flex-start}
  .ou-gate h1{order:2}
  .ou-gate .ou-form{order:3;margin:0 0 34px}
  .ou-gate .lede{order:4}
  .ou-gate .hand{order:5;align-self:flex-start}
  .ou-gate .ou-proof{order:6}
}