:root{
  --bg: #ffffff;
  --surface: #f6f7fb;
  --text: #0e1525;
  --muted: #556070;
  --border: rgba(14, 21, 37, 0.12);
  --shadow: 0 10px 30px rgba(14,21,37,0.10);

  --brand: #2a7de1;
  --brand2: #7a4cff;
  --accent: #11b981;

  --link: #6a9df1;
  --linkHover: #3779c8;

  --radius: 16px;
  --radius2: 22px;
  --maxw: 1080px;

  --codebg: rgba(42,125,225,0.10);
}

:root[data-theme="dark"]{
  --bg: #0b1020;
  --surface: #111a33;
  --text: #f3f6fc;
  --muted: #cde;
  --border: rgba(233, 238, 252, 0.14);
  --shadow: 0 18px 45px rgba(0,0,0,0.45);

  --link: #6fb3ff;
  --linkHover: #b5d7ff;

  --codebg: rgba(111,179,255,0.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bg);
  color: var(--text);
  font: 19px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--linkHover);text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}

.site-header{
  position:sticky;top:0;z-index:50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  gap: var(--space-4);
}
.brand{
  display:flex;align-items:center;gap: var(--space-4);
  font-weight:800;letter-spacing:-0.3px;
  color:var(--text);
}
.brand-logo{
  border-radius:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.brand-name{font-size:18px}
.brand-dot{font-size:18px;color:var(--muted);font-weight:700}

.topnav{display:flex;gap: var(--space-4);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-link{
  padding:8px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 650;
  font-size: 14px;
}
.nav-link:hover{
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  text-decoration:none;
}
.nav-link.active{
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--text);
}

.nav-toggle{
  display:none;
  width:44px;height:40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: none;
  padding: 9px 10px;
}
.nav-toggle span{
  display:block;height:2px;border-radius:2px;
  background: var(--text);
  margin: 5px 0;
  opacity:0.9;
}

.hero{
  padding: 34px 0 18px;
}
.hero-card{
  background: radial-gradient(1200px 380px at 10% 0%, color-mix(in srgb, var(--brand2) 26%, transparent), transparent),
              radial-gradient(900px 320px at 90% 10%, color-mix(in srgb, var(--brand) 24%, transparent), transparent),
              var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 0 20px;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-4);
  align-items:center;
}
.hero h1{
  margin:0;
  font-size: 34px;
  line-height:1.15;
  letter-spacing:-0.6px;
}
.hero p{margin:10px 0 0;color:var(--muted);font-size:16px}
.hero .cta-row{margin-top:14px;display:flex;gap: var(--space-4);flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 750;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  color: var(--text);
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform: translateY(-1px)}
.btn.primary{
  border-color: color-mix(in srgb, var(--brand) 60%, var(--border));
  background: color-mix(in srgb, var(--brand) 18%, var(--bg));
}
.hero-illus{
  display:flex;align-items:center;justify-content:center;
}
.hero-illus img{
  max-width: 220px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.25));
}

.main{
  padding: 28px 0 54px;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 30px;
}
.card h2{margin:0 0 8px;font-size:18px;letter-spacing:-0.2px}
.card p{margin:0;color:var(--muted)}
.card-icon-row{display:flex;gap: var(--space-4);align-items:center}
.card-icon{width:56px;height:56px;flex:0 0 auto;filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20))}
.span-4{grid-column: span 4;}
.span-6{grid-column: span 6;}
.span-8{grid-column: span 8;}
.span-12{grid-column: span 12;}

.kicker{
  display:inline-flex;gap: var(--space-4);align-items:center;
  background: color-mix(in srgb, var(--codebg) 100%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 750;
  color: var(--text);
  font-size: 13px;
}
.kicker .dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(140deg, var(--brand2), var(--brand));
}

.page-header{
  padding: 24px 0 8px;
}
.page-title{
  display:flex;gap: var(--space-4);align-items:center;flex-wrap:wrap;
}
.page-title h1{margin:0;font-size:28px;letter-spacing:-0.5px}
.page-title img{width:56px;height:56px;filter: drop-shadow(0 14px 24px rgba(0,0,0,0.22))}
.page-sub{margin:10px 0 0;color:var(--muted);max-width: 70ch}

