/* ================================================================
   PRODUCT SALES PAGE SKIN (shared by the product-*.html pages)
   Skin ported from the skill-pack landing design (Poppins display /
   Inter body, blue #0660bd, CTA #c2410c). Everything is scoped to
   .sk-page (or sk- prefixed classes) so it never fights the vendor
   theme CSS that the header, offcanvas, footer, and sticky buy bar
   still use. Override vendor CSS, never edit it.
   ================================================================ */

.sk-page{
   --violet:#0660bd;
   --violet-2:#054e9c;
   --violet-3:#3d84cf;
   /* #ea580c measured 3.56:1 with white text, under the 4.5 floor. #c2410c is 5.05:1. */
   /* The one orange on obris.co: the same amber the home page slideshow
      button uses, with the same near-black label. */
   --cta:#F46A35;
   /* Hover deepens the orange. These buttons sit on the blue hero and final
      band, where a blue hover made the button vanish into its background. */
   --cta-dark:#d9551f;
   --ink:#181425;
   --ink-soft:#4a4658;
   --ink-faint:#6a6678;
   --paper:#ffffff;
   --paper-2:#f5f8fb;
   --paper-3:#e2ebf4;
   --line:#e2ebf4;
   --ok:#15803d;
   --gold:#f59e0b;
   --hero-grad:linear-gradient(150deg,#053a72 0%,#0660bd 42%,#0a4f9e 100%);
   --shadow-sm:0 1px 2px rgba(11,40,80,.06),0 2px 8px rgba(11,40,80,.06);
   --shadow-md:0 10px 26px rgba(11,40,80,.12),0 3px 10px rgba(11,40,80,.06);
   --shadow-lg:0 28px 70px rgba(11,40,80,.22),0 10px 26px rgba(11,40,80,.12);
   --display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   --bodyf:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
   --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
   font-family:var(--bodyf);
   color:var(--ink);
   font-size:1.0625rem;
   line-height:1.6;
   background:var(--paper);
}
.sk-wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.sk-page h1,.sk-page h2,.sk-page h3,.sk-page h4{font-family:var(--display);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.sk-page p,.sk-page li{text-wrap:pretty}
:where(.sk-page) p{margin:0}
.sk-page a{color:var(--violet);text-decoration:none}
.sk-page a:hover{text-decoration:underline;color:var(--violet)}

/* white band that clears the absolutely-positioned site header */
.sk-headroom{height:90px;background:var(--paper)}

/* buttons */
.sk-page .sk-btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.05rem;padding:16px 30px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;text-align:center;line-height:1.2}
.sk-page .sk-btn:hover{text-decoration:none}
.sk-page .sk-btn-cta{background:var(--cta);color:#fff;box-shadow:0 6px 18px rgba(244,106,53,.32)}
.sk-page .sk-btn-cta:hover{background:var(--cta-dark);color:#fff}
.sk-page .sk-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.sk-page .sk-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.sk-page .sk-btn-lg{padding:19px 40px;font-size:1.14rem}

/* sections */
.sk-sec{padding:72px 0;scroll-margin-top:110px}
.sk-alt{background:var(--paper-2)}
.sk-head{max-width:42rem;margin:0 auto 44px;text-align:center}
.sk-head h2{font-size:2.15rem;margin-bottom:14px}
.sk-head p{font-size:1.12rem;color:var(--ink-soft)}
.sk-closer{text-align:center;margin-top:44px;font-size:1.05rem;line-height:1.7;color:var(--ink-soft);max-width:44rem;margin-left:auto;margin-right:auto}
.sk-closer b{color:var(--ink)}

/* hero */
.sk-hero{background:var(--hero-grad);color:#fff;padding:58px 0 64px;scroll-margin-top:110px}
.sk-hero-grid{display:grid;gap:46px;align-items:center}
.sk-crumb{margin-bottom:16px}
.sk-crumb a{font-family:var(--display);font-size:.875rem;font-weight:600;color:#e8f1fc}
.sk-crumb a:hover{color:#fff}
.sk-badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.sk-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:.82rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:999px;color:#fff}
.sk-pill .sk-gold{color:#fcd34d}
.sk-hero h1{font-size:2.3rem;margin-bottom:18px;color:#fff}
.sk-hero h1 .sk-hl{color:#fcd34d}
.sk-lede{font-size:1.2rem;color:#e8f1fc;margin-bottom:34px;max-width:34em}
.sk-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.sk-stat-row{display:flex;flex-wrap:wrap;gap:14px 30px}
.sk-stat{display:flex;flex-direction:column}
.sk-stat b{font-family:var(--display);font-size:1.7rem;font-weight:800;line-height:1;color:#fff}
.sk-stat span{font-size:.86rem;color:#e8f1fc;margin-top:4px;font-weight:500}

.sk-hero-art{background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:560px;margin:0 auto}
.sk-hero-art img{display:block;width:100%;height:auto}
.sk-mock{background:var(--paper);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:500px;margin:0 auto}
.sk-mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.sk-mock-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.sk-mock-bar i:nth-child(1){background:#e2675a}.sk-mock-bar i:nth-child(2){background:#e3bd74}.sk-mock-bar i:nth-child(3){background:#6fbf8e}
.sk-mock-bar span{margin-left:8px;font-family:var(--mono);font-size:.82rem;color:var(--ink-faint)}
.sk-mock-body{padding:20px 22px;font-family:var(--mono);font-size:.84rem;line-height:1.7;color:var(--ink-soft)}
.sk-mock-body .fm{color:var(--violet)}
.sk-mock-body .k{color:var(--violet-2);font-weight:700}
.sk-mock-body .h{color:var(--ink);font-weight:700}
.sk-mock-body .c{color:var(--ink-faint)}
.sk-mock-body .ind{display:inline-block;padding-left:1.1em}
.sk-mock-body .ind2{display:inline-block;padding-left:2.6em}
@media(min-width:940px){.sk-hero{padding:84px 0 90px}.sk-hero-grid{grid-template-columns:1.08fr .92fr}.sk-hero h1{font-size:3.2rem}}

/* trust strip */
.sk-strip{background:var(--paper-2);border-bottom:1px solid var(--line)}
.sk-strip .sk-wrap{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center;align-items:center;padding:18px 22px}
.sk-strip-item{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;color:var(--ink-soft)}
.sk-strip-item .sk-ic{color:var(--ok);font-weight:800}

/* where-to-use cards */
.sk-use-grid{display:grid;gap:16px}
.sk-ucard{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:24px;box-shadow:var(--shadow-sm);text-align:center}
.sk-ucard .sk-uic{font-size:1.9rem;line-height:1;margin-bottom:12px}
.sk-ucard h3{font-size:1.1rem;margin-bottom:7px}
.sk-ucard p{color:var(--ink-soft);font-size:.96rem}
@media(min-width:560px){.sk-use-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.sk-use-grid{grid-template-columns:repeat(4,1fr)}}

/* value cards */
.sk-value-grid{display:grid;gap:18px;align-items:stretch}
.sk-vcard{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow-sm)}
.sk-alt .sk-vcard{border-color:#d4e0ec}
.sk-vcard .sk-emoji{font-size:2rem;line-height:1;margin-bottom:14px}
.sk-vcard h3{font-size:1.2rem;margin-bottom:8px}
.sk-vcard p{color:var(--ink-soft);font-size:1rem}
@media(min-width:720px){.sk-value-grid{grid-template-columns:repeat(3,1fr)}}

/* category cards */
.sk-cat-grid{display:grid;gap:14px}
.sk-cat{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:18px 20px;display:flex;align-items:flex-start;gap:13px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.sk-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sk-cat .sk-cat-ic{font-size:1.55rem;line-height:1;flex:0 0 auto;width:28px;text-align:center}
.sk-cat h3{font-size:1.04rem;margin-bottom:2px}
.sk-cat .sk-cat-count{font-family:var(--display);font-size:.82rem;font-weight:700;color:var(--violet);margin-bottom:6px}
.sk-cat p{font-size:.92rem;color:var(--ink-faint)}
.sk-cat .sk-more{display:inline-block;margin-top:9px;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--violet)}
/* The whole category card is the link on the skills page (a.sk-cat). Body text keeps its own
   colour and the "See the skills" line is the only part that underlines on hover, so the card
   reads as one target without turning into a block of blue. */
.sk-page a.sk-cat{color:inherit;text-decoration:none}
.sk-page a.sk-cat:hover{text-decoration:none;color:inherit}
.sk-page a.sk-cat:hover .sk-more,.sk-page a.sk-cat:focus-visible .sk-more{text-decoration:underline}
@media(min-width:620px){.sk-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.sk-cat-grid{grid-template-columns:repeat(3,1fr)}}
.sk-footnote{text-align:center;margin-top:26px;font-size:.875rem;color:var(--ink-faint)}
.sk-browse{text-align:center;margin-top:12px;color:var(--ink-faint);font-size:.98rem}
.sk-browse a{font-weight:700}

/* steps */
.sk-step-grid{display:grid;gap:26px}
.sk-step{text-align:center;padding:0 12px}
.sk-step-num{width:46px;height:46px;border-radius:50%;margin:0 auto 18px;background:var(--violet);color:#fff;font-family:var(--display);font-size:1.25rem;font-weight:800;line-height:46px;text-align:center}
.sk-step h3{font-size:1.16rem;margin-bottom:10px}
.sk-step p{font-size:.96rem;line-height:1.65;color:var(--ink-soft)}
@media(min-width:720px){.sk-step-grid{grid-template-columns:repeat(3,1fr)}}

/* examples band */
.sk-exband{background:var(--hero-grad);color:#fff}
.sk-exband .sk-head h2{color:#fff}
.sk-exband .sk-head p{color:#e8f1fc}
.sk-ex-grid{display:grid;gap:18px}
.sk-ex{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:24px}
.sk-ex h3{font-size:1.16rem;color:#fff;margin-bottom:6px}
.sk-ex .sk-cmd{font-family:var(--mono);font-size:.85rem;color:#e8f1fc;margin:0 0 12px}
.sk-ex p{color:#e8f1fc;font-size:.97rem}
.sk-ex p .sk-out{color:#fff;font-weight:700}
@media(min-width:680px){.sk-ex-grid{grid-template-columns:repeat(2,1fr)}}

/* pricing */
.sk-price-card{max-width:560px;margin:0 auto;background:var(--paper);border:2px solid var(--violet-3);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.sk-price-flag{background:var(--hero-grad);color:#fff;text-align:center;padding:11px 16px;font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.04em}
.sk-price-img{background:linear-gradient(180deg,var(--paper-2),#fff);padding:18px 18px 0}
.sk-price-img img{display:block;width:100%;height:auto}
.sk-price-top{padding:30px 34px 24px;text-align:center}
.sk-price-top h3{font-size:1.5rem;margin-bottom:10px}
.sk-anchor{color:var(--ink-faint);font-size:1.15rem}
.sk-anchor s{opacity:.8}
.sk-price-now{font-family:var(--display);font-size:3.6rem;font-weight:800;color:var(--ink);line-height:1;margin:6px 0 6px;letter-spacing:-.03em}
.sk-price-now sup{font-size:1.5rem;top:-1.05em;color:var(--ink-soft)}
.sk-price-top .sk-terms{font-size:.95rem;color:var(--ink-faint)}
.sk-price-body{padding:26px 34px 34px;border-top:1px solid var(--line)}
.sk-price-body ul{list-style:none;display:grid;gap:12px;margin:0 0 24px;padding:0}
.sk-price-body li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.sk-price-body li .sk-ck{flex:0 0 auto;color:var(--ok);font-weight:800}
.sk-price-body .sk-btn{width:100%}
.sk-finalprint{text-align:center;margin-top:16px;font-size:.8125rem;color:var(--ink-faint)}
.sk-page .sk-ex-link{display:inline-block;margin-top:12px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}
.sk-page .sk-ex-link:hover{color:#ffd9c9}
.sk-sample-form{display:flex;gap:12px;max-width:620px;margin:0 auto}
.sk-sample-form input{flex:1 1 auto;min-width:0;font-size:1.05rem;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.sk-sample-form input:focus{border-color:var(--violet);outline:none}
.sk-sample-form button{flex:0 0 auto}
.sk-sample-fine,.sk-sample-done,.sk-sample-err{max-width:620px;margin:16px auto 0;text-align:center;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.sk-sample-done p,.sk-sample-err p{margin:0 0 8px}
.sk-sample-done strong{color:var(--ink)}
.sk-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.sk-sample-form{flex-direction:column}.sk-sample-form button{width:100%}}
.sk-custom{max-width:44rem;margin:18px auto 0;text-align:center;font-size:1.01rem;color:var(--ink-soft)}
.sk-custom a{font-weight:700}
.sk-bundle-note{max-width:44rem;margin:34px auto 0;text-align:center;font-size:1.01rem;color:var(--ink-soft)}
@media(max-width:575px){.sk-price-top,.sk-price-body{padding-left:22px;padding-right:22px}.sk-price-now{font-size:2.9rem}}

/* faq */
.sk-faq-list{max-width:760px;margin:0 auto;display:grid;gap:14px}
details.sk-faq{background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-sm);overflow:hidden}
details.sk-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--display);font-weight:700;font-size:1.06rem;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
details.sk-faq summary::-webkit-details-marker{display:none}
details.sk-faq summary:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
details.sk-faq summary .sk-pl{flex:0 0 auto;color:var(--violet);font-size:1.4rem;transition:transform .2s ease}
details.sk-faq[open] summary .sk-pl{transform:rotate(45deg)}
details.sk-faq .sk-ans{padding:0 24px 22px;color:var(--ink-soft);font-size:1.01rem}

/* final band */
.sk-final{background:var(--hero-grad);color:#fff;text-align:center}
.sk-final h2{font-size:2.3rem;color:#fff;margin-bottom:14px}
.sk-final p{font-size:1.16rem;color:#e8f1fc;max-width:38rem;margin:0 auto 28px}
.sk-final .sk-hero-cta{justify-content:center;margin-bottom:0}

@media (prefers-reduced-motion: reduce){
   .sk-cat,.sk-page .sk-btn,details.sk-faq summary .sk-pl{transition:none}
   .sk-cat:hover{transform:none}
}

/* ---- Product brand lockup (header, phone drawer, preloader) ----
   Replaces the Obris Launch mark on a product page. The footer keeps the
   Obris Launch identity, since Obris Launch is the seller. The icon tile is
   the same one the product's card wears on the shop page; --lockup-bg and
   --lockup-fg carry the product's colour. */
.sk-brand{--lockup-bg:#e8f1fc;--lockup-fg:#0660bd;display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1}
.sk-brand--n8n{--lockup-bg:#f1ebfc;--lockup-fg:#6d28d9}
.sk-brand--reels{--lockup-bg:#fdeef5;--lockup-fg:#db2777}
.sk-brand__icon{width:44px;height:44px;border-radius:12px;flex:none;background:var(--lockup-bg);color:var(--lockup-fg);display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.sk-brand__word{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:800;font-size:23px;letter-spacing:-.02em;color:#0b1b33;white-space:nowrap}
a:hover .sk-brand__word,a:focus-visible .sk-brand__word{color:var(--lockup-fg)}
/* The byline sits under the product name, not under the icon: indent = icon width + the lockup gap. */
.sk-byline{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:12px;line-height:1.2;color:#5a6b7a;margin-top:4px;padding-left:54px;white-space:nowrap}
.sk-byline a{color:#0660bd;text-decoration:none;font-weight:600}
.sk-byline a:hover{text-decoration:underline}
.sk-brand--pre .sk-brand__icon{width:56px;height:56px;border-radius:14px;font-size:24px}
.sk-brand--pre .sk-brand__word{font-size:26px}
@media (max-width:575px){
  .sk-brand__icon{width:36px;height:36px;border-radius:10px;font-size:16px}
  .sk-brand__word{font-size:18px}
  .sk-byline{padding-left:46px}
}

/* --- Reels bundle: hero phone fan + category status pills ------------------ */
.sk-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;max-width:520px;margin:12px auto 0;padding-top:16px}
.sk-phones img{width:100%;min-width:0;height:auto;display:block;border-radius:14px;border:3px solid #fff;box-shadow:0 14px 34px rgba(60,8,30,.35);background:#000}
.sk-phones img:nth-child(4n+1),.sk-phones img:nth-child(4n+3){transform:translateY(-16px)}
.sk-phones-cap{text-align:center;font-size:.85rem;color:#fbe1ec;margin:16px auto 0;max-width:30em}
.sk-cat-now,.sk-cat-soon{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;font-family:var(--bodyf);font-size:.78rem;font-weight:700;vertical-align:1px;letter-spacing:0}
.sk-cat-now{background:#dcfce7;color:#15803d}
.sk-cat-soon{background:var(--paper-3);color:var(--ink-soft)}
.sk-page .sk-cat-buy{margin-top:12px;padding:10px 18px;font-size:.95rem;border-radius:10px}
/* Reels cards carry a button and a preview link, so they get more room top and bottom (Julia 2026-09-16). */
body[data-product="reels-bundle"] .sk-cat{padding:28px 20px 23px}
@media(min-width:940px){.sk-phones{gap:16px 12px;max-width:560px;margin-top:0;padding-top:28px}.sk-phones img{border-width:4px;border-radius:18px}.sk-phones img:nth-child(4n+1),.sk-phones img:nth-child(4n+3){transform:translateY(-28px)}}

/* --- Reels bundle: preview blocks (loop + scrollable contact sheet) ------- */
.sk-preview{display:grid;gap:22px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm);margin-top:26px}
.sk-preview-vid{max-width:250px;margin:0 auto}
.sk-preview-vid video{width:100%;height:auto;display:block;border-radius:16px;border:3px solid #fff;box-shadow:0 14px 34px rgba(60,8,30,.28);background:#000}
.sk-preview-head h3{font-size:1.25rem;margin:0 0 6px}
.sk-preview-head p{color:var(--ink-soft);margin:0 0 14px}
.sk-preview-head a{font-weight:700;color:var(--violet)}
.sk-sheet{height:420px;overflow-y:auto;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);scrollbar-gutter:stable}
.sk-sheet img{width:100%;height:auto;display:block}
.sk-cat-preview{display:inline-block;margin:12px 0 0 12px;font-weight:700;color:var(--violet);font-size:.95rem}
@media(min-width:760px){.sk-preview{grid-template-columns:250px 1fr;align-items:start;padding:26px}.sk-sheet{height:560px}}

/* ---- Reels page: "See the reels before you buy" poster strip + preview lightbox ---- */
.rp-strip{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rp-phone{position:relative;flex:0 0 auto;scroll-snap-align:start;width:150px;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 26px rgba(60,8,30,.22);background:#000;scroll-margin-top:110px}
.sk-page a.rp-phone,.sk-page a.rp-phone:hover{color:#fff;text-decoration:none}
.rp-phone img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.rp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rp-play i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);color:#db2777;display:flex;align-items:center;justify-content:center;padding-left:3px;font-style:normal;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s}
.rp-phone:hover .rp-play i,.rp-phone:focus-visible .rp-play i{transform:scale(1.08)}
.rp-phone-name{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;font:700 .82rem/1.2 var(--display);background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));text-align:center}
@media(min-width:760px){.rp-strip{flex-wrap:wrap;justify-content:center;overflow:visible}.rp-phone{width:168px}}
.rp-lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh}
.rp-lb::backdrop{background:rgba(24,20,37,.82);backdrop-filter:blur(6px)}
.rp-lb-box{position:relative;background:var(--paper);width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.rp-lb-vid{background:#000;display:flex;justify-content:center;padding:14px 60px 12px}
.rp-lb-vid video{height:38vh;width:auto;max-width:100%;border-radius:12px;display:block}
.rp-lb-side{display:flex;flex-direction:column;min-height:0;padding:16px 18px 18px}
.rp-lb-kicker{margin:0;font:700 .78rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#db2777}
.rp-lb-side h3{font-size:1.35rem;margin:6px 0 2px}
.rp-lb-sub{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem}
.rp-lb-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sk-page .rp-lb-buy{padding:11px 20px;font-size:.98rem;border-radius:10px}
.rp-lb-all{font-weight:700}
.rp-lb-sheet{flex:1 1 auto;height:auto;min-height:0}
.rp-lb-close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#181425;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media(min-width:760px){
  .rp-lb[open]{display:grid;place-items:center}
  .rp-lb-box{width:min(1040px,94vw);height:min(720px,90vh);border-radius:20px;grid-template-rows:none;grid-template-columns:360px 1fr;box-shadow:var(--shadow-lg)}
  .rp-lb-vid{padding:26px;align-items:center}
  .rp-lb-vid video{height:auto;width:100%;max-height:100%;border-radius:16px;border:3px solid #fff}
  .rp-lb-side{padding:28px 28px 24px}
}

/* ================================================================
   SOCIAL PROOF POPUP (bottom-left)
   Shared by any product-*.html page that drops in the .sk-proof
   block plus a #skProofData JSON list. Content lives in the page,
   never here. Sits clear of the chat launcher and back-to-top
   (both bottom-right) and lifts above the sticky buy bar.
   ================================================================ */
.sk-proof{
   position:fixed;
   left:20px;
   bottom:var(--sk-proof-bottom,20px);
   z-index:985;
   display:flex;
   align-items:center;
   gap:13px;
   width:min(420px,calc(100vw - 40px));
   padding:12px 34px 12px 14px;
   background:var(--paper,#fff);
   border:1px solid var(--line,#e2ebf4);
   border-radius:14px;
   box-shadow:var(--shadow-md,0 10px 26px rgba(11,40,80,.12));
   font-family:var(--bodyf,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
   opacity:0;
   transform:scale(.8);
   transform-origin:bottom left;
   /* pops out of the corner: overshoots slightly, then settles */
   transition:opacity .22s ease,transform .34s cubic-bezier(.34,1.56,.64,1),bottom .25s ease;
}
.sk-proof.is-shown{opacity:1;transform:scale(1)}
.sk-proof__thumb{
   flex:0 0 auto;width:52px;height:52px;border-radius:10px;object-fit:cover;
   background:#f5f8fb;border:1px solid var(--line,#e2ebf4)
}
.sk-proof__body{min-width:0;flex:1 1 auto}
.sk-proof__body p{margin:0;line-height:1.4}
.sk-proof__who{font-family:var(--display,"Poppins",sans-serif);font-weight:700;font-size:14px;line-height:1.4;color:var(--ink,#181425);margin:0}
.sk-proof__who span{font-family:var(--bodyf,sans-serif);font-weight:500;color:var(--ink-soft,#4a4658)}
.sk-proof__what{font-size:14px;line-height:1.4;color:var(--ink-soft,#4a4658);margin:1px 0 0;text-wrap:pretty}
.sk-proof__product{color:inherit;font-weight:500}
/* used when a page supplies plain product text instead of links */
.sk-proof__product--plain{color:var(--violet,#0660bd);font-weight:600}
.sk-proof__product a,.sk-proof__product a:visited{color:var(--violet,#0660bd);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.sk-proof__product a:hover,.sk-proof__product a:focus-visible{color:var(--violet-2,#054e9c);text-decoration-thickness:2px}
.sk-proof__when{display:block;font-size:12px;line-height:1.4;color:var(--ink-faint,#6a6678);margin-top:3px}
.sk-proof__close{
   position:absolute;top:7px;right:7px;
   width:26px;height:26px;
   display:flex;align-items:center;justify-content:center;
   background:none;border:0;border-radius:6px;padding:0;cursor:pointer;
   font-size:20px;line-height:1;color:var(--ink-faint,#6a6678);
   transition:color .15s ease,background-color .15s ease
}
.sk-proof__close:hover{color:var(--ink,#181425);background:#f1f5fa}
.sk-proof__close:focus-visible{outline:2px solid var(--violet,#0660bd);outline-offset:2px}

@media (max-width:520px){
   /* clear the chat launcher, which owns the bottom-right corner */
   .sk-proof{left:12px;right:12px;width:auto;gap:11px;padding:11px 32px 11px 12px;
      border-radius:12px;bottom:var(--sk-proof-bottom,92px)}
   .sk-proof__thumb{width:46px;height:46px}
   .sk-proof__who,.sk-proof__what{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
   .sk-proof{transform:none;transition:opacity .2s ease,bottom .2s ease}
   .sk-proof.is-shown{transform:none}
}

/* ---- hero share row (skills page) -------------------------------------
   The row lives under the stat line, so the stack above it is tightened
   and the section padding trimmed by the same amount the row adds. That
   keeps the header exactly as tall as it was. Scoped to .sk-hero-share so
   the other product heroes are untouched. */
.sk-hero-share{padding:44px 0 50px}
.sk-hero-share .sk-crumb{margin-bottom:10px}
.sk-hero-share h1{margin-bottom:14px}
.sk-hero-share .sk-lede{margin-bottom:24px}
.sk-hero-share .sk-hero-cta{margin-bottom:20px}
.sk-share{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:22px}
.sk-share p{margin:0;font-family:var(--display);font-weight:700;font-size:.9rem;color:#e8f1fc}
.sk-share ul{display:flex;gap:9px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.sk-share a,.sk-share button{display:inline-flex;align-items:center;justify-content:center;
   width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
   border:1px solid rgba(255,255,255,.36);background:rgba(255,255,255,.10);color:#fff;
   transition:background .16s ease,color .16s ease,border-color .16s ease}
.sk-share svg{width:17px;height:17px;fill:currentColor}
.sk-share a:hover,.sk-share a:focus-visible,
.sk-share button:hover,.sk-share button:focus-visible{background:#fff;color:var(--violet);border-color:#fff}
.sk-share .sk-share-said{font-size:.82rem;color:#fcd34d;font-weight:600;align-self:center}
@media(min-width:940px){.sk-hero-share{padding:68px 0 72px}}