/* ============ IY Courses — self-contained app CSS (BUILD 1.0.0) ============ */

/* Layer 1: rapeto tokens */

/* ============================================================
   RAPETO STYLE — TOKENS
   Monochrome soft-neumorphic SaaS. One prefix: rp-
   Rename for a client:  sed -i 's/--rp-/--acme-/g; s/\.rp-/.acme-/g' *.css *.html
   Load order: rapeto-tokens.css → rapeto-components.css → rapeto-motion.css
   ============================================================ */

:root{
  /* ---------- colour (8 core tokens — that is the whole palette) ---------- */
  --rp-n1:#ffffff;   /* cards on dark, buttons on dark, hairline borders */
  --rp-n2:#f4f4f4;   /* default card / tag surface — LIGHTER than the page */
  --rp-n3:#e5e5e5;   /* PAGE BACKGROUND — never white */
  --rp-n4:#d9d9d9;   /* dividers, muted fills */
  --rp-n5:#111111;   /* all text, primary button, dark sections */
  --rp-n6:#1a1a1a;   /* raised surface on dark */
  --rp-s1:#c7c7c7;   /* light strokes + glow colour */
  --rp-s2:#333333;   /* dark-mode card borders */
  --rp-black:#000000;/* nav "Log in" pill only */

  /* supporting */
  --rp-input-text:#242424;
  --rp-placeholder:#999999;
  --rp-dark-fill:rgba(255,255,255,.04);
  --rp-dark-border:rgba(255,255,255,.08);
  --rp-dark-border-top:rgba(255,255,255,.12);
  --rp-dark-muted:rgba(255,255,255,.6);

  /* muted body copy is NEVER a grey hex — it is n5 at reduced opacity */
  --rp-muted-o:.8;
  --rp-muted-o-2:.7;

  /* ---------- type ---------- */
  --rp-font:'Manrope',system-ui,sans-serif;
  --rp-font-ar:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;
  --rp-fw-r:400; --rp-fw-m:500; --rp-fw-sb:600;

  --rp-fs-h1:64px; --rp-lh-h1:72px; --rp-ls-h1:-4px;
  --rp-fs-h2:56px; --rp-lh-h2:64px; --rp-ls-h2:-2px;
  --rp-fs-h3:48px; --rp-lh-h3:56px; --rp-ls-h3:-1px;
  --rp-fs-s1:40px; --rp-lh-s1:48px;
  --rp-fs-s2:32px; --rp-lh-s2:40px;
  --rp-fs-s3:24px; --rp-lh-s3:32px;
  --rp-fs-s4:20px; --rp-lh-s4:30px;
  --rp-fs-b1:18px; --rp-lh-b1:28px;   /* body default */
  --rp-fs-b2:16px; --rp-lh-b2:24px;   /* nav, buttons */
  --rp-fs-b3:14px; --rp-lh-b3:20px;   /* tags, captions, inputs */
  --rp-fs-b4:12px; --rp-lh-b4:18px;   /* hero pill label */

  /* ---------- space ---------- */
  --rp-sp-section:160px; --rp-sp-hero:88px; --rp-sp-band:120px;
  --rp-sp-block:80px;    --rp-gutter:40px;
  --rp-card-py:34px;     --rp-card-px:24px;
  --rp-sp-4:4px;  --rp-sp-8:8px;  --rp-sp-10:10px; --rp-sp-12:12px;
  --rp-sp-16:16px;--rp-sp-20:20px;--rp-sp-24:24px; --rp-sp-32:32px;
  --rp-sp-40:40px;--rp-sp-56:56px;--rp-sp-64:64px; --rp-sp-80:80px;

  /* ---------- radius — FIXED at every breakpoint, never softens on mobile --- */
  --rp-r-8:8px;   --rp-r-16:16px; --rp-r-24:24px; --rp-r-30:30px;
  --rp-r-32:32px; --rp-r-40:40px; --rp-r-50:50px; --rp-r-60:60px;
  --rp-r-round:50%;

  /* ---------- containers ---------- */
  --rp-c-nav:1272px; --rp-c-default:1160px;
  --rp-c-narrow:960px; --rp-c-text:840px;

  /* ---------- elevation ---------- */
  --rp-sh-btn:
    -.5px -.5px 0 #000000ad,
    14px 14px 21.21px -3.75px #0003,
    5.9px 5.9px 8.39px -3px #00000030,
    2.66px 2.66px 3.76px -2.25px #0000003b,
    1.21px 1.21px 1.71px -1.5px #00000040,
    .44px .44px .63px -.75px #00000042,
    inset -1px -1px 1px #0000003b,
    inset 1.5px 1.5px 3px #fffc;
  --rp-sh-tag:0 4px 8px rgba(17,17,17,.24);
  --rp-sh-glow:0 0 32px 16px rgba(197,197,197,.24);

  /* ---------- motion ---------- */
  --rp-ease:cubic-bezier(.165,.84,.44,1);        /* outQuart — house easing */
  --rp-ease-cubic:cubic-bezier(.215,.61,.355,1); /* outCubic — accordion only */
  --rp-dur-tick:100ms; --rp-dur-ui:350ms; --rp-dur-swap:400ms;
  --rp-dur-accord:500ms; --rp-dur-reveal:700ms; --rp-dur-slide:1000ms;
  --rp-dur-count:3000ms; --rp-dur-marquee:5000ms;
  --rp-stag-1:0ms; --rp-stag-2:200ms; --rp-stag-3:300ms;
  --rp-stag-4:400ms; --rp-stag-5:500ms; --rp-stag-6:600ms;
}

/* ============================================================
   RESPONSIVE — redefine tokens on body, never per component.
   This is the load-bearing idea of the system: write components
   once with tokens and responsiveness is free.
   ============================================================ */