.prose{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 24px;
}
.prose h2{margin:16px 0 8px}
.prose h3{margin:14px 0 8px}
.prose p{margin:10px 0;color:var(--text)}
.prose ul{margin:10px 0 10px 20px}
.prose li{margin:7px 0}
.note{
  border: 1px dashed color-mix(in srgb, var(--brand) 28%, var(--border));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  padding: 12px 12px;
  border-radius: 14px;
  color: var(--text);
}

.tiplist{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.tip{
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.tip .tip-title{font-weight:800;letter-spacing:-0.2px;margin:0 0 6px}
.tip .tip-body{margin:0;color:var(--muted)}
.tip .tagrow{margin-top:10px;display:flex;gap: var(--space-4);flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:750;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--muted);
}

.site-footer{
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.footer-inner{
  padding: 18px 0 10px;
  display:flex;justify-content:space-between;align-items:center;gap: var(--space-4);flex-wrap:wrap;
}
.footer-title{font-weight:800;}
.footer-sub{color:var(--muted);font-size:14px;margin-top:2px}
.theme-toggle{
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--text);
  display:inline-flex;gap: var(--space-4);align-items:center;
  cursor:pointer;
}
.footer-bottom{
  padding: 10px 0 18px;
  display:flex;justify-content:space-between;align-items:center;gap: var(--space-4);flex-wrap:wrap;
  color: var(--muted);
  font-size: 14px;
}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text);text-decoration:none}
.sep{opacity:0.5;margin:0 8px}
.footer-copy{font-weight:600}

@media (max-width: 920px){
  .hero-card{grid-template-columns: 1fr; text-align:left}
  .hero-illus{justify-content:flex-start}
  .span-4{grid-column: span 6;}
  .span-6{grid-column: span 12;}
  .span-8{grid-column: span 12;}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .topnav{
    position:absolute;
    right: 18px;
    top: 64px;
    width: min(92vw, 360px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: 10px;
    box-shadow: var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch;
  }
  .topnav.open{display:flex}
  .nav-link{padding:10px 12px;border-radius:14px}
  .brand-name,.brand-dot{font-size:16px}
  .hero h1{font-size:30px}
  .span-4{grid-column: span 12;}
}

.page-wrap{flex:1; display:flex; flex-direction:column}
main.container{flex:1}

.section{margin: 20px 0;}

.site-footer .footer-inner{justify-content:center;text-align:center}
.site-footer .footer-left, .site-footer .footer-right{flex: 0 0 auto}
.site-footer .footer-left{width:100%}
.site-footer .footer-sub{display:none}
.site-footer .footer-bottom{justify-content:center;text-align:center}
.site-footer .footer-links{display:inline-flex;gap: var(--space-4);align-items:center;flex-wrap:wrap;justify-content:center}
.site-footer .footer-links .sep{display:none}

/* --- Logo sizing + no clipping --- */
.site-header, .site-header .header-inner{overflow: visible}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{display:block;width:260px;height:60px;object-fit:contain;box-shadow:none;border-radius:0}
@media (max-width: 540px){
  .brand-logo{width:150px;height:34px}
}

main.container{padding-bottom: var(--space-4)}

/* --- Extra vertical breathing room --- */
.page-header{margin: var(--space-4) 0 var(--space-4)}
.page-sub{margin-top: 18px}
.prose{margin-top: var(--space-4)}
.card{margin-bottom: 30px}
.tip-card .tip-row{display:flex;align-items:flex-start;gap: var(--space-4);flex-wrap:wrap}
.tip-card .tip-title{font-size:20px;font-weight:900;letter-spacing:-0.2px}
.tip-card .tip-body{margin-top:8px;color:var(--muted);font-size:16px}
.tip-bulb{width:56px;height:56px}

.ibar{opacity:.7; margin:0 5px;}

.main{margin-bottom: var(--space-4)}

/* Tip of the day layout */
.tip-card .tip-row{display:block}
.tip-bulb{float:left; margin:2px 0 6px 0; width:56px; height:56px}
.tip-text{overflow:hidden}

.hero-title{font-size:54px;line-height:1.05;letter-spacing:-0.8px;margin:0}
.hero-subtitle{font-size:27px;line-height:1.2;margin:20px 0 30px 0;font-weight:700}
@media (max-width: 780px){
  .hero-title{font-size:40px}
  .hero-subtitle{font-size:20px}
}

.hero-illus img.hero-img{width:900px;height:auto;max-width:100%}
@media (max-width: 980px){
  .hero-illus img.hero-img{width:520px}
}

.site-footer a.footer-copy{color:var(--muted); text-decoration:none; font-weight:700}
.site-footer a.footer-copy:hover{text-decoration:underline}

/* Keep nav & footer text size stable */
.site-header, .site-header * { font-size: 16px; }
.site-footer, .site-footer * { font-size: 16px; }

:root{
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.25rem; /* ~20px */
  --space-5: 1.5rem;
}

/* More breathing room in text blocks */
h1{margin-bottom: var(--space-3)}
h2{margin-bottom: var(--space-2)}
p{margin: var(--space-2) 0}
.card h2 + p{margin-top: var(--space-2)}
.card p + p{margin-top: var(--space-2)}

/* Header logo: no pill / no shadow */
.brand{background: transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important}
.brand-logo{box-shadow:none !important; border-radius:0 !important}

/* Reverse hero gradient: lighter top -> darker bottom */
.hero-card{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--card) 88%, white 12%) 0%,
    color-mix(in srgb, var(--card) 92%, black 8%) 100%);
}

