/* 040A — Beautiful Login + Account Front Door
   Visual-only layer. Real auth, CSRF, MFA, rate limits, trusted-device logic,
   account lifecycle, and server-side validation stay in their existing PHP paths. */

:root{
  --auth-card:#fbf5e3;
  --auth-card-strong:#fffaf0;
  --auth-edge:rgba(70,88,52,.32);
  --auth-frame:rgba(246,239,217,.96);
  --auth-shadow:rgba(18,34,17,.34);
  --auth-muted:#765b43;
}

/* ---------- Shared front-door card ---------- */
body.cranky-beta-landing .auth-card,
.cranky-lifecycle-card{
  position:relative;
  isolation:isolate;
  border:1px solid var(--auth-edge);
  background:linear-gradient(180deg,rgba(255,250,240,.995),rgba(246,239,217,.985));
  box-shadow:
    0 0 0 5px rgba(246,239,217,.78),
    0 0 0 7px rgba(227,167,59,.22),
    0 26px 72px var(--auth-shadow);
}
body.cranky-beta-landing .auth-card::before,
.cranky-lifecycle-card::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  inset:-10px -8px -9px -10px;
  border:3px solid rgba(246,239,217,.68);
  border-radius:39px 31px 42px 34px;
  transform:rotate(-.22deg);
  filter:drop-shadow(0 2px 0 rgba(227,167,59,.15));
}

body.cranky-beta-landing .auth-card{
  border-radius:30px 27px 34px 29px;
  padding:30px 30px 26px;
}
body.cranky-beta-landing .auth-badge.brand-flower{
  width:62px;
  height:62px;
  margin-bottom:12px;
  filter:drop-shadow(0 5px 9px rgba(35,58,31,.18));
}
body.cranky-beta-landing .auth-card h2{
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.25px;
}
body.cranky-beta-landing .auth-card > p.sub{
  max-width:330px;
  margin-left:auto;
  margin-right:auto;
  color:var(--auth-muted);
}