@media (max-width:991px){
  body{
    --rp-fs-h1:56px; --rp-lh-h1:56px;
    --rp-fs-h2:48px; --rp-lh-h2:52px;
    --rp-fs-h3:42px;
    --rp-sp-section:100px; --rp-sp-hero:70px; --rp-sp-band:80px;
    --rp-sp-block:64px; --rp-gutter:30px;
    --rp-card-py:30px; --rp-card-px:20px;
  }
}
@media (max-width:767px){
  body{
    --rp-fs-h1:48px; --rp-lh-h1:48px; --rp-ls-h1:-2px;
    --rp-fs-h2:42px; --rp-lh-h2:46px;
    --rp-fs-h3:40px;
    --rp-sp-section:80px; --rp-sp-hero:56px; --rp-sp-band:60px;
    --rp-sp-block:48px; --rp-gutter:20px;
    --rp-card-py:26px; --rp-card-px:18px;
  }
}
@media (max-width:479px){
  body{
    --rp-fs-h1:34px; --rp-lh-h1:36px;
    --rp-fs-h2:30px; --rp-lh-h2:32px; --rp-fs-h3:28px;
    --rp-fs-s1:24px; --rp-fs-s2:22px; --rp-fs-s3:20px; --rp-fs-s4:18px;
    --rp-fs-b1:16px; --rp-fs-b2:14px; --rp-fs-b3:12px;
    --rp-sp-section:60px; --rp-sp-hero:40px; --rp-sp-band:40px;
    --rp-sp-block:40px; --rp-gutter:10px;
    --rp-card-py:20px; --rp-card-px:16px;
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:var(--rp-fw-r) var(--rp-fs-b1)/var(--rp-lh-b1) var(--rp-font);
  color:var(--rp-n5);
  background:var(--rp-n3);
  overflow-x:hidden;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- type scale utilities ---------- */
.rp-h1{font:var(--rp-fw-sb) var(--rp-fs-h1)/var(--rp-lh-h1) var(--rp-font);letter-spacing:var(--rp-ls-h1);margin:0}
.rp-h2{font:var(--rp-fw-sb) var(--rp-fs-h2)/var(--rp-lh-h2) var(--rp-font);letter-spacing:var(--rp-ls-h2);margin:0}
.rp-h3{font:var(--rp-fw-sb) var(--rp-fs-h3)/var(--rp-lh-h3) var(--rp-font);letter-spacing:var(--rp-ls-h3);margin:0}
.rp-s1{font:var(--rp-fw-sb) var(--rp-fs-s1)/var(--rp-lh-s1) var(--rp-font);margin:0}
.rp-s2{font:var(--rp-fw-sb) var(--rp-fs-s2)/var(--rp-lh-s2) var(--rp-font);margin:0}
.rp-s3{font:var(--rp-fw-sb) var(--rp-fs-s3)/var(--rp-lh-s3) var(--rp-font);margin:0}
.rp-s4{font:var(--rp-fw-sb) var(--rp-fs-s4)/var(--rp-lh-s4) var(--rp-font);margin:0}
.rp-b1{font-size:var(--rp-fs-b1);line-height:var(--rp-lh-b1)}
.rp-b2{font-size:var(--rp-fs-b2);line-height:var(--rp-lh-b2)}
.rp-b3{font-size:var(--rp-fs-b3);line-height:var(--rp-lh-b3)}
.rp-b4{font-size:var(--rp-fs-b4);line-height:var(--rp-lh-b4)}
.rp-sb{font-weight:var(--rp-fw-sb)}
.rp-muted{opacity:var(--rp-muted-o)}
.rp-muted-2{opacity:var(--rp-muted-o-2)}

/* ---------- layout ---------- */
.rp-section{padding-top:var(--rp-sp-section);display:flex;justify-content:center}
.rp-band{padding:var(--rp-sp-band) 0;background:var(--rp-n5);color:var(--rp-n1)}
.rp-container{width:100%;max-width:var(--rp-c-default);margin-inline:auto;padding-inline:var(--rp-gutter)}
.rp-container--nav{max-width:var(--rp-c-nav);padding-inline:var(--rp-sp-20)}
.rp-container--narrow{max-width:var(--rp-c-narrow)}
.rp-container--text{max-width:var(--rp-c-text)}
.rp-grid{display:grid;gap:var(--rp-sp-24)}
.rp-cols-2{grid-template-columns:repeat(2,1fr)}
.rp-cols-3{grid-template-columns:repeat(3,1fr)}
.rp-cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:991px){.rp-cols-3,.rp-cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.rp-cols-2,.rp-cols-3,.rp-cols-4{grid-template-columns:1fr}}

/* section-head rhythm: tag → 16 → heading → 24 → copy → 40 → button */
.rp-section-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--rp-c-text);margin-inline:auto}
.rp-section-head > * + *{margin-top:var(--rp-sp-16)}
.rp-section-head .rp-h2 + p{margin-top:var(--rp-sp-24)}
.rp-section-head p + .rp-btn{margin-top:var(--rp-sp-40)}
.rp-section-head--left{align-items:flex-start;text-align:start;margin-inline:0}

/* dark-context overrides */
.rp-band .rp-card,.rp-on-dark .rp-card{background:var(--rp-dark-fill);border-color:var(--rp-s2)}
.rp-band .rp-tag,.rp-on-dark .rp-tag{background:var(--rp-dark-fill);border:0;box-shadow:none;color:var(--rp-n1)}


/* Layer 2: rapeto components */

/* ============================================================
   RAPETO STYLE — COMPONENTS
   Depends on rapeto-tokens.css
   ============================================================ */

/* ---------- 1. PRIMARY BUTTON (the signature) ---------------- */
.rp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--rp-sp-8);
  padding:var(--rp-sp-16) var(--rp-sp-24);
  border:0;border-radius:var(--rp-r-50);
  background:var(--rp-n5);color:var(--rp-n1);
  font:var(--rp-fw-sb) var(--rp-fs-b2)/var(--rp-lh-b2) var(--rp-font);
  text-decoration:none;cursor:pointer;
  box-shadow:var(--rp-sh-btn);
  transition:all var(--rp-dur-ui) var(--rp-ease);
}
.rp-btn--white{background:var(--rp-n1);color:var(--rp-n5)}
.rp-btn--ghost{background:transparent;color:var(--rp-n5);box-shadow:none;border:1px solid var(--rp-s1)}
.rp-btn--icon{width:64px;height:64px;padding:0;border-radius:var(--rp-r-round)}
.rp-btn--icon-sm{width:56px;height:56px;padding:0;border-radius:var(--rp-r-round)}

/* text-roll label — the label is written TWICE, verbatim */
.rp-btn__text{
  height:24px;line-height:24px;font-size:var(--rp-fs-b2);
  display:flex;flex-flow:column;overflow:clip;
}
.rp-btn__text > span{transition:transform var(--rp-dur-swap) var(--rp-ease)}
.rp-btn:hover .rp-btn__text > span{transform:translateY(-100%)}

