/* =====================================================================
   GraceCore - wares-rgus-blats.com
   The category standard for a training subscription, at full craft.
   Near-black ground, the brand rose as the only accent, large movement
   photography. Quality bar: Peloton, Nike Training Club, Apple Fitness+.
   ===================================================================== */

:root{
  --bg:#0c0d11;
  --bg-2:#12141a;
  --surface:#191c24;
  --surface-2:#222630;
  --line:#2b303b;
  --line-2:#3a4050;

  --fg:#f7f8fa;
  --fg-2:#c7ccd6;
  --muted:#8e95a3;

  --rose:#f43f5e;
  --rose-hi:#ff5c74;
  --rose-ink:#2a0710;

  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-pill:999px;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 4px rgba(0,0,0,.55), 0 24px 50px -28px rgba(0,0,0,.95);
  --display:'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  --body:'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:82px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.01em; text-transform:uppercase}
p{margin:0}
ul,ol{margin:0}
svg{display:block}

.wrap{width:min(1220px, calc(100% - 2.4rem)); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--rose); color:var(--rose-ink); padding:.8rem 1.2rem; font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--rose-hi); outline-offset:3px; border-radius:6px}

/* small caps label used above section headings is deliberately avoided;
   headings carry themselves. */

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:1.14rem;
  letter-spacing:.02em; text-transform:uppercase;
  padding:.9rem 1.9rem; min-height:54px; border-radius:var(--r-pill);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  background:var(--rose); color:var(--rose-ink);
  transition:transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover{background:var(--rose-hi); color:var(--rose-ink); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:1.24rem; padding:1.05rem 2.2rem; min-height:60px}
.btn-block{display:flex; width:100%}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--fg-2)}

/* ============================== HEADER ============================== */
.top{
  position:sticky; top:0; z-index:100;
  background:rgba(12,13,17,.86); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s var(--ease);
}
.top.scrolled{border-bottom-color:var(--line)}
.bar{display:flex; align-items:center; gap:1.4rem; padding:.75rem 0}
.logo{display:inline-flex; align-items:center; flex:0 0 auto; min-height:44px}
.logo img{height:26px; width:auto}

.burger{
  display:none; margin-left:auto; width:48px; height:48px; padding:0; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface);
  align-items:center; justify-content:center;
}
.burger span{position:relative; display:block; width:18px; height:2px; background:var(--fg); border-radius:2px}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:.18s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.top[data-open="true"] .burger span{background:transparent}
.top[data-open="true"] .burger span::before{top:0; transform:rotate(45deg)}
.top[data-open="true"] .burger span::after{top:0; transform:rotate(-45deg)}

.nav{margin-left:auto}
.nav ul{display:flex; align-items:center; gap:.15rem; list-style:none; padding:0; margin:0}
.nav a{
  display:block; text-decoration:none; color:var(--fg-2);
  font-family:var(--display); font-size:1.08rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
  padding:.55rem .85rem; border-radius:var(--r-pill);
  transition:color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover{color:var(--fg); background:var(--surface)}
.nav-cta-li{margin-left:.7rem}
.nav .nav-cta{background:var(--rose); color:var(--rose-ink); padding:.6rem 1.2rem; min-height:44px; display:flex; align-items:center}
.nav .nav-cta:hover{background:var(--rose-hi)}

/* ================================ HERO ================================ */
.hero{position:relative; min-height:min(84vh,720px); display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 35%}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,13,17,.72) 0%, rgba(12,13,17,.28) 38%, rgba(12,13,17,.92) 100%),
    linear-gradient(90deg, rgba(12,13,17,.85) 0%, rgba(12,13,17,.25) 62%, transparent 100%);
}
.hero .wrap{position:relative; padding-block:clamp(3rem,8vw,5.5rem)}
.hero h1{font-size:clamp(3rem,8vw,6.4rem); max-width:16ch; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--rose)}
.hero-sub{margin-top:1.2rem; font-size:1.2rem; color:var(--fg-2); max-width:52ch}

