/*
Theme Name: TileSage
Theme URI: https://tilesage.com
Description: TileSage — The Mahjong companion app landing page theme.
Author: TileSage
Version: 1.1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --color-almond-cream:       #e7d8c5;
  --color-golden-pollen:      #ffc857;
  --color-granite:            #475841;
  --color-prussian-blue:      #001427;
  --color-almond-cream-light: #f4ede3;
  --color-granite-light:      #6b7d65;
  --bg-primary:    #e7d8c5;
  --bg-secondary:  #f4ede3;
  --bg-dark:       #001427;
  --bg-surface:    #ffffff;
  --fg-primary:    #475841;
  --fg-on-dark:    #e7d8c5;
  --border-subtle: rgba(71,88,65,0.15);
  --shadow-md:     0 2px 16px rgba(0,20,39,0.08);
  --shadow-lg:     0 8px 40px rgba(0,20,39,0.12);
  --shadow-tile:   0 4px 20px rgba(0,20,39,0.10);
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --max-width:       1200px;
  --section-padding: clamp(64px, 10vw, 120px);
  --gutter:          clamp(24px, 6vw, 80px);
  --radius-pill: 100px;
  --radius-lg:   12px;
  --radius-tile: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #e7d8c5; font-family: var(--font-body); color: #475841; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }

/* Hide WP chrome on landing page */
.tilesage-landing .site-header,
.tilesage-landing .site-footer,
.tilesage-landing header.wp-block-template-part,
.tilesage-landing footer.wp-block-template-part { display: none !important; }

/* Strip padding from block editor output */
.tilesage-landing .wp-block-post-content,
.tilesage-landing .entry-content,
.tilesage-landing .page-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

a { text-decoration: none; transition: opacity 180ms ease-out; }
a:hover { opacity: 0.75; }