/* ---------- Child / grown-up segmented switch ---------- */
body.cranky-beta-landing .cranky-login-switch{
  padding:5px;
  gap:5px!important;
  border:1px solid rgba(47,74,42,.2);
  border-radius:17px;
  background:rgba(47,74,42,.075);
  box-shadow:inset 0 1px 2px rgba(47,74,42,.08);
}
body.cranky-beta-landing .cranky-login-switch .btn{
  min-height:46px;
  padding:10px 8px;
  border:0!important;
  border-radius:12px;
  box-shadow:none!important;
  font-size:13.5px;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
body.cranky-beta-landing .cranky-login-switch .btn-primary{
  background:linear-gradient(180deg,#3d6337,#2f4a2a)!important;
  color:#fffaf0!important;
  box-shadow:0 4px 10px rgba(30,51,28,.18)!important;
}
body.cranky-beta-landing .cranky-login-switch .btn-secondary{
  background:transparent!important;
  color:var(--forest)!important;
}
body.cranky-beta-landing .cranky-login-switch .btn-secondary:hover{
  background:rgba(255,255,255,.62)!important;
}

/* ---------- Fields and buttons ---------- */
body.cranky-beta-landing .field,
.cranky-lifecycle-card .field{margin-bottom:16px}
body.cranky-beta-landing .field label,
.cranky-lifecycle-card .field label{
  font-size:13px;
  letter-spacing:.1px;
}
body.cranky-beta-landing .field input,
.cranky-lifecycle-card .field input{
  min-height:48px;
  border:1.5px solid #d9cba8;
  background:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 2px rgba(36,26,18,.04);
}
.cranky-lifecycle-card .field input{padding-left:14px}
body.cranky-beta-landing .field input:hover,
.cranky-lifecycle-card .field input:hover{border-color:#c8b887}
body.cranky-beta-landing .field input:focus,
.cranky-lifecycle-card .field input:focus{
  border-color:var(--gold);
  outline:3px solid rgba(227,167,59,.28);
}
body.cranky-beta-landing .btn,
.cranky-lifecycle-card .btn{min-height:46px}
body.cranky-beta-landing .btn-primary,
.cranky-lifecycle-card .btn-primary{
  background:linear-gradient(180deg,#f6c963,#e3a73b);
  box-shadow:0 3px 0 #b9822b,0 8px 20px rgba(185,130,43,.18);
}
body.cranky-beta-landing .btn-secondary,
.cranky-lifecycle-card .btn-secondary{
  background:rgba(255,255,255,.74);
}

body.cranky-beta-landing .invite-note{margin-top:9px}
body.cranky-beta-landing .trust-line{
  margin-top:19px;
  padding-top:15px;
  border-top:1px solid rgba(138,90,59,.16);
}
body.cranky-beta-landing .domain-badge{
  background:rgba(47,74,42,.08);
  border:1px solid rgba(47,74,42,.12);
}

/* ---------- Claude-inspired hero use: art is real scenery, HTML is the only UI ---------- */
body.cranky-beta-landing .hero{
  background-position:34% center,center,center;
}
body.cranky-beta-landing .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 22%,rgba(243,194,94,.13),transparent 34%),
    linear-gradient(90deg,rgba(24,43,22,.07),rgba(24,43,22,.18));
}
body.cranky-beta-landing .hero-content,
body.cranky-beta-landing .feature-grid{z-index:2}
body.cranky-beta-landing .brand-text p{color:#d4e0c7}
body.cranky-beta-landing .hero-tagline{
  text-shadow:0 2px 10px rgba(0,0,0,.36);
}
body.cranky-beta-landing .feature h3,
body.cranky-beta-landing .feature p{text-shadow:0 1px 7px rgba(0,0,0,.35)}

/* ---------- 040B wide desktop: center a naturally sized real card over the hero ----------
   Do not stretch the card to the full auth column. The artwork remains temporary until 040C. */
@media (min-width:1200px) and (min-aspect-ratio:3/2){
  body.cranky-beta-landing .page{
    background-position:center center!important;
  }
  body.cranky-beta-landing .auth{
    top:0;
    right:3.5vw;
    bottom:0;
    height:100vh;
    width:clamp(350px,25.8vw,445px);
    min-width:0;
    max-width:none;
    display:flex;
    align-items:center;
    scrollbar-color:rgba(47,74,42,.28) transparent;
  }
  body.cranky-beta-landing .auth-card{
    min-height:0;
    max-height:88vh;
    overflow:auto;
    padding:27px 30px 24px;
    justify-content:flex-start;
  }
  body.cranky-beta-landing .auth-card::before{
    inset:-9px -7px -8px -9px;
  }
}

/* ---------- Tablet / smaller desktop ---------- */
@media (min-width:861px) and (max-width:1199px){
  body.cranky-beta-landing .page{flex-wrap:nowrap}
  body.cranky-beta-landing .hero{flex:1 1 54%;min-width:0;padding:44px 34px 34px}
  body.cranky-beta-landing .auth{flex:0 0 min(46%,450px);max-width:450px;padding:36px 28px;background:#f6efd9}
  body.cranky-beta-landing .feature-grid{grid-template-columns:repeat(2,1fr);gap:15px}
}

/* ---------- Phone / iPad portrait ---------- */
@media (max-width:860px){
  body.cranky-beta-landing{
    background:#f6efd9;
    overflow-x:hidden;
  }
  body.cranky-beta-landing .page{
    display:block;
    min-height:100vh;
    background:#f6efd9;
  }
  body.cranky-beta-landing .hero{
    min-height:310px;
    height:36vh;
    max-height:430px;
    padding:30px 24px 46px;
    background-position:25% 47%,center,center;
  }
  body.cranky-beta-landing .hero-watermark{opacity:.045}
  body.cranky-beta-landing .brand-row{gap:13px}
  body.cranky-beta-landing .brand-mark{width:52px;height:52px}
  body.cranky-beta-landing .brand-text h1{font-size:clamp(29px,8vw,40px)}
  body.cranky-beta-landing .brand-text p{font-size:11px;letter-spacing:1.9px}
  body.cranky-beta-landing .status-pill{margin-top:18px;padding:7px 13px;font-size:12px}
  body.cranky-beta-landing .hero-tagline{font-size:14px;line-height:1.45;max-width:400px;margin-top:14px}
  body.cranky-beta-landing .feature-grid{display:none}
  body.cranky-beta-landing .auth{
    position:relative;
    z-index:5;
    max-width:none;
    margin-top:-30px;
    padding:0 18px 34px;
    background:transparent;
  }
  body.cranky-beta-landing .auth-card{
    width:min(100%,520px);
    max-width:520px;
    margin:0 auto;
    padding:27px 24px 24px;
  }
}

@media (max-width:430px){
  body.cranky-beta-landing .hero{height:32vh;min-height:275px;padding:25px 18px 42px;background-position:23% center,center,center}
  body.cranky-beta-landing .hero-tagline{max-width:315px}
  body.cranky-beta-landing .auth{padding-left:12px;padding-right:12px}
  body.cranky-beta-landing .auth-card{padding:24px 18px 22px;border-radius:25px 23px 28px 24px}
  body.cranky-beta-landing .auth-card::before{inset:-7px -5px -7px -6px;border-radius:31px 25px 33px 28px}
  body.cranky-beta-landing .auth-card h2{font-size:27px}
  body.cranky-beta-landing .cranky-login-switch .btn{font-size:12.8px;padding-inline:5px}
}

/* ---------- Recovery / account lifecycle ---------- */
body.cranky-auth-lifecycle{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:34px clamp(24px,7vw,120px);
  color:var(--ink);
  background:
    linear-gradient(90deg,rgba(24,43,22,.25),rgba(24,43,22,.08) 48%,rgba(24,43,22,.24)),
    url('/assets/images/hero-040c7-day-desktop.webp') center center / cover no-repeat fixed,
    var(--forest-deep);
}
.cranky-lifecycle-card{
  width:min(100%,480px);
  border-radius:31px 27px 35px 30px;
  padding:30px 30px 28px;
}
.cranky-lifecycle-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
  color:var(--forest);
  font:800 25px 'Baloo 2',sans-serif;
}
.cranky-lifecycle-brand img{width:52px;height:52px;filter:drop-shadow(0 4px 7px rgba(47,74,42,.15))}
.cranky-lifecycle-kicker{
  width:max-content;
  max-width:100%;
  margin:0 auto 10px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(47,74,42,.09);
  color:var(--forest);
  font-size:11px;
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
}
.cranky-lifecycle-card h1{
  font:800 30px/1.05 'Baloo 2',sans-serif;
  color:var(--forest);
  text-align:center;
  margin:0 0 9px;
}
.cranky-lifecycle-card .lead{
  text-align:center;
  color:var(--auth-muted);
  line-height:1.55;
  margin:0 0 24px;
}
.cranky-auth-notice{
  border-radius:13px;
  padding:12px 14px;
  margin:0 0 17px;
  line-height:1.5;
  font-weight:700;
}
.cranky-auth-notice.success{background:#e8f2e5;color:#274925}
.cranky-auth-notice.error{background:#fbe8e5;color:#7a2923}
.cranky-auth-back{
  display:block;
  text-align:center;
  margin-top:16px;
  color:var(--clay);
  font-weight:700;
  text-decoration:none;
}
.cranky-auth-back:hover{text-decoration:underline}
.cranky-auth-tiny{
  text-align:center;
  color:var(--auth-muted);
  font-size:12px;
  line-height:1.5;
  margin-top:16px;
}
.cranky-btn-link{display:block;text-align:center;text-decoration:none}
.cranky-secondary-gap{margin-top:10px}
.cranky-parent-confirm{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:4px 0 18px;
  font-size:13px;
  line-height:1.5;
  color:var(--auth-muted);
  cursor:pointer;
}
.cranky-parent-confirm input{margin-top:3px}
.cranky-result-card{text-align:center}
.cranky-result-status{font-size:30px;margin:3px 0 5px}

@media (max-width:700px){
  body.cranky-auth-lifecycle{
    align-items:flex-end;
    justify-content:center;
    padding:120px 14px 22px;
    background-position:29% center,29% center,center;
  }
  .cranky-lifecycle-card{padding:27px 21px 24px}
}

/* ---------- Shared-device child chooser ---------- */
body.cranky-who-playing{
  min-height:100vh;
  margin:0;
  padding:32px 18px;
  background:
    linear-gradient(rgba(30,51,28,.68),rgba(30,51,28,.76)),
    url('/assets/images/hero-040c7-day-desktop.webp') 28% center / cover fixed no-repeat,
    var(--forest-deep);
}
body.cranky-who-playing .whoShell{
  position:relative;
  isolation:isolate;
  max-width:960px;
  margin:0 auto;
  padding:28px 28px 34px;
  background:rgba(246,239,217,.985);
  border:1px solid rgba(70,88,52,.32);
  border-radius:31px 27px 35px 30px;
  box-shadow:0 0 0 5px rgba(246,239,217,.72),0 0 0 7px rgba(227,167,59,.18),0 28px 80px rgba(18,34,17,.36);
}
body.cranky-who-playing .whoLogo{width:68px;height:68px;filter:drop-shadow(0 5px 8px rgba(47,74,42,.16))}
body.cranky-who-playing .whoShell h1{font-size:clamp(32px,5vw,46px)}
body.cranky-who-playing .whoShell>p{max-width:620px;margin:.35rem auto 0;line-height:1.55}
body.cranky-who-playing .whoGrid{margin-top:27px}
body.cranky-who-playing .whoCard{
  border-color:#d8caa5;
  box-shadow:0 8px 22px rgba(47,74,42,.07);
  background:rgba(255,255,255,.82);
}
body.cranky-who-playing .whoCard button{min-height:44px}
body.cranky-who-playing .whoActions{margin-top:6px}

@media (max-width:520px){
  body.cranky-who-playing{padding:16px 10px;background-position:23% center,23% center,center}
  body.cranky-who-playing .whoShell{padding:23px 14px 28px;border-radius:25px}
}

@media (prefers-reduced-motion:reduce){
  body.cranky-beta-landing .cranky-login-switch .btn{transition:none}
}


/* ---------- 040C — Responsive Hero Art System ----------
   Production rule: scenic assets contain no auth/mock UI and no mutable beta/launch copy.
   All sign-in controls, Family Beta messaging, value statements, and brand UI remain live HTML. */
:root{
  --hero-040c-phone:url('/assets/images/hero-040c-phone-portrait.webp');
  --hero-040c-phone-landscape:url('/assets/images/hero-040c-phone-landscape.webp');
  --hero-040c-tablet-portrait:url('/assets/images/hero-040c-tablet-portrait.webp');
  --hero-040c-tablet-landscape:url('/assets/images/hero-040c-tablet-landscape.webp');
  --hero-040c-desktop:url('/assets/images/hero-040c-desktop.webp');
  --hero-040c-wide:url('/assets/images/hero-040c-wide.webp');
  --shell-crest-040c:url('/assets/images/turtle-shell-crest-040c.png');
  --leaf-accent-040c:url('/assets/images/leaf-accent-040c.svg');
}

body.cranky-beta-landing .hero-watermark{display:none!important}
body.cranky-beta-landing .brand-shell-crest{object-fit:contain}
body.cranky-beta-landing .brand-mark.brand-shell-crest{
  width:82px;height:82px;filter:drop-shadow(0 7px 12px rgba(17,39,18,.28));
}

/* The major login moment uses the shell crest; the seven-hex system mark remains the compact favicon/system mark. */
body.cranky-beta-landing .auth-card{
  overflow:visible;
  margin-top:56px;
  padding-top:64px;
}
body.cranky-beta-landing .auth-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;top:-66px;
  width:154px;height:92px;
  transform:translateX(-50%);
  border:1px solid var(--auth-edge);
  border-bottom:0;
  border-radius:90px 90px 18px 18px;
  background:linear-gradient(180deg,rgba(255,250,240,.998),rgba(246,239,217,.99));
  box-shadow:0 -5px 0 5px rgba(246,239,217,.72),0 -7px 0 7px rgba(227,167,59,.18);
}
body.cranky-beta-landing .auth-badge.brand-flower{
  position:absolute;
  z-index:4;
  top:-72px;left:50%;
  width:126px;height:126px;
  margin:0;
  transform:translateX(-50%);
  filter:drop-shadow(0 7px 13px rgba(35,58,31,.23));
}
body.cranky-beta-landing .auth-card h2{margin-top:0}

/* The principal submit action is sanctuary green with the same leaf vocabulary as the hero art. */
body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
  color:#fffaf0!important;
  background-color:#315d20!important;
  background-image:var(--leaf-accent-040c),var(--leaf-accent-040c),linear-gradient(180deg,#527a24,#244f16)!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:14px center,calc(100% - 14px) center,center!important;
  background-size:20px 20px,20px 20px,100% 100%!important;
  border-color:#284d1a!important;
  box-shadow:0 3px 0 #183b10,0 8px 20px rgba(25,61,16,.22)!important;
}

/* Live HTML hero presentation. Nothing important is trapped in raster art. */
body.cranky-beta-landing .status-pill{
  color:#fff6d8;
  background:linear-gradient(180deg,rgba(68,108,37,.95),rgba(41,77,27,.96));
  border:1px solid rgba(243,194,94,.78);
  box-shadow:0 4px 16px rgba(15,38,19,.26);
}
body.cranky-beta-landing .status-pill .dot{background:#f3c25e}
body.cranky-beta-landing .brand-text h1{color:#f3c25e}

/* Wide desktop: full-bleed scenic art with fixed 040B card footprint in the reserved right safe zone. */
@media (min-width:1600px){
  body.cranky-beta-landing .page{
    background:#1e331c var(--hero-040c-wide) center center / cover no-repeat!important;
  }
  body.cranky-beta-landing .hero{background:none!important;display:block!important}
  body.cranky-beta-landing .hero-content{
    display:block!important;position:absolute;z-index:2;top:4.8vh;left:39%;transform:translateX(-50%);
    width:min(54vw,760px);text-align:center;
  }
  body.cranky-beta-landing .brand-row{justify-content:center}
  body.cranky-beta-landing .brand-text h1{font-size:clamp(46px,4.2vw,72px)}
  body.cranky-beta-landing .brand-text p{color:#f6efd9;font-size:14px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
  body.cranky-beta-landing .hero-tagline{margin:15px auto 0;max-width:620px;color:#fff7df;font-weight:650}
  body.cranky-beta-landing .feature-grid{
    display:grid!important;position:absolute;z-index:2;left:2.6vw;right:31vw;bottom:2.6vh;margin:0;
    grid-template-columns:repeat(4,1fr);gap:0;padding:13px 18px;
    border-top:1px solid rgba(243,194,94,.38);border-bottom:1px solid rgba(243,194,94,.28);
    background:linear-gradient(90deg,rgba(19,51,27,.78),rgba(27,70,34,.68));
    backdrop-filter:blur(3px);
  }
  body.cranky-beta-landing .feature{padding:0 15px;border-right:1px solid rgba(243,194,94,.32)}
  body.cranky-beta-landing .feature:last-child{border-right:0}
  body.cranky-beta-landing .feature h3{font-size:14px;color:#fff4d2}
  body.cranky-beta-landing .feature p{color:#f4e8c7}
}

/* Laptop / desktop: same overlay architecture, a tighter desktop crop. */
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing{overflow:hidden;background:#1e331c}
  body.cranky-beta-landing .page{position:relative;display:block;min-height:100vh;background:#1e331c var(--hero-040c-desktop) center / cover no-repeat!important}
  body.cranky-beta-landing .hero{position:absolute;inset:0;padding:0;background:none!important;display:block!important}
  body.cranky-beta-landing .hero-content{display:block!important;position:absolute;top:4vh;left:4vw;width:48vw;z-index:2}
  /* 040C6 R2 fix: same full-width rail treatment as the 1600px+ breakpoint just above,
     for consistency across both desktop QA sizes against the same reference pair. */
  body.cranky-beta-landing .feature-grid{display:grid!important;position:absolute;left:3vw;right:3vw;bottom:3vh;margin:0;grid-template-columns:repeat(4,1fr);gap:12px;z-index:2}
  body.cranky-beta-landing .auth{position:absolute;z-index:5;top:0;right:3vw;bottom:0;height:100vh;width:clamp(350px,28vw,430px);max-width:none;padding:0;background:transparent;display:flex;align-items:center}
  /* 040C6 fix: this was the one breakpoint still clipping the crest/arch overhang (both
     positioned with negative top offsets relative to .auth-card, per the 040C rule earlier
     in this file). The unconditional 040C rule already sets overflow:visible globally, and
     that's what's actually in effect one breakpoint over on wide desktop (1600px+) — this
     block's own later, breakpoint-scoped overflow:auto was clipping the card back to a
     hard-edged box just for 1280-1599px. Matching the already-correct wide-desktop treatment
     here removes the clip without touching the crest asset or its position. */
  body.cranky-beta-landing .auth-card{width:100%;max-width:none;max-height:86vh;overflow:visible}
}

/* Tablet landscape: compact split with dedicated landscape scenery. */
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  body.cranky-beta-landing .page{display:flex;min-height:100vh;background:#f6efd9}
  body.cranky-beta-landing .hero{flex:1 1 60%;min-width:0;min-height:100vh;padding:38px 30px;background-image:var(--hero-040c-tablet-landscape),linear-gradient(160deg,rgba(30,51,28,.18),rgba(30,51,28,.3))!important;background-size:cover!important;background-position:center!important}
  body.cranky-beta-landing .auth{position:relative;flex:0 0 40%;max-width:470px;margin:0;padding:34px 24px;background:#f6efd9;align-items:center}
  body.cranky-beta-landing .hero-content{display:block!important}
  body.cranky-beta-landing .feature-grid{display:grid!important;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:auto}
  body.cranky-beta-landing .brand-mark.brand-shell-crest{width:68px;height:68px}
  body.cranky-beta-landing .brand-text h1{font-size:36px}
}

/* Tablet portrait: scenic upper half, card overlaps the seam. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .page{display:block;min-height:100vh;background:#f6efd9}
  body.cranky-beta-landing .hero{height:48vh;min-height:455px;max-height:660px;padding:38px 34px 70px;background-image:var(--hero-040c-tablet-portrait),linear-gradient(180deg,rgba(30,51,28,.12),rgba(30,51,28,.35))!important;background-size:cover!important;background-position:center 42%!important}
  body.cranky-beta-landing .hero-content{display:block!important}
  body.cranky-beta-landing .feature-grid{display:none!important}
  body.cranky-beta-landing .auth{position:relative;z-index:5;max-width:none;margin-top:-54px;padding:0 30px 42px;background:transparent}
  body.cranky-beta-landing .auth-card{width:min(100%,540px);max-width:540px;margin:56px auto 0}
}

/* Phone landscape: intentionally its own short-height split state. */
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing{overflow:auto;background:#f6efd9}
  body.cranky-beta-landing .page{display:flex;min-height:100vh;background:#f6efd9}
  body.cranky-beta-landing .hero{flex:1 1 55%;min-width:0;height:100vh;min-height:390px;max-height:none;padding:22px 20px;background-image:var(--hero-040c-phone-landscape),linear-gradient(160deg,rgba(30,51,28,.12),rgba(30,51,28,.3))!important;background-size:cover!important;background-position:center!important}
  body.cranky-beta-landing .hero-content{display:block!important}
  body.cranky-beta-landing .hero-tagline,.cranky-beta-landing .feature-grid{display:none!important}
  body.cranky-beta-landing .brand-mark.brand-shell-crest{width:54px;height:54px}
  body.cranky-beta-landing .brand-text h1{font-size:30px}
  body.cranky-beta-landing .brand-text p{font-size:10px;letter-spacing:1.6px}
  body.cranky-beta-landing .status-pill{margin-top:12px;padding:6px 10px;font-size:11px}
  body.cranky-beta-landing .auth{position:relative;flex:0 0 45%;max-width:440px;margin:0;padding:16px 16px 22px;background:#f6efd9;align-items:center}
  body.cranky-beta-landing .auth-card{width:100%;max-width:400px;margin:48px auto 0;padding:48px 18px 16px;max-height:92vh;overflow:auto}
  body.cranky-beta-landing .auth-badge.brand-flower{width:92px;height:92px;top:-52px}
  body.cranky-beta-landing .auth-card::after{width:118px;height:72px;top:-50px}
  body.cranky-beta-landing .auth-card h2{font-size:23px}
  body.cranky-beta-landing .auth-card > p.sub{margin-bottom:12px}
  body.cranky-beta-landing .field{margin-bottom:10px}
  body.cranky-beta-landing .field input{min-height:42px}
  body.cranky-beta-landing .btn{min-height:42px}
  body.cranky-beta-landing .trust-line{margin-top:10px;padding-top:9px}
}

/* Phone portrait: dedicated portrait scene with a compact overlapping card. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .hero{height:39vh;min-height:320px;max-height:470px;padding:26px 18px 54px;background-image:var(--hero-040c-phone),linear-gradient(180deg,rgba(30,51,28,.08),rgba(30,51,28,.32))!important;background-size:cover!important;background-position:center 38%!important}
  body.cranky-beta-landing .hero-content{display:block!important}
  body.cranky-beta-landing .hero-tagline{display:none}
  body.cranky-beta-landing .feature-grid{display:none!important}
  body.cranky-beta-landing .brand-row{justify-content:center;text-align:left}
  body.cranky-beta-landing .brand-mark.brand-shell-crest{width:58px;height:58px}
  body.cranky-beta-landing .brand-text h1{font-size:32px}
  body.cranky-beta-landing .status-pill{display:flex;width:max-content;max-width:100%;margin:12px auto 0}
  body.cranky-beta-landing .auth{margin-top:-38px;padding:0 12px 34px}
  body.cranky-beta-landing .auth-card{margin-top:50px;padding-top:53px}
  body.cranky-beta-landing .auth-badge.brand-flower{width:98px;height:98px;top:-57px}
  body.cranky-beta-landing .auth-card::after{width:124px;height:76px;top:-55px}
}

/* Small tablet / large phone fallback where orientation may be unavailable during rotation. */
@media (min-width:600px) and (max-width:899px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c-tablet-portrait),linear-gradient(180deg,rgba(30,51,28,.10),rgba(30,51,28,.35))!important}
}

/* ---------- 040C1 — Front Door Visual Correction ----------
   Keep Cranky sharp. Solve readability with live typography/contrast, not raster blur.
   The public front door switches automatically at 06:30 / 19:30 browser-local time. */
:root{
  --hero-040c1-phone:url('/assets/images/hero-040c1-phone-portrait.webp');
  --hero-040c1-phone-landscape:url('/assets/images/hero-040c1-phone-landscape.webp');
  --hero-040c1-tablet-portrait:url('/assets/images/hero-040c1-tablet-portrait.webp');
  --hero-040c1-tablet-landscape:url('/assets/images/hero-040c1-tablet-landscape.webp');
  --hero-040c1-desktop:url('/assets/images/hero-040c1-desktop.webp');
  --hero-040c1-wide:url('/assets/images/hero-040c1-wide.webp');
}

/* Never soften the hero character or scenery to make text readable. */
body.cranky-beta-landing .page,
body.cranky-beta-landing .hero{
  filter:none!important;
}
body.cranky-beta-landing .hero::after{
  background:linear-gradient(90deg,rgba(17,39,18,.08),rgba(17,39,18,.02) 54%,rgba(17,39,18,.12))!important;
}
body.cranky-beta-landing .brand-text h1,
body.cranky-beta-landing .brand-text p,
body.cranky-beta-landing .hero-tagline{
  paint-order:stroke fill;
  -webkit-font-smoothing:antialiased;
}
body.cranky-beta-landing .brand-text h1{
  -webkit-text-stroke:1px rgba(24,48,22,.72);
  text-shadow:0 2px 0 rgba(80,56,26,.62),0 4px 14px rgba(0,0,0,.42)!important;
}
body.cranky-beta-landing .brand-text p{
  color:#fff7df!important;
  -webkit-text-stroke:.7px rgba(22,48,22,.9);
  text-shadow:0 2px 8px rgba(0,0,0,.72)!important;
}
body.cranky-beta-landing .hero-tagline{
  color:#fff8e7!important;
  -webkit-text-stroke:.25px rgba(20,42,20,.72);
  text-shadow:0 2px 10px rgba(0,0,0,.68)!important;
}

/* Premium live-HTML value rail: icon beside the words, no backdrop blur. */
body.cranky-beta-landing .feature-grid{
  border:1px solid rgba(243,194,94,.36)!important;
  border-radius:18px!important;
  background:linear-gradient(90deg,rgba(17,55,28,.96),rgba(28,78,38,.94))!important;
  box-shadow:0 12px 30px rgba(12,35,18,.22),inset 0 1px rgba(255,255,255,.06)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden;
}
body.cranky-beta-landing .feature{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-areas:"icon title" "icon copy";
  align-items:center;
  column-gap:10px;
  row-gap:1px;
  min-height:66px;
  padding:9px 14px!important;
  border-right:1px solid rgba(243,194,94,.25);
}
body.cranky-beta-landing .feature:last-child{border-right:0}
body.cranky-beta-landing .feature-icon{
  grid-area:icon;
  width:38px!important;
  height:38px!important;
  margin:0!important;
  overflow:visible;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.24));
}
body.cranky-beta-landing .feature-icon .icon-disc{stroke:#f3c25e;stroke-width:1.7}
body.cranky-beta-landing .feature-icon .icon-line{fill:none;stroke:#fff2bd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.cranky-beta-landing .feature-shell .icon-disc{fill:#4d782f}
body.cranky-beta-landing .feature-leaf .icon-disc{fill:#6d9b43}
body.cranky-beta-landing .feature-star .icon-disc{fill:#e2a936}
body.cranky-beta-landing .feature-heart .icon-disc{fill:#b84d38}
body.cranky-beta-landing .feature h3{
  grid-area:title;
  margin:0!important;
  color:#fff5d6!important;
  font-size:14px!important;
  line-height:1.15;
  text-shadow:0 1px 4px rgba(0,0,0,.36)!important;
}
body.cranky-beta-landing .feature p{
  grid-area:copy;
  margin:0!important;
  color:#efe4c6!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  text-shadow:0 1px 4px rgba(0,0,0,.3)!important;
}

/* 040C1 crisp art direction. The new rasters are tighter crops of the sharp central sanctuary scene. */
@media (min-width:1600px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c1-wide)!important}
  body.cranky-beta-landing .hero-content{top:4.2vh;left:36%;width:min(56vw,820px)}
  body.cranky-beta-landing .brand-mark.brand-shell-crest{width:88px;height:88px}
  body.cranky-beta-landing .brand-text h1{font-size:clamp(52px,4.4vw,74px)}
  /* 040C6 R2 fix: superseded the earlier centered-within-reserved-zone approach. Jeff's
     call after seeing the final reference pair: the rail runs the full composition width,
     underneath both the hero scenery and the login card — it does not stop short to avoid
     the card's column. The card already carries z-index:5 (from cranky-auth-035r1.css's
     wide-desktop rule, untouched here) against the rail's z-index:2, so it continues to
     render on top of the rail wherever their boxes happen to overlap ("the login card
     floats above the rail") without any z-index change needed. */
  body.cranky-beta-landing .feature-grid{left:2.6vw;right:2.6vw;bottom:2.5vh;width:auto;margin-left:0;margin-right:0;gap:0!important;padding:0!important}
}
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c1-desktop)!important}
  body.cranky-beta-landing .hero-content{top:4vh;left:3.6vw;width:50vw}
  body.cranky-beta-landing .brand-mark.brand-shell-crest{width:78px;height:78px}
  body.cranky-beta-landing .brand-text h1{font-size:clamp(48px,4.6vw,66px)}
  body.cranky-beta-landing .brand-text p{font-size:13px;letter-spacing:2.4px}
  body.cranky-beta-landing .hero-tagline{max-width:560px;font-size:15.5px;font-weight:700}
  body.cranky-beta-landing .feature-grid{left:2.6vw;right:33vw;bottom:2.4vh;gap:0!important;padding:0!important}
}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c1-tablet-landscape)!important}
  body.cranky-beta-landing .feature-grid{gap:0!important;padding:0!important}
  body.cranky-beta-landing .feature{border-bottom:1px solid rgba(243,194,94,.22)}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c1-tablet-portrait)!important}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c1-phone-landscape)!important}
}
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .hero{
    background-image:var(--hero-040c1-phone)!important;
    background-position:center 40%!important;
  }
  body.cranky-beta-landing .brand-row{align-items:center}
  body.cranky-beta-landing .brand-text h1{
    font-size:clamp(31px,8.6vw,38px);
    -webkit-text-stroke:.85px rgba(24,48,22,.78);
  }
  body.cranky-beta-landing .brand-text p{
    display:inline-block;
    margin-top:5px;
    padding:1px 5px 2px;
    border-radius:6px;
    background:rgba(24,48,22,.18);
    -webkit-text-stroke:.65px rgba(17,42,20,.92);
    text-shadow:0 2px 5px rgba(0,0,0,.86)!important;
  }
  body.cranky-beta-landing .status-pill{box-shadow:0 4px 14px rgba(10,30,15,.32)}
}
@media (min-width:600px) and (max-width:899px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c1-tablet-portrait)!important}
}

