/* =========================================================================
   Glasswren — shared stylesheet
   Plain CSS, no build step. One file, linked by every page.
   Design tokens reuse the GentleSight palette for brand continuity.
   System-font stack (no web-font requests, no CDN, no tracking).
   ========================================================================= */

:root{
  /* Surfaces */
  --bg:#FDF6F0;            /* cream page background */
  --surface:#FFFFFF;       /* cards */
  --surface-alt:#F5EDE3;   /* tinted sections */

  /* Brand greens (primary) */
  --primary:#A8D8A8;       /* sage — buttons, accents */
  --primary-press:#7EC87E;
  --green-mid:#5DAA5D;     /* links, mid-accents */
  --green-deep:#2E7A4F;    /* strong accents, headings-on-cream */
  --primary-ink:#1A3A1A;   /* text on sage buttons */

  /* Warm accents */
  --accent:#FFD6A5;        /* peach highlight */
  --accent-press:#FFBE78;
  --gold:#D9A340;          /* bloom / stars */
  --soft:#C9D6FF;          /* tertiary cool accent */

  /* Text */
  --ink:#2D2D2D;           /* body text */
  --ink-soft:#6B6B6B;      /* secondary text */

  /* Lines */
  --border:#E8DDD5;
  --border-dark:#D0C4B8;

  /* Type & layout scale */
  --maxw:1100px;
  --radius:20px; --radius-sm:12px; --radius-pill:999px;
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px;

  /* System-font stack — rounded/warm where available, no external fonts */
  --font-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Reset / base ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.125rem;          /* 18px base, never below 16px */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:var(--green-deep);text-underline-offset:3px;}
a:hover{color:var(--green-mid);}
ul{margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.2;margin:0;}
p{margin:0;}

/* ---------- Type scale -------------------------------------------------- */
h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;letter-spacing:-.02em;}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700;letter-spacing:-.01em;}
h3{font-size:1.25rem;font-weight:700;}
.lead{font-size:clamp(1.125rem,2.2vw,1.375rem);color:var(--ink-soft);}
small,.small{font-size:1rem;}

/* ---------- Skip link --------------------------------------------------- */
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:200;
  background:var(--surface);color:var(--green-deep);
  padding:12px 16px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);font-weight:700;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:8px;}

/* ---------- Focus-visible ring ------------------------------------------ */
:focus-visible{
  outline:3px solid var(--green-deep);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Layout container -------------------------------------------- */
.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

/* ---------- Section bands ----------------------------------------------- */
.section{padding-block:var(--space-8);}
.section--alt{background:var(--surface-alt);}
.section--tight{padding-block:var(--space-6);}
.section__head{max-width:62ch;margin-bottom:var(--space-4);}
.section__head .lead{margin-top:var(--space-2);}

/* ---------- Top nav ----------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,246,240,.82);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-2);min-height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em;
}
.brand:hover{color:var(--ink);}
.brand svg{width:30px;height:30px;flex:none;color:var(--green-deep);}
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:48px;height:48px;border:1px solid var(--border-dark);
  background:var(--surface);border-radius:var(--radius-sm);
  color:var(--ink);cursor:pointer;
}
.nav-toggle svg{width:24px;height:24px;}
.nav-links{
  display:flex;align-items:center;gap:var(--space-1);
  list-style:none;
}
.nav-links a{
  display:inline-block;padding:10px 14px;border-radius:var(--radius-pill);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;
}
.nav-links a:hover{background:var(--surface-alt);color:var(--green-deep);}
.nav-links a[aria-current="page"]{color:var(--green-deep);background:var(--surface);}

/* ---------- Buttons ----------------------------------------------------- */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.btn{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);}
.btn:hover{background:var(--primary-press);border-color:var(--primary-press);color:var(--primary-ink);}
.btn:active{transform:translateY(1px);}
.btn-ghost{background:transparent;color:var(--green-deep);border-color:var(--border-dark);}
.btn-ghost:hover{background:var(--surface);border-color:var(--green-deep);color:var(--green-deep);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}

/* ---------- Coming-soon / store pill ------------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border-dark);
  color:var(--ink-soft);font-weight:600;font-size:.95rem;
}
.pill::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gold);flex:none;
}

/* ---------- Value chips / tags ------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink);font-weight:600;font-size:.95rem;
}

/* ---------- Cards ------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--space-4);
}
.card--pad-lg{padding:var(--space-6);}

/* ---------- Grids ------------------------------------------------------- */
.grid{display:grid;gap:var(--space-3);}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
.grid--4{grid-template-columns:1fr;}
@media (min-width:640px){
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}
}

/* ---------- Value tiles ------------------------------------------------- */
.value{padding:var(--space-3);}
.value h3{margin-bottom:6px;color:var(--green-deep);}
.value p{color:var(--ink-soft);font-size:1rem;}
.value .value__mark{
  width:40px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-alt);margin-bottom:var(--space-2);
}
.value .value__mark svg{width:24px;height:24px;color:var(--green-mid);}