/* the offer is stated in full, in the first viewport */
.offer{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.2rem;
  margin-top:1.8rem; padding:1rem 1.3rem;
  background:rgba(25,28,36,.82); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:var(--r);
}
.offer .lead{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:.01em; text-transform:uppercase}
.offer .lead b{color:var(--rose)}
.offer .then{color:var(--fg-2); font-size:1rem}
.offer .then b{color:var(--fg); font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem}
.hero-note{margin-top:.9rem; font-size:.92rem; color:var(--muted); max-width:56ch}

/* ============================== SECTIONS ============================== */
.section{padding-block:clamp(3rem,6vw,5rem)}
.section-alt{background:var(--bg-2); border-block:1px solid var(--line)}
.sec-head{max-width:46rem}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.sec-head p{margin-top:.9rem; font-size:1.06rem; color:var(--fg-2); text-transform:none}

/* ============================== SESSIONS ============================== */
.sessions{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; margin-top:2.4rem}
.ses{position:relative; display:block; text-decoration:none; color:inherit; border-radius:var(--r); overflow:hidden; background:var(--surface)}
.ses-art{position:relative; aspect-ratio:4/5; overflow:hidden}
.ses-art img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.ses:hover .ses-art img,.ses:focus-visible .ses-art img{transform:scale(1.05)}
.ses-art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(12,13,17,.9) 100%)}
.ses-body{position:absolute; inset:auto 0 0 0; padding:1.1rem 1.1rem 1.2rem; z-index:1}
.ses-kit{
  display:inline-block; font-family:var(--display); font-size:.86rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--rose); margin-bottom:.3rem;
}
.ses-name{font-family:var(--display); font-weight:700; font-size:1.5rem; text-transform:uppercase; line-height:1}
.ses-desc{margin-top:.45rem; font-size:.93rem; color:var(--fg-2); line-height:1.45}

/* ================================ VIDEO ================================ */
.demos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:2.4rem}
.demo{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.demo video{width:100%; aspect-ratio:16/9; object-fit:cover; background:#000}
.demo-cap{padding:.9rem 1.1rem 1.1rem}
.demo-cap .t{font-family:var(--display); font-weight:700; font-size:1.24rem; text-transform:uppercase}
.demo-cap .d{margin-top:.25rem; font-size:.93rem; color:var(--muted)}

/* ============================== SPLIT ROWS ============================== */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.6rem); align-items:center}
.split-art{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.split-art img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.split-body h2{font-size:clamp(2rem,3.8vw,3rem)}
.split-body p{margin-top:1rem; color:var(--fg-2)}
.ticks{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.7rem}
.ticks li{position:relative; padding-left:1.9rem; color:var(--fg-2)}
.ticks li svg{position:absolute; left:0; top:.3em; width:18px; height:18px; color:var(--rose)}

/* recipe thumbnails are 264x174 originals and are never enlarged */
.recipes{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem}
.recipe{display:flex; gap:.9rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.7rem; max-width:340px}
.recipe img{width:110px; height:74px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 auto}
.recipe .t{font-family:var(--display); font-weight:700; font-size:1.14rem; text-transform:uppercase; line-height:1.05}
.recipe .d{font-size:.88rem; color:var(--muted); margin-top:.15rem}

/* ============================== BENEFITS ============================== */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem}
.ben{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem 1.5rem}
.ben .ic{width:46px; height:46px; border-radius:var(--r-sm); background:rgba(244,63,94,.14); color:var(--rose); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem}
.ben .ic svg{width:23px; height:23px}
.ben h3{font-size:1.5rem}
.ben p{margin-top:.55rem; color:var(--fg-2); font-size:.99rem}

