@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;
font-display:swap;src:url(/assets/fonts/ibm-plex-mono-700.woff2) format('woff2')}
:root{--accent:#0f766e;--buy:#0f766e;--buy-label:#ffffff;--accent-label:#ffffff;--font-body:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;--font-head:'Inter','Inter',-apple-system,sans-serif;--page-bg:#fafaf9;
--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box;font-family:var(--font-body);min-width:0}
img{max-width:100%}
/* No single string may widen the page. break-word keeps normal wrapping and
   only breaks what genuinely cannot fit. */
.oc-quote,.oc-inc,.oc-bonustitle,.oc-bumpdesc,.oc-faqa,.oc-faqq,.oc-supportline,.oc-legal,
.oc-headline,.oc-osline,.oc-reassure,.oc-retemail{overflow-wrap:break-word}
body{margin:0;background:var(--page-bg);color:#17181c;font-size:16px;line-height:1.55}
a{color:var(--accent)}
input::placeholder{color:#686d76}
@keyframes pulseDigit{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.oc-lock{position:relative;width:12px;height:10px;display:inline-block;flex-shrink:0}
.oc-lock span:first-child{position:absolute;top:0;left:2px;width:8px;height:6px;border:1.6px solid;border-bottom:none;border-radius:8px 8px 0 0}
.oc-lock span:last-child{position:absolute;bottom:0;left:0;width:12px;height:7px;border-radius:2px}
/* Inherits colour from its row (currentColor on the paths), so the expired
   banner's glyph stays muted grey while the guarantee's picks up the accent
   below. Sized in em so it tracks the surrounding font size. */
.oc-glyph{width:1.15em;height:1.15em;flex-shrink:0;display:inline-block;vertical-align:-.18em}
/* The guarantee sits directly above the buy button and is the last piece of
   reassurance before payment, so its shield is deliberately larger and heavier
   than an inline glyph — it should read as a badge, not as bullet punctuation. */
.oc-reassure .oc-glyph{color:var(--accent);width:1.6em;height:1.6em;stroke-width:2.25}
.oc-testbanner{background:#b45309;color:#fff;text-align:center;font-weight:800;font-size:14px;padding:8px;letter-spacing:.08em}
/* Shown when ?test=1 was asked for and refused. Red rather than the amber of
   the test banner: amber reads as "you are safe", and this means the opposite.
   Deliberately a statement of fact, not a warning — a real buyer sent a forged
   ?test=1 link sees only that their payment is real, which is true and does
   not discourage them; the owner one URL away from a rehearsal sees the answer
   before they type a card. */
.oc-livebanner{background:#b91c1c;color:#fff;text-align:center;font-weight:800;font-size:14px;padding:8px;letter-spacing:.06em}
.oc-livebanner u{text-underline-offset:2px}
/* The client toggles visibility with the hidden attribute, whose UA rule is
   display:none at the LOWEST specificity — any class rule with a display wins.
   That silently stranded the countdown skeleton beside the live timer and left
   the order-bump line in the summary permanently, as if it were always bought.
   Every hidden on this page routes through here, so it must outrank them. */
[hidden]{display:none!important}
/* header */
.oc-header{border-bottom:1px solid #e7e8eb;background:#fff}
.oc-header-in{max-width:1160px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.oc-brand{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#17181c;font-family:var(--font-head)}
/* A seller's logo is the page's main brand signal — 30px in a 140px box read
   as a favicon. Cap by height so wide wordmarks and square marks both fill it. */
.oc-brand img{height:52px;max-width:260px;object-fit:contain;object-position:left center;display:block}
@media (max-width:479px){.oc-brand img{height:36px;max-width:150px}}
@media (max-width:479px){.oc-header-in{padding:10px 16px}}
.oc-headright{display:flex;align-items:center;gap:16px}
/* The lock glyph carries the meaning; the words cost a third of the header. */
@media (max-width:479px){.oc-secure span{display:none}}
.oc-secure{display:flex;align-items:center;gap:7px;color:#5b6270;font-size:14px;font-weight:600}
/* Sticky mini-countdown (mobile only — desktop has the sticky pay column) */
.oc-sticky{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
border-top:1px solid #e7e8eb;box-shadow:0 -2px 14px rgba(23,24,28,.10);backdrop-filter:blur(8px)}
.oc-stickycd{font-size:14px;font-weight:600;color:#5b6270;white-space:nowrap}
.oc-stickylabel{font-weight:600}
.oc-stickytime{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;color:#17181c;letter-spacing:-.01em}
.oc-sticky.final .oc-stickytime{color:var(--accent)}
.oc-stickybuy{flex:1;min-width:0;min-height:48px;padding:12px 16px;border:none;border-radius:10px;background:var(--buy);
color:var(--buy-label);font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.oc-stickyprice{font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (min-width:1024px){.oc-sticky{display:none}}
/* The bar floats over the page; the footer needs room to clear it. */
@media (max-width:1023px){.oc-footer,.oc-footer-min{padding-bottom:96px}}
/* banner */
.oc-bannerwrap{background:color-mix(in srgb,var(--accent) 7%,white);border-bottom:1px solid #e7e8eb;position:relative}
.oc-bannerwrap.final{background:color-mix(in srgb,var(--accent) 88%,black)}
.oc-bannerwrap.expired{background:#f1f2f4}
.oc-banner-in{max-width:1160px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center}
.oc-banner-in.expired-in{padding:14px 20px;gap:10px;font-size:14.5px;font-weight:600;color:#5b6270}
.oc-bannerlabel{font-size:13.5px;font-weight:700;color:#17181c}
.final .oc-bannerlabel{color:#ffffff}
.oc-unit{display:flex;flex-direction:column;align-items:center;min-width:42px}
.oc-digit{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:26px;letter-spacing:-.02em;color:#17181c}
.final .oc-digit{font-weight:800;color:#ffffff}
.oc-sep{opacity:.4;min-width:auto}
.oc-unitlabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#686d76;margin-top:2px;display:block}
.final .oc-unitlabel{color:#ffffff;opacity:.75}
.oc-digitbox{display:flex;align-items:center;gap:8px;padding:8px 14px}
.oc-dashboard{border:1px solid #e7e8eb;border-radius:10px}
.final .oc-dashboard{border-color:rgba(255,255,255,.25)}
.oc-boarding{border:1.5px dashed #cfd3da;border-radius:999px;padding:8px 16px;gap:10px}
.final .oc-boarding{border-color:rgba(255,255,255,.5)}
.oc-fliprow{display:flex;gap:8px}
.oc-flipdigit{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;font-size:24px;letter-spacing:-.02em;background:#17181c;color:#ffffff;padding:6px 10px;border-radius:6px;min-width:44px;text-align:center;display:inline-block}
.final .oc-flipdigit{background:rgba(255,255,255,.15)}
.oc-skeleton{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #e7e8eb;border-radius:10px}
.oc-skeleton div{width:150px;height:38px;border-radius:6px;background:#e7e8eb;animation:pulseDigit 1.1s ease-in-out infinite}
.final .oc-skeleton div{background:rgba(255,255,255,.3)}
.oc-srdeadline{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* layout */
.oc-main{max-width:1160px;margin:0 auto;padding:20px 16px}
@media (min-width:1024px){.oc-main{padding:32px 20px}}
.oc-jump{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;min-height:48px;padding:12px 18px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;background:color-mix(in srgb,var(--accent) 8%,white);border:1.5px solid color-mix(in srgb,var(--accent) 30%,white);border-radius:12px}
@media (min-width:1024px){.oc-jump{display:none}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.oc-pay{scroll-margin-top:64px}
.oc-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:1024px){.oc-grid{grid-template-columns:1.05fr .95fr;gap:28px}}
.oc-paycol{position:static}
@media (min-width:1024px){.oc-paycol{position:sticky;top:24px}}
.oc-card{background:#fff;border:1px solid #e7e8eb;border-radius:16px;padding:24px}
.oc-summary{padding:28px 24px}
/* summary */
.oc-productimg{margin:-4px 0 20px;aspect-ratio:16/9;width:100%;border-radius:12px;object-fit:cover;background:#f1f2f4;display:block}
.oc-productimg-ph{display:flex;align-items:center;justify-content:center;object-fit:unset;background:#f6f7f9;border:2px dashed #d3d6db}
.oc-productimg-ph span{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#686d76}
.oc-headline{margin:0;font-size:26px;line-height:1.25;font-weight:800;color:#17181c;letter-spacing:-.01em;font-family:var(--font-head)}
.oc-included{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.oc-included.oc-included-more{margin-top:10px}
.oc-more{margin-top:4px}
.oc-more summary{min-height:44px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:15px;font-weight:700;color:var(--accent)}
.oc-morecount{font-weight:600;color:#686d76}
.oc-inc{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:#33363d}
.oc-check{color:var(--accent);font-weight:700}
/* Testimonials 2/3 sit below the payment card/buy button on every viewport,
   so — unlike content ahead of the CTA — showing them doesn't lengthen the
   path to pay. Always a single column: this block is confined to the payment
   column's width (~520px, see .oc-latertestimonials-row below), and fitting
   two cards side by side in that width left each one under 260px — too
   narrow to read comfortably (three-word lines). Full-width stacked cards
   read the same on every screen size, so there's no separate mobile rule. */
.oc-latertestimonials{display:flex;flex-direction:column;gap:16px}
.oc-latertestimonials .oc-testimonial-summary,.oc-latertestimonials .oc-testimonial-summary+.oc-testimonial-summary{margin-top:0}
/* The row mirrors .oc-grid's own column split (same fr-widths, same 1160px
   container) so the testimonial column lands directly under the payment
   column on desktop, instead of floating centered under the whole page
   (OCA-21 follow-up: the old .oc-footer centering read as disconnected from
   the checkout form above it). The spacer is invisible and only exists to
   consume the offer-column's width; below 1024px there's no split to mirror,
   so the row is a plain block and .oc-latertestimonials alone sets the layout. */
.oc-latertestimonials-row{margin-top:20px}
.oc-latertestimonials-spacer{display:none}
@media (min-width:1024px){
  .oc-latertestimonials-row{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
  .oc-latertestimonials-spacer{display:block}
}
.oc-bonuses{margin-top:22px;padding-top:22px;border-top:1px solid #eceef1;display:flex;flex-direction:column;gap:10px}
.oc-boneyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#686d76}
.oc-bonus{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;color:#33363d}
.oc-bonus.gone{color:#686d76}
.oc-bonus.gone .oc-bonustitle{text-decoration:line-through}
.oc-bonusvalue{color:#686d76;white-space:nowrap}
.oc-expiredpill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#686d76;background:#f1f2f4;border-radius:100px;padding:3px 8px;white-space:nowrap}
.oc-priceblock{margin-top:22px;padding-top:22px;border-top:1px solid #eceef1}
.oc-pricerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oc-anchor{font-size:16px;color:#686d76;text-decoration:line-through;font-family:var(--mono)}
.oc-price{font-size:34px;font-weight:800;color:#17181c;font-family:var(--mono);letter-spacing:-.02em}
.oc-valuestack{margin-top:8px;font-size:14px;color:var(--accent);font-weight:700}
.oc-proofpill{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#f6f7f8;border-radius:100px;font-size:14px;color:#5b6270;font-weight:600}
.oc-star{color:#8a6d00}.oc-rating{font-weight:700}.oc-proofdot{color:#686d76}
/* testimonial */
.oc-testimonial-summary{background:#ffffff;border:1px solid #e7e8eb;border-radius:16px;padding:24px;margin-top:20px}
.oc-testimonial-summary+.oc-testimonial-summary{margin-top:12px}
.oc-quotemark{font-size:26px;color:var(--accent);line-height:1;font-family:Georgia,serif}
.oc-testimonial-summary .oc-quote{margin-top:4px;font-size:16px;color:#33363d;line-height:1.55}
.oc-byline{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:#5b6270;font-weight:600}
.oc-tphoto{width:36px;height:36px;border-radius:50%;object-fit:cover}
/* payment zone */
.oc-step{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;font-weight:700;color:#686d76}
.oc-fields{display:flex;flex-direction:column;gap:12px}
.oc-fields label{display:block;font-size:13.5px;font-weight:700;color:#33363d;margin-bottom:5px}
.oc-fields input{width:100%;padding:13px 12px;border:1.5px solid #8b919b;border-radius:8px;font-size:16px;color:#17181c;outline:none}
.oc-fields input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,white)}
.oc-fields input.error{border-color:#c2410c}
.oc-fielderror{margin-top:5px;font-size:13.5px;color:#c2410c;font-weight:600}
/*
 * A prefilled, locked email reads as settled rather than broken: the buyer
 * should see an address they recognise, not a field that looks disabled by a
 * fault. Muted ground, normal ink, no "not-allowed" cursor.
 *
 * The focus ring is deliberately left ALONE. A readonly input is still
 * focusable and still needs a visible focus indicator; muting it because the
 * field cannot be typed into would take the keyboard user's place-marker away
 * to make the field look quieter.
 */
.oc-fields input[readonly]{background:#f1f2f4;cursor:default}
.oc-emailswap{margin-top:6px;padding:0;border:0;background:none;font-size:13.5px;
  color:#33363d;text-decoration:underline;cursor:pointer}
.oc-intervals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.oc-interval{position:relative;border:1.5px solid #dfe1e5;border-radius:12px;padding:12px 14px;min-height:64px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px}
.oc-interval.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,white)}
.oc-interval input{position:absolute;opacity:0;pointer-events:none}
.oc-intlabel{font-size:13.5px;font-weight:700;color:#5b6270}
.oc-intprice{font-size:18px;font-weight:800;font-family:var(--mono);color:#17181c}
.oc-per{font-size:13px;font-weight:600;color:#686d76;font-family:var(--font-body)}
.oc-savings{font-size:12.5px;font-weight:700;color:var(--accent)}
.oc-element{margin-top:16px;min-height:120px}
.oc-express{margin-bottom:18px}
.oc-orpay{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13.5px;font-weight:600;color:#686d76}
.oc-orpay::before,.oc-orpay::after{content:'';flex:1;height:1px;background:#e7e8eb}
.oc-elementfail{border:1.5px solid #c2410c;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;color:#7c2d12;background:#fff7ed}
.oc-element-skeleton{border:1px solid #dfe1e5;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.oc-element-skeleton div{height:18px;border-radius:5px;background:#eceef1;animation:pulseDigit 1.1s ease-in-out infinite}
.oc-poweredby{margin-top:8px;font-size:12.5px;color:#686d76;text-align:right}
/* The order bump, in the shape buyers already recognise.
   This is the one block on the page that deliberately IGNORES the seller's
   accent palette. Everything else here is themed, and that is right — but a
   bump styled in the page's own colours reads as part of the page and gets
   skimmed, which is the entire failure mode it exists to avoid. The heavy
   black dash, the cream field and the yellow headline band are the convention
   buyers have been trained on for a decade, and their whole value is that they
   look bolted on. */
.oc-bump{margin-top:18px;border:3px dashed #111;border-radius:3px;padding:9px;cursor:pointer;background:#fffdf0}
.oc-bumphead{display:flex;align-items:center;justify-content:center;gap:9px;background:#fff69b;padding:9px 10px;border-radius:2px}
.oc-bumpbody{padding:9px 4px 2px}
/* The attention arrow. MOTION, not a strobe: WCAG 2.3.1 puts the seizure
   threshold at three flashes a second, and a hard on/off blink at the rate
   that actually grabs attention sits right on it. A nudge plus a shallow
   opacity swing on a 1.2s cycle (0.83Hz, a quarter of the threshold) reads as
   the same "look here" while never fully disappearing, so it never flashes.
   Decorative and aria-hidden — the row is already role=checkbox with its own
   label. The global prefers-reduced-motion rule above stops the animation
   outright for anyone who asked; the arrow stays put and still points. */
.oc-bumparrow{flex-shrink:0;font-size:23px;line-height:1;color:#c92a09;animation:oc-bumpnudge 1.2s ease-in-out infinite;will-change:transform}
@keyframes oc-bumpnudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(6px);opacity:1}}
/* Once it is ticked the arrow has done its job; leaving it shouting at a
   decision already made is just noise on the page. */
.oc-bump.on .oc-bumparrow{visibility:hidden}
.oc-bumpbox{width:19px;height:19px;border-radius:3px;flex-shrink:0;border:2px solid #8a8f98;background:#fff;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.oc-bump.on .oc-bumpbox{border-color:#137a33;background:#137a33}
.oc-bump.on .oc-bumpbox::after{content:'✓'}
.oc-bumptitle{font-size:16.5px;font-weight:800;color:#137a33;line-height:1.3}
.oc-bumpdesc{margin-top:5px;font-size:14px;color:#3d4048;line-height:1.5}
.oc-bumpdesc b{color:#17181c}
@media (max-width:560px){
  .oc-bumphead{gap:7px;padding:8px}
  .oc-bumptitle{font-size:15px;text-align:left}
  .oc-bumparrow{font-size:20px}
}
.oc-ordersummary{margin-top:18px;border:1px solid #e7e8eb;border-radius:12px;padding:14px 16px}
.oc-oseyebrow{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#686d76;margin-bottom:10px}
.oc-oslines{display:flex;flex-direction:column;gap:8px}
.oc-osline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;color:#33363d}
.oc-osprice{font-family:var(--mono);white-space:nowrap}
.oc-ostotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid #eceef1;font-size:16px;font-weight:800;color:#17181c}
.oc-ostotalprice{font-size:20px;font-family:var(--mono)}
.oc-osrecurring{margin-top:8px;font-size:14px;color:#5b6270}
.oc-reassure{margin-top:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;background:color-mix(in srgb,var(--accent) 8%,white);border-radius:10px;font-size:14px;color:#17181c;font-weight:700}
.oc-ctadeadline{margin-top:14px;text-align:center;font-size:14px;font-weight:600;color:#5b6270}
.oc-ctadeadline .oc-ctatime{font-family:var(--mono);font-weight:700;color:#17181c;font-variant-numeric:tabular-nums}
.oc-ctadeadline.final{color:#17181c}
.oc-buy{margin-top:16px;width:100%;text-align:center;padding:16px;border:none;border-radius:12px;font-size:16.5px;font-weight:800;color:var(--buy-label);cursor:pointer;background:var(--buy);display:flex;align-items:center;justify-content:center;gap:8px}
.oc-buy:disabled{opacity:.85;cursor:default}
.oc-buy.success{background:#16a34a;color:#fff}
.oc-buy:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.oc-microcopy{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;color:#686d76;text-align:center}
.oc-consent{margin-top:10px;font-size:12.5px;line-height:1.5;color:#686d76;text-align:center}
.oc-consent a{color:#686d76;display:inline-block;padding:12px 4px;margin:-12px 0}
/* returning */
.oc-returning{padding:32px 24px;text-align:center}
.oc-retcheck{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,white);color:var(--accent);font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto}
.oc-returning h2{margin:14px 0 0;font-size:19px;font-weight:800;color:#17181c}
.oc-retemail{margin-top:8px;font-size:15px;color:#5b6270;line-height:1.5}
.oc-retbtn{display:block;margin-top:20px;padding:14px;border-radius:12px;background:var(--accent);color:var(--accent-label);font-weight:800;font-size:16px;text-decoration:none}
.oc-rethint{margin-top:14px;font-size:13.5px;color:#686d76}
/* Rehearsal reset (OCA-25) — deliberately plain and dashed, not a call to
   action: it is scaffolding for the seller testing their own page, and must not
   read as part of the offer if it is ever seen in a screenshot. */
.oc-retreset{margin-top:18px;padding-top:14px;border-top:1px dashed #cfd3da;display:flex;flex-direction:column;align-items:center;gap:6px}
.oc-retreset button{font:inherit;font-size:13.5px;font-weight:700;color:#5b6270;background:none;border:1px solid #8b919b;border-radius:8px;padding:7px 14px;cursor:pointer}
.oc-retreset button:hover{color:#17181c;border:1px solid #5b6270}
.oc-retreset span{font-size:13px;color:#686d76;text-align:center}
/* footer */
.oc-footer{margin:40px auto 0;max-width:720px;padding-bottom:56px}
.oc-faqeyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#686d76;margin:36px 0 16px}
.oc-faq{display:flex;flex-direction:column;gap:1px;background:#e7e8eb;border:1px solid #e7e8eb;border-radius:16px;overflow:hidden}
.oc-faqitem{background:#ffffff}
.oc-faqq{padding:20px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:15px;font-weight:700;color:#17181c}
.oc-faqq:focus-visible{outline:2.5px solid var(--accent);outline-offset:-2px}
.oc-faqsym{font-size:18px;color:#686d76;font-weight:600}
.oc-faqa{padding:0 18px 20px;font-size:14.5px;color:#5b6270;line-height:1.5}
.oc-supportline{text-align:center;margin-top:18px;font-size:14px;color:#686d76}
.oc-supportline a,.oc-legal a{display:inline-block;padding:12px 8px;margin:-12px 0}
.oc-legal{text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid #eceef1;font-size:13px;color:#686d76}
.oc-legal a{color:#686d76}
.oc-footer-min{padding:28px 0 40px;text-align:center;font-size:12.5px;color:#686d76}
.oc-footer-min a{color:#686d76}

/* The lock glyph's two tones. It took its colour as inline border-color and
   background; a custom property keeps it a glyph paint, not a text colour. */
.oc-lock{--lock:#8b919b}
.oc-lock.oc-lock-accent{--lock:var(--accent)}
.oc-lock span:first-child{border-color:var(--lock)}
.oc-lock span:last-child{background:var(--lock)}