/* =========================
   101Daily Core (101.css)
   Subdomain-safe base + tokens
   ========================= */

/* =========================================================
   101Daily — Voice & Tone (for writers + builders)
   Goal: short, kind, practical. Teacher energy, not lecturer.

   1) Core voice
      - Simple > clever. Active verbs. Short lines.
      - Warm, human, non-judgy. “Let’s” over “You must.”
      - Show the next step, not the whole mountain.

   2) Default rhythm
      - Headline (promise) → one-sentence payoff → CTA.
      - Use lists of 3. Keep clauses under ~14 words when possible.
      - Swap long sentences for two short ones.

   3) Brand phrases (safe to reuse)
      - “Short steps. Real relief.”
      - “Small shifts. Big difference.”
      - “Coach in your pocket (with AI prompts).”
      - “Gentle, not fragile.”

   4) Microcopy patterns
      - Tiles: Noun + benefit → “7-Day Plan — daily focus, small wins.”
      - CTAs: Verb + outcome → “Get the Kit,” “Start Your Reset,” “See the Prompts.”
      - Empty states: “Nothing here yet. One good step is coming.”

   5) Empathy lines (sprinkle, don’t flood)
      - “You’re not behind. You’re starting now.”
      - “Good enough counts.”
      - “Trade pressure for rhythm.”

   6) AI-prompts positioning (1–2 lines)
      - “When you need extra help, use our ready-to-paste AI prompts to personalize your plan—your schedule, your energy, your people.”
      - “Not to outsource your life—just to make better choices easier.”

   7) Evidence without heaviness
      - “Why it works: one plain sentence + 1–2 credible sources.”
      - Avoid numbers soup. Pick the one stat that matters.

   8) Words we prefer
      - Use: calm, steady, gentle, simple, rhythm, reset, practice.
      - Avoid: hack, crush, domination, perfect, optimize (unless technical).

   9) Accessibility & clarity
      - Write link text that says the result (“Download the kit,” not “Click here”).
      - Alt text = what the image shows + why it’s here.

   10) Quick QA before publish
      - Promise clear? One action obvious? Jargon removed?
      - Links styled consistently? CTA above the fold?
      - Mobile checks: hero, grid tiles, footer legibility on dark.
========================================================= */

/* -----------------------
   Global tokens (safe defaults)
   ----------------------- */

:root
	{

		/* Text + surfaces (light) */
		
		--core-a: #0F7A53;
        --core-b: #0A6646;


		--ink: #0f1f17;                /* main text on light */
		--ink-muted: #2a3b32;          /* secondary text on light */
		--bg: #ffffff;                 /* page bg */
		--card: #ffffff;               /* card bg */
		--ui-quiet: #f6f9f7;           /* soft strip/bg */

		/* Links (light) */
		--link: #C9A44E;				/* gold */
		--link-hover: #B38B2A;
		--link-visited: #0d5e46;

		/* Dark surfaces */
		--surface-dark: #0F7A53;       /* masters green - softer */
		--surface-dark-2: #123024;     /* slightly lighter */

		/* Text + links on dark */
		--ink-on-dark: #ffffff;
		--link-on-dark: #C9A44E;
		--link-on-dark-hover: #B38B2A;

		/* Buttons */
		--btn-bg: #2e6f55;             /* primary button */
		--btn-bg-hover: #255a45;
		--btn-ink: #ffffff;

		/* Misc */
		--hairline: rgba(0,0,0,.08);   /* dividers/borders */

		/* Layout helpers */
		--container: 1100px;
		--radius: 14px;

		--masters-green: #0A6646;
		--masters-green-soft: #0F7A53;
		--gold-primary: #C9A44E;
		--gold-bright: #D2B46C;
		--gold-deep: #B38B2A;
		--gold-light: #E5D4A1;
		
		--text-light: #ffffff;      /* or a soft gold, depending on design */
        --highlight: #C9A44E;       /* gold accent */


	}


body, button, input, textarea, select
	{
		font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
		font-weight: 500;
		font-size: 16px;
		letter-spacing: 0.2px;
		line-height: 1.35;
	}

h1
	{
		font-size: 24px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
		line-height: 50px;
	}
	
h2
	{
		font-size: 18px;
		font-style: normal;
		font-variant: normal;
		font-weight: 600;
		line-height: 36px;
	}
	
h3
	{
		font-size: 14px;
		font-style: normal;
		font-variant: normal;
		font-weight: 600;
		line-height: 32px;
	}
	
p
	{
		font-size: 14px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 24px;
	}
	
blockquote
	{
		font-size: 21px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 42px;
	}
	
pre
	{
		font-size: 13px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 26px;
	}

html, body
	{
		background: var(--bg);
		color: var(--ink);
		margin:0;
	}

.img-wide
	{
		max-width: 1100px;
		width: 95%;
		height: auto;
		margin: 0 auto;
		display: block;
	}

h1,h2,h3,h4,h5,h6
	{
		color: var(--ink);
		margin: 0 0 .35em;
		text-align:center;
	}
	
p,li,small
	{
		color: var(--ink);
		line-height: 1.55;
	}
	
.muted
	{
		color: var(--ink-muted);
	}
	
.subdued {
  opacity: .7;
}

.max-600 { max-width: 600px; margin: 0 auto; }
.pad { padding: 12px 18px; }



/* -----------------------
   Containers
   ----------------------- */
.container
	{
		max-width: var(--container);
		margin: 0 auto;
		text-align:center;
	}
	
.section
	{
		padding: 20px 0;
		text-align:center;
	}
	
.center
	{
		text-align:center;
	}