/* ============================== PRICING ============================== */
.price-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.4rem; margin-top:2.4rem; align-items:start}
.price-card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.4rem); box-shadow:var(--shadow); color:var(--fg);
}
.price-card .k{font-family:var(--display); font-size:1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rose)}
.trial{display:flex; align-items:baseline; gap:.6rem; margin-top:.7rem; flex-wrap:wrap}
.trial .v{font-family:var(--display); font-size:clamp(3rem,6vw,4.2rem); font-weight:700; line-height:.9; letter-spacing:-.01em}
.trial .u{color:var(--muted); font-size:1rem}
.then-line{margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:1.05rem; color:var(--fg-2)}
.then-line b{color:var(--fg); font-family:var(--display); font-weight:700; font-size:1.24rem}
.price-card .btn{margin-top:1.6rem}
.fine{margin-top:1.1rem; font-size:.84rem; line-height:1.55; color:var(--muted)}
.price-side h3{font-size:1.7rem}
.price-side p{margin-top:.7rem; color:var(--fg-2)}

/* ================================ FAQ ================================ */
.qa{max-width:52rem; margin:2.4rem auto 0; border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:1.2rem;
  padding:1.25rem .3rem; min-height:56px;
  font-family:var(--display); font-weight:700; font-size:1.34rem; text-transform:uppercase;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; margin-left:auto; flex:0 0 auto; width:12px; height:12px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .22s var(--ease);
}
.qa details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px); border-color:var(--rose)}
.qa .a{padding:0 .3rem 1.4rem; color:var(--fg-2); max-width:68ch}

/* =============================== END CTA =============================== */
.cta{position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:380px; display:flex; align-items:center}
.cta-media{position:absolute; inset:0}
.cta-media img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.cta-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,13,17,.94) 0%, rgba(12,13,17,.7) 55%, rgba(12,13,17,.4) 100%)}
.cta-body{position:relative; padding:clamp(2rem,5vw,3.4rem); max-width:44rem}
.cta h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.cta p{margin-top:1rem; color:var(--fg-2); font-size:1.08rem; max-width:46ch}
.cta .hero-cta{margin-top:1.6rem}


/* ============================= DOC PAGES ============================= */
.page-hero{padding-block:clamp(2.4rem,5vw,3.6rem); border-bottom:1px solid var(--line)}
.page-hero .back{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--rose); font-size:.94rem; font-weight:600; padding:.5rem 0; min-height:40px}
.page-hero .back::before{content:"\2190"}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.page-hero .lead{margin-top:1rem; color:var(--fg-2); font-size:1.08rem; max-width:64ch}
.page-hero .updated{margin-top:.9rem; font-size:.88rem; color:var(--muted)}

.doc{padding-block:clamp(2.4rem,5vw,3.4rem)}
.doc-card{max-width:62rem; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.6rem,4vw,3rem)}
.doc-card h2{font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.6rem; scroll-margin-top:96px}
.doc-card h2:first-of-type{margin-top:0}
.doc-card h3{font-size:1.3rem; margin-top:1.8rem}
.doc-card p{margin-top:1rem; color:var(--fg-2); max-width:72ch}
.doc-card ul,.doc-card ol{margin-top:1rem; padding-left:1.35rem; display:grid; gap:.55rem; color:var(--fg-2); max-width:72ch}
.doc-card a{color:var(--rose); text-decoration:underline; text-underline-offset:2px}
.doc-card hr{border:0; border-top:1px solid var(--line); margin:2.4rem 0}

.toc{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.5rem; margin-bottom:2.4rem}
.toc h2{font-size:1.16rem!important; margin:0!important}
.toc ol{margin-top:.9rem; columns:2; column-gap:2.4rem; gap:0}
.toc li{margin-bottom:.5rem; break-inside:avoid}
.toc a{font-size:.95rem}