/* Bigger hero & Tip of the Day text */
.hero-title{font-size: 3.2rem}
.hero-subtitle{font-size: 1.6rem}
.hero p{font-size: 1.05rem}
@media (max-width: 780px){
  .hero-title{font-size: 2.4rem}
  .hero-subtitle{font-size: 1.25rem}
}

/* Text vertical rhythm */
h1{margin-bottom: 1.6rem}
h2{margin-bottom: 1.2rem}
p{margin: 1.0rem 0}
.page-sub{margin-top: 1.6rem}
.card h2 + p{margin-top: 1.0rem}

/* Frosted header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.hero-card{background: var(--card) !important}

.hero-illus img.hero-img{box-shadow:none !important; filter:none !important}
.hero-illus img.hero-img{width:1350px;height:auto;max-width:100%}
@media (max-width: 980px){
  .hero-illus img.hero-img{width:650px}
}

.brand, .brand *{box-shadow:none !important; border-radius:0 !important}

.page-title img{width:84px;height:84px}
.page-title h1{font-size:2.2rem}

/* --- Spacing system (rev6) --- */
:root{
  --space-card: 1.6rem; /* ~30px at 19px base */
}
.grid{gap: var(--space-card) !important}
.card{margin: 0 !important}
.hero{margin-bottom: var(--space-card) !important}
.tip-card{margin-top: 0 !important}
.main{margin-bottom: var(--space-card) !important}
main.container{padding-bottom: var(--space-card) !important}

/* Ensure sections inside the home grid have breathing room */
.grid > .card.span-12{margin-top: var(--space-card)}
.grid > .card.span-12:first-of-type{margin-top: 0}

/* --- Vertical rhythm --- */
h1{margin: 0 0 var(--space-card) 0}
h2{margin: 0 0 var(--space-card) 0}
p{margin: 0 0 var(--space-card) 0}
ul{margin: 0 0 var(--space-card) 0}

/* Tip of the Day prominence */
.tip-card{padding: calc(var(--space-card) * 1.1)}
.tip-title{font-size: 2rem; line-height:1.15}
.tip-body{font-size: 1.5rem; line-height:1.35}
.tip-bulb{width:96px; height:96px}

/* === Rev7 spacing normalization === */
:root{
  --space-card: 1.6rem; /* ~30px */
  --c-900:#111827; /* darkest */
  --c-700:#374151; /* darker */
  --c-600:#4B5563; /* dark gray */
}

/* Home layout spacing: never let cards touch */
.grid{gap: var(--space-card) !important;}
.grid > *{margin:0 !important;}
/* In case some sections are outside the grid */
.home-stack > * + *{margin-top: var(--space-card) !important;}
/* Ensure footer never touches last card */
main.container{padding-bottom: var(--space-card) !important;}

/* === Rev7 typography system (5 sizes) === */
:root{
  --fs-xs: 0.9rem;
  --fs-sm: 1.0rem;   /* base */
  --fs-md: 1.15rem;
  --fs-lg: 1.45rem;
  --fs-xl: 2.2rem;
}

body{color: var(--c-700); font-size: var(--fs-sm); line-height:1.55;}
a{color: var(--c-900);}

h1,h2,h3{color: var(--c-900); font-weight:800;}
h1{font-size: var(--fs-xl); line-height:1.1;}
h2{font-size: var(--fs-lg); line-height:1.2;}
h3{font-size: var(--fs-md); line-height:1.25;}