/* Public front door auto theme. 06:30–19:29 = light; 19:30–06:29 = dark, browser-local time. */
html[data-cranky-public-theme="dark"] body.cranky-beta-landing{
  --auth-card:#17261a;
  --auth-card-strong:#1c2e1f;
  --auth-edge:rgba(243,194,94,.36);
  --auth-frame:rgba(23,38,26,.97);
  --auth-shadow:rgba(0,0,0,.55);
  --auth-muted:#dbcba9;
  color:#f7eed6;
  background:#0f1d12;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card{
  background:linear-gradient(180deg,rgba(28,46,31,.995),rgba(19,34,23,.99));
  box-shadow:0 0 0 5px rgba(22,37,25,.88),0 0 0 7px rgba(227,167,59,.28),0 28px 80px rgba(0,0,0,.56);
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::after{
  background:linear-gradient(180deg,rgba(30,49,33,.998),rgba(20,35,24,.995));
  box-shadow:0 -5px 0 5px rgba(22,37,25,.84),0 -7px 0 7px rgba(227,167,59,.25);
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card h2,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field label,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .trust-line{color:#f4e9c9}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .cranky-login-switch{background:rgba(245,235,205,.08);border-color:rgba(243,194,94,.22)}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .cranky-login-switch .btn-secondary{color:#f4e9c9!important}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .btn-secondary{background:rgba(246,239,217,.08);color:#f4e9c9;border-color:#d3bb78}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .divider{color:#cbb990}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .divider::before,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .divider::after{background:rgba(243,194,94,.22)}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .domain-badge{background:rgba(246,239,217,.09);border-color:rgba(243,194,94,.18);color:#f1e5c5}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .invite-note{color:#d2c09b}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card a{color:#e7c878!important}
@media (max-width:1279px){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{background:#101f13}
}
@media (max-width:860px){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{background:#101f13}
}

/* 040C1 night-shell completion: DARK changes the whole front door, not only the page backdrop. */
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero::after{
  background:linear-gradient(90deg,rgba(7,18,10,.46),rgba(8,22,12,.30) 54%,rgba(5,15,8,.58))!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card .sub{
  color:#d8c9aa!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field input{
  background:rgba(238,232,211,.11)!important;
  color:#fff6dd!important;
  border-color:rgba(224,197,126,.52)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field input::placeholder{
  color:#bfb18f!important;
  opacity:1;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field input:hover{
  border-color:#d8c079!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field input:focus{
  border-color:#e3b84f!important;
  outline:3px solid rgba(227,184,79,.20)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .cranky-login-switch .btn-secondary:hover{
  background:rgba(246,239,217,.10)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .trust-line{
  border-top-color:rgba(243,194,94,.18)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card [style*="background:#e8f2e5"]{
  background:#243b29!important;
  color:#f4e9c9!important;
}

/* ---------- 040C2 — Readability + Public Theme Unification ----------
   QA correction: crisp scenery, no light-mode haze/texture overlay, stronger live text,
   higher-density mobile/tablet art, larger value rail, and mobile value block. */
:root{
  --hero-040c2-phone:url('/assets/images/hero-040c2-phone-portrait.webp');
  --hero-040c2-phone-landscape:url('/assets/images/hero-040c2-phone-landscape.webp');
  --hero-040c2-tablet-portrait:url('/assets/images/hero-040c2-tablet-portrait.webp');
  --hero-040c2-tablet-landscape:url('/assets/images/hero-040c2-tablet-landscape.webp');
  --hero-040c2-desktop:url('/assets/images/hero-040c2-desktop.webp');
  --hero-040c2-wide:url('/assets/images/hero-040c2-wide.webp');
}

/* LIGHT/day hero has no fog, blur, texture, pseudo bokeh, or dimming film. */
html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero::after{
  background:none!important;
  opacity:0!important;
}
body.cranky-beta-landing .hero-watermark{display:none!important}
body.cranky-beta-landing .page,
body.cranky-beta-landing .hero,
body.cranky-beta-landing .hero-mascot{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Readability belongs to the live typography, never to a blurred turtle. */
body.cranky-beta-landing .brand-text h1{
  -webkit-text-stroke:1.35px rgba(19,48,23,.92)!important;
  paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(83,57,22,.68),0 4px 12px rgba(0,0,0,.34)!important;
}
body.cranky-beta-landing .brand-text p{
  -webkit-text-stroke:1.05px rgba(17,43,21,.96)!important;
  paint-order:stroke fill;
  text-shadow:0 2px 5px rgba(0,0,0,.72),0 0 3px rgba(0,0,0,.44)!important;
}
body.cranky-beta-landing .hero-tagline{
  color:#fff9e9!important;
  -webkit-text-stroke:2px rgba(14,39,18,.90)!important;
  paint-order:stroke fill;
  text-shadow:0 2px 4px rgba(0,0,0,.52)!important;
  line-height:1.48!important;
}

/* Correct first value icon: the approved turtle-shell crest, then larger eye-test-friendly rail. */
body.cranky-beta-landing .feature-shell-crest{
  object-fit:contain;
  border-radius:50%;
}
body.cranky-beta-landing .feature{
  grid-template-columns:52px minmax(0,1fr)!important;
  column-gap:12px!important;
  min-height:78px!important;
  padding:11px 15px!important;
}
body.cranky-beta-landing .feature-icon{
  width:47px!important;
  height:47px!important;
}
body.cranky-beta-landing .feature h3{
  font-size:16px!important;
  line-height:1.15!important;
}
body.cranky-beta-landing .feature p{
  font-size:13px!important;
  line-height:1.34!important;
}

/* Leaf flourishes should read as intentional accents, not tiny specks. */
body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
  background-position:15px center,calc(100% - 15px) center,center!important;
  background-size:31px 31px,31px 31px,100% 100%!important;
}

/* Higher-density QA art. Desktop intentionally uses the better-framed wide scene so the cabin stays visible. */
@media (min-width:1600px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c2-wide)!important;background-position:center center!important}
}
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c2-desktop)!important;background-position:center center!important}
  body.cranky-beta-landing .hero-content{top:4vh;left:3.8vw;width:51vw}
  body.cranky-beta-landing .hero-tagline{max-width:600px;font-size:16px!important}
}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c2-tablet-landscape)!important;background-position:center center!important}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c2-tablet-portrait)!important;background-position:center 42%!important}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c2-phone-landscape)!important;background-position:center center!important}
}
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .hero{
    background-image:var(--hero-040c2-phone)!important;
    background-position:center 39%!important;
  }
  body.cranky-beta-landing .brand-text h1{
    -webkit-text-stroke:1.2px rgba(19,48,23,.95)!important;
    text-shadow:0 2px 0 rgba(78,54,24,.58),0 3px 8px rgba(0,0,0,.44)!important;
  }
  body.cranky-beta-landing .brand-text p{
    padding:1px 6px 2px!important;
    background:rgba(22,49,24,.10)!important;
    -webkit-text-stroke:1px rgba(13,37,18,.98)!important;
    text-shadow:0 2px 5px rgba(0,0,0,.80)!important;
  }
  body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
    background-position:18px center,calc(100% - 18px) center,center!important;
    background-size:36px 36px,36px 36px,100% 100%!important;
  }
}
@media (min-width:600px) and (max-width:899px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c2-tablet-portrait)!important}
}

/* Mobile receives the same four product promises instead of losing the safety/value story. */
body.cranky-beta-landing .mobile-values{display:none}
@media (max-width:899px){
  body.cranky-beta-landing .auth{height:auto!important;min-height:0!important;padding-bottom:28px!important}
  body.cranky-beta-landing .mobile-values{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:min(100%,620px);
    margin:18px auto 0;
    padding:0 2px 4px;
  }
  body.cranky-beta-landing .mobile-value{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:94px;
    padding:12px 11px;
    border:1px solid rgba(47,74,42,.20);
    border-radius:16px;
    background:rgba(255,250,240,.90);
    box-shadow:0 5px 16px rgba(31,55,30,.08);
  }
  body.cranky-beta-landing .mobile-value-icon{
    width:44px;height:44px;display:block;overflow:visible;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.16));
  }
  body.cranky-beta-landing .mobile-value-icon .icon-disc{stroke:#d59f34;stroke-width:1.7}
  body.cranky-beta-landing .mobile-value-icon .icon-line{fill:none;stroke:#fff2bd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  body.cranky-beta-landing .mobile-value.feature-leaf .icon-disc{fill:#6d9b43}
  body.cranky-beta-landing .mobile-value.feature-star .icon-disc{fill:#e2a936}
  body.cranky-beta-landing .mobile-value.feature-heart .icon-disc{fill:#c8543d}
  body.cranky-beta-landing .mobile-shell-crest{object-fit:contain}
  body.cranky-beta-landing .mobile-value h3{margin:0 0 2px;color:#294c29;font-size:14px;line-height:1.15}
  body.cranky-beta-landing .mobile-value p{margin:0;color:#6d5841;font-size:11.5px;font-weight:600;line-height:1.3}
}
@media (max-width:350px){
  body.cranky-beta-landing .mobile-values{grid-template-columns:1fr;gap:8px}
  body.cranky-beta-landing .mobile-value{min-height:78px;grid-template-columns:44px minmax(0,1fr)}
}

/* DARK/night updates the mobile promise cards along with the login shell. */
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value{
  background:rgba(29,47,32,.96);
  border-color:rgba(227,184,79,.25);
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value h3{color:#f5e9c8}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value p{color:#d7c7a8}


/* ---------- 040C3 — Crisp Hero + Brand Lock + Mobile Composition ----------
   Visual-only refinement on certified 040C2. No auth behavior changes.
   Brand lock: official shell-with-leaves everywhere; shell-only favicon.
   Mobile: no four-value column; card uses ~96vw and begins below Cranky's name plate.
*/
:root{
  --hero-040c3-phone:url('/assets/images/hero-040c3-phone-portrait.webp');
  --hero-040c3-phone-landscape:url('/assets/images/hero-040c3-phone-landscape.webp');
  --hero-040c3-tablet-portrait:url('/assets/images/hero-040c3-tablet-portrait.webp');
  --hero-040c3-tablet-landscape:url('/assets/images/hero-040c3-tablet-landscape.webp');
  --hero-040c3-desktop:url('/assets/images/hero-040c3-desktop.webp');
  --hero-040c3-wide:url('/assets/images/hero-040c3-wide.webp');
  --leaf-accent-040c:url('/assets/images/leaf-accent-040c.svg');
}

/* Never soften the character or scenery with CSS. */
body.cranky-beta-landing .page,
body.cranky-beta-landing .hero,
body.cranky-beta-landing .hero-mascot{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero::after{
  display:none!important;
  background:none!important;
  opacity:0!important;
}
body.cranky-beta-landing .hero-watermark{display:none!important}

/* Match BOX TURTLE SANCTUARY to the approved 2px live-copy outline. */
body.cranky-beta-landing .brand-text p{
  color:#fff9e9!important;
  -webkit-text-stroke:2px rgba(14,39,18,.90)!important;
  paint-order:stroke fill;
  text-shadow:0 2px 4px rgba(0,0,0,.48)!important;
}
body.cranky-beta-landing .hero-tagline{
  -webkit-text-stroke:2px rgba(14,39,18,.90)!important;
  paint-order:stroke fill;
}

/* Uniform premium value-rail iconography and exact separator alignment. */
body.cranky-beta-landing .feature-grid{
  grid-auto-rows:1fr!important;
}
body.cranky-beta-landing .feature{
  position:relative;
  border-right:0!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  min-height:80px!important;
  padding:11px 15px!important;
}
body.cranky-beta-landing .feature + .feature::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:1px;
  background:rgba(243,194,94,.34);
}
body.cranky-beta-landing .feature-icon{
  width:50px!important;
  height:50px!important;
  object-fit:contain;
}
body.cranky-beta-landing .feature h3{font-size:16.5px!important}
body.cranky-beta-landing .feature p{font-size:13.25px!important}

/* Larger, matching leaf flourishes on the green submit actions. */
body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
  background-image:var(--leaf-accent-040c),var(--leaf-accent-040c),linear-gradient(180deg,#527a24,#244f16)!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:15px center,calc(100% - 15px) center,center!important;
  background-size:34px 34px,34px 34px,100% 100%!important;
}

/* C3 higher-quality hero files. */
@media (min-width:1600px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c3-wide)!important;background-position:center center!important}
}
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .page{background-image:var(--hero-040c3-desktop)!important;background-position:center center!important}
}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c3-tablet-landscape)!important;background-position:center center!important}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c3-tablet-portrait)!important;background-position:center top!important}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing .hero{background-image:var(--hero-040c3-phone-landscape)!important;background-position:center center!important}
}