.note{background:rgba(244,63,94,.09); border:1px solid rgba(244,63,94,.28); border-radius:var(--r); padding:1.15rem 1.3rem; margin-top:1.8rem; color:var(--fg-2); font-size:.99rem}
.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem}
.info-cards .ic{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.info-cards .l{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.info-cards .v{font-family:var(--display); font-size:1.4rem; font-weight:700; margin-top:.2rem; text-transform:uppercase; word-break:break-word}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.8rem}
.contact-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.contact-card h2{margin-top:0!important; font-size:1.5rem!important}
.contact-row{display:flex; align-items:flex-start; gap:.9rem; margin-top:1.1rem}
.contact-row .ic{width:40px; height:40px; flex:0 0 auto; border-radius:var(--r-sm); background:rgba(244,63,94,.14); color:var(--rose); display:flex; align-items:center; justify-content:center}
.contact-row .l{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.contact-row .v{font-weight:600; margin-top:.1rem}

.end-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem}

/* ============================== MOTION ============================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .sessions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demos{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .price-wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:absolute; left:0; right:0; top:100%; display:none; margin:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .top[data-open="true"] .nav{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:0; padding:.5rem 1.2rem 1.2rem}
  .nav a{padding:.9rem .3rem; border-radius:var(--r-sm)}
  .nav-cta-li{margin:.8rem 0 0}
  .nav .nav-cta{justify-content:center; min-height:52px}
  .contact-grid,.info-cards{grid-template-columns:1fr}
  .toc ol{columns:1}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{width:calc(100% - 1.5rem)}
  .hero{min-height:auto}
  .hero-cta .btn{flex:1 1 100%}
  .offer{flex-direction:column; align-items:flex-start; gap:.3rem}
  .recipe{max-width:none; width:100%}
  .foot-grid{grid-template-columns:1fr; gap:1.6rem}
}

/* ================================ FOOTER ================================
   Taken from the gracecore-us.com reference so the footer reads identically:
   same structure, same class names, same values. Only the entity, contact
   details and links are this domain's own.
   ======================================================================== */
:root{
  --footer-bg:#141013;
  --footer-fg:#e7dcdf;
  --footer-mut:#94868c;
  --serif:ui-serif, Georgia, 'Times New Roman', serif;
}
.wordmark{display:inline-flex; align-items:center; margin-right:auto; line-height:1}
.wordmark:hover{text-decoration:none}
.wordmark img{height:30px; width:auto}

#site-footer{background:var(--footer-bg); color:var(--footer-mut); padding-block:3.5rem 2rem; font-size:.9rem}
.footer-inner{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2.5rem; align-items:start}
.footer-brand .wordmark{margin:0 0 1.1rem}
.footer-brand .wordmark img{height:28px; filter:brightness(0) invert(1); opacity:.95}
.footer-badge{
  display:inline-block; margin-top:1.3rem; font-size:.66rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#f7a8b6;
  background:rgba(244,63,94,.16); padding:.5em 1em; border-radius:999px;
}
.footer-brand p{color:var(--footer-mut); max-width:42ch; line-height:1.7; margin-top:1.1rem}
.footer-contact{list-style:none; display:flex; flex-direction:column; gap:.9rem; margin:1.3rem 0 0; padding:0}
.footer-contact li{display:flex; gap:.7rem; align-items:center}
.footer-contact svg{width:18px; height:18px; color:var(--rose); flex-shrink:0}
.footer-contact a{color:var(--footer-fg); font-weight:600; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.footer-contact a:hover{color:#fff}
.footer-col h4{color:#fff; font-family:var(--serif); font-size:1.05rem; font-weight:700; margin-bottom:1.1rem; text-transform:none; letter-spacing:0}
.footer-links{list-style:none; display:flex; flex-direction:column; gap:.8rem; padding:0; margin:0}
.footer-links a{color:var(--footer-mut); font-size:.9rem; font-weight:500; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.footer-links a:hover{color:#fff}
.footer-promoter{border-top:1px solid rgba(255,255,255,.08); margin-top:3rem; padding-top:1.75rem}
.footer-promoter p{color:var(--footer-mut); font-size:.8rem; line-height:1.65; max-width:96ch; margin:0 auto; text-align:center}
.footer-promoter a{color:var(--footer-fg); text-decoration:underline}
.footer-bottom{margin-top:1.5rem; text-align:center}
.footer-copyright{color:var(--footer-fg); font-size:.85rem; font-weight:700; margin:0 auto}
.footer-legal{color:var(--footer-mut); font-size:.78rem; margin:.45rem auto 0}

@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .footer-inner{grid-template-columns:1fr}
}