/* Coming Soon — Grit Guide placeholder / router page.
   Faithful to design_handoff_coming_soon/reference/coming-soon-standalone.html.
   Everything is scoped under body.page-coming-soon so it cannot leak to other
   pages (each page in this theme loads only its own CSS, but we scope anyway). */

body.page-coming-soon{
  --gg-navy:#18355E; --gg-pink:#FF1894; --gg-white:#fff;
  --gg-gray-bg:#F5F6F8; --gg-line:#D9DEE8; --gg-text-navy:#10233F; --gg-mute:#94989B;
  --gg-radius-sm:4px;
  --gg-font-display:"Bebas Neue","Oswald","Arial Narrow",sans-serif;
  --gg-font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gg-ease:cubic-bezier(0.22,0.61,0.36,1);
}

body.page-coming-soon .cs-page{
  min-height:78vh;display:flex;flex-direction:column;background:#fff;
  position:relative;overflow:hidden;
  font-family:var(--gg-font-body);color:var(--gg-text-navy);
}
body.page-coming-soon .cs-page *{box-sizing:border-box;}
body.page-coming-soon .cs-page a{text-decoration:none;color:inherit;}

body.page-coming-soon .cs-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px;}
/* Watermark as a CSS background with a stylesheet-relative URL: no domain and
   no theme-folder name, so it survives domain changes, subdirectory installs,
   and a theme rename. Aspect ratio matches the source mark (1119x1498). */
body.page-coming-soon .cs-wm{
  position:absolute;right:4vw;bottom:-6vh;height:38vh;aspect-ratio:1119/1498;
  background:url(img/gg-mark-pink-navy.png) center/contain no-repeat;
  opacity:.07;pointer-events:none;user-select:none;z-index:0;
}

body.page-coming-soon .cs-main{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:72px 0;}
body.page-coming-soon .cs-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:center;}

body.page-coming-soon .cs-eyebrow-row{display:flex;align-items:center;gap:12px;}
body.page-coming-soon .cs-dot{width:8px;height:8px;border-radius:50%;background:var(--gg-pink);display:inline-block;}
body.page-coming-soon .cs-eyebrow{margin:0;font-family:var(--gg-font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gg-pink);}

body.page-coming-soon .cs-h1{
  font-family:var(--gg-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(56px,8vw,120px);line-height:.92;margin:18px 0 0;color:var(--gg-navy);
}
body.page-coming-soon .cs-h1 .pk{color:var(--gg-pink);}

body.page-coming-soon .cs-rule{border:0;border-top:3px solid var(--gg-pink);width:56px;margin:26px 0 22px;}

body.page-coming-soon .cs-lead{font-family:var(--gg-font-body);font-size:26px;line-height:1.4;max-width:540px;margin:0;color:var(--gg-text-navy);}

/* Selector includes `.cs-page a` so the white text beats the link reset above
   (`.cs-page a{color:inherit}`); otherwise the button text inherits page navy. */
body.page-coming-soon .cs-page a.cs-btn{
  display:inline-flex;align-items:center;gap:10px;padding:17px 32px;font-size:15px;
  font-family:var(--gg-font-body);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  border-radius:var(--gg-radius-sm);background:var(--gg-pink);color:#fff;margin-top:34px;
  transition:background .18s var(--gg-ease);
}
body.page-coming-soon .cs-page a.cs-btn:hover{background:var(--gg-navy);color:#fff;}
body.page-coming-soon .cs-page a.cs-btn:focus-visible{outline:3px solid var(--gg-navy);outline-offset:3px;}

body.page-coming-soon .cs-aside-label{font-family:var(--gg-font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gg-mute);margin:0 0 14px;}
body.page-coming-soon .cs-aside-h2{font-family:var(--gg-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:30px;margin:0 0 6px;color:var(--gg-navy);}
body.page-coming-soon .cs-aside-rule{border:0;border-top:2px solid var(--gg-navy);margin:0 0 6px;}

body.page-coming-soon .cs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--gg-line);cursor:pointer;}
body.page-coming-soon .cs-row-inner{transition:transform .18s var(--gg-ease);}
body.page-coming-soon .cs-row-title{
  font-family:var(--gg-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:21px;color:var(--gg-navy);display:block;transition:color .18s var(--gg-ease);
}
body.page-coming-soon .cs-row-desc{font-family:var(--gg-font-body);font-size:12.5px;color:var(--gg-mute);}
body.page-coming-soon .cs-row:hover .cs-row-inner{transform:translateX(10px);}
body.page-coming-soon .cs-row:hover .cs-row-title{color:var(--gg-pink);}
body.page-coming-soon .cs-row:focus-visible{outline:3px solid var(--gg-pink);outline-offset:3px;}
body.page-coming-soon .cs-row svg{flex:none;}

@media (max-width:900px){
  body.page-coming-soon .cs-main{padding:56px 0;}
  body.page-coming-soon .cs-grid{grid-template-columns:1fr;gap:48px;align-items:start;}
  body.page-coming-soon .cs-h1{font-size:clamp(52px,11vw,84px);}
  body.page-coming-soon .cs-wm{height:30vh;right:-2vw;bottom:-4vh;opacity:.05;}
}
@media (max-width:560px){
  body.page-coming-soon .cs-page{min-height:100vh;}
  body.page-coming-soon .cs-main{padding:36px 0 44px;}
  body.page-coming-soon .cs-grid{gap:40px;}
  body.page-coming-soon .cs-h1{font-size:clamp(44px,13vw,60px);}
  body.page-coming-soon .cs-lead{font-size:16px;}
  body.page-coming-soon .cs-btn{width:100%;justify-content:center;}
  body.page-coming-soon .cs-aside-h2{font-size:26px;}
  body.page-coming-soon .cs-row-title{font-size:19px;}
  body.page-coming-soon .cs-wm{height:22vh;bottom:-2vh;}
}