/* ============ IY Auth — page 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: Auth page */


: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-grid{ background-image:linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:clamp(110px,12vw,180px) clamp(110px,12vw,180px); }
  .iy-split{ display:grid; min-height:100vh; }
  @media (min-width:992px){ .iy-split{ grid-template-columns:1fr 1fr; } }
  .iy-aside{ display:none; }
  @media (min-width:992px){ .iy-aside{ display:flex; } }
  .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-dark-border); }
  .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-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-fields{ display:grid; gap:var(--rp-sp-16); }
  .iy-oauth{ display:flex; align-items:center; justify-content:center; gap:var(--rp-sp-12); width:100%; padding:14px 20px; border-radius:var(--rp-r-50);
    border:1px solid var(--rp-n4); background:var(--rp-n1); color:var(--rp-n5); font-family:var(--rp-font); font-size:var(--rp-fs-b2); cursor:pointer;
    transition:background var(--rp-dur-tick) var(--rp-ease); }
  .iy-oauth:hover{ background:var(--rp-n2); }
  .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; }


/* Layer 5: WP layer */

/* The split layout is a full-page screen — ignore the theme's narrow wrapper. */
body.iya-auth-page .site-main,
body.iya-auth-page .site-content,
body.iya-auth-page .content-area,
body.iya-auth-page .page-content,
body.iya-auth-page .entry-content,
body.iya-auth-page .inside-article,
body.iya-auth-page .ast-container,
body.iya-auth-page .ct-container,
body.iya-auth-page .container,
body.iya-auth-page .wp-block-post-content,
body.iya-auth-page #primary,
body.iya-auth-page #main,
body.iya-auth-page #content,
body.iya-auth-page #content-wrap,
body.iya-auth-page #page {
    max-width: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    float: none !important;
}
body.iya-auth-page #secondary,
body.iya-auth-page .widget-area { display: none !important; }
body.iya-auth-page { overflow-x: clip; }

/* Wrapper-agnostic breakout — the split screen must fill the viewport whatever
   the theme wraps page content in. */
body.iya-auth-page .site-main,
body.iya-auth-page .site-content,
body.iya-auth-page .content-area,
body.iya-auth-page .entry-content,
body.iya-auth-page .container,
body.iya-auth-page .wp-site-blocks,
body.iya-auth-page .elementor-widget-container,
body.iya-auth-page article.page,
body.iya-auth-page #primary,
body.iya-auth-page #main,
body.iya-auth-page #content,
body.iya-auth-page #page { overflow: visible !important; }
body.iya-auth-page .elementor-section.elementor-section-boxed > .elementor-container,
body.iya-auth-page .e-con-boxed > .e-con-inner { max-width: none !important; }

.iy-auth-wrap{ font-family:var(--rp-font); }
.iy-auth-wrap .iy-logo{ background:#0A0A0A; display:grid; place-items:center; color:var(--iy-gold); font-weight:700; font-size:15px; letter-spacing:.02em; }
.iy-authmsg{ display:flex; align-items:flex-start; gap:var(--rp-sp-12); padding:var(--rp-sp-16); border-radius:var(--rp-r-16); background:var(--rp-n2); border:1px solid var(--rp-n4); margin-bottom:var(--rp-sp-24); }
.iy-authmsg[data-kind="error"]{ border-color:#c4574e; }
.iy-authmsg[data-kind="error"] .iy-mark{ background:#c4574e; }
.iy-auth-wrap a{ text-decoration:none; }
.iy-swap [data-panel][data-active="0"]{ display:none; }
/* The tag sits on a light pill; inside the dark aside it inherited white text
   and vanished. Pin it to the dark ink instead of inheriting. */
.iy-auth-wrap .rp-tag { color: var(--rp-n5); }

/* Long emails and names must wrap inside the card, never spill out of it. */
.iy-auth-wrap .rp-card h1,
.iy-auth-wrap .rp-card p { overflow-wrap: anywhere; word-break: break-word; }
.iy-auth-wrap .rp-card { overflow: hidden; }

/* Tabs are anchors (work without JS) — keep them looking like the pills. */
.iy-auth-wrap .rp-toggle__btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.iy-auth-wrap a.rp-toggle__btn:hover{ color:var(--rp-n1); }
.iy-auth-wrap a.rp-toggle__btn.is-active,
.iy-auth-wrap a.rp-toggle__btn.is-active:hover{ color:var(--rp-n5); }
@media (min-width:0){ .iy-swap{ display:grid; } }