.small, .muted, .meta{font-size: var(--fs-xs); color: var(--c-600);}

p, li{color: var(--c-700);}

/* Tip card */
.tip-title{font-size: var(--fs-lg) !important; color: var(--c-900);}
.tip-body{font-size: var(--fs-md) !important; color: var(--c-700);}

/* Keep nav/footer size unchanged */
.site-header, .site-header *{font-size: 16px !important;}
.site-footer, .site-footer *{font-size: 16px !important;}

/* === Rev7 emoji icons === */
.emoji-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  height: 56px;
  font-size: 34px;
  line-height: 1;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  border: 1px solid var(--border);
  margin-right: 4px;
  flex: 0 0 auto;
}
.emoji-icon.sm{width:48px;height:48px;font-size:30px;border-radius:12px;margin-top:-20px}
.card-head{display:flex; align-items:flex-start;}
.card-head h2, .card-head h3{margin:0;}
/* page headers */
.page-title{display:flex; align-items:center; gap: 14px;}
.page-title .emoji-icon{margin-right:0;}

/* Hero card should match other cards */
.hero-card{background: var(--card) !important;}
.hero-title{font-weight:900 !important;}

/* Contact page layout */
.contact-wrap{max-width: 860px; margin: 0 auto;}
.contact-wrap .card{padding: 1.6rem;}
.contact-wrap form input, .contact-wrap form textarea{font-size: var(--fs-md); padding: 14px 14px;}
.contact-wrap .intro{text-align:center; margin-bottom: var(--space-card);}

/* === Rev8: theme-safe typography + spacing === */
:root{
  --space-card: 1.6rem; /* ~30px */
  --fs-base: 1rem;
  --fs-1: 0.9rem;
  --fs-2: 1rem;   /* base */
  --fs-3: 1.15rem;
  --fs-4: 1.45rem;
  --fs-5: 2.1rem;
  --ink-1: var(--text);
  --ink-2: color-mix(in srgb, var(--text) 90%, var(--bg));
  --ink-3: color-mix(in srgb, var(--text) 80%, var(--bg));
}

body{font-size: var(--fs-2); color: var(--ink-2);}
h1,h2,h3{color: var(--ink-1);}
p,li{color: var(--ink-2);}
.small,.muted,.meta{color: var(--ink-3); font-size: var(--fs-1);}

h1{font-size: var(--fs-5); font-weight: 800; line-height:1.08;}
h2{font-size: var(--fs-4); font-weight: 800; line-height:1.15;}
h3{font-size: var(--fs-3); font-weight: 800; line-height:1.2;}

.tip-title{font-size: var(--fs-4) !important;}
.tip-body{font-size: var(--fs-3) !important;}

.grid{gap: var(--space-card) !important;}
.grid > *{margin:0 !important;}
main.container{padding-bottom: var(--space-card) !important;}

/* Stronger vertical rhythm between headings/paras/lists */
h1, h2, h3{margin: 0 0 var(--space-card) 0;}
p, ul, ol{margin: 0 0 var(--space-card) 0;}
li{margin: 0 0 0.6rem 0;}
ul li:last-child{margin-bottom:0;}

/* Footer toggle: reduce emoji/text gap */
.theme-toggle{gap: 8px !important;}
.theme-toggle .emoji{margin-right: 6px !important;}

/* Remove pill UI remnants */
.tag, .tagrow, .pill, .pills, .chips{display:none !important;}

/* Hero as page header */
.page-hero{border:none !important; background:transparent !important; box-shadow:none !important; padding:0 !important;}
.page-hero .hero-inner{padding:0 !important;}

/* Page headers with images */
.page-hero2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2rem;
  padding: 10px 20px;
  margin: 0 0 var(--space-card) 0;
}
.page-hero2 .hero-text{max-width: 620px;}
.page-hero-img{width: 520px; max-width: 45%; height:auto;}
@media (max-width: 860px){
  .page-hero2{flex-direction:column; align-items:flex-start;}
  .page-hero-img{max-width: 100%; width: 680px;}
}