/* -----------------------
   Cards
   ----------------------- */
.card
	{
		background: var(--card);
		color: var(--ink);
		border-radius: var(--radius);
		box-shadow: 0 1px 8px rgba(0,0,0,.1);
		padding-left: 18px;
		padding-right: 18px;
	}

/* -----------------------
   Grids (with centering)
   ----------------------- */
   
   .grid-2, .grid-3 { width: 100%; }

.grid-2{ display:grid; gap:24px; grid-template-columns: repeat(12,1fr); justify-content:center; justify-items:center; }
.grid-2 > *{ grid-column: span 6; }
@media (max-width:820px){ .grid-2 > *{ grid-column: span 12; } }

.grid-3{ display:grid; gap:18px; grid-template-columns: repeat(12,1fr); justify-content:center; justify-items:center; }
.grid-3 > *{ grid-column: span 4; }
@media (max-width:900px){ .grid-3 > *{ grid-column: span 6; } }
@media (max-width:620px){ .grid-3 > *{ grid-column: span 12; } }

/* -----------------------
   Navbar
   ----------------------- */

.accent
	{
		color: var(--core-accent);
		font-weight:800;
	}
	
.navbar
	{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding: 14px 20px;
		background: #0F7A53;
	}
	
.logo
	{
		font-weight: 800;
		text-decoration:none;
		color: #C9A44E;
	}
	
.nav-links
	{
		list-style:none;
		display:flex;
		gap:16px;
		margin:0;
		padding:0;
	}
	
.nav-links a
	{
		text-decoration:none;
		color: #C9A44E;
		opacity:0.9;
	}
	
.nav-links a.active
	{
		opacity:1;
		font-weight:700;
	}
	
	.nav-links a:visited { color: #C9A44E; }
    .nav-links a:hover { opacity: 1; }


/* -----------------------
   Hero / dark surfaces
   ----------------------- */
.hero
	{
		position:relative;
		z-index:0;
	}
	
.hero > *
	{
		position:relative;
		z-index:1;
	}

/* Generic dark surface helper */
.hero.on-dark{
    background: linear-gradient(135deg,var(--core-a),var(--core-b));
    text-align:center; padding:60px 20px 48px;}
    
.on-dark{ background: var(--surface-dark); color: var(--ink-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .on-dark small{ color: var(--ink-on-dark); }

/* Links on dark */
.on-dark a{ color: var(--link-on-dark); text-decoration-color: rgba(255,255,255,.85); }
.on-dark a:hover{ color: var(--link-on-dark-hover); text-decoration-color:#fff; }

/* -----------------------
   Links (light surfaces)
   ----------------------- */
a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}
a:hover{ color: var(--link-hover); text-decoration-thickness: .14em; }
a:visited{ color: var(--link-visited); }

a:focus, .btn:focus {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}


/* -----------------------
   Buttons / CTAs
   ----------------------- */
.btn, .cta {
  display:inline-block; background: var(--btn-bg); color: var(--btn-ink);
  border-radius: 12px; padding: 12px 20px; font-weight: 700; text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: background .15s ease, transform .15s ease;
}

.btn:hover, .cta:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }


.badge-center {
  text-align: center;
  width: 100%;
  margin: 1rem 0;
}

.badge-instant-download {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px; /* full pill */
  border: 1px solid #DDDDDD;
  background-color: #FFFFFF;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: #C9A44E; /* your soft gold accent */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}


/* -----------------------
   Dividers
   ----------------------- */
.hr, .divider{ height:2px; width:90px; margin:20px auto 0; background: var(--hairline); border-radius:4px; }

/* -----------------------
   Stride block (reusable pattern)
   ----------------------- */
.stride-block { text-align: center; margin: 40px auto; max-width: 600px; }
.stride-title { font-size: 1.4em; margin-bottom: 10px; }
.stride-visual .dot { display: inline-block; width: 10px; height: 10px; background: #ddd; border-radius: 50%; margin: 0 4px; }
.stride-visual .arrow { display: inline-block; font-size: 1.6em; margin-left: 8px; }
.stride-text { margin-top: 15px; color: #555; font-size: 0.9em; line-height: 1.5em; }

/* -----------------------
   Tile grid + uniform media
   ----------------------- */
.tiles{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr); justify-content:center; justify-items:center; }
@media (max-width:1024px){ .tiles{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:680px){ .tiles{ grid-template-columns:repeat(4,1fr); } }

.tile{ grid-column: span 6; background: var(--ui-quiet); border-radius: var(--radius); padding:14px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
@media (max-width:680px){ .tile{ grid-column: span 4; } }

.tile-media{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:10px; background:#eaf3ef; margin-bottom:10px; }
.tile-media img{ width:100%; height:100%; object-fit:cover; display:block; }


/* -----------------------
   Reusable UI bits used by multiple pages
   ----------------------- */
.price-pill{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:12px 18px; border-radius:999px; line-height:1;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  font-weight:800;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
}
.price-pill .strike{ opacity:.9; text-decoration:line-through; }
.price-pill .now{ background: #ffd54d; color:#2b2100; padding:3px 10px; border-radius:999px; }

/* ============================================================
   Footer Badge Area
   ============================================================ */

.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.footer-badge img {
  height: 50px; /* approx 2 lines high — tweak as needed */
  width: auto;
}

.footer-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--text-light);
  font-size: 0.9em;
  line-height: 1.3em;
}

.footer-badge-text strong {
  color: var(--highlight);
  font-weight: bold;
}

/* Optional: centers everything on mobile */
@media (max-width: 600px) {
  .footer-badge-text {
    text-align: center;
  }
}