/* MyRevival brand on the Synergy Site Standard kit (assets/css/site.css + v2.css).
   Brand: black + the original MyRevival metallic gold: the live site's nav Join Free button, linear-gradient(135deg,#a87f1a,#f9f295,#e6cf57,#f9f295,#b8901f)
   (Marcos 2026-10-19). Gold text on dark is #e9e08c, like the original nav links. Anton headings, Inter body.
   Contrast: #e9e08c on #000 = 15:1 · #000 on #a87f1a (darkest gold) = 6.4:1 · --accent-dark #7a5f00 on --paper = 5.9:1 */
@font-face{font-family:"Anton";src:url("../fonts/anton-latin-400.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
/* Size-matched stand-ins (Arial, measured from the font files with fonttools) so text does not jump when the web fonts arrive */
@font-face{font-family:"Anton Fallback";src:local("Arial");size-adjust:86.11%;ascent-override:136.6%;descent-override:38.22%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:105.66%;ascent-override:91.69%;descent-override:22.83%;line-gap-override:0%}

:root{
  --ink:#000;--bg-2:#0e0e0e;--bg-3:#161616;--paper:#faf7ee;
  --accent:#e6cf57;--accent-ink:#e9e08c;--gold-metal:linear-gradient(135deg,#a87f1a 0%,#f9f295 38%,#e6cf57 52%,#f9f295 66%,#b8901f 100%);--accent-dark:#7a5f00;--on-accent:#000;
  --font-display:"Anton","Anton Fallback",Impact,"Arial Narrow",sans-serif;
  --font-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:#14110a;--muted:#4a4434;--line-light:#e7e0cc;
  --line-dark:rgba(255,255,255,.12);
}
body{background:var(--ink)}
.btn-accent,.tb-btn,.skip{background:var(--gold-metal)}
main{background:var(--paper)}

/* accent words: solid gold, the display font (DESIGN 13: no gradient text) */
.v2 .ital,.ital{font-family:var(--font-display);font-style:normal;font-weight:400;color:var(--accent-dark)}
.dark .ital,.darker .ital,.hero .ital,.foot .ital,.page-hero .ital{color:var(--accent-ink)}
.logo-word{font-family:var(--font-display);letter-spacing:.02em;font-size:1.55rem}
.logo-word b{color:var(--accent-ink)}

/* sections on paper vs black */
.dark{background:var(--bg-2);color:#fff}
.darker{background:var(--ink);color:#fff}
.dark h2,.darker h2,.dark h3,.darker h3{color:#fff}
.dark p,.darker p,.dark li,.darker li{color:#fff}

/* shorter hero for inner pages */
.hero.short{min-height:min(64svh,600px)}
.hero.short h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;color:#fff}
.crumbs a{color:var(--accent-ink);text-decoration:none}

/* pillar cards */
.cards.pillars .card{background:#fff}
.cards.pillars .card-img{aspect-ratio:4/5}
.card-body{padding:22px 22px 24px;display:grid;gap:10px}
.card-body h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:.02em;text-transform:uppercase}
.card-body p{margin:0;color:var(--muted)}
.card-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--accent-dark);text-decoration:none;margin-top:4px}

/* the 10-week rules */
.rules{display:grid;gap:clamp(40px,6vw,72px)}
.rule{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center;scroll-margin-top:calc(var(--nav-h) + 20px)}
.rule:nth-child(even) .rule-img{order:2}
.rule-img{border-radius:18px;aspect-ratio:3/2;background:var(--bg-2) center/cover no-repeat;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.rule-weeks{display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;background:var(--gold-metal);color:var(--on-accent);padding:6px 10px;border-radius:6px}
.rule h3{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase;margin:12px 0 6px;color:#fff}
.rule h3 span{color:var(--accent-ink)}
.rule .sub{margin:0 0 16px;color:#fff;font-size:1.05rem}
.rule .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0}
.rule .benefits div{border:1px solid var(--line-dark);border-radius:12px;padding:12px}
.rule .benefits b{display:block;color:var(--accent-ink);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.rule .benefits span{font-size:.9rem;color:#fff}
.stack{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.stack li{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:100px;border:1px solid var(--line-dark);color:rgba(255,255,255,.55)}
.stack li.on{background:var(--gold-metal);border-color:var(--accent);color:var(--on-accent)}
.product{display:flex;gap:14px;align-items:center;margin-top:18px;padding:12px;border:1px solid var(--line-dark);border-radius:14px;background:var(--bg-3);text-decoration:none;color:#fff}
.product img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:#fff}
.product b{display:block;color:#fff}
.product small{color:var(--accent-ink);font-weight:700}

/* notes and disclaimers: 1px line, no accent bar */
.note{border:1px solid var(--line-light);border-radius:14px;padding:16px 18px;background:#fff;color:var(--muted);font-size:.92rem}
.dark .note,.darker .note{background:var(--bg-3);border-color:var(--line-dark);color:#fff}
.note b{color:inherit}

/* guide pages */
.guide{max-width:820px;margin:0 auto}
.guide h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.4rem);margin:40px 0 12px}
.guide p,.guide li{font-size:1.05rem;line-height:1.7;color:var(--text)}
.guide ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:16px}
.guide ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:16px}
.guide ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--accent-dark)}
.guide ol.steps b{display:block;margin-bottom:4px}
.guide a{color:var(--accent-dark);font-weight:700}
.guide p a,.guide li a{text-decoration:underline;text-underline-offset:.15em} /* links inside text are not told apart by color alone (WCAG 1.4.1) */
.next-guide{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px}

/* 75 Hard page: stark black and white */
.hard-page main{background:#000}
/* the 75 Hard photo is already black and white; no filter, so the gold button stays gold */
.hard-tasks{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.18)}
.hard-tasks li{display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.hard-tasks .n{font-family:var(--font-display);font-size:3rem;line-height:1;color:#fff}
.hard-tasks b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:.02em;color:#fff}
.hard-tasks span{color:rgba(255,255,255,.8)}
.hard-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden}
.hard-nums div{padding:26px 18px;text-align:center;border-left:1px solid rgba(255,255,255,.18)}
.hard-nums div:first-child{border-left:0}
.hard-nums b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;color:#fff}
.hard-nums span{font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* verified checklist */
.vcheck{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vcheck li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:16px;font-weight:600}
.vcheck svg{width:22px;height:22px;color:var(--accent-dark);flex:none}

/* image band */
.band{position:relative;color:#fff;background:#000 center/cover no-repeat;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.45))}
.band .wrap{padding-block:clamp(80px,10vw,140px)}
.band h2{color:#fff}

/* forms */
.form-done{display:none;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line-light);color:var(--text);font-weight:600}
.form.sent .form-done{display:block;grid-column:1/-1}
.form.sent > :not(.form-done){display:none}
.form-err{grid-column:1/-1;color:#b91c1c;font-weight:700;margin:0}
.hp{display:none}


@media (max-width:960px){
  .rule{grid-template-columns:1fr}
  .rule:nth-child(even) .rule-img{order:0}
  .vcheck{grid-template-columns:1fr}
  .hard-nums{grid-template-columns:1fr 1fr}
  .hard-nums div:nth-child(3){border-left:0}
  .hard-nums div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
}
@media (max-width:560px){
  .rule .benefits{grid-template-columns:1fr}
  .hard-tasks li{grid-template-columns:52px 1fr}
  .hard-tasks .n{font-size:2.2rem}
}

/* open FAQ (always visible, Marcos 2026-10-17) */
.dfaq{display:grid;gap:12px}
.dfaq .faq-item{background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:18px 20px}
.dfaq .faq-q{margin:0 0 8px;font-size:1.08rem;font-family:var(--font-body);font-weight:800;text-transform:none;letter-spacing:0;color:var(--text)}
.dfaq p{margin:0;color:var(--muted)}

/* MyRevival type: upright Anton headings (the kit's v2 slant doesn't fit this brand), Inter buttons and labels */
.v2 h1,.v2 h2,.v2 h3,.v2 .logo-word,.v2 .stat dd{font-style:normal;font-weight:400;letter-spacing:.01em}
.v2 .kicker{font-family:var(--font-body);font-style:normal;font-weight:800;letter-spacing:.2em;font-size:.74rem}
.v2 .btn{font-family:var(--font-body);font-style:normal;font-weight:800;letter-spacing:.08em}
a.card,a.card:hover{text-decoration:none;color:inherit}
a.card h3,a.card p{text-decoration:none}
.tl h3 a{text-decoration:none;color:inherit}
.tl h3 a:hover{color:var(--accent-dark)}
.v2 .tl-n{font-style:normal}

/* hero: picture first, text bottom left (DESIGN 4) */
@media (max-width:768px){.hero.short h1{font-size:clamp(2.2rem,9vw,3rem)}.hero .trust{display:none}.hero.short{min-height:78svh}}

/* Accessibility tab: the standard far-left tab, like every site. On phones it slides out while the hero fills the
   screen (so it never covers the hero text, DESIGN 7) and comes back as soon as you scroll. */
html .sdla-tab{transition:opacity .3s ease,transform .3s ease,background .2s ease}
@media (max-width:767px){html.at-hero .sdla-tab{opacity:0;pointer-events:none;transform:translateX(-110%)}}

/* Disclaimer strip under the top bar, every page (Marcos 2026-10-19). Its height joins the hero offset. */
:root{--dc-h:34px}
.dc-bar{position:relative;z-index:59;height:var(--dc-h);display:flex;align-items:center;background:var(--gold-metal);color:#000;font-size:.8rem;line-height:1.2;overflow:hidden}
.dc-bar .wrap{display:flex;align-items:center;gap:10px;width:100%}
.dc-bar svg{flex:none;width:16px;height:16px}
.dc-bar p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-bar a{color:#000;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.dc-short{display:none}
.hero{margin-top:calc(-1 * (var(--nav-h) + var(--tb-h) + var(--dc-h)))}
.hero .wrap{padding-top:calc(var(--tb-h) + var(--dc-h) + var(--nav-h) + clamp(48px,7vw,90px))}
@media (max-width:1100px){.dc-full{display:none}.dc-short{display:inline}}
@media (max-width:767px){:root{--dc-h:30px}.dc-bar{font-size:.74rem}}
body .dc-bar p,body .dc-bar b{color:#000}
.hero .kicker,.page-hero .kicker{color:var(--accent-ink)}

/* ---------- Phase 2: MyRevival Verified (profiles, directory, spotlight, badge) ---------- */
.vx-example{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9998;background:#b91c1c;color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;font-size:.8rem;width:max-content;max-width:calc(100% - 96px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vp-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.vp-p{font-size:1.08rem;line-height:1.7;color:var(--text)}
.vp-card{background:#0b0b0b;color:#fff;border-radius:22px;padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.vp-card-top{display:flex;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.vp-card-top svg{width:42px;height:42px;color:var(--accent-ink);flex:none}
.vp-card-top b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.vp-card-top span{font-weight:700;color:var(--accent-ink);font-size:.9rem}
.vp-checks{list-style:none;padding:0;margin:0;display:grid}
.vp-checks li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.vp-checks svg{width:20px;height:20px;color:var(--accent-ink);flex:none;margin-top:2px}
.vp-checks b{display:block;color:#fff}
.vp-checks small{display:block;color:#fff;font-size:.85rem;margin-top:2px}
.vp-small{font-size:.85rem;color:#fff;margin:14px 0 0}
.vp-small a{color:var(--accent-ink);font-weight:700}
.vp-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vp-photos figure{margin:0}
.vp-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block}
.vp-photos figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.vp-details{margin:0;display:grid;border-top:1px solid var(--line-light)}
.vp-details div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-light)}
.vp-details dt{font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark)}
.vp-details dd{margin:0;color:var(--text)}
.vp-details a{color:var(--text);font-weight:700}
.vp-badge{background:#fff;border:1px solid var(--line-light);border-radius:22px;padding:26px;display:grid;gap:12px;justify-items:start}
.vp-badge h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:2rem;text-transform:uppercase}
.vp-badge p{margin:0;color:var(--text)}
.vp-code{width:100%;font:500 .78rem/1.5 ui-monospace,Consolas,monospace;padding:12px;border:1px solid var(--line-light);border-radius:10px;background:var(--paper);color:var(--text);resize:none}
.vdir{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vdir-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s ease,box-shadow .35s ease}
.vdir-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.12)}
.vdir-img{position:relative;aspect-ratio:16/10;background:center/cover no-repeat}
.vdir-check{position:absolute;left:12px;top:12px;background:var(--gold-metal);color:#000;font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:8px}
.vdir-body{padding:18px 20px 22px;display:grid;gap:6px}
.vdir-tag{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark)}
.vdir-body h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.6rem;text-transform:uppercase;color:#000}
.vdir-body p{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vdir-empty{background:#0b0b0b;color:#fff;border-radius:24px;padding:clamp(28px,5vw,56px)}
.vdir-empty h2{color:#fff;margin:0 0 10px}
.vdir-empty .ital{color:var(--accent-ink)}
.vdir-empty p{color:#fff;max-width:620px}
.vs-meta{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark)}
.vs-quote{margin:28px 0;padding:26px 30px;background:#0b0b0b;border-radius:20px}
.guide .vs-quote p{color:#fff;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;text-transform:uppercase;margin:0 0 10px}
.vs-quote cite{color:var(--accent-ink);font-style:normal;font-weight:800}
.vs-box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line-light)}
.vs-box b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.6rem;text-transform:uppercase}
.vs-box .ctas{margin:0}
@media (max-width:1100px){.vdir{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.vp-grid,.vdir{grid-template-columns:1fr}.vp-photos{grid-template-columns:1fr 1fr}.vp-details div{grid-template-columns:1fr;gap:4px}}
.guide ol.steps{grid-template-columns:1fr}
.btn-ink{background:#000;color:#fff;border-color:#000}
.btn-ink:hover{background:#1a1a1a;transform:translateY(-2px)}
/* gold buttons always have black text, ink buttons white (some link rules were overriding them) */
body .btn.btn-accent,body .btn.btn-accent:hover{color:#000}
body .btn.btn-ink,body .btn.btn-ink:hover{color:#fff}
.vp-checks li.pending svg{color:#fff}
.vp-checks em{font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#000;background:#fff;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:2px}
.vdir-img{background-position:center 25%}
.vp-photos img{object-position:center 25%}
.vdir-body h3{line-height:1}
.vp-credit{margin:14px 0 0;font-size:.85rem;color:var(--muted)}

/* ---------- The MyRevival System page (Marcos 2026-10-19): one section per rule, black and white in turn ---------- */
/* No scroll-in animations anywhere: content is just there (Marcos 2026-10-19) */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}

.sys-how{background:var(--paper);padding:clamp(64px,8vw,104px) 0}
.sys-path{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.sys-path::before{content:"";position:absolute;left:10%;right:10%;top:31px;height:2px;background:var(--gold-metal)}
.sys-path li{position:relative;text-align:center}
.sys-path a{display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--text);padding:0 6px}
.sys-dot{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#0b0b0b;color:var(--accent-ink);font:400 1.9rem/1 var(--font-display);box-shadow:0 0 0 4px var(--paper),0 0 0 6px #c9a227;transition:transform .25s}
.sys-path a:hover .sys-dot{transform:translateY(-4px)}
.sys-path b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;text-transform:uppercase;line-height:1.05;color:#000}
.sys-path small{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark)}

.sys-rule{position:relative;padding:clamp(72px,9vw,120px) 0;border-top:1px solid #c9a227}
.sys-dark{background:#050505;color:#fff}
.sys-light{background:var(--paper);color:var(--text)}
.sys-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.sys-grid.flip .sys-media{order:2}
.sys-media{position:relative;min-height:clamp(420px,52vw,640px);border-radius:28px;overflow:hidden;background:#111;box-shadow:0 40px 80px rgba(0,0,0,.35)}
.sys-scene{position:absolute;inset:0;background:center/cover no-repeat}
.sys-media:has(.sys-product-shot) .sys-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(0,0,0,.15),rgba(0,0,0,.6))}
.sys-product-shot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);width:min(62%,360px);background:#fff;border-radius:22px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 3px #c9a227;transition:transform .35s}
.sys-product-shot:hover{transform:translate(-50%,-52%) rotate(0deg)}
.sys-product-shot img{display:block;width:100%;height:auto;border-radius:12px}
.sys-bignum{position:absolute;right:18px;bottom:-14px;font:400 clamp(6rem,12vw,10rem)/1 var(--font-display);color:#fff;opacity:.92;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.sys-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.sys-rulelabel{font-weight:800;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.sys-dark .sys-rulelabel{color:#fff}
.sys-light .sys-rulelabel{color:#000}
.sys-weeks{background:var(--gold-metal);color:#000;font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:8px}
.sys-rule h2{font:400 clamp(2.8rem,5.4vw,4.6rem)/.92 var(--font-display);text-transform:uppercase;margin:0 0 12px}
.sys-rule h2 .ital{display:block}
.sys-dark h2{color:#fff}
.sys-dark h2 .ital{color:var(--accent-ink)}
.sys-light h2{color:#000}
.sys-light h2 .ital{color:var(--accent-dark)}
.sys-sub{font-size:1.15rem;font-weight:600;margin:0 0 20px}
.sys-dark .sys-sub,.sys-dark p,.sys-dark li{color:#fff}
.sys-h{font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-family:var(--font-body)}
.sys-dark .sys-h{color:var(--accent-ink)}
.sys-light .sys-h{color:var(--accent-dark)}
.sys-light .checks svg{color:var(--accent-dark)}
.sys-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.sys-benefits div{border-radius:14px;padding:14px}
.sys-dark .sys-benefits div{background:#121212;border:1px solid rgba(255,255,255,.12)}
.sys-light .sys-benefits div{background:#fff;border:1px solid var(--line-light)}
.sys-benefits b{display:block;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.sys-dark .sys-benefits b{color:var(--accent-ink)}
.sys-light .sys-benefits b{color:var(--accent-dark)}
.sys-benefits span{font-size:.92rem}
.sys-dark .sys-benefits span{color:#fff}
.sys-stack{margin:0 0 20px}
.sys-stack>span{display:block;font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.sys-dark .sys-stack>span{color:#fff}
.sys-stack ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sys-stack li{font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:9px 4px;border-radius:8px}
.sys-dark .sys-stack li{background:#121212;border:1px solid rgba(255,255,255,.14);color:#fff}
.sys-light .sys-stack li{background:#fff;border:1px solid var(--line-light);color:#000}
.sys-rule .sys-stack li.on{background:var(--gold-metal);border-color:transparent;color:#000}
.sys-product{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:18px;text-decoration:none;transition:transform .25s,box-shadow .25s}
.sys-dark .sys-product{background:#121212;border:1px solid #c9a227;color:#fff}
.sys-light .sys-product{background:#fff;border:1px solid #c9a227;color:#000}
.sys-product:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.sys-product img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:12px;flex:none}
.sys-product em{display:inline-block;font-style:normal;background:var(--gold-metal);color:#000;font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:6px;margin-bottom:6px}
.sys-product b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.4rem;text-transform:uppercase;line-height:1}
.sys-product small{display:block;font-weight:700;margin-top:3px}
.sys-dark .sys-product small{color:var(--accent-ink)}
.sys-light .sys-product small{color:var(--accent-dark)}
.sys-product-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sys-product-go svg{width:16px;height:16px}
.sys-end{background:#050505;border-top:1px solid #c9a227;padding:clamp(64px,8vw,104px) 0}
.sys-done{text-align:center;max-width:760px;margin:0 auto}
.sys-done h2{font:400 clamp(2.4rem,5vw,4rem)/.95 var(--font-display);text-transform:uppercase;color:#fff;margin:0 0 12px}
.sys-done h2 .ital{color:var(--accent-ink)}
.sys-done p{color:#fff;font-size:1.1rem}
.sys-done .ctas{justify-content:center}
.sys-end .note{background:#121212;border-color:rgba(255,255,255,.14);color:#fff}
@media (max-width:900px){
  .sys-grid,.sys-grid.flip{grid-template-columns:1fr}
  .sys-grid.flip .sys-media{order:0}
  .sys-media{min-height:clamp(320px,90vw,460px)}
  .sys-path{grid-template-columns:1fr;gap:14px}
  .sys-path::before{left:31px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .sys-path a{grid-template-columns:64px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:16px;row-gap:0}
  .sys-path .sys-dot{grid-row:1/3}
  .sys-benefits{grid-template-columns:1fr}
  .sys-stack li{font-size:.56rem;padding:8px 2px;letter-spacing:.02em}
}

/* English / Español button */
.v2 .sys-rule .sys-h{font-family:var(--font-body);font-weight:800}
.tb-links{display:flex;align-items:center;gap:8px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:6px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);color:#fff;font:800 .72rem/1 var(--font-body);letter-spacing:.1em;cursor:pointer}
.lang-btn:hover{border-color:#c9a227}
.lang-flag{display:inline-flex}
.lang-flag svg{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.lang-flag[hidden]{display:none}
/* hide Google Translate's own bar */
iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
.tb-btn{white-space:nowrap}
.translated-ltr .tb-btn{font-size:.66rem;padding:7px 10px}

/* Rule tabs (Marcos 2026-10-19: like the original site, Overview / Watch video / Why it works) */
.sys-tabs{margin:6px 0 22px;border-radius:18px;overflow:hidden}
.sys-dark .sys-tabs{background:#0e0e0e;border:1px solid rgba(255,255,255,.14)}
.sys-light .sys-tabs{background:#fff;border:1px solid var(--line-light)}
.sys-tablist{display:grid;grid-template-columns:repeat(3,1fr)}
.sys-tablist [role="tab"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;border:0;background:transparent;font:800 .74rem/1.1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent}
.sys-tablist svg{width:18px;height:18px;flex:none}
.sys-dark .sys-tablist [role="tab"]{color:#fff;background:#050505}
.sys-light .sys-tablist [role="tab"]{color:#000;background:var(--paper)}
.sys-tablist [role="tab"][aria-selected="true"]{background:var(--gold-metal);color:#000}
.sys-tablist [role="tab"]:focus-visible{outline:2px solid #c9a227;outline-offset:-4px}
.sys-panel{padding:22px 22px 18px}
.sys-panel[hidden]{display:none}
.sys-panel .checks{margin-top:14px}
.sys-panel .sys-benefits{margin:16px 0 4px}
.sys-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.sys-video iframe,.sys-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.sys-video-soon{display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;isolation:isolate}
.sys-video-soon::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.35))}
.sys-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--gold-metal);color:#000;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.sys-play svg{width:40px;height:40px}
.sys-video-soon p{margin:0;padding:16px 18px;color:#fff;font-size:.92rem}
.sys-video-soon b{display:block;font-size:1rem;margin-bottom:2px;color:#fff}
.sys-video-soon a{color:#e9e08c;font-weight:800}
@media (max-width:560px){.sys-tablist [role="tab"]{flex-direction:column;gap:5px;font-size:.62rem;padding:12px 4px}.sys-panel{padding:18px 16px 14px}}

/* System page look (Marcos picked Option B, 2026-10-19): gold number medallions on each section line, black and warm charcoal in turn, big outline number behind each rule */
.sys-rule{border-top:1px solid #c9a227;overflow:visible}
#rule-1{background:#0a0a0a}
#rule-3{background:#17140f}
#rule-5{background:#0f1012}
.sys-light{background:var(--paper)}
.sys-rule::before{content:attr(data-num);position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--gold-metal);color:#000;font:400 1.9rem/1 var(--font-display);box-shadow:0 0 0 6px #050505,0 12px 30px rgba(0,0,0,.4)}
.sys-light::before{box-shadow:0 0 0 6px var(--paper),0 12px 30px rgba(0,0,0,.2)}
.sys-rule::after{content:attr(data-num);position:absolute;right:2%;top:50%;transform:translateY(-50%);font:400 clamp(16rem,30vw,28rem)/1 var(--font-display);color:transparent;-webkit-text-stroke:2px rgba(201,162,39,.12);pointer-events:none;z-index:0}
.sys-light::after{-webkit-text-stroke:2px rgba(0,0,0,.07)}
.sys-grid{position:relative;z-index:1}
.sys-dark .sys-tabs{background:#1b1b1b;border-color:rgba(255,255,255,.18)}
.sys-dark .sys-benefits div,.sys-dark .sys-stack li{background:#222}
.sys-end{background:#17140f}

@media (max-width:900px){.sys-rule::after{font-size:62vw;top:auto;bottom:-4%;transform:none;right:-4%}.sys-rule::before{width:56px;height:56px;font-size:1.6rem}}

/* Phones: long button labels wrap inside the button (both buttons stay on one row); top bar never spills (QA 2026-10-19) */
@media (max-width:768px){
  body .ctas .btn,body .hero .ctas .btn{white-space:normal;line-height:1.15;text-align:center;min-height:48px;padding:12px 10px}
  .tb-inner{gap:8px}
  .tb-left{flex:1 1 auto;min-width:0}
  .tb-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .tb-links{flex:none}
  .translated-ltr .tb-btn{font-size:.6rem;padding:7px 8px;letter-spacing:.04em}
  .translated-ltr .lang-btn{padding:0 8px}
}
@media (max-width:420px){.translated-ltr .tb-left{display:none}.translated-ltr .tb-inner{justify-content:flex-end}}

/* Hero photo from CSS variables (tools/build.mjs phoneHero): phones get the 800px copy */
.hero{background-image:var(--bg)}
@media (max-width:760px){.hero{background-image:var(--bg-sm,var(--bg))}}