/* Phone portrait: show the full-height portrait art so CRANKY's physical name plate survives.
   Then start the real HTML card below it. Keep only ~2vw of page margin on each side. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .page{background:#f6efd9!important}
  body.cranky-beta-landing .hero{
    width:100%!important;
    height:clamp(460px,133.333vw,600px)!important;
    min-height:460px!important;
    max-height:600px!important;
    padding:24px 4vw 18px!important;
    background-image:var(--hero-040c3-phone)!important;
    background-size:100% auto!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
  }
  body.cranky-beta-landing .hero-content{z-index:4!important}
  body.cranky-beta-landing .hero-tagline{display:none!important}
  body.cranky-beta-landing .feature-grid{display:none!important}
  body.cranky-beta-landing .auth{
    margin-top:0!important;
    padding:0 2vw 30px!important;
    width:100%!important;
    max-width:none!important;
  }
  body.cranky-beta-landing .auth-card{
    width:96vw!important;
    max-width:96vw!important;
    margin:0 auto!important;
    padding-left:clamp(18px,5vw,28px)!important;
    padding-right:clamp(18px,5vw,28px)!important;
  }
  body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
    background-position:17px center,calc(100% - 17px) center,center!important;
    background-size:38px 38px,38px 38px,100% 100%!important;
  }
}

/* C2 experimented with a mobile four-value story; C3 deliberately removes it. */
body.cranky-beta-landing .mobile-values{display:none!important}

/* ---------- 040C4 — Locked Day/Night Reference Build ----------
   Hard-reference correction on verified 040C3.
   DAY reuses the exact C3 scene pixels. NIGHT is deterministic relighting of those same
   pixels, so cabin/pond/rocks/fence/trees/Cranky geometry cannot drift between modes.
   Canonical crest is the approved turtle-shell-crest-040c.png file; favicon is shell-only.
*/
:root{
  --hero-040c4-day-phone:url('/assets/images/hero-040c4-day-phone-portrait.webp');
  --hero-040c4-day-phone-landscape:url('/assets/images/hero-040c4-day-phone-landscape.webp');
  --hero-040c4-day-tablet-portrait:url('/assets/images/hero-040c4-day-tablet-portrait.webp');
  --hero-040c4-day-tablet-landscape:url('/assets/images/hero-040c4-day-tablet-landscape.webp');
  --hero-040c4-day-desktop:url('/assets/images/hero-040c4-day-desktop.webp');
  --hero-040c4-day-wide:url('/assets/images/hero-040c4-day-wide.webp');
  --hero-040c4-night-phone:url('/assets/images/hero-040c4-night-phone-portrait.webp');
  --hero-040c4-night-phone-landscape:url('/assets/images/hero-040c4-night-phone-landscape.webp');
  --hero-040c4-night-tablet-portrait:url('/assets/images/hero-040c4-night-tablet-portrait.webp');
  --hero-040c4-night-tablet-landscape:url('/assets/images/hero-040c4-night-tablet-landscape.webp');
  --hero-040c4-night-desktop:url('/assets/images/hero-040c4-night-desktop.webp');
  --hero-040c4-night-wide:url('/assets/images/hero-040c4-night-wide.webp');
}

/* No top haze, blur, bokeh, watermark, or pseudo-film in either mode. */
body.cranky-beta-landing .hero::after,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero::after{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
body.cranky-beta-landing .hero-watermark{display:none!important}
body.cranky-beta-landing .page,
body.cranky-beta-landing .hero,
body.cranky-beta-landing .hero-mascot{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Exact day pixels from the verified C3 scene. */
@media (min-width:1600px){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{background-image:var(--hero-040c4-day-wide)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{background-image:var(--hero-040c4-night-wide)!important}
}
@media (min-width:1280px) and (max-width:1599px){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{background-image:var(--hero-040c4-day-desktop)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{background-image:var(--hero-040c4-night-desktop)!important}
}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c4-day-tablet-landscape)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c4-night-tablet-landscape)!important}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c4-day-tablet-portrait)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c4-night-tablet-portrait)!important}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c4-day-phone-landscape)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c4-night-phone-landscape)!important}
}
@media (max-width:599px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c4-day-phone)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c4-night-phone)!important}
}

/* NIGHT is a complete front-door theme. No bright sand strip between night scenery and card. */
html[data-cranky-public-theme="dark"] body.cranky-beta-landing,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
  background:#0b2117!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card{
  background:linear-gradient(180deg,#173325 0%,#10281c 100%)!important;
  border-color:rgba(223,191,113,.38)!important;
  color:#f6ebcf!important;
  box-shadow:0 0 0 5px rgba(12,31,21,.88),0 0 0 7px rgba(213,171,72,.20),0 24px 62px rgba(0,0,0,.48)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
  border-color:rgba(205,177,104,.28)!important;
  filter:none!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card h2,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card .sub,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field label,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .trust-line{
  color:#f6ebcf!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .field input{
  background:#10271c!important;
  color:#fff6df!important;
  border-color:rgba(210,184,115,.46)!important;
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .btn-secondary{
  background:#112a1e!important;
  color:#f4e8c9!important;
  border-color:rgba(210,184,115,.55)!important;
}

/* Phone keeps the approved wide card / visible hero stack and adds only the compact four-value rail.
   This is deliberately a horizontal rail, never the rejected tall mobile column/cards. */
.mobile-value-rail{display:none}
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .hero{
    height:clamp(460px,133.333vw,600px)!important;
    min-height:460px!important;
    max-height:600px!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  body.cranky-beta-landing .auth{padding:0 2vw 0!important;margin-top:0!important}
  body.cranky-beta-landing .auth-card{width:96vw!important;max-width:96vw!important;margin:0 auto!important}
  body.cranky-beta-landing .mobile-value-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:96vw;
    margin:10px auto 18px;
    padding:8px 4px 9px;
    background:#123f29;
    border:1px solid rgba(227,184,79,.28);
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
  }
  body.cranky-beta-landing .mobile-value-rail-item{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    padding:2px 3px;
    text-align:center;
    color:#fff4d4;
    font:700 clamp(8.5px,2.45vw,10.5px)/1.12 Quicksand,sans-serif;
    border-left:1px solid rgba(227,184,79,.25);
  }
  body.cranky-beta-landing .mobile-value-rail-item:first-child{border-left:0}
  body.cranky-beta-landing .mobile-value-rail-item img{width:34px;height:34px;object-fit:contain;display:block}
  body.cranky-beta-landing .mobile-value-rail-item:first-child img{width:38px;height:38px;margin-top:-2px}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail{
    background:#0b301f;
    border-color:rgba(227,184,79,.32);
  }
}

/* ---------- 040C7 — Approved Scenery + Live UI Integration ----------
   Visual-only correction over verified 040C4.
   The DAY/NIGHT hero-040c7-*.webp files below are the user-approved scenery-only compositions.
   They contain no raster game title, crest, beta pill, login card, beta info panel, or value rail.
   Live HTML/CSS owns those layers so text stays sharp and responsive.
*/
:root{
  --hero-040c7-day-phone:url('/assets/images/hero-040c7-day-phone-portrait.webp');
  --hero-040c7-day-phone-landscape:url('/assets/images/hero-040c7-day-phone-landscape.webp?v=040c7r5r12');
  --hero-040c7-day-tablet-portrait:url('/assets/images/hero-040c7-day-tablet-portrait.webp');
  --hero-040c7-day-tablet-landscape:url('/assets/images/hero-040c7-day-tablet-landscape.webp');
  --hero-040c7-day-desktop:url('/assets/images/hero-040c7-day-desktop.webp');
  --hero-040c7-day-wide:url('/assets/images/hero-040c7-day-wide.webp');
  --hero-040c7-night-phone:url('/assets/images/hero-040c7-night-phone-portrait.webp');
  --hero-040c7-night-phone-landscape:url('/assets/images/hero-040c7-night-phone-landscape.webp');
  --hero-040c7-night-tablet-portrait:url('/assets/images/hero-040c7-night-tablet-portrait.webp');
  --hero-040c7-night-tablet-landscape:url('/assets/images/hero-040c7-night-tablet-landscape.webp');
  --hero-040c7-night-desktop:url('/assets/images/hero-040c7-night-desktop.webp');
  --hero-040c7-night-wide:url('/assets/images/hero-040c7-night-wide.webp');
}

/* 040C6: the C5 "suppress duplicate live copy" block that lived here has been removed.
   It assumed the raster hero references were regenerated clean of baked UI/text before this
   shipped — they were not, so this was rendering the raster's baked crest/wordmark/pill/tagline
   as the only visible copy while the equivalent live elements sat display:none underneath.
   That is the double-crest and collided-text bug in Section 6.A/6.B of the handoff.
   Removing this block restores the 040C1-C4 live-HTML brand-row/status-pill/hero-tagline
   cascade (crisp text, stroke/shadow readability treatment, per-breakpoint sizing already
   defined earlier in this file) as the actual visible content again.
   040C7 satisfies that dependency with the approved scenery-only DAY/NIGHT art.
*/

/* Replace only the hero references. Keep the verified C4 card, theme, favicon, rail, and auth behavior. */
@media (min-width:1600px){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{background-image:var(--hero-040c7-day-wide)!important;background-position:center center!important;background-size:cover!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{background-image:var(--hero-040c7-night-wide)!important;background-position:center center!important;background-size:cover!important}
}
@media (min-width:1280px) and (max-width:1599px){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{background-image:var(--hero-040c7-day-desktop)!important;background-position:center center!important;background-size:cover!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{background-image:var(--hero-040c7-night-desktop)!important;background-position:center center!important;background-size:cover!important}
}
@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c7-day-tablet-landscape)!important;background-position:center center!important;background-size:cover!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c7-night-tablet-landscape)!important;background-position:center center!important;background-size:cover!important}
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c7-day-tablet-portrait)!important;background-position:center top!important;background-size:cover!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c7-night-tablet-portrait)!important;background-position:center top!important;background-size:cover!important}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c7-day-phone-landscape)!important;background-position:center center!important;background-size:cover!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c7-night-phone-landscape)!important;background-position:center center!important;background-size:cover!important}
}
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .page{background:#f6efd9!important}
  body.cranky-beta-landing .hero{
    width:100%!important;
    height:clamp(305px,79vw,390px)!important;
    min-height:305px!important;
    max-height:390px!important;
    padding:0!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{background-image:var(--hero-040c7-day-phone)!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{background-image:var(--hero-040c7-night-phone)!important}
  /* 040C6 fix: .auth has been a row-direction flex container since the base cranky-theme.css
     rule (display:flex, no flex-direction ever set on .auth itself). That was invisible while
     .auth-card was its only child. 040C4 added .mobile-value-rail as a second child at this
     exact breakpoint, which the row default laid out beside the card instead of below it —
     this is the side-by-side regression from Section 9 of the handoff. */
  body.cranky-beta-landing .auth{margin-top:0!important;padding:0 2vw 0!important;flex-direction:column!important}
  body.cranky-beta-landing .auth-card{width:96vw!important;max-width:96vw!important;margin:0 auto!important}
}

/* Keep C4's no-haze/no-blur and dark-mode transition guarantees absolute. */
body.cranky-beta-landing .hero::after,
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero::after{display:none!important;content:none!important;background:none!important;opacity:0!important}
body.cranky-beta-landing .hero-watermark{display:none!important}
body.cranky-beta-landing .page,
body.cranky-beta-landing .hero,
body.cranky-beta-landing .hero-mascot{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ---------- 040C6 R2 — Live Beta Info Panel ----------
   Replaces the raster "Public launch coming soon / Early family access / Built with care"
   panel with a real DOM component using Jeff's current beta-state copy. Boxed treatment
   (not bare text on scenery) to match the reference pair: cream box + dark text in DAY,
   dark-forest box + cream text in NIGHT — same color language .auth-card and .feature-grid
   already use, reusing the same --forest/--clay (day) and #f6ebcf/#d8c9aa/#e3b84f (night)
   values already established elsewhere in this file rather than inventing a new palette. */
body.cranky-beta-landing .beta-info-panel{
  display:grid;
  gap:9px;
  margin-top:20px;
  padding:14px 18px;
  max-width:460px;
  background:rgba(255,250,240,.95);
  border:1.5px solid rgba(227,167,59,.45);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(20,40,20,.16);
  text-align:left;
}
body.cranky-beta-landing .beta-info-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
}
body.cranky-beta-landing .beta-info-icon{
  width:20px;height:20px;flex:none;margin-top:2px;
  color:var(--forest);
}
body.cranky-beta-landing .beta-info-text{display:flex;flex-direction:column;gap:1px;min-width:0}
body.cranky-beta-landing .beta-info-text strong{font-size:14px;line-height:1.25;color:var(--forest);font-weight:800}
body.cranky-beta-landing .beta-info-text span{font-size:12.5px;line-height:1.4;color:var(--clay);font-weight:600}

html[data-cranky-public-theme="dark"] body.cranky-beta-landing .beta-info-panel{
  background:rgba(11,33,23,.94);
  border-color:rgba(223,191,113,.4);
  box-shadow:0 8px 20px rgba(0,0,0,.34);
}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .beta-info-icon{color:#e3b84f}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .beta-info-text strong{color:#f6ebcf}
html[data-cranky-public-theme="dark"] body.cranky-beta-landing .beta-info-text span{color:#d8c9aa}

/* Visible at desktop and tablet-landscape, where .hero-content has room and stays in view.
   Hidden at the same breakpoints that already hide .hero-tagline/.feature-grid for space
   (tablet-portrait, phone landscape, phone portrait) — .mobile-value-rail already carries
   the compact summary there. Flagged in the cover note: say the word if this should show
   in condensed form at those sizes instead of hiding outright. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .beta-info-panel{display:none}
}
@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing .beta-info-panel{display:none}
}
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .beta-info-panel{display:none}
}



/* ---------- 040C7 — Final integration locks ----------
   User-approved scenery is now clean art; all branding/login/beta/value UI remains live DOM/CSS.
   Desktop descriptive copy remains visible. Phone landscape receives the same exact four-value
   compact rail as phone portrait, spanning the composition bottom. */
@media (min-width:1280px){
  body.cranky-beta-landing .feature p{display:block!important}
}

@media (min-width:600px) and (max-width:899px) and (orientation:landscape){
  body.cranky-beta-landing .auth{flex-direction:column!important;padding-bottom:68px!important}
  body.cranky-beta-landing .auth-card{max-height:calc(100vh - 82px)!important;overflow:auto!important}
  body.cranky-beta-landing .mobile-value-rail{
    display:grid!important;
    position:fixed!important;
    left:2vw!important;
    right:2vw!important;
    bottom:6px!important;
    width:auto!important;
    margin:0!important;
    padding:5px 4px 6px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    background:#123f29!important;
    border:1px solid rgba(227,184,79,.30)!important;
    border-radius:15px!important;
    box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
    z-index:9!important;
  }
  body.cranky-beta-landing .mobile-value-rail-item{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    padding:1px 3px!important;
    text-align:center!important;
    color:#fff4d4!important;
    font:700 clamp(8px,1.25vw,10px)/1.08 Quicksand,sans-serif!important;
    border-left:1px solid rgba(227,184,79,.25)!important;
  }
  body.cranky-beta-landing .mobile-value-rail-item:first-child{border-left:0!important}
  body.cranky-beta-landing .mobile-value-rail-item img{width:27px!important;height:27px!important;object-fit:contain!important;display:block!important}
  body.cranky-beta-landing .mobile-value-rail-item:first-child img{width:31px!important;height:31px!important}
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail{
    background:#0b301f!important;
    border-color:rgba(227,184,79,.34)!important;
  }
}


/* ---------- 040C7R1 — Rendered Composition Correction ----------
   Targeted CSS-only correction after visual QA of the installed 040C7 page.
   No hero art, canonical crest, HTML markup, auth behavior, or database changes.

   Locked fixes:
   1) Desktop NIGHT auth wrapper must be transparent so the real auth card floats over
      the approved full-bleed scenery instead of creating an opaque right-side column.
   2) Desktop beta info panel is centered under the live brand/tagline hierarchy.
   3) Phone portrait keeps the correct HERO -> AUTH CARD -> FOUR-VALUE RAIL structure,
      but gives the approved portrait scenery enough height to reveal Cranky before the card.
*/

/* Desktop / wide desktop: the wrapper is layout-only. The card itself owns the surface. */
@media (min-width:1280px){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    background:transparent!important;
  }
  body.cranky-beta-landing .beta-info-panel{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Wide desktop: keep the card clear of the value rail and preserve scenery behind it. */
@media (min-width:1600px){
  body.cranky-beta-landing .auth{
    right:2.6vw!important;
  }
  body.cranky-beta-landing .auth-card{
    max-height:82vh!important;
    overflow:auto!important;
  }
  body.cranky-beta-landing .feature-grid{
    left:2.6vw!important;
    right:2.6vw!important;
    bottom:2.3vh!important;
  }
}

/* 24-inch / laptop desktop: same floating-card treatment and unobstructed rail. */
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .auth{
    right:2.6vw!important;
  }
  body.cranky-beta-landing .feature-grid{
    left:2.6vw!important;
    right:2.6vw!important;
    bottom:2.4vh!important;
  }
}

/* Phone portrait: use the approved portrait image as an actual portrait hero instead of
   cropping it to a short sky-only strip. The live brand stays at the top; Cranky becomes
   visible before the real login card begins. DAY and NIGHT share identical geometry. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .hero{
    height:clamp(520px,150vw,680px)!important;
    min-height:520px!important;
    max-height:680px!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  body.cranky-beta-landing .hero-content{
    padding:12px 14px 0!important;
  }
  body.cranky-beta-landing .auth{
    margin-top:-22px!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{
    background:#f6efd9!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background:#0b2117!important;
  }
}

/* ---------- 040C7R2 — Desktop Brand / Crest + Phone Moon Composition ----------
   Rendered QA correction from installed 040C7R1 screenshots.
   CSS-only. Approved scenery, canonical crest PNG, login markup, auth behavior and DB are immutable.

   Locks:
   1) Wide desktop brand hierarchy is deliberately larger and slightly more centered in the open sky.
   2) Wide desktop login crest/arch must render fully outside the card bounds — no overflow clipping.
   3) Beta info panel remains centered beneath the live brand hierarchy.
   4) Phone portrait preserves HERO -> CARD -> FOUR-VALUE RAIL, while giving the moon clear breathing room
      above the Family Beta pill. DAY/NIGHT use the same live-UI geometry.
*/

@media (min-width:1600px){
  body.cranky-beta-landing .hero-content{
    top:3.4vh!important;
    left:40%!important;
    width:min(60vw,900px)!important;
  }
  body.cranky-beta-landing .brand-mark.brand-shell-crest{
    width:104px!important;
    height:104px!important;
  }
  body.cranky-beta-landing .brand-text h1{
    font-size:clamp(62px,4.9vw,88px)!important;
    line-height:.98!important;
  }
  body.cranky-beta-landing .brand-text p{
    font-size:15.5px!important;
    letter-spacing:2.7px!important;
  }
  body.cranky-beta-landing .status-pill{
    margin-top:16px!important;
    font-size:15px!important;
    padding:9px 18px!important;
  }
  body.cranky-beta-landing .hero-tagline{
    max-width:690px!important;
    margin-top:17px!important;
    font-size:17px!important;
    line-height:1.38!important;
  }
  body.cranky-beta-landing .beta-info-panel{
    max-width:520px!important;
    margin-top:22px!important;
    padding:16px 20px!important;
  }
  body.cranky-beta-landing .auth{
    overflow:visible!important;
  }
  body.cranky-beta-landing .auth-card{
    max-height:none!important;
    overflow:visible!important;
  }
  body.cranky-beta-landing .auth-badge.brand-flower{
    z-index:8!important;
  }
}

@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .hero-content{
    top:3.5vh!important;
    left:5vw!important;
    width:54vw!important;
  }
  body.cranky-beta-landing .brand-mark.brand-shell-crest{
    width:88px!important;
    height:88px!important;
  }
  body.cranky-beta-landing .brand-text h1{
    font-size:clamp(54px,4.8vw,72px)!important;
  }
  body.cranky-beta-landing .auth,
  body.cranky-beta-landing .auth-card{
    overflow:visible!important;
  }
  body.cranky-beta-landing .auth-card{
    max-height:none!important;
  }
  body.cranky-beta-landing .auth-badge.brand-flower{
    z-index:8!important;
  }
}

@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .status-pill{
    margin-top:72px!important;
  }
}


/* ---------- 040C7R4 — Day Typography / Leaf Icon / Mobile Title Polish ----------
   Rendered QA correction from installed 040C7R2 screenshots.
   CSS-only. Approved DAY/NIGHT scenery, canonical crest PNG, login markup,
   auth behavior and database remain immutable.

   Locks:
   1) Wide desktop brand is optically centered in the left composition safe zone.
      The canonical crest sits ABOVE the title so the title itself is truly centered.
   2) Desktop beta-info panel uses the available space with larger, more readable live copy.
   3) Login crest/arch gets additional headroom on desktop and phone portrait so the crest
      reads as a complete mark rather than looking clipped by the card edge.
   4) Phone portrait moon / Family Beta placement and all approved responsive structure stay unchanged.
*/

@media (min-width:1600px){
  body.cranky-beta-landing .hero-content{
    top:2.8vh!important;
    left:39%!important;
    width:min(58vw,920px)!important;
  }
  body.cranky-beta-landing .brand-row{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
  }
  body.cranky-beta-landing .brand-mark.brand-shell-crest{
    width:92px!important;
    height:92px!important;
    margin:0 auto!important;
  }
  body.cranky-beta-landing .brand-text{
    width:100%!important;
    text-align:center!important;
  }
  body.cranky-beta-landing .brand-text h1{
    font-size:clamp(64px,4.8vw,86px)!important;
  }
  body.cranky-beta-landing .brand-text p{margin-top:3px!important;}
  body.cranky-beta-landing .status-pill{margin-top:12px!important;}
  body.cranky-beta-landing .hero-tagline{margin-top:13px!important;}
  body.cranky-beta-landing .beta-info-panel{
    width:min(100%,600px)!important;
    max-width:600px!important;
    margin-top:18px!important;
    padding:19px 24px!important;
    gap:12px!important;
  }
  body.cranky-beta-landing .beta-info-item{gap:13px!important;}
  body.cranky-beta-landing .beta-info-icon{
    width:23px!important; height:23px!important; margin-top:1px!important;
  }
  body.cranky-beta-landing .beta-info-text strong{font-size:16px!important;line-height:1.2!important;}
  body.cranky-beta-landing .beta-info-text span{font-size:14px!important;line-height:1.35!important;}
  body.cranky-beta-landing .auth-card{margin-top:70px!important;}
  body.cranky-beta-landing .auth-card::after{top:-76px!important;width:166px!important;height:104px!important;}
  body.cranky-beta-landing .auth-badge.brand-flower{top:-82px!important;width:118px!important;height:118px!important;}
}

@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .brand-row{
    flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important;
  }
  body.cranky-beta-landing .brand-text{width:100%!important;text-align:center!important;}
  body.cranky-beta-landing .beta-info-panel{width:min(100%,560px)!important;max-width:560px!important;padding:17px 21px!important;}
  body.cranky-beta-landing .beta-info-text strong{font-size:15px!important;}
  body.cranky-beta-landing .beta-info-text span{font-size:13.5px!important;}
  body.cranky-beta-landing .auth-card{margin-top:66px!important;}
  body.cranky-beta-landing .auth-card::after{top:-72px!important;width:158px!important;height:98px!important;}
  body.cranky-beta-landing .auth-badge.brand-flower{top:-78px!important;width:112px!important;height:112px!important;}
}

@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .auth-card{margin-top:62px!important;}
  body.cranky-beta-landing .auth-card::after{top:-63px!important;width:138px!important;height:86px!important;}
  body.cranky-beta-landing .auth-badge.brand-flower{top:-69px!important;width:106px!important;height:106px!important;}
}

