/* ============================================================================
   OnePageCheckout Pro — "WooCommerce checkout on foldable phones" landing page
   (/foldable-phone-checkout-woocommerce/). Loaded after shopify.css (shared
   landing-page grammar: lead, section heads, splits, bullets, tables, FAQ, CTA).
   This file adds only what is new: the status badge, the foldable in 3D (an
   original device drawing with depth, two halves on a hinge, pure CSS transforms
   driven by three numbers from fold.js), the comparison pair, the posture
   control, the try-it card, and a hinge-aware layout for the page itself.
   ============================================================================ */

/* ---------- hero ---------- */
.opc-fd-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-bottom: 18px; }
.opc-fd-hero__top .opc-eyebrow { margin: 0; }
.opc-fd-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--ink); color: #fff;
	font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.opc-fd-status i { width: 7px; height: 7px; border-radius: 50%; background: #8fb0ff; box-shadow: 0 0 0 3px rgba(143,176,255,.25); }
.opc-fd-status--available i { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.opc-hero--fd h1 { max-width: 21ch; }
.opc-hero--fd .opc-hero__sub { max-width: 64ch; }
.opc-fd-strip { position: relative; z-index: 2; max-width: 1200px; margin: 28px auto 0; padding-inline: var(--pad); }
.opc-fd-hero__link { margin: 22px 0 0; text-align: center; }

/* ---------- labels ---------- */
.opc-fd-tag { display: block; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.opc-fd-tag--after { color: var(--sh-link); }

/* ---------- a foldable in 3D ----------
   One device = two halves on a hinge. Everything is a function of three numbers the
   script sets inline: --fd-open (0 = flat, 1 = the half-open posture) and the camera
   tilt --fd-tx / --fd-ty. Geometry comes from the screen panel (--fd-sw x --fd-sh CSS px,
   the physical inner screen) and the browser chrome inside it (--fd-ct above the page,
   --fd-cb below), so the capture sits where the page sits and the hinge is the panel's
   middle. The capture is the same file in both halves (fetched once), each half shows
   its side. Depth: six extruded layers behind each face (--fd-t thick). The box reserves
   its space with an aspect ratio, so nothing the device does shifts the layout.
   Without JS the inline --fd-open shows the posture at rest; with motion allowed
   (html.opc-fd-motion) the halves lie flat until the script folds them. */
.opc-fd-3d { --fd-open: 1; --fd-tx: 0deg; --fd-ty: 0deg; --fd-ang: 32deg; --fd-lid: -72deg; --fd-cx: 9deg; --fd-cy: -9deg;
	--fd-sw: 951; --fd-sh: 669; --fd-ct: 54; --fd-cb: 30;
	--fd-t: 12px; --fd-bezel: 7px; --fd-r: 20px; --fd-k: .84; --fd-top: 11%; --fd-inset: 4%; --fd-persp: 1400px; --fd-po: 50% 40%;
	--fd-rim: linear-gradient(160deg, #ecebe6, #bfbbb3 55%, #a9a59c); /* titanium */
	--fd-edge: linear-gradient(180deg, #f2f0eb, #9a968e);
	--fd-ink: #101216; --fd-chrome: #f3f3f5; --fd-pill: #e1e1e6;
	position: relative; width: 100%; aspect-ratio: calc(var(--fd-sw) / var(--fd-sh) * var(--fd-k)); perspective: var(--fd-persp); perspective-origin: var(--fd-po);
	user-select: none; -webkit-user-select: none; }
.opc-fd-3d__dev { position: absolute; left: var(--fd-inset); right: var(--fd-inset); top: var(--fd-top); aspect-ratio: var(--fd-sw) / var(--fd-sh); transform-style: preserve-3d;
	transform: rotateX(calc(var(--fd-cx) + var(--fd-ty))) rotateY(calc(var(--fd-cy) + var(--fd-tx))); }
.opc-fd-3d__half { position: absolute; transform-style: preserve-3d; }
.opc-fd-3d__body { position: absolute; inset: 0; border-radius: inherit; background: var(--fd-edge); backface-visibility: hidden; }
.opc-fd-3d__body:nth-child(1) { transform: translateZ(calc(var(--fd-t) * -.17)); }
.opc-fd-3d__body:nth-child(2) { transform: translateZ(calc(var(--fd-t) * -.33)); }
.opc-fd-3d__body:nth-child(3) { transform: translateZ(calc(var(--fd-t) * -.5)); }
.opc-fd-3d__body:nth-child(4) { transform: translateZ(calc(var(--fd-t) * -.67)); }
.opc-fd-3d__body:nth-child(5) { transform: translateZ(calc(var(--fd-t) * -.83)); }
.opc-fd-3d__body:nth-child(6) { transform: translateZ(calc(var(--fd-t) * -1)); background: var(--fd-rim); }
.opc-fd-3d__face { position: absolute; inset: 0; border-radius: inherit; background: var(--fd-ink); overflow: hidden; backface-visibility: hidden; transform: translateZ(.1px); }
/* the metal ring: the frame seen from the front, drawn on the face (it has no hinge side: the panel is one piece) */
.opc-fd-3d__face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2.5px #d6d3cc, inset 0 0 0 3.5px rgba(255,255,255,.55), inset 0 0 0 4px rgba(11,13,18,.25); }
.opc-fd-3d__screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--fd-chrome); }
.opc-fd-3d__screen img { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
/* two captures (the layout differs between flat and half-open): the swap happens between 40% and 60% of the fold, when the halves are already angled */
.opc-fd-3d__img--open { opacity: clamp(0, calc((var(--fd-open) - .4) * 5), 1); }
/* the black bezel over the outer edges (none on the hinge side: the panel is one piece) */
.opc-fd-3d__screen::after { content: ""; position: absolute; inset: 0; border: var(--fd-bezel) solid var(--fd-ink); border-radius: inherit; pointer-events: none; }
/* the browser chrome: a bar above the page with an address pill cut by the hinge */
.opc-fd-3d__bar { position: absolute; left: 0; right: 0; top: 0; background: var(--fd-chrome); }
.opc-fd-3d__bar::after { content: ""; position: absolute; top: 50%; height: 50%; max-height: 16px; transform: translateY(-50%); background: var(--fd-pill); }
/* the glass: a sheen, plus shading toward the hinge that grows with the fold */
.opc-fd-3d__glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05)); }
.opc-fd-3d__glass::after { content: ""; position: absolute; inset: 0; opacity: var(--fd-open); }
.opc-fd-3d__hinge { position: absolute; backface-visibility: hidden; }
.opc-fd-3d__shadow { position: absolute; pointer-events: none; }

/* hinge vertical: book (and flat). Inward-folding: the outer edges come forward, the spine
   stays at the back. Left half pivots on its right edge, right half on its left edge. */
.opc-fd-3d--v .opc-fd-3d__half--a { inset: 0 50% 0 0; border-radius: var(--fd-r) 0 0 var(--fd-r); transform-origin: 100% 50%; transform: rotateY(calc(var(--fd-open) * var(--fd-ang))); }
.opc-fd-3d--v .opc-fd-3d__half--b { inset: 0 0 0 50%; border-radius: 0 var(--fd-r) var(--fd-r) 0; transform-origin: 0 50%; transform: rotateY(calc(var(--fd-open) * -1 * var(--fd-ang))); }
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__screen::after { border-right-width: 0; }
.opc-fd-3d--v .opc-fd-3d__half--b .opc-fd-3d__screen::after { border-left-width: 0; }
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__face::after { right: -5px; }
.opc-fd-3d--v .opc-fd-3d__half--b .opc-fd-3d__face::after { left: -5px; }
.opc-fd-3d--v .opc-fd-3d__screen img { width: 200%; top: calc(var(--fd-ct) / var(--fd-sh) * 100%); }
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__screen img { left: 0; }
.opc-fd-3d--v .opc-fd-3d__half--b .opc-fd-3d__screen img { left: -100%; }
.opc-fd-3d--v .opc-fd-3d__bar { height: calc(var(--fd-ct) / var(--fd-sh) * 100%); }
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__bar::after { right: 0; width: 62%; border-radius: 999px 0 0 999px; }
.opc-fd-3d--v .opc-fd-3d__half--b .opc-fd-3d__bar::after { left: 0; width: 62%; border-radius: 0 999px 999px 0; }
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__glass::after { background: linear-gradient(90deg, rgba(11,13,18,0) 55%, rgba(11,13,18,.26)); }
.opc-fd-3d--v .opc-fd-3d__half--b .opc-fd-3d__glass::after { background: linear-gradient(270deg, rgba(11,13,18,0) 55%, rgba(11,13,18,.3)); }
/* the hinge: a barrel behind the spine, its end caps peeking out at the V */
.opc-fd-3d--v .opc-fd-3d__hinge { left: 50%; top: -2px; bottom: -2px; width: calc(var(--fd-t) * 1.5); margin-left: calc(var(--fd-t) * -.75); border-radius: 4px;
	transform: translateZ(calc(var(--fd-t) * -.55)); background: linear-gradient(90deg, #7d7970, #d9d6cf 45%, #e9e7e1 55%, #7d7970); }
/* the open screen's crease: a hairline that fades as the halves fold away from the plane */
.opc-fd-3d--v .opc-fd-3d__half--a .opc-fd-3d__screen::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(11,13,18,.14); opacity: calc(1 - var(--fd-open)); z-index: 1; }
/* ground shadow: on the page, under the device (outside the 3D context, so the halves never cover it;
   the perspective makes .opc-fd-3d a stacking context, so z-index -1 paints under the device) */
.opc-fd-3d--v .opc-fd-3d__shadow { display: none; }
.opc-fd-3d--v::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 12%; z-index: -1; pointer-events: none; filter: blur(10px); opacity: calc(.55 + .45 * var(--fd-open));
	background: radial-gradient(ellipse at 50% 40%, rgba(11,13,18,.42), rgba(11,13,18,.14) 48%, transparent 72%); }
/* the wide model: thicker body, camera a little higher so the bottom edge shows */
.opc-fd-3d--wide { --fd-t: 14px; --fd-cx: 13deg; --fd-cy: -10deg; --fd-bezel: 6px; --fd-top: 13%; }

/* hinge horizontal: half-open like a laptop. The device element is the table plane seen
   from 38 degrees above (camera rotateX 52), turned 6 degrees on the table; the deck
   (lower half) lies in it, the lid (upper half, pivot on its bottom edge) stands up to
   105 degrees from the deck, seen 23 degrees from face-on. */
.opc-fd-3d--h { --fd-cx: 52deg; --fd-cy: -6deg; --fd-lid: -75deg; --fd-persp: 2600px; --fd-po: 50% 50%; --fd-k: 1.36; --fd-top: 5%; --fd-inset: 13%; }
/* the table plane: the yaw is a turn on the table (about the element's own normal), then the tilt back */
.opc-fd-3d--h .opc-fd-3d__dev { transform: rotateX(calc(var(--fd-cx) + var(--fd-ty))) rotateZ(calc(var(--fd-cy) + var(--fd-tx))); }
.opc-fd-3d--h .opc-fd-3d__half--a { inset: 0 0 50% 0; border-radius: var(--fd-r) var(--fd-r) 0 0; transform-origin: 50% 100%; transform: rotateX(calc(var(--fd-open) * var(--fd-lid))); }
.opc-fd-3d--h .opc-fd-3d__half--b { inset: 50% 0 0 0; border-radius: 0 0 var(--fd-r) var(--fd-r); }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__screen::after { border-bottom-width: 0; }
.opc-fd-3d--h .opc-fd-3d__half--b .opc-fd-3d__screen::after { border-top-width: 0; }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__face::after { bottom: -5px; }
.opc-fd-3d--h .opc-fd-3d__half--b .opc-fd-3d__face::after { top: -5px; }
.opc-fd-3d--h .opc-fd-3d__screen img { width: 100%; left: 0; }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__screen img { top: calc(var(--fd-ct) / var(--fd-sh) * 200%); }
.opc-fd-3d--h .opc-fd-3d__half--b .opc-fd-3d__screen img { top: calc((var(--fd-ct) / var(--fd-sh) - .5) * 200%); }
.opc-fd-3d--h .opc-fd-3d__bar { height: calc(var(--fd-ct) / var(--fd-sh) * 200%); }
.opc-fd-3d--h .opc-fd-3d__half--b .opc-fd-3d__bar { display: none; }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__bar::after { left: 50%; width: 62%; transform: translate(-50%, -50%); border-radius: 999px; }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__glass::after { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(11,13,18,0) 50%, rgba(11,13,18,.1)); }
.opc-fd-3d--h .opc-fd-3d__half--b .opc-fd-3d__glass::after { background: linear-gradient(180deg, rgba(11,13,18,.22), rgba(11,13,18,.04) 35%, rgba(255,255,255,.08)); }
.opc-fd-3d--h .opc-fd-3d__hinge { top: 50%; left: 2px; right: 2px; height: var(--fd-t); margin-top: calc(var(--fd-t) * -.5); border-radius: 4px;
	transform: translateZ(calc(var(--fd-t) * -.5)); background: linear-gradient(180deg, #7d7970, #d9d6cf 45%, #e9e7e1 55%, #7d7970); }
.opc-fd-3d--h .opc-fd-3d__half--a .opc-fd-3d__screen::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(11,13,18,.14); opacity: calc(1 - var(--fd-open)); z-index: 1; }
/* the table: a soft shadow in the table plane under the whole device */
.opc-fd-3d--h .opc-fd-3d__shadow { inset: -4% -9% -12% -9%; transform: translateZ(-3px); filter: blur(8px);
	background: radial-gradient(ellipse at 50% 50%, rgba(11,13,18,.4), rgba(11,13,18,.14) 50%, transparent 76%); }
/* the android-like model: graphite frame, a touch more rounded */
.opc-fd-3d--android { --fd-rim: linear-gradient(160deg, #4a505c, #22262e 55%, #171a20); --fd-edge: linear-gradient(180deg, #4b515c, #0f1114); --fd-bezel: 6px; --fd-r: 22px; --fd-t: 13px; }
.opc-fd-3d--android.opc-fd-3d--v { --fd-cx: 13deg; }
.opc-fd-3d--android .opc-fd-3d__hinge { background: linear-gradient(90deg, #1a1d23, #555b66 45%, #6a707b 55%, #1a1d23); }
.opc-fd-3d--android.opc-fd-3d--h .opc-fd-3d__hinge { background: linear-gradient(180deg, #1a1d23, #555b66 45%, #6a707b 55%, #1a1d23); }
.opc-fd-3d--android .opc-fd-3d__face::after { box-shadow: inset 0 0 0 2px #3a404b, inset 0 0 0 3px rgba(255,255,255,.18); }

/* with motion allowed (html.opc-fd-motion) the device lies flat until the script takes over (no flash of the folded state) */
.opc-fd-motion .opc-fd-3d:not(.is-live) { --fd-open: 0 !important; }
.opc-fd-js .opc-fd-3d { cursor: grab; }
.opc-fd-js .opc-fd-3d.is-drag { cursor: grabbing; }
@media (hover: none) { .opc-fd-js .opc-fd-3d { cursor: default; } }

/* ---------- the posture control under a figure ---------- */
.opc-fd-ctlwrap { display: grid; gap: 6px; justify-items: center; }
.opc-fd-ctl { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); justify-self: center; }
.opc-fd-ctl__b { appearance: none; border: 0; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--font); letter-spacing: -.005em; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.opc-fd-ctl__b:hover { color: var(--ink); }
.opc-fd-ctl__b[aria-pressed="true"] { background: var(--ink); color: #fff; }
.opc-fd-ctl__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opc-fd-ctl__hint { margin: 0; font-size: 12.5px; color: var(--faint); text-align: center; }
html:not(.opc-fd-js) .opc-fd-ctlwrap { display: none; }
@media (hover: none) { .opc-fd-ctl__hint { display: none; } .opc-fd-ctl__b { padding: 15px 18px; } }

/* ---------- figures: one device, or the comparison pair ---------- */
.opc-fd-fig3d { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.opc-fd-fig3d__one { width: 100%; display: grid; gap: 6px; }
.opc-fd-fig3d figcaption { text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 70ch; }
.opc-fd-pair { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 6px; align-items: start; }
.opc-fd-pair__col { display: grid; gap: 6px; min-width: 0; }
.opc-fd-pair__arrow { color: var(--faint); display: grid; place-items: center; align-self: center; padding: 0 2px; }
.opc-fd-pair__arrow svg { width: 22px; height: 22px; }
.opc-fd-fig3d--hero { margin: 0 auto; }

/* ---------- text + device splits ---------- */
.opc-fd-block { margin-top: clamp(40px, 5vw, 64px); }
.opc-fd-block.opc-sh-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.opc-fd-block--text .opc-sh-split__text { max-width: 760px; }
.opc-fd-block .opc-sh-split__text p { margin: 0; }
.opc-fd-block .opc-fd-fig3d { width: 100%; }

/* ---------- prose sections (postures, what stays the same) ---------- */
.opc-fd-prose { max-width: 760px; display: grid; gap: 22px; }
.opc-fd-prose > p { margin: 0; color: var(--text); line-height: 1.7; text-wrap: pretty; }
.opc-fd-bullets li { font-size: 16.5px; line-height: 1.65; }
.opc-fd-prose a, .opc-fd-try a:not(.opc-btn), .opc-fd-tablefoot a { color: var(--sh-link); text-decoration: underline; text-decoration-color: rgba(47,107,255,.35); text-underline-offset: 3px; }

/* ---------- tables ---------- */
.opc-fd-tables { max-width: 860px; }
.opc-fd-table tbody th { width: 44%; min-width: 180px; }
.opc-fd-tablefoot { max-width: 760px; line-height: 1.6; font-size: 13.5px; }
.opc-fd-after-table { margin-top: 24px; }

/* ---------- try it ---------- */
.opc-fd-try { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: start; max-width: 900px; background: var(--surface); border: 1px solid rgba(47,107,255,.35); border-radius: var(--r-lg);
	padding: clamp(24px, 4vw, 44px); box-shadow: 0 12px 30px -12px rgba(47,107,255,.25), var(--shadow-sm); }
.opc-fd-try__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.opc-fd-try__body { display: grid; gap: 16px; justify-items: start; }
.opc-fd-try__body h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.03em; }
.opc-fd-try__body p { margin: 0; color: var(--text); line-height: 1.7; text-wrap: pretty; }
.opc-fd-steps { margin: 0; padding: 0; list-style: none; counter-reset: fd; display: grid; gap: 12px; }
.opc-fd-steps li { counter-increment: fd; position: relative; padding-left: 40px; line-height: 1.6; color: var(--text); }
.opc-fd-steps li::before { content: counter(fd); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
	background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

/* ---------- CTA ---------- */
.opc-fd-cta__links { margin: 18px auto 0 !important; font-size: 15px !important; color: rgba(255,255,255,.55); }
.opc-fd-cta__links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.opc-fd-cta__links a:hover { text-decoration-color: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.opc-fd-block.opc-sh-split { grid-template-columns: 1fr; }
	.opc-fd-block .opc-fd-fig3d { max-width: 560px; justify-self: center; }
}
@media (max-width: 760px) {
	/* shopify.css turns --num tables into stacked cards here; keep the caption full width */
	.opc-fd-table .opc-sh-table__cap { display: block; }
	.opc-fd-table tbody th { width: auto; min-width: 0; }
}
@media (max-width: 700px) {
	.opc-fd-pair { grid-template-columns: minmax(0, 1fr); row-gap: 4px; max-width: 520px; }
	.opc-fd-pair__arrow { padding: 2px 0; }
	.opc-fd-pair__arrow svg { transform: rotate(90deg); }
	.opc-fd-3d { --fd-r: 14px; --fd-bezel: 5px; --fd-t: 9px; }
	.opc-fd-3d--wide { --fd-k: .88; }
	.opc-fd-3d--android { --fd-r: 16px; --fd-bezel: 4px; --fd-t: 8px; }
	.opc-fd-try { grid-template-columns: 1fr; }
}

/* ---------- the page itself on a half-open foldable (hinge vertical) ----------
   Cheap and honest: the wrap loses its max-width, two-up layouts put one item on
   each pane with the hinge in the gutter, and single-column text keeps to the left
   pane. The hero pair puts WooCommerce on the left pane and OnePageCheckout on the right. */
@media (horizontal-viewport-segments: 2) {
	.opc-fd { --fd-seg: calc(env(viewport-segment-width 0 0, 50vw) - 48px); }
	.opc-fd .opc-wrap, .opc-fd .opc-fd-strip, .opc-fd .opc-hero__in { max-width: none; padding-inline: 24px; }
	.opc-fd .opc-hero--fd { text-align: left; }
	.opc-fd .opc-hero--fd .opc-hero__in > * { max-width: var(--fd-seg); margin-inline: 0; }
	.opc-fd .opc-fd-hero__top, .opc-fd .opc-hero__cta, .opc-fd .opc-hero__trust { justify-content: flex-start; }
	.opc-fd .opc-sh-lead__in, .opc-fd .opc-sec__head, .opc-fd .opc-sh-p, .opc-fd .opc-sh-h3, .opc-fd .opc-fd-prose, .opc-fd .opc-fd-block--text, .opc-fd .opc-sh-faq, .opc-fd .opc-fd-tables, .opc-fd .opc-cta, .opc-fd .opc-sh-legal, .opc-fd .opc-fd-try { max-width: var(--fd-seg); margin-inline: 0; }
	.opc-fd .opc-sec__head--center { text-align: left; }
	.opc-fd .opc-fd-fig3d--hero { max-width: none; margin-inline: 0; }
	.opc-fd .opc-fd-pair { max-width: none; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 48px; }
	.opc-fd .opc-fd-pair__arrow { visibility: hidden; padding: 0; }
	.opc-fd .opc-fd-fig3d figcaption { text-align: left; justify-self: start; }
	.opc-fd .opc-fd-block.opc-sh-split { grid-template-columns: 1fr 1fr; column-gap: 48px; }
	.opc-fd .opc-fd-block .opc-fd-fig3d { max-width: none; }
}