/* NAV */
.ts-nav { position: absolute; top: 0; left: 0; right: 0; padding: 28px var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 100; }
.ts-nav__logo { width: 90%; max-width: 400px ; display: block; }
.ts-nav__links { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
.ts-nav__links a { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #475841; opacity: 0.8; }
.ts-nav__links a:hover { opacity: 0.55; }
.ts-nav__cta { font-family: var(--font-body); font-size: 14px; font-weight: 500; background: #475841; color: #e7d8c5 !important; padding: 10px 22px; border-radius: var(--radius-pill); opacity: 1 !important; transition: opacity 180ms ease-out, transform 150ms ease-out; }
.ts-nav__cta:hover { opacity: 0.85 !important; transform: translateY(-1px); }
.ts-nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
@media (max-width: 720px) {
  .ts-nav__links { display: none; }
  .ts-nav__links.is-open { display: flex; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: #e7d8c5; padding: 24px var(--gutter) 32px; gap: 20px; border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
  .ts-nav__hamburger { display: block; }
}

/* HERO */
.ts-hero { background: #e7d8c5; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 140px var(--gutter) 120px; position: relative; overflow: hidden; }
.ts-tile-cluster { position: absolute; top: 60px; right: var(--gutter); opacity: 0.18; width: 280px; height: 280px; pointer-events: none; }
.ts-tile-cluster .tile { position: absolute; background: #e7d8c5; border: 2px solid #ffc857; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 16px rgba(0,20,39,0.08); }
.ts-hero__content { max-width: 680px; display: flex; flex-direction: column; gap: 28px; }
.ts-hero__eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(71,88,65,0.5); }
.ts-hero__headline { font-family: var(--font-display); font-size: clamp(52px, 7vw, 88px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: #475841; margin: 0; }
.ts-hero__headline em { font-style: italic; }
.ts-hero__body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: #6b7d65; max-width: 520px; margin: 0; }
.ts-hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ts-btn-accent { font-family: var(--font-body); font-size: 15px; font-weight: 500; background: #ffc857; color: #001427; padding: 14px 30px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; transition: opacity 180ms ease-out, transform 150ms ease-out; }
.ts-btn-accent:hover { opacity: 0.85; transform: translateY(-1px); }
.ts-btn-ghost { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #475841; opacity: 0.7; }
.ts-btn-ghost:hover { opacity: 0.45; }
.ts-hero__social-proof { display: flex; align-items: center; gap: 16px; }
.ts-avatars { display: flex; }
.ts-avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #e7d8c5; display: inline-block; }
.ts-avatars span:not(:first-child) { margin-left: -8px; }
.ts-avatars span:nth-child(1) { background: hsl(90,20%,55%); }
.ts-avatars span:nth-child(2) { background: hsl(105,20%,55%); }
.ts-avatars span:nth-child(3) { background: hsl(120,20%,55%); }
.ts-hero__social-proof p { font-family: var(--font-body); font-size: 13px; color: rgba(71,88,65,0.6); margin: 0; }
.ts-rack-preview { position: absolute; right: var(--gutter); bottom: 80px; display: flex; gap: 10px; align-items: flex-end; }
.ts-rack-preview .tile { width: 52px; height: 70px; background: #e7d8c5; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: var(--shadow-tile); }
@media (max-width: 900px) { .ts-rack-preview { display: none; } .ts-tile-cluster { opacity: 0.09; width: 180px; height: 180px; } }
@media (max-width: 540px) { .ts-tile-cluster { display: none; } .ts-hero { padding-top: 100px; padding-bottom: 80px; } }

/* FEATURES */
.ts-features { background: #f4ede3; padding: var(--section-padding) var(--gutter); }
.ts-features__inner { max-width: var(--max-width); margin: 0 auto; }
.ts-features__header { margin-bottom: 64px; max-width: 520px; }
.ts-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(71,88,65,0.5); margin-bottom: 16px; display: block; }
.ts-features__heading { font-family: var(--font-display); font-size: clamp(36px, 4vw, 54px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: #475841; margin-bottom: 16px; }
.ts-features__subhead { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: #6b7d65; margin: 0; }
.ts-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ts-feature-card { background: #fff; border-radius: var(--radius-lg); padding: 28px 24px; border: 1px solid rgba(71,88,65,0.08); box-shadow: 0 2px 16px rgba(0,20,39,0.06); transition: box-shadow 200ms ease-out, transform 200ms ease-out; }
.ts-feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ts-feature-card__icon { width: 40px; height: 40px; background: #475841; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.ts-feature-card__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: #475841; margin-bottom: 10px; }
.ts-feature-card__body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(71,88,65,0.65); margin: 0; }

/* HOW IT WORKS */
.ts-how { background: #001427; padding: var(--section-padding) var(--gutter); }
.ts-how__inner { max-width: var(--max-width); margin: 0 auto; }
.ts-how__eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(231,216,197,0.4); margin-bottom: 16px; display: block; }
.ts-how__heading { font-family: var(--font-display); font-size: clamp(36px, 4vw, 54px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: #e7d8c5; margin-bottom: 64px; }
.ts-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ts-step { padding: 36px 32px; }
.ts-step + .ts-step { border-left: 1px solid rgba(231,216,197,0.08); }
.ts-step__num { font-family: var(--font-display); font-size: 48px; font-weight: 600; color: #ffc857; line-height: 1; margin-bottom: 20px; }
.ts-step__title { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: #e7d8c5; margin-bottom: 12px; }
.ts-step__body { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: rgba(231,216,197,0.55); margin: 0; }
@media (max-width: 720px) { .ts-step + .ts-step { border-left: none; border-top: 1px solid rgba(231,216,197,0.08); } }

/* CTA BANNER */
.ts-cta-banner { background: #ffc857; padding: clamp(48px,7vw,88px) var(--gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.ts-cta-banner__text { max-width: 560px; }
.ts-cta-banner__heading { font-family: var(--font-display); font-size: clamp(32px,4vw,50px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #001427; margin-bottom: 12px; }
.ts-cta-banner__sub { font-family: var(--font-body); font-size: 16px; color: rgba(0,20,39,0.65); line-height: 1.6; margin: 0; }
.ts-cta-banner__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.ts-btn-dark { font-family: var(--font-body); font-size: 15px; font-weight: 500; background: #001427; color: #e7d8c5; padding: 14px 30px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; transition: opacity 180ms ease-out, transform 150ms ease-out; }
.ts-btn-dark:hover { opacity: 0.85; transform: translateY(-1px); }
.ts-btn-outline-dark { font-family: var(--font-body); font-size: 15px; font-weight: 500; background: transparent; color: #001427; padding: 14px 30px; border-radius: var(--radius-pill); border: 1.5px solid rgba(0,20,39,0.3); transition: opacity 180ms ease-out; }
.ts-btn-outline-dark:hover { opacity: 0.65; }

/* FOOTER */
.ts-footer { background: #001427; padding: clamp(48px,6vw,80px) var(--gutter) 40px; border-top: 1px solid rgba(231,216,197,0.08); }
.ts-footer__inner { max-width: var(--max-width); margin: 0 auto; }
.ts-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 56px; }
.ts-footer__brand { max-width: 280px; }
.ts-footer__logo { width: 90%; max-width: 400px; display: block; margin-bottom: 16px; }
.ts-footer__tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: rgba(231,216,197,0.5); margin: 0; }
.ts-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.ts-footer__col-heading { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(231,216,197,0.35); margin-bottom: 16px; display: block; }
.ts-footer__col-links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ts-footer__col-links a { font-family: var(--font-body); font-size: 14px; color: rgba(231,216,197,0.6); }
.ts-footer__col-links a:hover { opacity: 0.5; }
.ts-footer__bottom { border-top: 1px solid rgba(231,216,197,0.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.ts-footer__bottom span { font-family: var(--font-body); font-size: 12px; color: rgba(231,216,197,0.3); }