/* ---------- 040C7R4R1 — Day Typography / Leaf Icon / Mobile Title Polish (corrected) ----------
   Repair for the failed 040C7R4 selftest. The prior R4 installer wrote a comment-only CSS
   delta before its selftest correctly stopped the run. This block contains the intended
   functional polish and is installed only against that exact failed-R4 CSS fingerprint. */

/* Desktop: increase the two requested white live-copy lines by exactly one step and use
   a true 1px black stroke, per rendered DAY QA feedback. */
@media (min-width:1600px){
  body.cranky-beta-landing .brand-text p{
    font-size:16.5px!important;
    color:#fff9e9!important;
    -webkit-text-stroke:1px rgba(0,0,0,.98)!important;
    paint-order:stroke fill;
    text-shadow:0 2px 4px rgba(0,0,0,.58)!important;
  }
  body.cranky-beta-landing .hero-tagline{
    font-size:18px!important;
    color:#fff9e9!important;
    -webkit-text-stroke:1px rgba(0,0,0,.98)!important;
    paint-order:stroke fill;
    text-shadow:0 2px 4px rgba(0,0,0,.58)!important;
  }
}
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .brand-text p{
    font-size:14px!important;
    color:#fff9e9!important;
    -webkit-text-stroke:1px rgba(0,0,0,.98)!important;
    paint-order:stroke fill;
    text-shadow:0 2px 4px rgba(0,0,0,.58)!important;
  }
  body.cranky-beta-landing .hero-tagline{
    font-size:16.5px!important;
    color:#fff9e9!important;
    -webkit-text-stroke:1px rgba(0,0,0,.98)!important;
    paint-order:stroke fill;
    text-shadow:0 2px 4px rgba(0,0,0,.58)!important;
  }
}

/* Make the established leaf artwork read more clearly at rendered size; bytes are unchanged. */
body.cranky-beta-landing .feature-leaf .feature-icon{
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
}
body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
  background-position:12px center,calc(100% - 12px) center,center!important;
  background-size:38px 38px,38px 38px,100% 100%!important;
}

/* Phone portrait: retain the established dark title stroke and add a 2px light outer halo. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .brand-text h1{
    text-shadow:
      -2px -2px 0 rgba(255,255,255,.92),
       0 -2px 0 rgba(255,255,255,.92),
       2px -2px 0 rgba(255,255,255,.92),
      -2px  0   0 rgba(255,255,255,.92),
       2px  0   0 rgba(255,255,255,.92),
      -2px  2px 0 rgba(255,255,255,.92),
       0  2px 0 rgba(255,255,255,.92),
       2px  2px 0 rgba(255,255,255,.92),
       0  3px 5px rgba(0,0,0,.68)!important;
  }
}


/* ---------- 040C7R4R3 — Effective Visual Polish ----------
   Cascade-aware correction after rendered QA showed R4R1's changes were too close to
   already-effective values to read visually. This block makes the requested differences
   unmistakable while preserving the approved composition and imagery. */

