/* /outcomes — hand-authored page styles (refactor Phase 1, 2026-07-05).
   Replaces the generated Framer markup 1:1: every size, colour and offset
   below is measured from the original render at 390/768/1024/1440
   (QA gate: tools/qa_baseline.py compare, 0.2% per breakpoint).
   Breakpoints match the site's: <810 phone, 810-1199.98 tablet, >=1200 desktop.
   The hero keeps class yg-rmvr16 - enhance.js mounts the og-ambient backdrop
   on it and main.css owns that band's gradient + grain. The alumni carousel
   keeps the yg-1xeap0e-container + ul[draggable="false"] + li[aria-hidden]
   hooks so main.css (padding/centering/loop order) and enhance.js (loop
   buffers, controls, drag) drive it exactly like the generated page. */

/* ---- fonts (verbatim from the original page's embedded CSS; self-hosted) ---- */
/* font-display:swap added to the two Cooper Hewitt faces (the only faces
   here without it): the hero title — this page's LCP element — otherwise
   paints nothing until the face arrives (display:auto blocks ~3s) */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-display:swap;font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-display:swap;font-style:normal;font-weight:708}
@font-face{font-family:"Source Sans Pro Bold";src:url("/assets/media/assets/mfJIi4ZsBj1zFYUodmv4QSL2jnU.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Source Sans Pro Regular";src:url("/assets/media/assets/alL3C3eWkOZCVYCmuhkboeZkZk.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqF5JxCkSmg.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:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* the source ships a REAL Inter Variable italic face for the testimonial
   quote + attribution. Without it, font-style:italic synthesizes an oblique
   whose slant angle differs from the true italic - the glyph edges shear ~1px
   over the cap height and never align. Declaring the real face fixes the slant
   (and lets the italic runs sit with no horizontal nudge). */
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/N9O1YBTY0ROZrE0GiMsoMSyPbQ.woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;font-family:sans-serif;-webkit-font-smoothing:antialiased}
.oc-page figure{margin:0}
.oc-page img{border:0}
/* no blanket heading reset - it out-specifies the per-element layout rules
   and eats their margins; each element owns its full margin below */

/* Inter Variable weight comes from the variation axis, matching the source */
.oc-h-where,.oc-p-many,.oc-p-below,.oc-diff,.oc-ability,.oc-quote,.oc-attr{
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;white-space:pre-wrap;
  font-feature-settings:"cv01","cv05","cv09","cv11","ss03";
  /* the source splits each word/letter into its own span, which suppresses
     inter-glyph kerning; disable kerning so line widths match to the pixel */
  font-kerning:none}
.oc-hero-title,.oc-left,.oc-cta h1,.oc-cta h2,.oc-pill p{font-kerning:none}
/* the source splits every text run into per-word (white-space:nowrap) and
   per-character (display:inline-block) spans for its entry animation. Each
   inline-block advance-rounds to a whole pixel, so glyph edges land on the
   same columns as the generated page. Replicate that structure verbatim on
   every text run to remove the sub-pixel glyph-edge drift (same fix that
   took /about-us to 0.000%). */
.oc-w{white-space:nowrap}
.oc-c{display:inline-block}

/* ---- hero (ambient band: base gradient/grain/blobs come from main.css +
   enhance.js via the yg-rmvr16 hook; no background here) ---- */
.oc-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:600px;padding:0 40px}
.oc-hero-stack{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:10px;max-width:100%}
.oc-hero-logo{width:322px;height:52px}
.oc-hero-title{margin:0;max-width:100%;color:#fff;text-align:center;
  font:normal 712 90px/90px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- intro (white): heading + paragraph, the middle photo row, and the
   "Below are real YG alumni" line; two decorative brand shapes bleed in ---- */
/* clip the shapes to the intro box (the source clips them in overflow:clip
   sections): the geo shape's box starts ~95px above the intro top, but the
   source hides that part - it must NOT bleed up into the dark hero. Clipping
   both axes also removes the right-edge horizontal overflow. */
.oc-intro{position:relative;padding-top:150px;padding-bottom:150px;overflow:clip}
/* two decorative brand shapes: the source 3D-rotates a natural-aspect image
   (no perspective, so it's an orthographic projection); the rotation is
   around the element centre, so the projected AABB stays centred on that
   centre - position each element so its centre sits at the measured AABB
   centre, keep the exact size + transform, and the crop/projection matches */
/* z-order (matches the source): the partner photo sits BELOW the shapes,
   the shapes below the copy - so a shape can cover the photo's corner yet
   never obscure the headings/paragraphs it overlaps */
.oc-shape{position:absolute;z-index:1}
.oc-shape img{border-radius:0}
.oc-shape-tr{width:344.281px;aspect-ratio:.41832669322709165;top:-285px;left:1218.76px;
  transform:rotate(-103deg) rotateX(-55deg)}
.oc-shape-l{width:613px;height:592px;top:211.05px;left:-256px;
  transform:rotate(-290deg) rotateX(131deg) rotateY(-7deg)}

.oc-where,.oc-p-below{position:relative;z-index:2}
.oc-where{width:min(480px,calc(100vw - 140px));margin:0 auto;text-align:center;
  /* the decorative brand shapes sit z-index:1, behind this z-index:2 block —
     correct, but at some widths they extend far enough that their colour
     shows through the letter-spacing gaps of the gray paragraph, reading as
     a tint on whichever words they pass under. An opaque backing (same as
     the page background, so no visible edge) blocks that without moving or
     resizing the shapes themselves. */
  background:#fff}
/* padding-bottom matches the source's 9px-font trailing content that makes
   this two-line box 89px tall (glyphs are top-aligned and unaffected) */
.oc-h-where{margin:0;padding-bottom:9px;font-size:40px;line-height:40px;
  letter-spacing:-1.6px;color:#323455;font-variation-settings:"opsz" 32,"wght" 700}
.oc-p-many{margin:25px 0 0;font-size:30px;line-height:30px;letter-spacing:-.6px;
  color:#717171;font-variation-settings:"opsz" 32,"wght" 600}

.oc-middle{width:min(900px,calc(100vw - 200px));margin:150px auto 0;
  display:flex;align-items:center;gap:50px}
.oc-left{flex:2;position:relative;z-index:2;margin:0;text-align:left;color:#575757;letter-spacing:-.66px;
  font-family:"Source Sans Pro Regular","Source Sans Pro Regular Placeholder",sans-serif;
  font-weight:400;font-size:22px;line-height:26.4px;white-space:pre-wrap}
.oc-bp-sm{display:none}
.oc-photo{flex:3;position:relative;z-index:0;height:569px;overflow:hidden}
.oc-photo img{display:block;width:100%;height:100%;object-fit:cover}

.oc-p-below{width:min(500px,calc(100vw - 60px));margin:150px auto 0;
  text-align:center;font-size:30px;line-height:30px;letter-spacing:-.6px;
  color:#717171;font-variation-settings:"opsz" 14,"wght" 600}
.oc-red{color:#e54e5e}

/* ---- dark band (careers heading + carousel + testimonial + the static
   "Read their stories" strip) ---- */
/* the strip is the band's LAST CHILD, not a sibling after it. As a sibling it
   painted its own #323455 at full opacity while this section rode the scroll
   reveal (inline opacity:0 → faded in by enhance.js), so any frame where the
   fade had not finished showed the strip as a detached navy block with a hard
   seam above it — a fast scroll or flick past the 1725px-tall band, a stitched
   full-page screenshot, or a screen-share frame all catch that state. Inside
   the section both fade as one element, so the seam cannot occur. The strip's
   own margin-top now supplies the space this section's padding-bottom used to
   (its 56px padding-bottom, main.css, closes the band) — same geometry as
   before at every breakpoint. */
.oc-dark{background:#323455;padding-top:100px;padding-bottom:0}
.oc-dark>.og-alumni-links{margin-top:150px}
.oc-dark-head{width:min(790px,calc(100vw - 250px));margin:0 auto;text-align:left}
.oc-diff{margin:0;font-size:30px;line-height:30px;letter-spacing:-.6px;color:#fff;
  font-variation-settings:"opsz" 32,"wght" 600}
.oc-ability{margin:25px 0 0;font-size:25px;line-height:25px;letter-spacing:-.5px;
  color:#8fb3c6;font-variation-settings:"opsz" 14,"wght" 600}

/* carousel: main.css sizes .yg-1xeap0e-container (width 100%, height 744 >=810;
   padding-inline that centres the 575px card) and drives the loop buffers */
.oc-carousel{position:relative;margin-top:128px}
.oc-track{display:flex;align-items:center;gap:170px;list-style:none;margin:0;
  padding:0}
/* li generates no box (matches the source): the card <div> is the flex item,
   so width:100% resolves against the ul's padded content box and main.css's
   li>div order/visibility/aspect rules land on the card */
.oc-track>li{display:contents}
/* position:relative is load-bearing: each card carries an absolutely-
   positioned profile anchor (a[data-og-alumni], inset:0 — static markup).
   Without a positioned card the anchors all pin to .oc-carousel and stack —
   every click then lands on the last card's link (the all-clicks-go-to-Bryson
   bug, regressed in the 2026-07-05 hand-authoring of this page). */
.oc-card{position:relative;width:100%;height:744px;flex:0 0 auto;border-radius:16px;overflow:hidden}
.oc-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.oc-card .og-alumni-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.oc-card .og-alumni-link:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

/* controls: red arrow circles (desktop/tablet) or dots (phone) */
.oc-controls{border:0;margin:20px 0 0;padding:0;min-width:0}
.oc-arrows{display:flex;justify-content:center;gap:10px}
/* 44x44 hit area, 40px red circle: the 2px transparent padding grows the
   target to the touch minimum (issue #89) and background-clip:content-box
   keeps the paint on the 40px content box, so the arrow looks unchanged. */
.oc-arrow{width:44px;height:44px;padding:2px;border:0;border-radius:50%;
  background:#e54e5e;background-clip:content-box;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:filter .18s ease,transform .18s ease}
.oc-arrow img{display:block;width:40px;height:40px;object-fit:fill}
@media (hover:hover) and (pointer:fine){
  .oc-arrow:hover{filter:brightness(1.08);transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .oc-arrow{transition:none}
  .oc-arrow:hover{transform:none}
}
.oc-dots{display:none}

/* testimonial. The quote + attribution render in the real Inter italic face
   declared above, so they need no horizontal correction - they sit at their
   natural centred position exactly like the source. */
.oc-testi{margin-top:218px;text-align:center}
.oc-quote{width:700px;max-width:calc(100vw - 80px);
  margin:0 auto;font-style:italic;
  font-size:22px;line-height:24.2px;letter-spacing:-.44px;color:#fff;
  font-variation-settings:"opsz" 14,"wght" 600}
.oc-attr{margin:25px auto 0;font-style:italic;
  font-size:22px;line-height:22px;letter-spacing:-.44px;color:#8fb3c6;
  font-variation-settings:"opsz" 14,"wght" 600}

/* ---- CTA band (coral duotone photo) ---- */
/* min-height, not height — see the note on .ga-cta in /gallery/gallery.css.
   This band squashed its pill worst (24px at 280px wide) because its label is
   the longest of the six.
   Vertical padding added with it: this was the only one of the six bands with
   no padding at all, so once it grows to its content the pill would otherwise
   sit flush against the footer. Vertical only — the h1/h2 below inset
   themselves with calc(100vw - 120px), so side padding would double up. At
   600px the padding is inside the min-height, so nothing moves where the copy
   already fits. */
.oc-cta{position:relative;overflow:hidden;min-height:600px;padding:60px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;background:rgba(0,0,0,.02)}
.oc-cta-bg{position:absolute;inset:0;z-index:0}
.oc-cta-bg img{display:block;width:100%;height:100%;object-fit:cover}
/* h1/h2 fill 72% / 53% of the band's inner width (band has 60px padding),
   which is what wraps them to two lines like the source */
.oc-cta h1{position:relative;z-index:1;margin:0;width:calc((100vw - 120px) * .72);
  color:#343458;letter-spacing:-2px;text-align:center;
  font:normal 712 50px/60px "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.oc-cta h2{position:relative;z-index:1;margin:0;width:calc((100vw - 120px) * .53);
  text-align:center;color:#343458;letter-spacing:-.5px;
  font:normal 708 24px/36px "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
/* CTA button contract — see the note on .ga-pill in /gallery/gallery.css */
.oc-pill{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;min-height:44px;flex-shrink:0;max-width:100%;
  padding:12px 15px;border-radius:8px;
  background:#fff;text-decoration:none;text-align:center}
.oc-pill p{margin:0;color:#323455;
  font:normal 712 14px/1.2 "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- tablet 810-1199.98 (typography matches desktop; widths are the fluid
   min() formulas above - the narrower dark-head wraps "The ability" to a
   third line exactly like the original at 1024). The decorative shapes keep
   the same 3D transform but scale + recentre on their 1024 AABB. ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .oc-shape-tr{width:250.984px;top:-210px;left:869px}
  .oc-shape-l{width:471.984px;height:450px;top:280.95px;left:-210.99px}
}

/* ---- phone <810 ---- */
@media (max-width:809.98px){
  .oc-hero{padding:0 24px}
  .oc-hero-logo{width:185.7692px;height:30px}
  /* fluid, not a fixed 64px: "OUTCOMES" at 64px is wider than a 360px
     viewport minus the hero's 24px paddings, and .oc-hero is overflow:hidden,
     so the word was cut on both sides (~25px total) on narrow phones.
     Same clamp pattern as the /gallery and /schedule hero titles. */
  .oc-hero-title{font-size:clamp(40px,16vw,64px);line-height:1}

  .oc-shape-tr{width:135.953px;top:-124px;left:auto;right:-60.977px}
  .oc-shape-l{width:235.984px;height:225px;top:272px;left:-111.99px}

  .oc-intro{padding-top:100px;padding-bottom:100px}
  .oc-where{width:min(480px,calc(100vw - 140px))}
  .oc-h-where{font-size:27px;line-height:27px;letter-spacing:-1.08px}
  .oc-p-many{font-size:18px;line-height:18px;letter-spacing:-.36px}

  .oc-middle{width:auto;margin:100px 0 0;flex-direction:column-reverse;
    gap:25px}
  .oc-bp-lg{display:none}
  .oc-bp-sm{display:block}
  .oc-left{flex:none;width:min(340px,calc(100vw - 50px));font-size:18px;
    line-height:21.6px;letter-spacing:-.54px}
  .oc-photo{flex:none;width:100%;height:226px}

  .oc-p-below{width:min(500px,calc(100vw - 60px));margin-top:100px;font-size:20px;
    line-height:20px;letter-spacing:-.4px}

  .oc-dark{padding-top:84px}
  .oc-dark>.og-alumni-links{margin-top:100px}
  .oc-dark-head{width:calc(100vw - 168px)}
  .oc-diff{font-size:20px;line-height:20px;letter-spacing:-.4px}
  .oc-ability{font-size:17px;line-height:17px;letter-spacing:-.34px}
  .oc-carousel{margin-top:84px}
  /* the source's slideshow component sizes the phone track's height off its
     WIDTH (H = W x 1.29357, its intrinsic ratio), so the slack around the
     centred card shrinks as the viewport widens: 61.8px at 390 -> 61.45px at
     768. A constant padding-block only matched one width (390) and left the
     track ~0.33px too tall at 768, which shifted the whole footer down ~0.33px
     into a broad 1px AA band. The aspect-ratio tracks the component at every
     phone width; align-items:center then centres the shorter card in it. */
  .oc-track{aspect-ratio:1/1.293575}
  .oc-testi{margin-top:118px}

  .oc-arrows{display:none}
  /* the phone pagination sits on a translucent black pill (radius 50) that
     shrink-wraps the seven dot hit-areas and centres itself.
     max-width:100% is the guard for the widest this pill can now get:
     seven 44px dots is 308px, which fits a 320px phone but not the
     narrower content box a desktop scrollbar leaves behind — the dots
     flex-shrink rather than push the page sideways. */
  .oc-dots{display:flex;gap:0;width:fit-content;max-width:100%;margin:0 auto;
    background:rgba(0,0,0,.2);border-radius:50px}
  /* 44x44 per dot — the hit area is transparent padding around the same
     6px dot, so the pagination still reads as seven small dots while each
     one clears the touch-target minimum (issue #89; they were 24x26, the
     smallest control on the site). */
  .oc-dot{flex:0 1 44px;width:44px;height:44px;min-width:24px;
    padding:0;border:0;background:transparent;
    cursor:pointer;display:flex;align-items:center;justify-content:center}
  .oc-dot>div{width:6px;height:6px;border-radius:50%;background:#fff}

  .oc-quote{width:calc(100vw - 180px);font-size:18px;line-height:18px;
    letter-spacing:-.36px}
  .oc-attr{margin-top:15px;font-size:17px;line-height:17px;letter-spacing:-.34px}

  /* CTA band, phone treatment — the same block /approach uses: drop the
     600px desktop height so the band sits to its content instead of eating
     ~90% of a 667px screen. The desktop h1/h2 inset themselves off the
     viewport (72%/53% of 100vw-120px), which at 375 left the heading a 184px
     column and the subhead a 135px one — 95.7/119.9px of dead margin each
     side. On phone the band carries the 30px inset instead and the copy
     fills it. */
  .oc-cta{min-height:auto;padding:80px 30px}
  .oc-cta h1{width:auto;max-width:100%;font-size:35px;line-height:42px}
  .oc-cta h2{width:auto;max-width:390px;font-size:20px;line-height:30px}
}

/* ---- acceptance wall (white): "Where our alumni have been admitted" —
   sits below the "Read their stories" nav and above the CTA band. Uniform
   contain-fit cells give a tidy logo cloud regardless of each mark's aspect
   ratio, with no per-logo sizing to maintain. Heading matches the intro's
   Inter Variable navy display face. ---- */
.oc-schools{background:#fff;padding:120px 40px;display:flex;flex-direction:column;
  align-items:center;gap:56px}
.oc-schools-h{margin:0;max-width:760px;text-align:center;color:#323455;
  letter-spacing:-1.2px;font-size:34px;line-height:1.15;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;font-kerning:none}
.oc-logos{list-style:none;margin:0;padding:0;max-width:1040px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 52px}
.oc-logo{flex:0 0 auto;width:150px;height:80px;display:flex;
  align-items:center;justify-content:center}
.oc-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

@media (min-width:810px) and (max-width:1199.98px){
  .oc-schools{padding:110px 40px;gap:48px}
  .oc-schools-h{font-size:30px}
  .oc-logos{max-width:820px;gap:32px 44px}
  .oc-logo{width:132px;height:72px}
}

@media (max-width:809.98px){
  .oc-schools{padding:90px 24px;gap:40px}
  .oc-schools-h{font-size:24px;letter-spacing:-.8px}
  .oc-logos{gap:28px 24px}
  .oc-logo{width:88px;height:52px}
}

/* ---- alumni pull-quote under the acceptance wall (white band, navy type;
   the real Inter italic face declared above keeps the slant true). The
   figure is a flex child of .oc-schools, so the section's gap spaces it. ---- */
.oc-wall-quote{margin:16px 0 0;max-width:640px;text-align:center}
.oc-wall-quote blockquote{margin:0}
.oc-wall-quote blockquote p{margin:0;font-style:italic;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:24px;line-height:1.3;letter-spacing:-.48px;
  color:#323455;font-variation-settings:"opsz" 14,"wght" 600;font-kerning:none}
.oc-wall-quote figcaption{margin:16px 0 0;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:16px;line-height:1.4;color:#717171;
  font-variation-settings:"opsz" 14,"wght" 600}

/* ---- full acceptance list (light band): all 93 schools from the academy's
   published acceptance report, alphabetical, offer count per school.
   CSS columns with break-inside:avoid keep each name+count row intact. ---- */
.oc-accept{background:#f6f7fa;padding:120px 40px;display:flex;
  flex-direction:column;align-items:center}
.oc-accept-h{margin:0;max-width:760px;text-align:center;color:#323455;
  letter-spacing:-1.2px;font-size:34px;line-height:1.15;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 700;font-kerning:none}
.oc-accept-sub{margin:20px 0 0;max-width:620px;text-align:center;color:#717171;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:18px;line-height:1.45;
  font-variation-settings:"opsz" 14,"wght" 500}
.oc-accept-list{list-style:none;margin:56px 0 0;padding:0;width:100%;
  max-width:1040px;columns:3;column-gap:56px;color:#575757;
  font-family:"Inter Variable","Inter Variable Placeholder",sans-serif;
  font-weight:400;font-size:15px;line-height:1.35;
  font-variation-settings:"opsz" 14,"wght" 500}
.oc-accept-list li{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:8px 0;border-bottom:1px solid rgba(50,52,85,.1);
  break-inside:avoid}
/* the studio red (--red, #c8283f), not the brand #e54e5e: on this band
   #e54e5e is ~3.5:1 — below AA for 15px text; #c8283f is ~5.1:1 */
.oc-accept-n{flex:0 0 auto;color:var(--red);font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 14,"wght" 700}

@media (min-width:810px) and (max-width:1199.98px){
  .oc-accept{padding:110px 40px}
  .oc-accept-h{font-size:30px}
  .oc-accept-list{max-width:820px;columns:2;column-gap:48px}
}

@media (max-width:809.98px){
  .oc-wall-quote blockquote p{font-size:19px;letter-spacing:-.38px}
  .oc-wall-quote figcaption{font-size:15px}
  .oc-accept{padding:90px 24px}
  .oc-accept-h{font-size:24px;letter-spacing:-.8px}
  .oc-accept-sub{font-size:16px}
  .oc-accept-list{margin-top:40px;columns:1;font-size:14.5px}
}