/* ---------- 2. TAG / EYEBROW -------------------------------- */
.rp-tag{
  display:inline-flex;align-items:center;gap:var(--rp-sp-8);
  padding:var(--rp-sp-8) var(--rp-sp-16);
  border-radius:var(--rp-r-30);
  background:var(--rp-n2);border:1px solid var(--rp-n1);
  font-size:var(--rp-fs-b3);line-height:var(--rp-lh-b3);
  box-shadow:var(--rp-sh-tag);
}
/* hero variant — asymmetric so a 24px circular icon nests flush */
.rp-tag--hero{padding:4px 16px 4px 4px;gap:var(--rp-sp-8);border-radius:var(--rp-r-32)}
.rp-tag--hero .rp-tag__icon{
  width:24px;height:24px;border-radius:var(--rp-r-round);
  background:var(--rp-n5);color:var(--rp-n1);
  display:grid;place-items:center;font-size:var(--rp-fs-b4);
}

/* ---------- 3. CARD ----------------------------------------- */
/* the inverted contrast: card (#f4f4f4) is LIGHTER than page (#e5e5e5),
   separated by a pure WHITE hairline. That is the whole look. */
.rp-card{
  background:var(--rp-n2);
  border:1px solid var(--rp-n1);
  border-radius:var(--rp-r-24);
  padding:var(--rp-card-py) var(--rp-card-px);
  max-width:360px;
}
.rp-card--panel{max-width:none;padding:var(--rp-sp-24)}
.rp-card__icon{
  width:64px;height:64px;border-radius:var(--rp-r-round);
  background:var(--rp-n5);color:var(--rp-n1);
  display:grid;place-items:center;
  box-shadow:var(--rp-sh-btn);
}
.rp-card__icon + .rp-card__title{margin-top:var(--rp-sp-32)}
.rp-card__title{font:var(--rp-fw-sb) var(--rp-fs-b1)/var(--rp-lh-b1) var(--rp-font);margin:0}
.rp-card__title + .rp-card__desc{margin-top:var(--rp-sp-12)}
.rp-card__desc{font-size:var(--rp-fs-b3);line-height:var(--rp-lh-b3);opacity:var(--rp-muted-o);margin:0}

/* ---------- 4. IMAGE FRAME ---------------------------------- */
.rp-frame{
  background:var(--rp-n2);padding:var(--rp-sp-8);
  border:1px solid var(--rp-n1);border-radius:var(--rp-r-40);
  box-shadow:var(--rp-sh-glow);
}
.rp-frame > img,.rp-frame > video,.rp-frame__inner{
  border-radius:var(--rp-r-32);overflow:clip;width:100%;display:block;
}

/* ---------- 5. NAVBAR --------------------------------------- */
.rp-nav{padding-top:var(--rp-sp-24);background:transparent}
.rp-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--rp-sp-20)}
.rp-nav__links{display:flex;align-items:center;gap:var(--rp-sp-20);list-style:none;margin:0;padding:0}
.rp-nav__link{
  font-size:var(--rp-fs-b2);line-height:var(--rp-lh-b2);font-weight:var(--rp-fw-r);
  color:var(--rp-black);text-decoration:none;
  transition:background-color var(--rp-dur-tick),color var(--rp-dur-tick);
}
.rp-nav__pill{
  background:var(--rp-black);color:var(--rp-n1);
  padding:10px 20px;border-radius:var(--rp-r-40);text-decoration:none;
  font-size:var(--rp-fs-b2);
  transition:opacity var(--rp-dur-ui) var(--rp-ease);
}
.rp-nav__pill:hover{opacity:.8}
.rp-nav__panel{ /* dropdown + mobile menu */
  background:var(--rp-n2);border:1px solid var(--rp-n1);
  border-radius:var(--rp-r-16);min-width:200px;padding:var(--rp-sp-16);
}
.rp-nav__burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer}
@media (max-width:991px){
  .rp-nav__burger{display:grid;place-items:center}
  .rp-nav__links{
    display:none;position:absolute;inset-inline:var(--rp-sp-20);top:80px;
    flex-direction:column;align-items:flex-start;
    background:var(--rp-n1);border-radius:var(--rp-r-16);
    padding:var(--rp-sp-24) var(--rp-sp-40);z-index:50;
  }
  .rp-nav__links.is-open{display:flex}
}

/* ---------- 6. INPUTS (light) ------------------------------- */
.rp-field{position:relative;display:block}
.rp-field__icon{position:absolute;inset-inline-start:24px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.6}
.rp-input,.rp-textarea{
  width:100%;height:56px;
  padding-inline-start:60px;padding-inline-end:var(--rp-sp-24);
  border:0;border-radius:var(--rp-r-60);
  background:var(--rp-n1);color:var(--rp-input-text);
  font:var(--rp-fw-r) var(--rp-fs-b3)/var(--rp-lh-b3) var(--rp-font);
}
.rp-textarea{height:auto;min-height:140px;padding-block:var(--rp-sp-20);border-radius:var(--rp-r-32);resize:vertical}
.rp-input::placeholder,.rp-textarea::placeholder{color:var(--rp-placeholder)}
.rp-input:focus-visible,.rp-textarea:focus-visible{outline:2px solid var(--rp-n5);outline-offset:2px}
.rp-check{display:flex;align-items:center;gap:var(--rp-sp-8);font-size:var(--rp-fs-b3)}

/* dark / footer variant */
.rp-band .rp-input,.rp-on-dark .rp-input{
  background:var(--rp-dark-fill);color:var(--rp-n1);
  border:1px solid var(--rp-dark-border);border-top-color:var(--rp-dark-border-top);
  border-radius:var(--rp-r-30);padding-inline-start:56px;
}
.rp-band .rp-input::placeholder,.rp-on-dark .rp-input::placeholder{color:var(--rp-dark-muted)}