@media (min-width:1600px){
  body.cranky-beta-landing .brand-text p{
    font-size:17.5px!important;
    -webkit-text-stroke:0!important;
    text-shadow:
      -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
      -1px  0   0 #000,                 1px  0   0 #000,
      -1px  1px 0 #000, 0  1px 0 #000, 1px  1px 0 #000,
      0 2px 4px rgba(0,0,0,.46)!important;
  }
  body.cranky-beta-landing .hero-tagline{
    font-size:19px!important;
    -webkit-text-stroke:0!important;
    text-shadow:
      -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
      -1px  0   0 #000,                 1px  0   0 #000,
      -1px  1px 0 #000, 0  1px 0 #000, 1px  1px 0 #000,
      0 2px 4px rgba(0,0,0,.46)!important;
  }
}
@media (min-width:1280px) and (max-width:1599px){
  body.cranky-beta-landing .brand-text p{
    font-size:15px!important;
    -webkit-text-stroke:0!important;
    text-shadow:
      -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
      -1px  0   0 #000,                 1px  0   0 #000,
      -1px  1px 0 #000, 0  1px 0 #000, 1px  1px 0 #000,
      0 2px 4px rgba(0,0,0,.46)!important;
  }
  body.cranky-beta-landing .hero-tagline{
    font-size:17.5px!important;
    -webkit-text-stroke:0!important;
    text-shadow:
      -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
      -1px  0   0 #000,                 1px  0   0 #000,
      -1px  1px 0 #000, 0  1px 0 #000, 1px  1px 0 #000,
      0 2px 4px rgba(0,0,0,.46)!important;
  }
}
body.cranky-beta-landing .feature-leaf .feature-icon{
  width:52px!important;
  height:52px!important;
  object-fit:contain!important;
}
body.cranky-beta-landing .auth-card form > .btn.btn-primary[type="submit"]{
  background-image:
    url('/assets/images/leaf-clear-040c7r4r3.svg'),
    url('/assets/images/leaf-clear-040c7r4r3.svg'),
    linear-gradient(180deg,#527a24,#244f16)!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:14px center,calc(100% - 14px) center,center!important;
  background-size:32px 32px,32px 32px,100% 100%!important;
}


/* ---------- 040C7R4R5 — Phone Portrait Simple Black Outlines ----------
   Rendered-QA-only correction. Replace the broad/fuzzy mobile title treatments with
   two tight rings: Cranky's Game = 1px white inner + 1px black outer; subtitle =
   1px black inner + 1px white outer. Desktop/tablet composition and type are untouched. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .brand-text h1{
    -webkit-text-stroke:1px #fff!important;
    paint-order:stroke fill!important;
    text-shadow:
      -2px -2px 0 #000,
       0   -2px 0 #000,
       2px -2px 0 #000,
      -2px  0   0 #000,
       2px  0   0 #000,
      -2px  2px 0 #000,
       0    2px 0 #000,
       2px  2px 0 #000!important;
  }
  body.cranky-beta-landing .brand-text p{
    -webkit-text-stroke:1px #000!important;
    paint-order:stroke fill!important;
    text-shadow:
      -2px -2px 0 #fff,
       0   -2px 0 #fff,
       2px -2px 0 #fff,
      -2px  0   0 #fff,
       2px  0   0 #fff,
      -2px  2px 0 #fff,
       0    2px 0 #fff,
       2px  2px 0 #fff!important;
  }
}


/* ---------- 040C7R4R5 — Phone Portrait Simple Black Outlines ----------
   Rendered QA simplification: both title lines use one tight 1px black outline only.
   No white halo, no dual ring, no glow. Subtitle backdrop is removed. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .brand-text h1,
  body.cranky-beta-landing .brand-text p{
    -webkit-text-stroke:0!important;
    paint-order:normal!important;
    text-shadow:
      -1px -1px 0 #000,
       0   -1px 0 #000,
       1px -1px 0 #000,
      -1px  0   0 #000,
       1px  0   0 #000,
      -1px  1px 0 #000,
       0    1px 0 #000,
       1px  1px 0 #000!important;
  }
  body.cranky-beta-landing .brand-text p{
    background:transparent!important;
    padding:0!important;
    border-radius:0!important;
  }
}


/* ---------- 040C7R5 — iPad Landscape + Portrait Composition ----------
   Rendered QA correction for the two iPad states only.
   Desktop and phone breakpoints are intentionally untouched.

   Landscape: use the approved 4:3 scenery full-bleed, float the real auth card on the
   right, and compress the four-value rail to one row instead of sacrificing 40% of the art
   to a solid auth column.

   Portrait: show enough of the approved portrait scenery to include Cranky, widen the auth
   card to tablet proportions, and restore the compact four-value rail beneath the card.
*/

@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  body.cranky-beta-landing .page{
    position:relative!important;
    display:block!important;
    min-height:100vh!important;
    overflow:hidden!important;
  }
  body.cranky-beta-landing .hero{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:none!important;
    padding:0!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{
    background-image:var(--hero-040c7-day-tablet-landscape)!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{
    background-image:var(--hero-040c7-night-tablet-landscape)!important;
  }
  body.cranky-beta-landing .hero-content{
    display:block!important;
    position:absolute!important;
    top:3.2vh!important;
    left:3vw!important;
    width:52vw!important;
    max-width:590px!important;
    z-index:3!important;
  }
  body.cranky-beta-landing .auth,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    position:absolute!important;
    z-index:6!important;
    top:2vh!important;
    right:2.4vw!important;
    bottom:11.5vh!important;
    width:42vw!important;
    max-width:450px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  body.cranky-beta-landing .auth-card{
    width:100%!important;
    max-width:none!important;
    margin:38px 0 0!important;
    max-height:84vh!important;
    overflow:visible!important;
  }
  /* 040C7R5R3 — iPad-landscape crest/arch scale repair.
     R2 removed card-local clipping and exposed all six leaves. The remaining
     top-edge crop is resolved without moving the auth card or bottom rail:
     crest and arch geometry are scaled together to ~60% only at this breakpoint. */
  body.cranky-beta-landing .auth-card::after{
    width:92px!important;
    height:55px!important;
    top:-40px!important;
    border-radius:54px 54px 11px 11px!important;
  }
  body.cranky-beta-landing .auth-badge.brand-flower{
    width:76px!important;
    height:76px!important;
    top:-43px!important;
  }

  /* 040C7R5R4 — iPad-landscape card compacting.
     The base auth stylesheet gives .auth-card min-height:100% and centers
     its contents vertically. That was useful before the tablet composition
     became a floating card, but it now forces unnecessary height and causes
     the card to invade the bottom value rail. R3 also reduced the crest from
     126px to 76px, so the inherited 64px top padding now leaves dead space.
     Use natural content height, reclaim that obsolete headroom, and tighten
     the verified 18px subtitle gap without moving .auth or the value rail. */
  body.cranky-beta-landing .auth-card{
    min-height:0!important;
    padding-top:42px!important;
    padding-bottom:16px!important;
    justify-content:flex-start!important;
  }
  body.cranky-beta-landing .auth-card > p.sub{
    margin-bottom:10px!important;
  }

  /* 040C7R5R5 — compact left information panel.
     The invite-status row was removed from the DOM, leaving only the two
     durable player/safety messages. Narrow the tablet-landscape panel so
     it covers less of Cranky without changing hero or auth geometry. */
  body.cranky-beta-landing .beta-info-panel{
    width:min(100%,390px)!important;
    max-width:390px!important;
    margin-top:16px!important;
    padding:12px 16px!important;
    gap:8px!important;
  }

  /* 040C7R5R6 — login-only final top-gap trim.
     The canonical crest is now fully visible and frozen. Trim only the
     remaining dead space between that crest and Welcome back on the login
     card; create-account and other auth-card layouts keep the R4 geometry. */
  body.cranky-beta-landing .auth-card.login-auth-card{
    padding-top:34px!important;
  }

  /* 040C7R5R7 — final login micro-compacting.
     Final iPad-landscape-only trim for the login card: slightly reduce the
     remaining top gap below the frozen crest, pull the footer links upward,
     and reclaim a little bottom padding. No effect on create-account or
     any other breakpoint. */
  body.cranky-beta-landing .auth-card.login-auth-card{
    padding-top:28px!important;
    padding-bottom:10px!important;
  }
  body.cranky-beta-landing .auth-card.login-auth-card .public-links{
    margin-top:8px!important;
    margin-bottom:0!important;
  }

  body.cranky-beta-landing .feature-grid{
    display:grid!important;
    position:absolute!important;
    left:2.4vw!important;
    right:2.4vw!important;
    bottom:1.6vh!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    z-index:4!important;
  }
  body.cranky-beta-landing .feature{
    min-height:64px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:7px 10px!important;
    border-bottom:0!important;
  }
  body.cranky-beta-landing .feature-icon{
    width:34px!important;
    height:34px!important;
  }
  body.cranky-beta-landing .feature-leaf .feature-icon{
    width:38px!important;
    height:38px!important;
  }
  body.cranky-beta-landing .feature h3{
    font-size:12.8px!important;
    line-height:1.12!important;
  }
  body.cranky-beta-landing .feature p{
    display:block!important;
    font-size:10.4px!important;
    line-height:1.25!important;
  }
}

@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  body.cranky-beta-landing .page{
    display:block!important;
    min-height:100vh!important;
  }
  body.cranky-beta-landing .hero{
    height:clamp(700px,82vh,820px)!important;
    min-height:700px!important;
    max-height:820px!important;
    padding:38px 34px 70px!important;
    background-size:100% auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{
    background-image:var(--hero-040c7-day-tablet-portrait)!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{
    background-image:var(--hero-040c7-night-tablet-portrait)!important;
  }
  body.cranky-beta-landing .auth,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    position:relative!important;
    z-index:6!important;
    max-width:none!important;
    margin-top:-64px!important;
    padding:0 3vw 24px!important;
    background:transparent!important;
    flex-direction:column!important;
  }
  body.cranky-beta-landing .auth-card{
    width:min(92vw,760px)!important;
    max-width:760px!important;
    margin:66px auto 0!important;
    overflow:visible!important;
  }
  body.cranky-beta-landing .mobile-value-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:min(92vw,760px)!important;
    max-width:760px!important;
    margin:12px auto 22px!important;
    padding:9px 5px 10px!important;
    background:#123f29!important;
    border:1px solid rgba(227,184,79,.30)!important;
    border-radius:18px!important;
    box-shadow:0 8px 20px rgba(0,0,0,.16)!important;
  }
  body.cranky-beta-landing .mobile-value-rail-item{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:2px 4px!important;
    text-align:center!important;
    color:#fff4d4!important;
    font:700 clamp(10px,1.55vw,12px)/1.12 Quicksand,sans-serif!important;
    border-left:1px solid rgba(227,184,79,.25)!important;
  }
  body.cranky-beta-landing .mobile-value-rail-item:first-child{border-left:0!important;}
  body.cranky-beta-landing .mobile-value-rail-item img{
    width:36px!important;
    height:36px!important;
    object-fit:contain!important;
    display:block!important;
  }
  body.cranky-beta-landing .mobile-value-rail-item:first-child img{
    width:40px!important;
    height:40px!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail{
    background:#0b301f!important;
    border-color:rgba(227,184,79,.34)!important;
  }
}

/* ---------- 040C7R5R8 — iPhone-landscape login recovery ----------
   Real-device QA showed that short phone-landscape viewports cannot support
   the fixed four-value rail plus the full login card at the same time.
   The prior rail was fixed with z-index:9 and the auth card was constrained
   with overflow:auto, which both covered the form and clipped the canonical
   negative-positioned crest.

   Scope is deliberately narrow:
   - width 600–899px
   - landscape only
   - usable viewport height <=500px

   Therefore this does not alter phone portrait, iPad, desktop, or taller
   small-tablet landscape layouts. Primary sign-in wins over the secondary
   value rail in this unusually short viewport. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing .auth{
    padding:6px 10px 10px!important;
    padding-bottom:10px!important;
    align-items:flex-start!important;
    overflow:visible!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card{
    width:100%!important;
    max-width:400px!important;
    min-height:0!important;
    max-height:none!important;
    margin:38px auto 8px!important;
    padding:32px 12px 8px!important;
    overflow:visible!important;
    justify-content:flex-start!important;
  }

  /* Scale crest + arch together so the full canonical six-leaf crest fits
     above the card without touching the locked image itself. */
  body.cranky-beta-landing .auth-card.login-auth-card::after{
    width:86px!important;
    height:52px!important;
    top:-34px!important;
    border-radius:50px 50px 10px 10px!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card .auth-badge.brand-flower{
    width:64px!important;
    height:64px!important;
    top:-36px!important;
    z-index:8!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card h2{
    font-size:21px!important;
    line-height:1.05!important;
    margin:0!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card > p.sub{
    font-size:12px!important;
    line-height:1.2!important;
    margin-top:4px!important;
    margin-bottom:7px!important;
  }

  body.cranky-beta-landing .login-auth-card .cranky-login-switch{
    padding:3px!important;
    gap:4px!important;
    margin-bottom:8px!important;
    border-radius:13px!important;
  }

  body.cranky-beta-landing .login-auth-card .cranky-login-switch .btn{
    min-height:36px!important;
    padding:5px 3px!important;
    font-size:11.5px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    border-radius:10px!important;
  }

  body.cranky-beta-landing .login-auth-card .field{
    margin-bottom:6px!important;
  }

  body.cranky-beta-landing .login-auth-card .field label{
    font-size:11.5px!important;
    line-height:1.15!important;
  }

  body.cranky-beta-landing .login-auth-card .field input{
    min-height:34px!important;
    font-size:12.5px!important;
  }

  body.cranky-beta-landing .login-auth-card .btn{
    min-height:36px!important;
  }

  body.cranky-beta-landing .login-auth-card .divider{
    margin-top:7px!important;
    margin-bottom:7px!important;
  }

  body.cranky-beta-landing .login-auth-card .public-links{
    margin-top:5px!important;
    margin-bottom:0!important;
    font-size:10.5px!important;
  }

  /* The rail is intentionally omitted only in this short landscape viewport.
     It is secondary content and must never cover the login task. */
  body.cranky-beta-landing .mobile-value-rail{
    display:none!important;
  }
}


/* ---------- 040C7R5R13 — Short iPhone Landscape Equal-Height Geometry ----------
   Real-device DAY QA at R12 confirmed the approved scenery itself is good.
   The exposed cream area below the hero is caused by the natural-height auth
   content making .page taller while .hero remains locked to 100vh/min-height:390px.

   This correction is intentionally limited to the already-established R8 short
   iPhone-landscape scope. It does NOT stretch the hero, alter background-size,
   alter background-position, touch artwork, change the login card geometry,
   restore the hidden value rail, or affect portrait/tablet/desktop breakpoints.

   Instead, the page and auth column use the same existing viewport/minimum height
   as the hero. Any excess login content scrolls inside the auth column rather than
   increasing the page height and exposing the page background beneath the hero. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  body.cranky-beta-landing .page{
    height:100vh!important;
    min-height:390px!important;
    overflow:hidden!important;
  }

  body.cranky-beta-landing .auth{
    height:100vh!important;
    min-height:390px!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* ---------- 040C7R5R14 — iPhone Landscape Crop + Portrait Seam Tightening ----------
   Real-device QA after R13 confirms two remaining mobile presentation issues:
   1) Short iPhone landscape is still cropping too far toward the pond/path side.
      The approved frozen scenery itself is good; only the live background framing
      should move so the Turtle Sanctuary house / waterfall side is more visible.
   2) Phone portrait still shows more cream page background than desired between
      the bottom of the hero art and the overlapping login card.

   This is CSS-only and intentionally narrow. It does NOT regenerate or replace any
   artwork, change background-size, touch desktop/tablet breakpoints, alter auth
   behavior, or change the established portrait card / value-rail structure. */

/* Short iPhone landscape: keep the frozen art and cover sizing, but shift the crop
   leftward within the scenic column so more of the house/waterfall side stays visible. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  body.cranky-beta-landing .hero{
    background-position:24% center!important;
  }
}

/* Phone portrait: tighten the hero-to-card transition by pulling the auth block upward.
   The crest/arch bridge remains intact; the login card and four-value rail structure stay the same. */
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .auth{
    margin-top:-54px!important;
  }
}

/* ---------- 040C7R5R15 — DAY iPhone Landscape Left-Anchor Correction ----------
   R14's landscape background-position rule was present but visually ineffective.
   Root cause: the active DAY 040C7 selector includes
   html:not([data-cranky-public-theme="dark"]) and therefore has higher specificity
   than R14's body.cranky-beta-landing .hero selector. Both declarations are !important,
   so the higher-specificity earlier rule continued to win.

   Real-device QA also locks the R14 phone-portrait transition as accepted. This R15
   correction therefore touches DAY short iPhone landscape only. Portrait is not changed.
   NIGHT landscape is not changed because its current composition was already accepted.

   The approved DAY artwork remains byte-for-byte frozen. We only anchor its existing
   cover crop to the LEFT edge so the scenic panel favors the Turtle Sanctuary house /
   waterfall / Cranky side and lets the pond/path/forest side become the overflow. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero{
    background-position:left center!important;
  }
}

/* ---------- 040C7R5R16 — iPhone Landscape Full-Width Value Rail ----------
   R15 DAY iPhone-landscape scenery is visually accepted: left-anchored crop now shows
   the Turtle Sanctuary house / waterfall / Cranky composition Jeff requested.

   Final requested landscape polish:
   - restore the full four-value banner (titles + descriptions), using the existing
     live .feature-grid DOM rather than inventing new copy or artwork;
   - place it BELOW BOTH the scenic hero and the login column;
   - keep the accepted 390px scenic/login composition unchanged above it;
   - allow the page to scroll down to the secondary banner instead of overlaying the
     primary login task.

   This is short iPhone-landscape only. Portrait remains locked at R14. DAY/NIGHT art,
   crest, auth behavior, desktop/tablet layouts, and source artwork bytes are untouched. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  /* R13 intentionally locked the page itself to the 390px primary composition.
     R16 adds a second scrollable row underneath without changing hero/auth height. */
  body.cranky-beta-landing .page{
    position:relative!important;
    height:478px!important;
    min-height:478px!important;
    overflow:visible!important;
  }

  /* The hero remains exactly the accepted 390px composition. Its value rail can
     overflow below the hero and span the whole viewport. */
  body.cranky-beta-landing .hero{
    overflow:visible!important;
  }

  /* R8 hid the feature grid to protect the login task. Restore it as secondary content
     below the 390px primary row, full-width across hero + auth. */
  body.cranky-beta-landing .hero .feature-grid{
    display:grid!important;
    position:absolute!important;
    z-index:12!important;
    top:390px!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    width:100vw!important;
    height:80px!important;
    margin:0!important;
    padding:0 8px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:0!important;
    border-radius:0 0 16px 16px!important;
    box-sizing:border-box!important;
  }

  body.cranky-beta-landing .hero .feature{
    min-height:80px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:7px 10px!important;
    border-bottom:0!important;
  }

  body.cranky-beta-landing .hero .feature-icon{
    width:38px!important;
    height:38px!important;
  }

  body.cranky-beta-landing .hero .feature-leaf .feature-icon{
    width:42px!important;
    height:42px!important;
  }

  body.cranky-beta-landing .hero .feature h3{
    display:block!important;
    font-size:11.5px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }

  body.cranky-beta-landing .hero .feature p{
    display:block!important;
    font-size:8.9px!important;
    line-height:1.2!important;
  }

  /* Keep the compact label-only mobile rail suppressed here; R16 deliberately restores
     the richer full banner instead, so there is only one value rail in landscape. */
  body.cranky-beta-landing .mobile-value-rail{
    display:none!important;
  }
}

/* ---------- 040C7R5R17 — iPhone Landscape Auth Right-Edge Fit ----------
   R16 successfully restored the full-width long value banner below both columns.
   Visual QA now wants one final landscape polish: the right login region should feel
   less like a broad cream slab and more like a narrower card aligned toward the right edge.

   This correction keeps the accepted R15/R16 landscape crop and bottom banner, but
   narrows the auth lane and right-aligns the real auth card within it. The effect is:
   - more visible scenery between Cranky and the login column,
   - less cream wrapper visible,
   - login card visually tucked to the right edge,
   - no change to portrait, desktop, tablet, auth behavior, or artwork bytes. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  body.cranky-beta-landing .hero{
    flex:1 1 58%!important;
  }

  body.cranky-beta-landing .auth{
    flex:0 0 42%!important;
    max-width:392px!important;
    padding:12px 6px 22px 8px!important;
    margin-left:auto!important;
    align-items:flex-end!important;
  }

  body.cranky-beta-landing .auth-card{
    width:100%!important;
    max-width:376px!important;
    margin:48px 0 0 auto!important;
  }
}

/* ---------- 040C7R5R18 — iPhone Landscape Unified Page Scroll ----------
   Cascade diagnosis against the exact R17 front-door CSS confirmed the remaining
   landscape defect: R13 introduced height:100vh + overflow-y:auto on .auth, creating
   an independent login-column scroller. R16 later made .page taller for the value
   banner but left that R13 auth scroller intact.

   Desired final behavior is one normal page scroll:
     ROW 1: [ scenic hero | login/auth ]  — equal natural height
     ROW 2: [ full-width four-value banner ]

   This short-landscape-only correction removes the fixed child heights and nested
   auth scrolling, explicitly restores flex cross-axis stretching, and makes the R16
   banner follow the actual bottom of the now-dynamic hero.

   R14 portrait remains locked. R15 left-anchored DAY crop remains intact. R16 banner
   content/width remains intact. R17 horizontal lane fit remains intact. No artwork,
   auth behavior, tablet, desktop, or portrait changes. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing .page{
    height:auto!important;
    min-height:390px!important;
    overflow:visible!important;
    align-items:stretch!important;

    /* .feature-grid is absolutely positioned out of normal flow. Reserve exactly
       one banner row beneath the flex row so the browser's single page scroll has
       real layout space for it rather than relying only on overflow painting. */
    padding-bottom:80px!important;
    box-sizing:border-box!important;
  }

  body.cranky-beta-landing .hero{
    height:auto!important;
    min-height:390px!important;
    max-height:none!important;
    overflow:visible!important;
    align-self:stretch!important;
  }

  body.cranky-beta-landing .auth{
    height:auto!important;
    min-height:390px!important;
    overflow:visible!important;
    align-self:stretch!important;
  }

  /* R16 hard-coded top:390px because Row 1 was fixed-height. Track the actual
     stretched hero bottom now that Row 1 grows naturally with login content. */
  body.cranky-beta-landing .hero .feature-grid{
    top:100%!important;
  }
}