/* ---------- Hero -------------------------------------------------------- */
.hero{padding-block:var(--space-8);}
.hero__inner{display:grid;gap:var(--space-4);align-items:center;}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.1fr .9fr;gap:var(--space-6);}
}
.hero h1{margin-bottom:var(--space-2);}
.hero .lead{max-width:54ch;}
.hero__meta{margin-top:var(--space-3);color:var(--ink-soft);font-weight:600;font-size:1rem;}
.hero__art{
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Product / app identity row ---------------------------------- */
.app-id{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.app-id__icon{
  width:72px;height:72px;border-radius:18px;flex:none;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
}
.app-id__icon--lg{width:96px;height:96px;border-radius:22px;}

/* ---------- Featured product card --------------------------------------- */
.product-card{display:grid;gap:var(--space-3);align-items:center;}
@media (min-width:640px){
  .product-card{grid-template-columns:auto 1fr;}
}
.product-card p{color:var(--ink-soft);}

/* ---------- Tier list (6 games) ----------------------------------------- */
.tiers{display:grid;gap:var(--space-2);list-style:none;}
.tier{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);
  align-items:baseline;
  padding:var(--space-2) var(--space-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.tier__no{
  font-family:var(--font-display);font-weight:800;color:var(--green-deep);
  white-space:nowrap;
}
.tier__body strong{display:block;}
.tier__body span{color:var(--ink-soft);font-size:1rem;}

/* ---------- Feature list ------------------------------------------------ */
.feature-list{list-style:none;display:grid;gap:var(--space-2);}
.feature-list li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
}
.feature-list li::before{
  content:"";margin-top:.45em;width:10px;height:10px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 4px rgba(168,216,168,.25);
}

/* ---------- Screenshot gallery ------------------------------------------ */
.shots{display:grid;gap:var(--space-3);}
@media (min-width:640px){.shots{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.shots{grid-template-columns:repeat(3,1fr);}}
.shot{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.shot__frame{
  background:var(--surface-alt);padding:var(--space-2);
}
.shot img{
  width:100%;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg);
}
.shot figcaption{padding:14px var(--space-2);color:var(--ink-soft);font-size:1rem;}

/* ---------- Pricing block ----------------------------------------------- */
.price{display:grid;gap:var(--space-3);}
@media (min-width:640px){.price{grid-template-columns:repeat(2,1fr);}}
.price__amt{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--green-deep);}

/* ---------- Prose (privacy, terms, about) ------------------------------- */
.prose{max-width:72ch;}
.prose h2{margin-top:var(--space-6);margin-bottom:var(--space-2);color:var(--green-deep);}
.prose h3{margin-top:var(--space-4);margin-bottom:var(--space-1);}
.prose p,.prose ul,.prose ol{margin-bottom:var(--space-2);}
.prose ul,.prose ol{padding-left:1.4em;}
.prose li{margin-bottom:6px;}
.prose .meta-note{
  color:var(--ink-soft);font-size:1rem;
  border-left:4px solid var(--primary);
  background:var(--surface);padding:var(--space-2) var(--space-3);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- FAQ (details/summary) --------------------------------------- */
.faq{display:grid;gap:var(--space-2);max-width:72ch;}
.faq details{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--space-2) var(--space-3);
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-size:1.4rem;color:var(--green-mid);line-height:1;flex:none;
}
.faq details[open] summary::after{content:"\2013";}
.faq details>div{padding:0 var(--space-3) var(--space-3);color:var(--ink-soft);}

/* ---------- Callout / contact ------------------------------------------- */
.callout{
  background:var(--surface);border:1px solid var(--border);
  border-left:5px solid var(--primary);
  border-radius:var(--radius);padding:var(--space-4);
}
.callout h3{color:var(--green-deep);margin-bottom:6px;}

/* ---------- Footer ------------------------------------------------------ */
.site-footer{
  background:var(--surface-alt);border-top:1px solid var(--border);
  padding-block:var(--space-6);margin-top:var(--space-8);
}
.footer-grid{display:grid;gap:var(--space-4);}
@media (min-width:640px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.footer-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.125rem;color:var(--ink);text-decoration:none;}
.footer-brand svg{width:26px;height:26px;color:var(--green-deep);}
.footer-tag{color:var(--ink-soft);font-size:1rem;margin-top:var(--space-2);max-width:34ch;}
.footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:var(--space-2);}
.footer-col ul{list-style:none;display:grid;gap:10px;}
.footer-col a{color:var(--ink);text-decoration:none;font-size:1rem;}
.footer-col a:hover{color:var(--green-deep);text-decoration:underline;}
.footer-bottom{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px var(--space-3);
  color:var(--ink-soft);font-size:.95rem;align-items:center;
}
.footer-note{display:inline-flex;align-items:center;gap:6px;}
.footer-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);}

/* ---------- Utilities --------------------------------------------------- */
.text-center{text-align:center;}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.muted{color:var(--ink-soft);}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================================
   Mobile nav (progressive enhancement)
   With JS disabled, .nav-links stays visible (see no-js fallback below).
   ========================================================================= */
@media (max-width:899px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:var(--space-2) clamp(20px,5vw,40px) var(--space-3);
    box-shadow:var(--shadow);
  }
  .nav-links a{padding:14px 12px;font-size:1.0625rem;}

  /* JS present: collapse the panel until toggled open */
  .js .nav-links{display:none;}
  .js .nav-links.is-open{display:flex;}
}

/* When JS is off, hide the toggle button (links are already shown) */
html:not(.js) .nav-toggle{display:none;}

/* =========================================================================
   Reduced motion — disable all transitions/animations & smooth scroll
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}