/* ---------- 7. FAQ ACCORDION -------------------------------- */
.rp-faq{
  background:var(--rp-n2);border:1px solid var(--rp-n1);
  border-radius:var(--rp-r-24);padding:28px var(--rp-card-py);
}
.rp-faq + .rp-faq{margin-top:var(--rp-sp-16)}
.rp-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--rp-sp-16);
  background:none;border:0;padding:0;cursor:pointer;text-align:start;
  font:var(--rp-fw-sb) var(--rp-fs-s3)/var(--rp-lh-s3) var(--rp-font);color:var(--rp-n5);
}
.rp-faq__icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:var(--rp-r-round);
  background:var(--rp-n5);color:var(--rp-n1);display:grid;place-items:center;
  transition:transform var(--rp-dur-accord) var(--rp-ease-cubic);
}
.rp-faq.is-open .rp-faq__icon{transform:rotate(90deg)}
.rp-faq__a{height:0;overflow:hidden;transition:height var(--rp-dur-accord) var(--rp-ease-cubic)}
.rp-faq__inner{padding-top:var(--rp-sp-16);font-size:var(--rp-fs-b2);opacity:var(--rp-muted-o)}

/* ---------- 8. PRICING -------------------------------------- */
.rp-toggle{
  display:inline-flex;gap:4px;padding:4px;border-radius:var(--rp-r-60);
  background:var(--rp-n5);
}
.rp-toggle__btn{
  border:0;cursor:pointer;background:transparent;color:var(--rp-n1);
  padding:var(--rp-sp-10) var(--rp-sp-20);border-radius:var(--rp-r-60);
  font:var(--rp-fw-m) var(--rp-fs-b2)/var(--rp-lh-b2) var(--rp-font);
  transition:background-color var(--rp-dur-tick),color var(--rp-dur-tick);
}
.rp-toggle__btn.is-active{background:var(--rp-n1);color:var(--rp-n5)}
.rp-price{max-width:none}
.rp-price--featured{background:var(--rp-n5);color:var(--rp-n1);border-color:var(--rp-s2);box-shadow:var(--rp-sh-btn)}
.rp-price--featured .rp-btn{background:var(--rp-n1);color:var(--rp-n5)}
.rp-price__row{display:flex;align-items:center;gap:var(--rp-sp-12);font-size:var(--rp-fs-b2);padding-block:var(--rp-sp-8)}
.rp-price__mark{
  width:24px;height:24px;flex:0 0 auto;border-radius:var(--rp-r-round);
  background:var(--rp-n5);color:var(--rp-n1);display:grid;place-items:center;font-size:12px;
}
.rp-price__row--off{opacity:.5;text-decoration:line-through}
.rp-price__row--off .rp-price__mark{background:var(--rp-n4);color:var(--rp-n5)}

/* ---------- 9. BLOG CARD ------------------------------------ */
.rp-post{display:block;text-decoration:none;color:inherit;max-width:none}
.rp-post__media{border-radius:var(--rp-r-24);overflow:clip;display:flex}
.rp-post__body{background:var(--rp-n2);border:1px solid var(--rp-n1);border-radius:var(--rp-r-24);padding:var(--rp-card-py) var(--rp-card-px);margin-top:-24px;position:relative}
.rp-post__meta{font-size:var(--rp-fs-b3);opacity:var(--rp-muted-o);display:flex;gap:var(--rp-sp-12)}
.rp-post__title{font:var(--rp-fw-sb) var(--rp-fs-s3)/var(--rp-lh-s3) var(--rp-font);margin:var(--rp-sp-12) 0 var(--rp-sp-16)}
.rp-post__more{font-size:var(--rp-fs-b2);font-weight:var(--rp-fw-sb);display:inline-flex;gap:6px;align-items:center}

/* ---------- 10. TEAM PORTRAIT ------------------------------- */
.rp-portrait{border-radius:var(--rp-r-24);overflow:clip;display:block}
.rp-portrait img{filter:grayscale(100%);transition:filter var(--rp-dur-ui) var(--rp-ease);width:100%}
.rp-portrait:hover img{filter:grayscale(0%)}

/* ---------- 11. LOGO STRIP ---------------------------------- */
.rp-logo-chip{
  display:grid;place-items:center;min-width:160px;height:64px;
  background:var(--rp-n2);border:1px solid var(--rp-n1);border-radius:var(--rp-r-50);
  padding-inline:var(--rp-sp-24);opacity:.7;
}

/* ---------- 12. FOOTER -------------------------------------- */
.rp-footer{background:var(--rp-n5);color:var(--rp-n1);padding-top:var(--rp-sp-80)}
.rp-footer a{color:var(--rp-dark-muted);text-decoration:none;transition:color var(--rp-dur-ui) var(--rp-ease)}
.rp-footer a:hover{color:var(--rp-n1)}
.rp-footer__cols{display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;gap:var(--rp-sp-40)}
@media (max-width:991px){.rp-footer__cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:479px){.rp-footer__cols{grid-template-columns:1fr}}
.rp-social{
  width:40px;height:40px;border-radius:var(--rp-r-round);
  border:1px solid var(--rp-dark-border);display:grid;place-items:center;
}
.rp-footer__wordmark{
  width:100%;font:var(--rp-fw-sb) clamp(48px,13vw,200px)/1 var(--rp-font);
  letter-spacing:-.04em;text-align:center;color:var(--rp-n1);
  margin-top:var(--rp-sp-80);
}
.rp-footer__rule{height:1px;background:var(--rp-dark-border);margin:var(--rp-sp-32) 0}
.rp-footer__credit{text-align:center;font-size:var(--rp-fs-b3);opacity:.6;padding-bottom:var(--rp-sp-32)}

/* ---------- 13. CTA BAND ------------------------------------ */
.rp-cta{position:relative;overflow:clip;text-align:center}
.rp-cta .rp-h2{color:var(--rp-n1)}
.rp-cta p{opacity:var(--rp-muted-o);max-width:560px;margin-inline:auto}


/* Layer 3: rapeto motion */

/* ============================================================
   RAPETO STYLE — MOTION
   Depends on rapeto-tokens.css. Two easings run the entire system:
   outQuart everywhere, outCubic for the accordion, linear for the marquee.
   ============================================================ */

/* ---------- 1. SCROLL REVEAL (opacity + scale .9 — nothing else) --- */
[data-rp-reveal]{
  opacity:0;transform:scale(.9);will-change:opacity,transform;
  transition:opacity var(--rp-dur-reveal) var(--rp-ease),
             transform var(--rp-dur-reveal) var(--rp-ease);
}
[data-rp-reveal="1"]{transition-duration:600ms;transition-delay:var(--rp-stag-1)}
[data-rp-reveal="2"]{transition-delay:var(--rp-stag-2)}
[data-rp-reveal="3"]{transition-delay:var(--rp-stag-3)}
[data-rp-reveal="4"]{transition-delay:var(--rp-stag-4)}
[data-rp-reveal="5"]{transition-delay:var(--rp-stag-5)}
[data-rp-reveal="6"]{transition-delay:var(--rp-stag-6)}
[data-rp-reveal].is-in{opacity:1;transform:scale(1)}