/* ---------- 040C7R5R19 — iPhone Landscape Full-Row Scenery ----------
   R18 fixed the scrolling architecture: hero + auth now move together as one page,
   and the R16 full-width value banner remains accepted beneath them.

   Real-device NIGHT QA exposed the final presentation problem:
   - the auth lane still paints a flat dark-green background around the real auth card;
   - the scenic image is still owned only by the left .hero column, so a taller unified
     row causes a narrow-column cover crop that over-emphasizes trees/path and cuts the
     house/Cranky composition.

   Final short-landscape composition:
     ROW 1 background = one continuous approved phone-landscape scene across BOTH columns
     ROW 1 content    = [ live hero/brand | live auth card ]
     ROW 2            = accepted R16 full-width four-value banner

   Moving the frozen scenic image from .hero to .page at this breakpoint gives it the
   full row width to work with, removes the flat green/cream auth-lane backdrop, and
   dramatically reduces the narrow-column cover crop. The full-row scene is hard-left
   anchored so the Turtle Sanctuary house / waterfall / Cranky side is always favored.

   No artwork bytes, auth behavior, portrait, tablet, desktop, or banner content change. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing .page{
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:left center!important;
  }

  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{
    background-color:#f6efd9!important;
    background-image:var(--hero-040c7-day-phone-landscape)!important;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-color:#0b2117!important;
    background-image:var(--hero-040c7-night-phone-landscape)!important;
  }

  /* The page now owns the single continuous scenic layer. Keep the hero as the
     left-side content/layout column without painting a second independently-cropped scene. */
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{
    background-image:none!important;
    background-color:transparent!important;
  }

  /* Remove the flat DAY/NIGHT auth-lane paint. The real auth card keeps its own
     accepted cream/dark surface and now floats over the continuous scenic row. */
  body.cranky-beta-landing .auth,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    background:transparent!important;
  }
}

/* ---------- 040C7R5R20 — iPhone Landscape Right-Edge Grid ----------
   Full-cascade review including cranky-theme.css and cranky-auth-035r1.css confirms:
   - the base theme owns the generic flex shell;
   - cranky-auth-035r1.css only replaces the landing composition at >=1200px;
   - the current short-landscape behavior is therefore controlled by the front-door
     cascade itself, not by a hidden mobile rule in those two earlier stylesheets.

   R18 one-page scrolling and the R16 full-width value banner remain accepted.
   R19's continuous full-row scenery remains in place.

   Final short-landscape correction here is intentionally horizontal only:
   replace the accumulated flex sizing with a two-column CSS grid whose auth column
   is the actual rightmost column of the viewport. The login card fills that column,
   so there is no unused lane to its right. This also moves the card away from the
   center of the scene, revealing more of Cranky without rescaling or distorting the
   frozen artwork.

   PORTRAIT LOCK: this delta contains no portrait selector. The installer fingerprints
   every max-width:599px portrait media block before and after installation and aborts
   if that fingerprint changes. */
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing .page{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(340px,42vw,376px)!important;
    grid-auto-rows:auto!important;
    width:100vw!important;
    max-width:none!important;
    align-items:stretch!important;
  }

  body.cranky-beta-landing .hero{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
  }

  body.cranky-beta-landing .auth,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:12px 0 22px 8px!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    background:transparent!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card{
    width:100%!important;
    max-width:none!important;
    margin:48px 0 0!important;
  }
}

/* ---------- 040C7R5R24 — Phone Portrait Continuous Scene + Edge Card ----------
   Corrected implementation of the R20 diagnosis.

   TOP:
   Move the approved portrait scene from .hero to .page at the exact same scale/position.
   IMPORTANT: the theme-qualified .hero selectors below intentionally match the specificity
   of the existing DAY/NIGHT image rules; a plain body...hero selector would NOT override
   those earlier !important declarations.

   SIDES:
   Remove only .auth's horizontal 2vw padding and let the existing card shell fill 100%.
   Vertical auth padding and all card margins remain untouched.

   BOTTOM:
   Keep the actual 96vw value rail in its exact R20 position. Extend only its existing
   DAY/NIGHT surface upward and outward behind the card's bottom rounded corners.
   The 46px backdrop covers the 10px rail gap plus the largest active portrait bottom
   corner radius without moving the rail or card.

   No artwork bytes, hero geometry, card internals, crest geometry, card margins,
   rail width/margins/content, landscape/tablet/desktop behavior, or auth behavior change.
*/
@media (max-width:599px) and (orientation:portrait){

  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{
    background-image:var(--hero-040c7-day-phone)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-image:var(--hero-040c7-night-phone)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
  }

  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .hero,
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .hero{
    background-image:none!important;
    background-color:transparent!important;
  }

  body.cranky-beta-landing .auth{
    padding-left:0!important;
    padding-right:0!important;
  }

  body.cranky-beta-landing .auth-card{
    width:100%!important;
    max-width:100%!important;
    z-index:2!important;
  }

  body.cranky-beta-landing .mobile-value-rail{
    position:relative!important;
  }

  body.cranky-beta-landing .mobile-value-rail::before{
    content:"";
    position:absolute;
    left:-2vw;
    right:-2vw;
    top:-46px;
    height:46px;
    background:#123f29;
    z-index:1;
    pointer-events:none;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail::before{
    background:#0b301f;
  }
}

/* ---------- 040C7R5R25 — Phone Portrait Bottom Rail Shape Cleanup ----------
   R24 visual QA:
   - TOP continuous scenery = accepted.
   - SIDE edge-to-edge card = accepted.
   - BOTTOM full-width 46px rail backdrop = rejected as a broad rectangular green slab.

   R25 keeps every accepted R24 behavior and changes ONLY the pseudo-element's paint shape.

   Instead of painting the entire 100vw x 46px backdrop:
   - paint a 52px-wide / 46px-tall patch at each outer corner, behind the card's
     rounded lower corner cutouts;
   - paint only the bottom 10px across the rail's existing 96vw centered footprint,
     matching the existing R20 rail top gap;
   - leave the upper center of the 46px pseudo transparent.

   Result: no broad green rectangle behind the whole card; dark green appears only where
   it is structurally needed to tuck the rail surface behind the card's lower corners
   and bridge the existing 10px gap.
*/
@media (max-width:599px) and (orientation:portrait){

  body.cranky-beta-landing .mobile-value-rail::before{
    background:
      linear-gradient(#123f29,#123f29) left top / 52px 46px no-repeat,
      linear-gradient(#123f29,#123f29) right top / 52px 46px no-repeat,
      linear-gradient(#123f29,#123f29) center bottom / 96vw 10px no-repeat!important;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail::before{
    background:
      linear-gradient(#0b301f,#0b301f) left top / 52px 46px no-repeat,
      linear-gradient(#0b301f,#0b301f) right top / 52px 46px no-repeat,
      linear-gradient(#0b301f,#0b301f) center bottom / 96vw 10px no-repeat!important;
  }
}

/* ---------- 040C7R5R26 — Phone Portrait Bottom Pseudo Removal ----------
   R24 top scenery continuity = accepted.
   R24 edge-to-edge portrait card = accepted.
   R24/R25 bottom rail pseudo backdrop = rejected.
   R26 removes only that generated backdrop.
*/
@media (max-width:599px) and (orientation:portrait){
  body.cranky-beta-landing .mobile-value-rail::before{
    content:none!important;
  }
}

/* ---------- 040C7R5R27R1 — NIGHT iPhone Portrait + Landscape Guard Hotfix ----------
   Functional CSS is intentionally identical to R27. Only the installer guard logic is
   fixed in this round.

   PORTRAIT:
   The legacy global NIGHT rule still paints .auth opaque dark green. Clear that wrapper
   at phone portrait widths so the existing R24/R26 page-owned night scenery can continue
   behind the crest/card transition.

   LANDSCAPE:
   The NIGHT landscape artwork lives on .page (since R19/R20), so tune .page directly.
   Start QA at a modest unzoom: 108% auto, left/top anchored.
*/

@media (max-width:599px) and (orientation:portrait){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    background:transparent!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-size:108% auto!important;
    background-position:left top!important;
    background-repeat:no-repeat!important;
    background-color:#0b2117!important;
  }
}

/* ---------- 040C7R5R27R2 — NIGHT iPhone Landscape 106% Tune ----------
   NIGHT portrait is LOCKED at R27R1 and is intentionally untouched.

   R27R1 landscape at 108% materially improved framing but Cranky remains slightly too large.
   Based on the live screenshot geometry and the approved 1672x941 landscape aspect ratio,
   106% is the safer next step: it removes another small amount of zoom while remaining
   near the minimum scale needed to cover the short-landscape scenic row vertically.

   Only one property changes: NIGHT short-landscape .page background-size 108% -> 106%.
   Existing left/top anchor, card/grid, rail, scroll, and all portrait behavior remain frozen.
*/
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-size:106% auto!important;
  }
}

/* ---------- 040C7R5R27R3 — NIGHT iPhone Landscape 108% + Dark Fallback ----------
   NIGHT portrait remains LOCKED and untouched.

   R27R2 proved 106% exposes too much of the page fallback beneath the landscape artwork.
   Return to the better 108% framing and darken only the fallback color behind the image
   so the small uncovered strip reads as a continuation of the artwork's near-black lower
   edge rather than as a green shelf.

   Live screenshot sampling of the actual artwork edge immediately above the gap is near
   black forest green; use #050a09 as the QA fallback.
*/
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-size:108% auto!important;
    background-color:#050a09!important;
  }
}

/* ---------- 040C7R5R27R5 — iPhone Landscape Right Scroll-Gutter Removal ----------
   Rotation test proved the remaining strip is NOT the physical iPhone safe area:
   it stays on CSS/right in both landscape orientations.

   Screenshot measurement puts the strip at roughly 7–8 CSS px, which is consistent
   with a reserved vertical scroll gutter. The short-landscape page intentionally keeps
   one-page vertical scrolling for the value banner, so R27R5 hides only the scrollbar
   chrome/gutter while preserving scrolling itself.

   NIGHT portrait, landscape scenery framing (108%), dark bottom fallback, card/grid,
   value banner, and all artwork remain untouched.
*/
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  html,
  body.cranky-beta-landing{
    scrollbar-width:none!important;
  }

  html::-webkit-scrollbar,
  body.cranky-beta-landing::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
}

/* ---------- 040C7R5R27R6R1 — iPhone Landscape Right Canvas Fill Guard Hotfix ----------
   Functional CSS is identical to R27R6. Only the installer scope guard is corrected.

   Rotation test + R27R5 proved the persistent right strip is neither safe-area nor scrollbar
   chrome. Screenshot geometry indicates ~8 CSS px of browser canvas outside the 100vw layout.

   Extend the short-landscape page and full-width value banner by 8px. Compensate NIGHT scenic
   background-size so the accepted R27R3 framing remains essentially unchanged.
*/
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing .page{
    width:calc(100vw + 8px)!important;
  }

  body.cranky-beta-landing .hero .feature-grid{
    width:calc(100vw + 8px)!important;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-size:calc(108% - 8.64px) auto!important;
  }
}

