/* ===================================================================
   MrScreenOn — home.css  (Design v3.0 "Graphite & Volt")
   Fallback hero, page shells: auth, account, about.
   =================================================================== */

/* Fallback hero (only when no banners AND estimator hero is absent) */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 84% 28%, rgba(198,240,53,.16), transparent 62%),
    #FFFFFF;
  border-bottom:1px solid var(--line);
}
.hero-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:40px;align-items:center;
  padding-block:56px;
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:36px;text-align:center}
}
.hero h1{margin-bottom:16px}
.hero h1 .line-2{display:block;color:#5F7F06}
.hero .lead{max-width:440px;margin-bottom:26px}
@media (max-width:960px){.hero .lead{margin-inline:auto}}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
@media (max-width:960px){.hero-cta{justify-content:center}}
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.hero-art img{width:100%;max-width:430px}
@media (max-width:960px){.hero-art{min-height:250px;order:-1}}

/* Trust strip card (used on fallback) */
.trust-strip{
  position:relative;z-index:4;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:16px 10px;
  margin-top:26px;
}
.trust-strip .t-item{display:flex;align-items:center;gap:11px;padding:4px 12px}
.trust-strip .t-item + .t-item{border-left:1px solid var(--line)}
.trust-strip b{display:block;font-family:var(--f-display);font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.3}
.trust-strip small{color:var(--muted);font-size:.76rem}
.trust-strip-flat{margin-top:0}
@media (max-width:900px){
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-strip .t-item:nth-child(3){border-left:0}
}
@media (max-width:520px){
  .trust-strip{grid-template-columns:minmax(0,1fr)}
  .trust-strip .t-item + .t-item{border-left:0;border-top:1px solid var(--line);padding-top:12px}
}

/* Dark stats band */
.stat-bar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  background:var(--navy-grad);
  border-radius:var(--r-lg);
  padding:26px 14px;
}
.stat-bar .s-item{display:flex;align-items:center;gap:14px;padding:2px 16px}
.stat-bar .s-item + .s-item{border-left:1px solid rgba(255,255,255,.1)}
.stat-bar .tile{background:rgba(198,240,53,.12);color:var(--volt)}
.stat-bar .s-val{font-family:var(--f-display);font-size:1.6rem;font-weight:700;color:var(--volt);line-height:1.1}
.stat-bar small{display:block;color:#8B95A0;font-size:.78rem}
.stat-bar .s-cap{display:block;color:#737E89;font-size:.72rem;margin-bottom:1px}
@media (max-width:900px){
  .stat-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .stat-bar .s-item + .s-item{border-left:0}
  .stat-bar .s-item:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}
}
@media (max-width:520px){
  .stat-bar{grid-template-columns:minmax(0,1fr)}
  .stat-bar .s-item:nth-child(even){border-left:0}
}

/* Booking panel (also used inside the dark hero) */
.booking-panel{
  max-width:820px;margin-inline:auto;
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
}

/* Two-column: content + sticky summary */
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:start}
.split-aside{grid-template-columns:minmax(0,1fr) 340px}
.split-feature{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}
.split-feature-rev{grid-template-columns:.95fr 1.05fr;align-items:center;gap:44px}
@media (max-width:1000px){
  .split,.split-aside{grid-template-columns:minmax(0,1fr)}
  .split-feature,.split-feature-rev{grid-template-columns:minmax(0,1fr);gap:28px}
}
.sticky-col{position:sticky;top:96px}
@media (max-width:1000px){.sticky-col{position:static}}

/* Rich text */
.prose{line-height:1.8;color:var(--body)}
.prose h2{font-size:1.35rem;margin:30px 0 12px}
.prose h3{font-size:1.12rem;margin:24px 0 10px}
.prose p{margin-bottom:15px}
.prose ul,.prose ol{margin:0 0 15px 20px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:7px}
.prose a{color:var(--blue);text-decoration:underline}

/* Auth */
.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:36px 20px;
  background:
    radial-gradient(700px 420px at 82% 10%, rgba(198,240,53,.18), transparent 60%),
    var(--tint);
}
.auth-card{width:100%;max-width:430px}
.auth-avatar{
  width:62px;height:62px;margin:0 auto 14px;
  display:grid;place-items:center;border-radius:20px;
  background:var(--ink);color:var(--volt);
}
.auth-or{
  display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--muted);font-size:.78rem;letter-spacing:.1em;
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px;background:#fff;border:1.5px solid #D6DBE1;border-radius:var(--r-sm);
  font-family:var(--f-display);font-size:.9rem;font-weight:700;color:var(--ink);transition:var(--t);
}
.btn-google:hover{border-color:var(--ink);box-shadow:var(--sh-xs);transform:translateY(-2px)}

/* Account area */
.acct{display:grid;grid-template-columns:252px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.acct{grid-template-columns:minmax(0,1fr)}}
.acct-nav{
  position:sticky;top:96px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
@media (max-width:900px){.acct-nav{position:static}}
.acct-user{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line);background:var(--tint)}
.acct-user i{
  width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  background:var(--ink);color:var(--volt);font-style:normal;font-weight:700;
  font-family:var(--f-display);flex-shrink:0;
}
.acct-user b{display:block;font-size:.94rem;line-height:1.3}
.acct-nav nav{display:flex;flex-direction:column;padding:8px}
.acct-nav nav a{padding:11px 14px;border-radius:var(--r-xs);font-size:.91rem;font-weight:500;transition:var(--t)}
.acct-nav nav a:hover{background:var(--tint);color:var(--ink)}
.acct-nav nav a.is-active{background:var(--volt-soft);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--volt)}
.acct-nav nav a.danger{color:var(--red);margin-top:6px;border-top:1px solid var(--line);border-radius:0}

.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
  transition:transform var(--t),box-shadow var(--t);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.stat-card small{display:block;color:var(--muted);font-size:.79rem;margin-bottom:5px}
.stat-card b{font-family:var(--f-display);font-size:1.55rem;font-weight:700;color:var(--ink)}

/* Typeahead dropdown */
.search-results{
  position:relative;margin-top:8px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);overflow:hidden;z-index:80;
}
.search-results a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--ink);transition:var(--t);
}
.search-results a:last-child{border-bottom:0}
.search-results a:hover{background:var(--volt-soft)}
.search-results .no-match{padding:16px;color:var(--muted);font-size:.9rem}

/* About page */
.about-art{
  background:var(--tint);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:26px;
  display:grid;place-items:center;
}
.about-art img{max-width:100%;height:auto;display:block}

.cms-body p{margin-bottom:14px}
.cms-body ul,.cms-body ol{margin:0 0 14px 20px}
.cms-body li{margin-bottom:6px}

.step-num{
  position:absolute;top:14px;right:16px;
  font-family:var(--f-display);font-weight:700;font-size:.85rem;
  color:#5F7F06;opacity:.6;
}
.tile-card{position:relative}

.why-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;
  transition:transform var(--t),box-shadow var(--t);
}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.why-card .why-ring{margin:0 0 14px}
.why-card h4{margin-bottom:8px}
.why-card p{font-size:.88rem;color:var(--body);margin:0;line-height:1.65}