[data-rp-slide-left]{
  opacity:0;transform:translateX(-100px);
  transition:opacity var(--rp-dur-slide) var(--rp-ease),
             transform var(--rp-dur-slide) var(--rp-ease);
}
[dir="rtl"] [data-rp-slide-left]{transform:translateX(100px)}
[data-rp-slide-left].is-in{opacity:1;transform:translateX(0)}

/* ---------- 2. PANEL WIPE (nav / page links) ------------------ */
.rp-wipe{position:relative;overflow:clip;isolation:isolate}
.rp-wipe__bg{
  position:absolute;inset:0;z-index:-1;background:var(--rp-s2);
  transform:translateY(-100%);
  transition:transform var(--rp-dur-reveal) var(--rp-ease);
}
.rp-wipe:hover .rp-wipe__bg{transform:translateY(0)}

/* ---------- 3. IMAGE ZOOM ------------------------------------- */
.rp-zoom{overflow:clip;border-radius:var(--rp-r-24);display:flex}
.rp-zoom img{width:100%;object-fit:cover;transition:transform var(--rp-dur-swap) var(--rp-ease)}
.rp-zoom:hover img{transform:scale(1.2)}

/* ---------- 4. LOGO MARQUEE ----------------------------------- */
.rp-marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rp-marquee__track{
  display:flex;gap:var(--rp-sp-24);width:max-content;
  animation:rp-marquee-x var(--rp-dur-marquee) linear infinite;
}
.rp-marquee:hover .rp-marquee__track{animation-play-state:paused}
@keyframes rp-marquee-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* RTL: run the strip the other way so it reads with the language */
[dir="rtl"] .rp-marquee__track{animation-name:rp-marquee-x-rtl}
@keyframes rp-marquee-x-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- 5. DIGIT REEL COUNTER ----------------------------- */
.rp-reel{display:flex;overflow:hidden;height:1em;line-height:1em;letter-spacing:-.08em}
.rp-reel__col{display:flex;flex-flow:column;align-items:center;
  transition:transform var(--rp-dur-count) var(--rp-ease)}
.rp-reel__col--down{transform:translateY(0)}
.rp-reel__col--up{transform:translateY(-89%)}
.rp-reel.is-in .rp-reel__col--down{transform:translateY(-89%)}
.rp-reel.is-in .rp-reel__col--up{transform:translateY(0)}

/* ---------- 6. GROUPED IMAGE FAN ------------------------------ */
[class*="rp-fan-image-"]{transition:transform var(--rp-dur-swap) var(--rp-ease)}
.rp-fan-image-1,.rp-fan-image-2,.rp-fan-image-3,.rp-fan-image-4{transform:translateX(100%)}
.rp-fan-image-2{z-index:99;position:relative}
.rp-fan.is-in .rp-fan-image-1{transform:translateX(0)    rotate(-8deg);transition-delay:0ms}
.rp-fan.is-in .rp-fan-image-2{transform:translateX(-12%) rotate(8deg); transition-delay:100ms}
.rp-fan.is-in .rp-fan-image-3{transform:translateX(-20%) rotate(-8deg);transition-delay:200ms}
.rp-fan.is-in .rp-fan-image-4{transform:translateX(-30%) rotate(8deg); transition-delay:300ms}

/* ---------- 7. ACCESSIBILITY ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-rp-reveal],[data-rp-slide-left]{opacity:1!important;transform:none!important}
}


/* Layer 4: app pages (deduped) */