/* ---------- 040C7R5R27R7 — iPhone Landscape Root Scroll Fix ----------
   Final right-edge diagnosis after the failed safe-area, scrollbar-paint, and +8px canvas tests.

   The surviving old phone-landscape rule still sets:
       body.cranky-beta-landing { overflow:auto; }
   making BODY itself the scroll container.

   R18 correctly unified hero/auth into one page scroll, but never removed that older body
   scroll-container rule. The persistent ~8px right strip behaves like the scrollport gutter:
   - it stays on CSS/right after device rotation;
   - hiding scrollbar chrome did not reclaim it;
   - widening the page by 8px merely enlarged the captured document while leaving the gutter.

   R27R7 removes BODY as the scroll container while preserving normal document/root scrolling:
       overflow-x:hidden
       overflow-y:visible

   It also undoes the rejected R27R6R1 horizontal expansion and restores the accepted R27R3
   landscape geometry/framing:
       .page width:100vw
       .feature-grid width:100vw
       NIGHT background-size:108% auto
*/
@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){

  body.cranky-beta-landing{
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }

  body.cranky-beta-landing .page{
    width:100vw!important;
  }

  body.cranky-beta-landing .hero .feature-grid{
    width:100vw!important;
  }

  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-size:108% auto!important;
  }
}

/* ---------- 040C7R5R29 — NIGHT iPhone Right-Edge Overflow Correction ----------
   Current-cascade reproduction identified a concrete horizontal overflow source:
   the decorative .auth-card::before frame extends past a card that is intentionally
   flush with the right viewport edge. The active frame uses right:-5px on <=430px
   portrait and right:-8px elsewhere, producing matching document overflow.

   Scope is NIGHT only and limited to the two affected iPhone layouts. Do not alter
   page/auth/card geometry, artwork, value rails, viewport/root rules, or the accepted
   108% NIGHT short-landscape scenic framing. DAY does not match these selectors.

   Bring only the decorative frame's right edge back to the card edge. Its right border
   is made transparent so this correction does not introduce a new visible frame stripe
   where the old border previously painted outside the viewport. */
@media (max-width:599px) and (orientation:portrait){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    right:0!important;
    border-right-color:transparent!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    right:0!important;
    border-right-color:transparent!important;
  }
}

/* ---------- 040C7R5R29R1 — NIGHT iPhone Card Back-Frame Center Correction ----------
   R29 correctly removed the right-edge document overflow, but its intentionally minimal
   correction moved only the decorative .auth-card::before right edge to the card boundary
   and made that one border transparent. The left edge remained extended by the legacy
   hand-drawn frame inset, making the translucent/back-frame taper visibly asymmetric.

   Keep the proven R29 overflow correction and center ONLY that decorative back frame:
   - horizontal frame bounds become left:0 / right:0;
   - restore the NIGHT frame color on both horizontal sides;
   - preserve top/bottom offsets, border radius, hand-drawn rotation, card geometry,
     scenery, crest, value rail, root/viewport rules, and NIGHT 108% landscape framing.

   Scope: NIGHT iPhone portrait + short iPhone landscape only. DAY is untouched. */
@media (max-width:599px) and (orientation:portrait){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    left:0!important;
    right:0!important;
    border-left-color:rgba(205,177,104,.28)!important;
    border-right-color:rgba(205,177,104,.28)!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    left:0!important;
    right:0!important;
    border-left-color:rgba(205,177,104,.28)!important;
    border-right-color:rgba(205,177,104,.28)!important;
  }
}

/* ---------- 040C7R5R29R2 — NIGHT iPhone Mobile Back-Frame Simplification ----------
   R29 removed the measured right-edge overflow. R29R1 centered the decorative
   .auth-card::before frame, which exposed a separate visual issue in QA: the rotated,
   irregular pseudo-frame now sits directly on top of the card's existing border/shadow
   rings and reads as a busy extra contour, especially in short landscape.

   The NIGHT card already carries its own three-layer depth treatment via the real card:
     - card border;
     - 5px dark outer ring;
     - 7px gold outer ring + drop shadow.
   The pseudo-frame is decorative only and is not required for layout or card depth.

   On NIGHT iPhone portrait and short landscape only, suppress that one pseudo-element.
   Preserve the proven R29 overflow correction, card box, crest, content, value rail,
   scenery, root/viewport behavior, artwork bytes, and accepted 108% landscape framing.
   DAY and all non-iPhone layouts remain untouched. */
@media (max-width:599px) and (orientation:portrait){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

/* ---------- 040C7R5R30 — DAY Mobile + iPad Back-Frame Simplification ----------
   DAY QA on iPhone portrait/landscape and iPad portrait/landscape showed the same
   visual issue we already resolved on NIGHT mobile: the decorative .auth-card::before
   shell reads as a louder extra edge around an otherwise correct card, making the DAY
   card feel double-framed/busy.

   Scope this to DAY only and only the handheld/tablet layouts Jeff called out:
     - iPhone portrait;
     - iPhone short landscape;
     - iPad portrait;
     - iPad landscape.
   Preserve the actual auth-card box, crest, content, page/scenery geometry, value rail,
   and all locked NIGHT states. Desktop remains untouched. */
@media (max-width:599px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

@media (min-width:600px) and (max-width:899px) and (max-height:500px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

@media (min-width:900px) and (max-width:1279px) and (orientation:landscape){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth-card::before{
    display:none!important;
  }
}

/* ---------- 040C7R5R31 — DAY iPad Portrait Near-Edge Card Widening ----------
   DAY iPad portrait QA still shows obvious beige/tan side fields beside the login card.
   The card-edge simplification in R30 fixed the decorative outer shell, but the real card
   and bottom rail are still intentionally narrower here (92vw with 3vw auth side padding)
   than the approved near-edge phone portrait treatment.

   Scope: DAY iPad portrait only. Expand the auth card and matching four-value rail to the
   same near-edge 96vw footprint used successfully on phone portrait, and trim auth side
   padding from 3vw to 2vw so the composition nearly reaches the viewport edges.

   Preserve hero art, crest, vertical positioning, form geometry, value-rail structure,
   NIGHT theme, iPad landscape, phones, and desktop. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth{
    padding:0 2vw 24px!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .auth-card{
    width:96vw!important;
    max-width:96vw!important;
  }
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .mobile-value-rail{
    width:96vw!important;
    max-width:96vw!important;
  }
}

/* ---------- 040C7R5R32 — DAY iPad Portrait Scene Continuation ----------
   R31 successfully widened the DAY iPad portrait card/rail, but QA still shows a hard
   horizontal cutoff where the hero ends and the beige page surface begins.

   Preserve the approved hero completely: do not change its height, image, size, position,
   or Cranky framing. Instead, paint the SAME approved DAY tablet-portrait asset on .page
   behind the existing hero/auth stack using the same center-top / 100%-auto geometry.
   The hero continues to paint exactly as before; the page-owned copy becomes visible only
   below the hero boundary through the already-transparent auth surroundings, naturally
   revealing the unused lower portion of the same source image behind the login card.

   Scope: DAY iPad portrait only. NIGHT, phones, iPad landscape, desktop, card geometry,
   crest, value rail, and all locked views are untouched. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{
    background-image:var(--hero-040c7-day-tablet-portrait)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
    background-color:#f6efd9!important;
  }
}

/* ---------- 040C7R5R34 — NIGHT iPad Portrait Align to DAY R32 Baseline ----------
   Prepare NIGHT iPad portrait for direct visual QA against the restored DAY R32 state.
   Match the approved DAY portrait tablet geometry and continuation architecture exactly:
     - 2vw auth side padding;
     - 96vw auth card;
     - 96vw four-value rail;
     - page-owned continuation of the same orientation-specific portrait artwork.

   NIGHT uses only its existing approved NIGHT tablet-portrait asset and dark fallback.
   No fade/overlay is introduced. Scope is NIGHT iPad portrait only. Locked NIGHT iPhone,
   desktop, create-account desktop, DAY states, and iPad landscape are untouched. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth{
    padding:0 2vw 24px!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .auth-card{
    width:96vw!important;
    max-width:96vw!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .mobile-value-rail{
    width:96vw!important;
    max-width:96vw!important;
  }
  html[data-cranky-public-theme="dark"] body.cranky-beta-landing .page{
    background-image:var(--hero-040c7-night-tablet-portrait)!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:100% auto!important;
    background-color:#0b2117!important;
  }
}

/* ---------- 040C7R5R35 — DAY iPad Portrait Lower Fallback ----------
   R32 correctly continues the approved 3:4 DAY portrait scenery behind the auth stack.
   Real-device QA shows the remaining hard line occurs only when that background image reaches
   its natural bottom and .page falls through to the generic beige #f6efd9 fallback.

   Do not move, stretch, crop, fade, or regenerate the approved image. Keep the exact R32
   center-top / 100%-auto continuation and change only the exposed fallback color below the
   completed DAY iPad portrait image to the existing dark-forest palette color #1e331c.

   Scope: DAY iPad portrait only. NIGHT iPad, iPad landscape, phones, desktop, hero geometry,
   Cranky framing, auth card, crest, and value rail are untouched. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){
  html:not([data-cranky-public-theme="dark"]) body.cranky-beta-landing .page{
    background-color:#1e331c!important;
  }
}



/* ==========================================================================
   GC7_13IN_LOGIN_COMPACT_001
   Classic front-door login-only correction for the measured 1321x1006
   squarer desktop/laptop composition.

   Measured before this patch:
     auth  = 0..1006
     card  = 134..938 (804px)
     crest = 57..169 (112px)
     rail  = 900..982 (82px)
     card/rail overlap = 38px
     card margin-top = 66px

   Intent:
   - reclaim the verified dead space inside the LOGIN card only;
   - remove the 66px desktop bias that pushes the card downward;
   - give the compacted card a small upward optical lift;
   - leave crest/arch geometry unchanged;
   - leave the bottom rail, hero art, templates, auth behavior and other
     responsive families untouched.

   Scope deliberately excludes the >=3:2 desktop composition, which already
   has its own natural-height card treatment.
   ========================================================================== */
@media (min-width:1280px) and (max-width:1599px) and (max-aspect-ratio:149/100){
  body.cranky-beta-landing .auth-card.login-auth-card{
    min-height:0!important;
    margin-top:0!important;
    padding-top:18px!important;
    padding-bottom:12px!important;
    justify-content:flex-start!important;
    transform:translateY(-18px);
  }

  body.cranky-beta-landing .auth-card.login-auth-card > p.sub{
    margin-bottom:14px!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card .public-links{
    margin-top:8px!important;
    margin-bottom:0!important;
  }
}


/* ==========================================================================
   GC7_LOGIN_DESKTOP_GEOMETRY_R2
   - preserves accepted 1321x1006 R1 geometry
   - compacts wide short-height desktop login (measured 1876x1006)
   - removes redundant desktop login-card ::before frame only
   - preserves crest arch (::after), hero, rail, templates and auth behavior
   ========================================================================== */

@media (min-width:1280px){
  body.cranky-beta-landing .auth-card.login-auth-card::before{
    content:none!important;
    display:none!important;
  }
}

@media (min-width:1600px) and (max-height:1100px){
  body.cranky-beta-landing .auth-card.login-auth-card{
    min-height:0!important;
    margin-top:0!important;
    padding-top:18px!important;
    padding-bottom:12px!important;
    justify-content:flex-start!important;
    transform:translateY(-18px);
  }

  body.cranky-beta-landing .auth-card.login-auth-card > p.sub{
    margin-bottom:14px!important;
  }

  body.cranky-beta-landing .auth-card.login-auth-card .public-links{
    margin-top:8px!important;
    margin-bottom:0!important;
  }
}


/* ==========================================================================
   GC7_NIGHT_TRUSTED_LOGIN_POLISH_001

   Non-Graphics final-RC visual handoff:
   1) NIGHT trusted-family-device panel contrast
      - inline var(--forest) sentence is too dark on the olive panel
      - global NIGHT auth-card link color weakens the gold Who's playing button
      - Forget this device needs a modest NIGHT contrast lift
   2) NIGHT crest breathing room
      - move the crest + its arch together upward by 10px
      - no card-height, form-position, rail, hero, template or auth changes

   DAY remains untouched.
   ========================================================================== */

/* Trusted-device panel NIGHT contrast.
   The attribute selector deliberately keys to the verified existing inline
   panel background so no unrelated section in the login card is recolored. */
html[data-cranky-public-theme="dark"]
body.cranky-beta-landing
.auth-card.login-auth-card
> section[style*="background:rgba(243,194,94,.12)"]
> p{
  color:#f6ebcf!important;
}

html[data-cranky-public-theme="dark"]
body.cranky-beta-landing
.auth-card.login-auth-card
> section[style*="background:rgba(243,194,94,.12)"]
> a.btn.btn-primary[href="/who-is-playing"]{
  color:#173325!important;
  text-shadow:none!important;
}

html[data-cranky-public-theme="dark"]
body.cranky-beta-landing
.auth-card.login-auth-card
> section[style*="background:rgba(243,194,94,.12)"]
> form[action="/device/forget"]
button[type="submit"]{
  color:#f2d27a!important;
}

/* NIGHT-only crest/arch optical lift.
   Transform preserves all accepted card geometry and the crest/arch
   relationship while adding ~10px breathing room before Welcome back. */
html[data-cranky-public-theme="dark"]
body.cranky-beta-landing
.auth-card.login-auth-card::after{
  transform:translate(-50%,-10px)!important;
}

html[data-cranky-public-theme="dark"]
body.cranky-beta-landing
.auth-card.login-auth-card
.auth-badge.brand-flower{
  transform:translate(-50%,-10px)!important;
}