/* Daily list */
.tiplist-card{padding: 1.6rem;}
.tiplist-daily{margin:0; padding-left: 1.2rem;}
.tipday{padding: 0 0 var(--space-card) 0; border-bottom: 1px solid var(--border);}
.tipday:last-child{border-bottom:none; padding-bottom:0;}
.tipday-head{display:flex; flex-wrap:wrap; gap: 0.6rem 1rem; align-items:baseline;}
.tipday-date{font-size: var(--fs-1); color: var(--ink-3);}
.tipday-title{font-weight:800; color: var(--ink-1);}
.tipday-body{margin-top: 0.6rem;}

/* Ensure contrast in dark mode */
:root[data-theme="dark"] .card{background: color-mix(in srgb, var(--surface) 92%, black 8%);}
:root[data-theme="dark"] a{color: var(--link);}
:root[data-theme="dark"] .nav-link{color: var(--text);}
:root[data-theme="dark"] .nav-link.active{background: color-mix(in srgb, var(--surface) 70%, black 30%); color: var(--text);}

/* === Rev9 typography normalization === */
html{font-size:20px;}
body{font-size:1rem; line-height:1.6;}

/* === Rev9 home hero === */
.hero-card, .hero-card.card{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.hero-card .hero-title{margin-bottom: 0.9rem !important;}
.hero-card .hero-subtitle{margin-bottom: 1.1rem !important;}
.hero-card .hero-desc{margin-bottom: 0 !important;}
.hero-card .hero-image{transform: scale(1.5); transform-origin: right center;}
@media (max-width: 860px){
  .hero-card .hero-image{transform: scale(1.25); transform-origin: center;}
}

/* === Rev9 tip layout === */
.tip-card{display:flex; gap: 1rem; align-items:flex-start;}
.tip-card .emoji-icon{margin-right: 0 !important;}
.tip-text{flex:1;}

/* === Rev9 tips page spacing === */
.tiplist-card h2{margin-bottom: 1rem !important;}
.tiplist-card .muted{margin-bottom: 1.2rem !important;}
.tiplist-daily{margin-top: 0 !important;}

/* === Rev10 base type === */
html{font-size:18px !important;}

/* === Rev10 hero layout fix (prevent overlap) === */
.hero-inner{display:flex; align-items:center; justify-content:space-between; gap: 2rem;}
.hero-text{flex: 1 1 0; min-width: 0;}
.hero-image{flex: 0 0 auto; width: 540px; max-width: 45%; height:auto; transform:none !important;}
@media (max-width: 860px){
  .hero-inner{flex-direction:column; align-items:flex-start;}
  .hero-image{width: 680px; max-width: 100%;}
}

/* === Rev10: spacing below navbar for page headers === */
.page-hero2{margin-top: 30px;}

/* === Rev10: footer separator spacing === */
.site-footer .sep{margin: 0 10px !important;}

/* === Rev11 content link color === */
.container a{color:#2563eb;}
.container a:hover{text-decoration:underline;}
.site-header a, .site-footer a{color:inherit;}

/* === Rev11 hero + tip layout === */
.hero-inner{display:flex; align-items:center; justify-content:space-between; gap: 2.2rem;}
.hero-text{flex:1 1 0; min-width: 0;}
.hero-image{flex:0 0 auto; width: 540px; max-width: 45%; height:auto;}
@media (max-width: 860px){
  .hero-inner{flex-direction:column; align-items:flex-start;}
  .hero-image{max-width:100%; width: 680px;}
}

.tip-card{display:block;}
.tip-head{display:flex; align-items:center; gap: 1rem; margin-bottom: 0.9rem;}
.tip-bulb{flex:0 0 auto;}
.tip-body{margin-top: 0 !important;}
/* More space below navbar on key pages */
.page-hero2{margin-top: 30px;}

.tiplist-card h2{margin-bottom: 1rem !important;}
.tiplist-card .muted{margin-bottom: 1.2rem !important;}
.tiplist-daily{margin-top: 0 !important;}
.tip-today-card{padding:1.6rem;}

/* === Rev11b force hero row on desktop === */
.page-hero .hero-inner{display:flex !important; flex-direction:row !important;}

/* === Rev12 hero right (no overlap) === */
.page-hero .hero-inner{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 2.4rem !important;
}
.page-hero .hero-text{flex:1 1 0; min-width:0;}
.page-hero .hero-image{
  flex:0 0 auto;
  width: 620px;
  max-width: 46%;
  height:auto;
  display:block;
  margin-left:auto;
  float:none !important;
}
@media (max-width: 860px){
  .page-hero .hero-inner{flex-direction:column !important; align-items:flex-start !important;}
  .page-hero .hero-image{max-width:100%; width: 720px; margin-left:0;}
}

/* === Rev13 overrides === */
html{font-size:18px !important;}
/* Hero layout: image right, no overlap */
.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
}
.hero-text{flex:1 1 0; min-width:0;}
.hero-image{
  flex:0 0 auto;
  width: 560px;
  max-width: 46%;
  height:auto;
  display:block;
  margin-left:auto;
}
@media (max-width: 900px){
  .hero-inner{flex-direction:column; align-items:flex-start;}
  .hero-image{max-width:100%; width: 700px; margin-left:0;}
}

/* Tip header: bulb left of header text, body below */
.tip-head{display:flex; align-items:flex-start; gap: 1rem; margin-bottom: 0.9rem;}
.tip-bulb{font-size:2rem; line-height:1; display:inline-block; margin-top:0.2rem;}
.tip-card .tip-body{margin-top:0 !important;}

/* Content links blue (excluding header/footer) */
.container a{color:#2563eb;}
.container a:hover{text-decoration:underline;}
.site-header a, .site-footer a{color:inherit;}

/* === Rev14 layout + spacing fixes === */

/* Make base typography consistent (keep 18px base) */
html{font-size:18px !important;}
body{font-size:1rem !important; line-height:1.6 !important;}

/* Grid spacing between cards (>= 30px) */
:root{ --space-6: 1.7rem; } /* ~30.6px at 18px base */
.grid{ gap: var(--space-6) !important; }

/* Ensure grid items don't add random margins */
.grid > .card{ margin: 0 !important; }

/* Tip card: bring header closer to bulb, style like other text */
.tip-head{ gap: 1.25rem !important; } /* ~20-22px */
.tip-title{ color: var(--muted) !important; }
.tip-body{
  color: var(--text) !important;
  font-size: 1.15rem !important;
  font-weight: 600;
}

/* Common internal spacing (more room between headings/paragraphs/bullets) */
.card h2{ margin: 0 0 1.1rem 0 !important; }
.card p{ margin: 0.9rem 0 0 0 !important; }
.rule-list{ margin: 1.1rem 0 0 0 !important; padding-left: 1.2rem; }
.rule-list li{ margin: 0.8rem 0 !important; }
.muted.ready{ margin-top: 1.2rem !important; }
.pill-row{ margin-top: 1.1rem !important; display:flex; gap: 0.65rem; flex-wrap:wrap; }
.card-link{ margin-top: 1.1rem !important; }

/* Vertical spacing between sections on inner pages (about/work/etc.) */
main.container section + section{ margin-top: var(--space-6) !important; }
.page-hero2 h1{ margin-bottom: 1.2rem !important; }
.page-hero2 .page-sub{ margin-top: 0 !important; margin-bottom: var(--space-6) !important; }

/* === Rev15 final tweaks === */

/* 1) Space between hero and tip card ~60px */
/* .hero{ margin-bottom: 3.35rem !important; } /* ~60px at 18px base */
/* .main{ padding-top: 0 !important; } */

/* 2) Tip header closer to bulb + title grey; tip in white oval */
.tip-head{ gap: 1.1rem !important; } /* ~20px */
.tip-title{ color: var(--muted) !important; }
.tip-oval{
  margin-top: 1rem;
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  display: inline-block;
  max-width: 100%;
}

[data-theme="dark"] .tip-oval{
  background: color-mix(in srgb, var(--surface) 70%, white 30%);
}

/* 3) Home cards: emoji left of header, paragraph below */
.card-head-row{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.card-head-row h2{ margin: 0 !important; }
.card-head-row .emoji-icon{ flex:0 0 auto; }

/* 4) Bigger core rules header on home */
.core-card h2{ font-size: 1.6rem !important; }

/* 5/6) Tips page hr margin symmetry */
.tiplist-card hr{ margin: 1.6rem 0 !important; }

/* 7) Links: no underline on hover/active; slightly darker */
.container a:hover,
.container a:active{
  text-decoration: none !important;
  color:#1d4ed8 !important; /* slightly darker */
}

/* 8) Larger headers + more vertical margin between sections */
.card h2{ font-size: 1.45rem !important; line-height:1.25; }
.card p + h2,
.card ul + h2,
.card ol + h2,
.card hr + h2{
  margin-top: 2.2rem !important;
}
.card h3{ font-size: 1.22rem !important; }
.card p + h3,
.card ul + h3,
.card ol + h3,
.card hr + h3{
  margin-top: 2rem !important;
}

/* ensure headers have breathing room */
.card h2{ margin-bottom: 1.25rem !important; }
.card h3{ margin-bottom: 1.1rem !important; }

/* 9/10) Footer: tighter link spacing + tagline same style/size as copyright */
.site-footer .footer-links{ gap: 0.55rem !important; }
.site-footer .footer-sep{ padding: 0 0.25rem !important; }
.site-footer .footer-tagline{
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}

/* === Rev16 card layout & spacing fixes === */

/* Grid: ensure consistent 3-column layout on desktop */
.grid{
  display:grid !important;
  grid-template-columns: repeat(12, minmax(0,1fr)) !important;
  gap: 1.9rem !important; /* ~34px */
}
.span-4{ grid-column: span 4 !important; }
.span-12{ grid-column: span 12 !important; }

@media (max-width: 900px){
  .span-4{ grid-column: span 12 !important; }
}

/* Prevent cards from stretching full-width unexpectedly */
.card{
  max-width: 100%;
}


/* === Rev18 consolidated spacing + alignment === */

/* Cards: consistent internal rhythm (matches Tips/Email/Social/Work) */
.card h2{
  margin: 0 0 1.3rem 0;
  line-height: 1.25;
}
.card h3{
  margin: 2.1rem 0 1.1rem 0;
  line-height: 1.25;
}
.card p{
  margin: 1.05rem 0 0 0;
}
.card ul, .card ol{
  margin: 1.15rem 0 0 1.2rem;
}
.card li{
  margin: 0.85rem 0;
}

/* Extra breathing room when headings follow content */
.card p + h2,
.card ul + h2,
.card ol + h2,
.card hr + h2{
  margin-top: 2.2rem;
}
.card p + h3,
.card ul + h3,
.card ol + h3,
.card hr + h3{
  margin-top: 2rem;
}

/* Home + Tip header rows: vertically center emoji with header */
.card-head-row{
  display:flex;
  align-items:center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.card-head-row h2{ margin:0; }
.card-head-row .emoji-icon.sm{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.tip-head{
  display:flex;
  align-items:center;
  gap: 0.7rem; /* ~20px feel without pushing too far */
}
.tip-bulb{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.tip-title{ line-height: 1.25; }

/* Tips page HR: slightly more bottom margin */
.tiplist-card hr{
  margin: 1.6rem 0 2.6rem 0 !important;
}

/* Prose (About/Privacy) inherits same rhythm inside card */
.prose h2, .prose h3, .prose p, .prose ul, .prose ol, .prose li{
  /* rely on .card rules above for consistency */
}

/* Keep home cards grid spacing stable */
.home-stack .grid{ gap: var(--space-6) !important; }


/* === Rev19 alignment + button hover (no shift) === */

/* Reduce space between hero and first card */
.hero{ padding: 34px 0 10px; }
.main{ padding: 18px 0 54px; }

/* Vertically center headings next to emoji boxes */
.card-head-row{ align-items:center; }
.card-head-row h2{
  display:flex;
  align-items:center;
  min-height: 48px; /* match .emoji-icon.sm */
  line-height: 1.05;
}

/* Tip header row: use same boxed emoji style as cards */
.tip-head{
  display:flex;
  align-items:center;
  gap: 0.6rem;
}
.tip-bulb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  font-size:30px;
  line-height:1;
  border-radius:12px;
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.tip-head-text{
  display:flex;
  align-items:center;
  min-height:48px;
}

/* Buttons: hover/active without shifting */
.btn{ will-change: auto; }
.btn:hover{
  transform: none !important;
  background: color-mix(in srgb, var(--brand) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.btn:active{
  transform:none !important;
  background: color-mix(in srgb, var(--brand) 14%, var(--bg));
  border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
}
.btn.primary:hover{
  background: color-mix(in srgb, var(--brand) 22%, var(--bg));
}
.btn.primary:active{
  background: color-mix(in srgb, var(--brand) 26%, var(--bg));
}


/* Ensure tips cards use full container width */
.tip-today-card,.tiplist-card{width:100%}

/* Mobile navigation toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 10px; /* extra right padding */
  margin-right: 20px;
  cursor: pointer;
}

.hamburger {
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}

/* Show hamburger on mobile */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
}