/* ---- Dashboard ---- */
:root{
  /* ---------- BRAND ACCENT — single source of truth for the platform ----------
     Change this ONE value to re-accent every icon, mark, rule and progress bar. */
  --iy-gold:#B98F32;
  --iy-gold-soft:rgba(185,143,50,.16);
  --iy-gold-line:rgba(185,143,50,.48);
  --iy-gold-ink:#ffffff;
}
html,body{ overflow-x:clip; }
body{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
a:not(.rp-btn):not(.rp-nav__pill):hover{ color:var(--rp-n5); }
a.rp-btn:hover{ color:var(--rp-n1); }
a.rp-btn--white:hover, a.rp-btn--ghost:hover{ color:var(--rp-n5); }
::selection{ background:var(--rp-n4); }
:focus-visible{ outline:2px solid var(--rp-n5); outline-offset:3px; }
.iy-logo{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--rp-r-16); background:#0A0A0A url('assets/iy-mark.png') no-repeat 50% 50%; background-size:104% auto; display:block; box-shadow:var(--rp-sh-btn); }
.iy-head{ background:rgba(229,229,229,.9); backdrop-filter:blur(12px); }
.iy-bar{ display:block; width:22px; height:2px; background:var(--rp-n5); }
.iy-menu{ position:relative; }
.iy-caret{ font-size:10px; opacity:.55; }
.iy-sub{ position:absolute; top:calc(100% + 14px); inset-inline-start:-12px; z-index:60; min-width:270px; margin:0; padding:var(--rp-sp-8);
    list-style:none; display:grid; gap:2px; background:var(--rp-n1); border:1px solid var(--rp-n4); border-radius:var(--rp-r-24);
    box-shadow:0 24px 48px rgba(17,17,17,.14); opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity var(--rp-dur-ui) var(--rp-ease), transform var(--rp-dur-ui) var(--rp-ease); }
.iy-menu:hover .iy-sub, .iy-menu:focus-within .iy-sub{ opacity:1; transform:none; pointer-events:auto; }
.iy-sub a{ display:flex; align-items:center; gap:var(--rp-sp-12); padding:10px 12px; border-radius:var(--rp-r-16); color:var(--rp-n5);
    font-size:var(--rp-fs-b3); line-height:var(--rp-lh-b3); transition:background var(--rp-dur-tick) var(--rp-ease); }
.iy-sub a:hover{ background:var(--rp-n2); }
.iy-sub__n{ flex:0 0 auto; width:24px; font-size:var(--rp-fs-b4); letter-spacing:.12em; color:var(--iy-gold); }
@media (max-width:991px){
    .iy-sub{ position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none; background:transparent; border:0; min-width:0; padding:var(--rp-sp-8) 0 0; }
    .iy-caret{ display:none; }
  }
.iy-row{ display:flex; align-items:flex-start; gap:var(--rp-sp-12); padding-block:var(--rp-sp-10); }
.iy-row + .iy-row{ border-top:1px solid var(--rp-n4); }
.iy-mark{ flex:0 0 auto; width:24px; height:24px; border-radius:var(--rp-r-round); display:grid; place-items:center; font-size:12px; background:var(--iy-gold); color:#fff; }
.iy-ava{ flex:0 0 auto; width:72px; height:72px; border-radius:var(--rp-r-round); background:var(--rp-n5); color:var(--rp-n1);
    display:grid; place-items:center; font-size:22px; font-weight:600; box-shadow:var(--rp-sh-btn); }
.iy-journey{ display:grid; gap:var(--rp-sp-8); grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
.iy-step{ padding:var(--rp-sp-16); border-radius:var(--rp-r-16); border:1px solid var(--rp-n4); background:var(--rp-n1); }
.iy-step[data-state="done"]{ border-color:var(--iy-gold); }
.iy-step[data-state="now"]{ background:var(--rp-n5); color:var(--rp-n1); border-color:var(--rp-n5); }
.iy-step[data-state="locked"]{ opacity:.48; }
.iy-course{ display:flex; gap:var(--rp-sp-24); align-items:flex-start; flex-wrap:wrap; }
.iy-course__n{ flex:0 0 auto; width:56px; height:56px; border-radius:var(--rp-r-16); display:grid; place-items:center;
    font-size:18px; font-weight:600; background:var(--rp-n2); border:1px solid var(--rp-n4); color:var(--iy-gold); }
.iy-course[data-locked="1"] .iy-course__n{ color:var(--rp-n5); opacity:.6; }
.iy-prog{ height:8px; border-radius:var(--rp-r-50); background:var(--rp-n4); overflow:clip; }
.iy-prog > div{ height:100%; background:var(--iy-gold); }
.iy-badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--rp-sp-12); padding:var(--rp-sp-24) var(--rp-sp-16);
    border:1px solid var(--rp-n4); border-radius:var(--rp-r-24); background:var(--rp-n1); }
.iy-badge[data-locked="1"]{ opacity:.48; }
.iy-badge__disc{ width:54px; height:54px; border-radius:var(--rp-r-round); display:grid; place-items:center; font-size:19px;
    background:var(--rp-n2); border:1px solid var(--rp-n4); }
.iy-badge[data-locked="0"] .iy-badge__disc{ background:var(--iy-gold); border-color:var(--iy-gold); color:#fff; box-shadow:var(--rp-sh-btn); }
.iy-lockbtn{ opacity:.45; }
.iy-tabs{ display:flex; flex-wrap:wrap; gap:var(--rp-sp-8); }
.iy-chip{ white-space:nowrap; font-family:var(--rp-font); font-size:var(--rp-fs-b3); line-height:var(--rp-lh-b3); padding:8px 16px;
    border-radius:var(--rp-r-50); border:1px solid var(--rp-n4); background:var(--rp-n1); color:var(--rp-n5); cursor:pointer;
    transition:background var(--rp-dur-tick) var(--rp-ease), color var(--rp-dur-tick) var(--rp-ease); }
.iy-chip:hover{ background:var(--rp-n2); }
.iy-chip[data-active="1"]{ background:var(--rp-n5); color:var(--rp-n1); border-color:var(--rp-n5); }
.rp-btn--white, .rp-btn--white:hover{ background:var(--rp-n1); color:var(--rp-n5); }
.rp-btn--white .rp-btn__text > span{ color:var(--rp-n5); }
.rp-band .rp-btn--ghost, .rp-on-dark .rp-btn--ghost{ color:var(--rp-n1); border-color:var(--rp-dark-border); }
.rp-btn__text{ height:24px; line-height:24px; overflow:clip; }
.rp-btn__text > span{ flex:0 0 24px; height:24px; line-height:24px; white-space:nowrap; color:inherit; }
.rp-btn:hover{ color:inherit; }
/* ---- Learn ---- */
.iy-shell{ display:grid; gap:var(--rp-sp-32); align-items:start; }
@media (min-width:992px){ .iy-shell{ grid-template-columns:minmax(0,1fr) 380px; } .iy-side{ position:sticky; top:104px; } }
.iy-lesson{ width:100%; display:flex; align-items:flex-start; gap:var(--rp-sp-12); text-align:start; cursor:pointer;
    padding:var(--rp-sp-12) var(--rp-sp-12); border:1px solid transparent; border-radius:var(--rp-r-16); background:transparent;
    color:var(--rp-n5); font-family:var(--rp-font); transition:background var(--rp-dur-tick) var(--rp-ease), border-color var(--rp-dur-tick) var(--rp-ease); }
.iy-lesson:hover{ background:var(--rp-n2); }
.iy-lesson[data-active="1"]{ background:var(--rp-n2); border-color:var(--rp-n4); }
.iy-tick{ flex:0 0 auto; width:24px; height:24px; border-radius:var(--rp-r-round); border:1px solid var(--rp-n4); background:var(--rp-n1);
    display:grid; place-items:center; font-size:11px; color:transparent; transition:all var(--rp-dur-ui) var(--rp-ease); }
.iy-lesson[data-done="1"] .iy-tick{ background:var(--iy-gold); border-color:var(--iy-gold); color:#fff; }
.iy-lesson[data-done="1"] .iy-ltitle{ opacity:.62; }
.iy-modhead{ margin:var(--rp-sp-20) 0 var(--rp-sp-8); padding-inline:var(--rp-sp-12); letter-spacing:.14em; text-transform:uppercase; color:var(--iy-gold); }
.iy-badge__disc{ width:58px; height:58px; border-radius:var(--rp-r-round); display:grid; place-items:center; font-size:20px;
    background:var(--rp-n2); border:1px solid var(--rp-n4); color:var(--rp-n5); }
.iy-stage{ display:grid; gap:var(--rp-sp-12); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.iy-stage__i{ padding:var(--rp-sp-16); border-radius:var(--rp-r-16); border:1px solid var(--rp-n4); background:var(--rp-n1); }
.iy-stage__i[data-state="done"]{ border-color:var(--iy-gold); }
.iy-stage__i[data-state="locked"]{ opacity:.5; }
.iy-locked{ position:relative; }
.iy-locked[data-locked="1"] .iy-lockbody{ opacity:.5; filter:saturate(.4); pointer-events:none; }
.iy-cert{ border:1px solid var(--rp-n4); border-radius:var(--rp-r-24); background:var(--rp-n1);
    background-image:radial-gradient(circle at 1px 1px, rgba(17,17,17,.05) 1px, transparent 0); background-size:22px 22px;
    padding:clamp(24px,4vw,56px); text-align:center; }
.iy-cert__rule{ width:120px; height:1px; background:var(--iy-gold); margin:var(--rp-sp-24) auto; }
@media print{ .rp-nav, .iy-noprint{ display:none !important; } }
/* ---- Members ---- */
[data-reveal]{ opacity:0; transform:scale(.9); transition:opacity var(--rp-dur-reveal) var(--rp-ease), transform var(--rp-dur-reveal) var(--rp-ease); }
[data-reveal][data-in="1"]{ opacity:1; transform:none; }
html:not([data-iy-ready]) [data-reveal]{ animation:iyFallback .4s var(--rp-ease) 2.5s forwards; }
to{ opacity:1; transform:none; }
[data-reveal="2"]{ transition-delay:var(--rp-stag-2); }
[data-reveal="3"]{ transition-delay:var(--rp-stag-3); }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }
.iy-head{ background:rgba(229,229,229,.88); backdrop-filter:blur(12px); }
.iy-sub a:hover{ background:var(--rp-n2); color:var(--rp-n5); }
@media (min-width:992px){ .iy-shell{ grid-template-columns:minmax(0,1fr) 340px; } .iy-side{ position:sticky; top:104px; } }
.iy-side{ display:grid; gap:var(--rp-sp-16); }
.iy-feed{ display:grid; gap:var(--rp-sp-20); }
.iy-feed[data-filter="announcement"] > [data-f]:not([data-f="announcement"]),
  .iy-feed[data-filter="focus"] > [data-f]:not([data-f="focus"]),
  .iy-feed[data-filter="files"] > [data-f]:not([data-f="files"]),
  .iy-feed[data-filter="recording"] > [data-f]:not([data-f="recording"]){ display:none; }
.iy-chip{ white-space:nowrap; font-family:var(--rp-font); font-size:var(--rp-fs-b3); line-height:var(--rp-lh-b3); padding:8px 16px; border-radius:var(--rp-r-50);
    border:1px solid var(--rp-n4); background:var(--rp-n1); color:var(--rp-n5); cursor:pointer;
    transition:background var(--rp-dur-tick) var(--rp-ease), color var(--rp-dur-tick) var(--rp-ease), border-color var(--rp-dur-tick) var(--rp-ease); }
.iy-ava{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--rp-r-round); overflow:clip; background:var(--rp-n5); color:var(--rp-n1);
    display:grid; place-items:center; font-size:13px; font-weight:600; }
.iy-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.iy-type{ font-size:var(--rp-fs-b4); line-height:var(--rp-lh-b4); letter-spacing:.12em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--rp-r-50); background:color-mix(in srgb, var(--iy-gold) 16%, transparent); color:var(--iy-gold); }
.iy-file{ display:flex; align-items:center; gap:var(--rp-sp-12); padding:var(--rp-sp-12) var(--rp-sp-16); border:1px solid var(--rp-n4);
    border-radius:var(--rp-r-16); background:var(--rp-n2); transition:background var(--rp-dur-tick) var(--rp-ease); }
.iy-file:hover{ background:var(--rp-n1); }
.iy-file__ico{ flex:0 0 auto; width:34px; height:34px; border-radius:var(--rp-r-8); background:var(--rp-n1); border:1px solid var(--rp-n4);
    display:grid; place-items:center; font-size:13px; color:var(--iy-gold); }
.iy-mark{ flex:0 0 auto; width:24px; height:24px; border-radius:var(--rp-r-round); display:grid; place-items:center; font-size:12px; }
.iy-stat{ display:grid; gap:2px; }
.iy-check[data-done="1"] .iy-check__dot{ background:var(--iy-gold); color:#fff; border-color:var(--iy-gold); }
.iy-check__dot{ flex:0 0 auto; width:26px; height:26px; border-radius:var(--rp-r-round); border:1px solid var(--rp-n4); background:var(--rp-n2);
    display:grid; place-items:center; font-size:11px; color:transparent; transition:all var(--rp-dur-ui) var(--rp-ease); }
/* ---- Welcome ---- */
[data-reveal="4"]{ transition-delay:var(--rp-stag-4); }
[data-reveal="5"]{ transition-delay:var(--rp-stag-5); }
[data-reveal="6"]{ transition-delay:var(--rp-stag-6); }
.iy-head{ background:transparent; backdrop-filter:none; transition:background var(--rp-dur-ui) var(--rp-ease), backdrop-filter var(--rp-dur-ui) var(--rp-ease); }
.iy-head[data-scrolled="1"]{ background:rgba(229,229,229,.88); backdrop-filter:blur(12px); }
.iy-grid{ background-image:linear-gradient(to right, rgba(17,17,17,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,17,17,.05) 1px, transparent 1px);
    background-size:clamp(120px,14vw,200px) clamp(120px,14vw,200px); background-position:center top;
    mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 70%, transparent 100%); }
.iy-tick-mark{ position:absolute; width:16px; height:16px; opacity:.5; }
.iy-tick-mark::before,.iy-tick-mark::after{ content:""; position:absolute; background:rgba(17,17,17,.28); }
.iy-tick-mark::before{ left:0; right:0; top:50%; height:1px; }
.iy-tick-mark::after{ top:0; bottom:0; left:50%; width:1px; }
.iy-herotag{ white-space:nowrap; }
@media (max-width:479px){ .iy-herotag{ white-space:normal; } }
.iy-num{ flex:0 0 auto; width:38px; height:38px; border-radius:var(--rp-r-round); border:1px solid var(--rp-n4); display:grid; place-items:center;
    font-size:var(--rp-fs-b3); font-weight:600; color:var(--iy-gold); }
.iy-swap [data-panel]{ grid-area:1/1; transition:opacity var(--rp-dur-swap) var(--rp-ease), transform var(--rp-dur-swap) var(--rp-ease); }
.iy-swap [data-panel][data-active="0"]{ opacity:0; transform:scale(.98); pointer-events:none; }
.iy-seal{ width:74px; height:74px; border-radius:var(--rp-r-round); background:var(--iy-gold); color:#fff; display:grid; place-items:center; font-size:30px; box-shadow:var(--rp-sh-btn); }
.iy-steps{ display:grid; gap:var(--rp-sp-8); }
.iy-fields{ display:grid; gap:var(--rp-sp-16); }
@media (min-width:768px){ .iy-fields{ grid-template-columns:1fr 1fr; } .iy-fields > [data-wide]{ grid-column:1 / -1; } }

/* Layer 5: WP layer */

/* ---------- Video player — landscape or portrait -----------------------------
   Course videos are shot vertically (9:16). A portrait clip stretched into a
   16:9 box would be cropped or pillarboxed badly, so the player switches shape
   and letterboxes on a dark stage instead. */
.iyc-player{ position:relative; border-radius:var(--rp-r-24); overflow:clip; background:#000; }
.iyc-player video{ display:block; width:100%; height:auto; }

.iyc-player--landscape video{ aspect-ratio:16/9; object-fit:cover; }

.iyc-player--portrait{ display:flex; align-items:center; justify-content:center;
    background:#0A0A0A; padding-block:var(--rp-sp-16); }
.iyc-player--portrait video{ aspect-ratio:9/16; width:auto; max-width:100%;
    height:min(70vh, 760px); object-fit:contain; border-radius:var(--rp-r-16); }
@media (max-width:600px){
    .iyc-player--portrait{ padding-block:0; }
    .iyc-player--portrait video{ height:auto; width:100%; }
}

/* The empty / locked state mirrors the same shape. */
.iyc-stage{ position:relative; border-radius:var(--rp-r-24); background:var(--rp-n5);
    display:grid; place-items:center; overflow:clip; }
.iyc-stage--landscape{ aspect-ratio:16/9; }
.iyc-stage--portrait{ aspect-ratio:9/16; max-height:min(70vh, 760px);
    max-width:min(100%, 430px); margin-inline:auto; }


/* ---------- Full-bleed on app pages ----------------------------------------
   Most themes wrap page content in a narrow column (.site-main, .entry-content,
   #primary…). The app pages are full-page layouts and must ignore it, whatever
   page template the site ends up using. Scoped to the body class so the rest of
   the site is untouched. */
body.iyc-app-page .site-main,
body.iyc-app-page .site-content,
body.iyc-app-page .content-area,
body.iyc-app-page .page-content,
body.iyc-app-page .entry-content,
body.iyc-app-page .entry-content-wrap,
body.iyc-app-page .inside-article,
body.iyc-app-page .post-inner,
body.iyc-app-page .content-container,
body.iyc-app-page .ast-container,
body.iyc-app-page .ct-container,
body.iyc-app-page .container,
body.iyc-app-page .wp-block-post-content,
body.iyc-app-page #primary,
body.iyc-app-page #main,
body.iyc-app-page #content,
body.iyc-app-page #content-wrap,
body.iyc-app-page #page {
    max-width: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    float: none !important;
}
body.iyc-app-page .site-main > article,
body.iyc-app-page .entry-content > .iyc-app { margin: 0; }
/* Sidebars have no place on an app screen. */
body.iyc-app-page #secondary,
body.iyc-app-page .widget-area,
body.iyc-app-page .sidebar-area { display: none !important; }
body.iyc-app-page { overflow-x: clip; }

/* Audio lesson (an mp3 in the video slot renders as a player, not a black box) */
.iyc-audio{ display:flex; align-items:center; gap:var(--rp-sp-20);
    background:var(--rp-n2); border:1px solid var(--rp-n4);
    border-radius:var(--rp-r-24); padding:var(--rp-sp-24); }
.iyc-audio__ico{ width:56px; height:56px; flex:0 0 56px; border-radius:var(--rp-r-round);
    background:var(--iy-gold); color:var(--iy-gold-ink); display:grid; place-items:center; font-size:18px; }
@media (max-width:600px){ .iyc-audio{ flex-direction:column; align-items:stretch; } }

/* ---------- Neutralise clipping wrappers ------------------------------------
   The class list above only helps if the theme uses one of those names, so the
   JS (bindFullBleed in iyc.js) walks up from .iyc-app and clears max-width,
   padding and overflow on every real ancestor. These rules cover the common
   cases before the JS runs, so there is no flash of narrow layout. */
body.iyc-app-page .site-main,
body.iyc-app-page .site-content,
body.iyc-app-page .content-area,
body.iyc-app-page .page-content,
body.iyc-app-page .entry-content,
body.iyc-app-page .entry-content-wrap,
body.iyc-app-page .inside-article,
body.iyc-app-page .post-inner,
body.iyc-app-page .content-container,
body.iyc-app-page .ast-container,
body.iyc-app-page .ct-container,
body.iyc-app-page .container,
body.iyc-app-page .wp-block-post-content,
body.iyc-app-page .wp-site-blocks,
body.iyc-app-page .elementor-widget-container,
body.iyc-app-page .elementor-widget-shortcode,
body.iyc-app-page article.page,
body.iyc-app-page article.hentry,
body.iyc-app-page #primary,
body.iyc-app-page #main,
body.iyc-app-page #content,
body.iyc-app-page #content-wrap,
body.iyc-app-page #page { overflow: visible !important; }

/* Elementor's boxed container caps width at the theme's content width. */
body.iyc-app-page .elementor-section.elementor-section-boxed > .elementor-container,
body.iyc-app-page .e-con-boxed > .e-con-inner { max-width: none !important; }


body{ background:var(--rp-n1); }
.iyc-app img{ max-width:100%; height:auto; }
.iyc-app video{ width:100%; display:block; border-radius:var(--rp-r-16); background:#000; }
.iyc-app a{ text-decoration:none; }
.iyc-msg{ padding:12px 16px; border-radius:var(--rp-r-12); background:var(--rp-n2); border:1px solid var(--rp-n4); margin:0 0 var(--rp-sp-16); }
.iyc-msg--ok{ border-color:var(--iy-gold); }
.iyc-locked-note{ opacity:.6; }
@media print{ .iy-noprint, header, footer, .rp-nav{ display:none !important; } body{ background:#fff; } }