/* =====================================================================
   GLEN TENORIO — site-wide stylesheet (Kole Jain look & feel)
   Shared by every page: Home, Blog, Resources, Status.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Surfaces — soft, layered off-whites */
  --bg-1: #FAFAFA;          /* page / main surface          */
  --bg-2: #F5F5F5;          /* sidebar + subtle fills        */
  --bg-3: #EBEBEB;          /* hover / active fills          */

  /* Ink */
  --text:        #1A1A1A;   /* primary text                  */
  --subtext:     #7D7D7D;   /* secondary text / captions     */
  --dark-stroke: #3E3E3E;   /* strong text on tags           */

  /* Lines + accents */
  --stroke: #E0E0E0;        /* hairline borders              */

  /* Green palette — #54734e is the vivid accent; #091315 replaces
     the near-black button; #8ba47d is the muted light tone used
     for CTA text and tinted chips. Full swatch:
       #091315  #172a1d  #2c482e  #54734e  #8ba47d            */
  --accent:  #54734e;       /* primary vivid accent (was --purple)  */
  --button:  #091315;       /* near-black solid button / CTA bg     */
  --accent-light: #8ba47d;  /* muted light tone for CTA em + chips  */
  --bg-accent: #dde9d9;     /* very light green tint for chips      */
  --grad:    linear-gradient(135deg, #6a8d5f 0%, #44603c 100%); /* green CTA gradient (sitewide) */

  /* State tints (used on chips/tags) */
  --success:    #149610;  --bg-success: #D9F7D7;
  --error:      #EE2C2C;  --bg-error:   #F7D7D8;

  /* Radii */
  --radius: 8px;            /* default control radius        */
  --r-md: 16px;             /* panels                        */
  --r-lg: 24px;             /* large cards                   */

  /* Spacing scale */
  --xxs: 4px; --xms: 6px; --xs: 8px; --sm: 12px;
  --md: 16px; --lg: 24px; --xl: 32px; --xxl: 48px; --xxxl: 64px;

  /* Type + motion */
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --display: 'Geist', 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.075, .82, .165, 1);   /* signature easing */

  --sidebar: 232px;         /* sidebar column width          */
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-2);              /* gutter colour behind the panel */
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Tighter line-height on display type — body inherits 1.55 but headings look
   too airy at large sizes; 1.08 keeps multi-line display heads compact. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* =====================================================================
   APP SHELL — sidebar + content well (panel-in-panel)
   ===================================================================== */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
  /* Smooth column-width change drives the sidebar collapse animation */
  transition: grid-template-columns .45s var(--ease);
}
/* Collapsed state: override --sidebar to the icon-strip width */
.layout.sidebar-collapsed { --sidebar: 56px; }

/* ---- Sidebar ---- */
.side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  padding: var(--lg) var(--md);
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: var(--xl);
  z-index: 4;
  overflow: hidden;                    /* clips inner content during collapse */
}

/* Brand: placeholder mark + wordmark */
.brand { display: flex; align-items: center; gap: var(--xs); }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--radius);
  background: var(--accent);           /* green accent square */
  display: grid; place-items: center;
  position: relative;
}
/* Geometric glyph drawn in CSS so it reads as a logo mark */
.brand-mark::before {
  content: ""; width: 12px; height: 12px;
  border: 2.5px solid #fff; border-radius: 3px;
  transform: rotate(45deg);
  transition: opacity .2s ease;
}
/* "GT" initials — hidden by default, revealed when the sidebar collapses */
.brand-mark::after {
  content: "GT";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: -0.02em; color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
/* In collapsed mode swap the diamond glyph for the GT initials */
.side.collapsed .brand-mark::before { opacity: 0; }
.side.collapsed .brand-mark::after  { opacity: 1; }
.brand-name {
  font-family: var(--display); font-weight: 800;
  font-size: 17px; letter-spacing: -0.02em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; max-width: 200px;
  transition: opacity .2s ease, max-width .4s var(--ease);
}
.brand-name b { color: var(--accent); font-weight: 800; } /* green wordmark accent */

/* Nav */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--subtext); padding: 0 var(--xs) var(--xs);
  transition: opacity .2s ease;
}
/* Second group label ("More") sits a little lower than the first */
.nav-label.spaced { margin-top: var(--md); }
.nav a {
  display: flex; align-items: center; gap: var(--sm); /* icon + label side-by-side */
  padding: var(--xs) var(--sm); border-radius: var(--radius);
  font-size: 14px; color: var(--text); font-weight: 500;
  transition: background-color .4s var(--ease);
}
.nav a:hover { background: var(--bg-3); }
.nav a.active { background: var(--bg-3); }
/* small count chip on nav rows */
.nav .chip {
  font-size: 11px; font-weight: 600; color: var(--subtext);
  background: var(--bg-1); border: 1px solid var(--stroke);
  border-radius: 999px; padding: 1px var(--xs);
  margin-left: auto; flex-shrink: 0; /* push chip to far right */
}

/* Sidebar promo card */
.side-card {
  margin-top: auto;
  padding: var(--md);
  background: var(--bg-1);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
}
.side-card h4 { font-size: 15px; font-weight: 600; margin-bottom: var(--xxs); }
.side-card p { font-size: 12.5px; color: var(--subtext); margin-bottom: var(--sm); line-height: 1.5; }
.side-cta {
  display: inline-flex; align-items: center; gap: var(--xxs);
  font-size: 12.5px; font-weight: 600; color: var(--accent); /* green link */
}

/* Social icon buttons — tidy square tiles instead of plain text links */
.socials { display: flex; gap: var(--xs); padding: 0 var(--xs); }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--subtext); border: 1px solid var(--stroke); background: var(--bg-1);
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease);
}
.socials a:hover {
  color: var(--text); border-color: transparent; background: var(--bg-3);
  transform: translateY(-1px);                 /* subtle lift on hover */
}
.socials svg { width: 17px; height: 17px; }

/* Legal links — subtle muted row sat at the foot of the sidebar */
.side-legal {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--xxs); padding: 0 var(--xs);          /* align with the socials padding */
}
.side-legal a { font-size: 12px; color: var(--subtext); transition: color .3s; }
.side-legal a:hover { color: var(--text); }
.side-legal span { font-size: 12px; color: var(--subtext); }   /* the · separator */

/* ---- Content well: floats like a monitor — all corners rounded, full
   hairline border, and an equal small gap on every side ---- */
.content-wrap {
  background: var(--bg-1);
  border: 1px solid var(--stroke);              /* full border on all four sides */
  border-radius: var(--r-md);                   /* same radius on every corner   */
  margin: var(--xs);                            /* equal small spacing all around */
  height: calc(100dvh - (var(--xs) * 2));       /* fit viewport minus top+bottom gaps */
  overflow-y: auto; overflow-x: hidden;
  transition: transform 1s var(--ease);
  will-change: transform;
  /* Firefox: thin scrollbar with a transparent track so the corners show */
  scrollbar-width: thin;
  scrollbar-color: rgba(9,19,21,.25) transparent;
}
/* WebKit/Blink: an inset, rounded "overlay" thumb on a transparent track.
   The transparent border + padding-box clip floats the thumb away from the
   edge so it never covers the panel's rounded corners. */
.content-wrap::-webkit-scrollbar { width: 12px; }
.content-wrap::-webkit-scrollbar-track { background: transparent; }
.content-wrap::-webkit-scrollbar-thumb {
  background: rgba(9,19,21,.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.content-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(9,19,21,.4);
  background-clip: padding-box;
}

/* Mobile-only top navbar (hidden on desktop) */
.m-nav {
  display: none;
  position: sticky; top: 0; z-index: 3;
  padding: var(--xs) var(--md);          /* shorter bar (was --sm top/bottom)   */
  background: var(--bg-1);
  align-items: center; justify-content: space-between;
}
/* Burger is now just the icon — no bordered box behind it.
   Keeps a comfortable tap target via width/height + negative margin so the
   bare icon still aligns flush to the right edge. */
.m-burger {
  width: 38px; height: 38px; display: grid; place-items: center;
  margin-right: -8px;                     /* pull the icon back to the edge       */
  border: 0; background: transparent;     /* drop the box border + fill           */
  color: var(--text); cursor: pointer;
}
.m-burger span { display: block; width: 16px; height: 1.5px; background: var(--text); position: relative; }
.m-burger span::before, .m-burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text);
  transition: transform .32s var(--ease);
}
.m-burger span::before { top: -5px; }
.m-burger span::after  { top:  5px; }

/* Backdrop scrim (mobile drawer) */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity 1s var(--ease); z-index: 2;
}

/* =====================================================================
   CONTENT — shared layout primitives
   ===================================================================== */
/* Center content within the panel — matches kolejain.com's layout */
.main {
  padding: 0 clamp(var(--lg), 5vw, var(--xxxl));
  max-width: 860px;        /* tighter reading column, feels less empty */
  margin: 0 auto;          /* horizontally centre within content-wrap  */
}
section { padding: var(--xxl) 0; border-bottom: 1px solid var(--stroke); }
section:last-of-type { border-bottom: 0; }

/* Announcement strip at the very top */
.announce {
  margin: var(--lg) 0 0;
  display: inline-flex; align-items: center; gap: var(--xs);
  flex-wrap: wrap; justify-content: center;   /* wraps cleanly on tiny screens */
  padding: var(--xs) var(--sm);
  background: var(--bg-2); border: 1px solid var(--stroke);
  border-radius: 999px; width: max-content; max-width: 100%;
  font-size: 13px; line-height: 1; color: var(--subtext); /* line-height:1 so the dot centres on the text */
}
.announce .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } /* green dot */
.announce a { color: var(--accent); font-weight: 600; } /* green link */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--xs);
  padding: var(--sm) var(--lg); border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  line-height: 1;                      /* neutralises font-metric descenders that push text off-centre */
  transition: transform .3s var(--ease), background-color .3s, box-shadow .3s var(--ease);
}
.btn-primary { background: var(--grad); color: #fff; border: none; } /* green gradient CTA (sitewide) */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(68,96,60,.30); /* green-tinted lift shadow */
}
.btn-ghost { background: var(--bg-2); color: var(--text); border: 1px solid var(--stroke); }
.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: var(--subtext);          /* border darkens slightly on hover */
}
.btn .arrow { font-size: 15px; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); } /* arrow slides right on hover */

/* =====================================================================
   HOME — hero, "latest" list, feature cards, big CTA
   ===================================================================== */
.hero { padding-top: var(--xl); border-bottom: 0; }   /* hero never shows a divider */

/* Home page: hero is the only content, centred on both axes */
.main--hero {
  min-height: calc(100dvh - var(--xs));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.main--hero .hero { padding: 0; }
/* Tight, intentional vertical stack so the hero reads as one cohesive unit.
   The eyebrow now sits close to the heading instead of floating above it. */
.main--hero .announce { margin: 0 0 var(--md); }           /* pill hugs the heading (was --lg + h1 top margin = ~40px void) */
.main--hero .hero h1 {
  margin: 0 auto var(--md);                                 /* kill the top margin that doubled the eyebrow gap; keep it centred */
  max-width: 18ch;                                          /* a touch wider so the lines balance instead of crowding */
}
.main--hero .hero .lede { margin: 0 auto; max-width: 46ch; } /* narrower measure = tidier, more centred paragraph */
.main--hero .hero-actions { justify-content: center; margin-top: var(--lg); } /* centre the row; snug to the lede (was --xl) */
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.04; /* very tight for display size */
  letter-spacing: -0.03em; margin: var(--md) 0 var(--md); max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--accent); } /* green hero emphasis */
.hero .lede { font-size: clamp(15px, 1.4vw, 18px); color: var(--subtext); max-width: 54ch; }
.hero-actions { margin-top: var(--xl); display: flex; flex-wrap: wrap; gap: var(--sm); }

/* =====================================================================
   HOME — cinematic trees background + frosted-glass hero (home page only)
   Scoped via :has(.main--hero); the hero is the only place this class
   appears, so the rest of the site is untouched.
   ===================================================================== */

/* Full-bleed forest backdrop inside the rounded content well, with a moody
   top-to-bottom darken + edge vignette so it reads cinematic and keeps the
   light text legible. Path is relative to this CSS file (/assets/css/). */
.content-wrap:has(.main--hero) {
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(6,12,8,.55) 100%),
    linear-gradient(180deg, rgba(6,12,8,.55) 0%, rgba(6,12,8,.30) 38%, rgba(6,12,8,.78) 100%),
    url("../images/trees.webp") center / cover no-repeat;
}

/* The hero copy floats in a frosted-glass card */
.main--hero .hero {
  padding: clamp(var(--xl), 4.5vw, var(--xxxl));
  max-width: 640px;
  position: relative; isolation: isolate;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
/* Blur layer behind the content (avoids the transformed-child paint glitch) */
.main--hero .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: rgba(14,22,16,.34);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}

/* Light typography tuned to the dark forest backdrop */
.main--hero .hero h1 { color: #fff; }
.main--hero .hero h1 em { color: #bcd9a8; }                 /* brighter green so it glows */
.main--hero .hero .lede { color: rgba(255,255,255,.86); }

/* Announcement pill becomes glass */
.main--hero .announce {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.main--hero .announce .dot { background: #bcd9a8; }
.main--hero .announce a { color: #bcd9a8; }

/* Hero buttons: larger, more prominent than the sitewide default */
.main--hero .hero-actions .btn {
  padding: 18px 36px;          /* bigger tap target than default 12/24 */
  font-size: 16px;             /* up from 14px */
  border-radius: 14px;         /* softer rounded corners at this scale */
}
.main--hero .hero-actions .btn .arrow { font-size: 17px; } /* match larger label */

/* Buttons: keep the green gradient primary; make the ghost a glass outline */
.main--hero .btn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.main--hero .btn-ghost:hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.65);
}

/* Section head (used on home + inner sections) */
.s-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--md); margin-bottom: var(--lg); }
.s-head h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; }
.s-head .num { font-size: 12px; color: var(--subtext); }

/* "Latest" list — rows linking to the real sections */
.res-list { border-top: 1px solid var(--stroke); }
.res {
  display: grid; grid-template-columns: 28px 1fr auto auto;
  gap: var(--md); align-items: center;
  padding: var(--md) var(--xs);
  border-bottom: 1px solid var(--stroke);
  transition: background-color .3s var(--ease);
}
.res:hover { background: var(--bg-2); }
.res-ico {
  width: 28px; height: 28px; border-radius: var(--radius);
  background: var(--bg-3); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--dark-stroke);
}
.res-name { font-weight: 600; font-size: 15px; }
.res-name span { display: block; font-weight: 400; font-size: 12.5px; color: var(--subtext); }
.res-tag {
  font-size: 11px; font-weight: 600; padding: 2px var(--xs);
  border-radius: 999px; background: var(--bg-success); color: var(--success);
}
/* Alt chip uses the light green tint instead of purple */
.res-tag.alt { background: var(--bg-accent); color: var(--accent); }
.res-arrow { color: var(--subtext); font-size: 15px; }

/* Feature cards (3-up grid) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md); }
.cards .card {
  padding: var(--lg); border: 1px solid var(--stroke);
  border-radius: var(--r-md); background: var(--bg-1);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Lift + green border + soft shadow on hover */
.cards .card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08), 0 0 0 1px var(--accent);
}
.cards .card .k { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; } /* green kicker label */
.cards .card h3 { font-size: 18px; margin: var(--sm) 0 var(--xs); }
.cards .card p { font-size: 13.5px; color: var(--subtext); line-height: 1.55; }

/* Big CTA — dark gradient background with a green bloom at the right */
.cta {
  /* Radial bloom from the right gives depth without being garish */
  background:
    radial-gradient(ellipse 65% 90% at 85% 50%, #1e3d24 0%, transparent 70%),
    linear-gradient(160deg, #0d1e13 0%, #091315 100%);
  color: var(--bg-1);
  border-radius: var(--r-lg); padding: clamp(var(--xl), 5vw, var(--xxxl));
  margin: var(--lg) 0 var(--xxl);
  overflow: hidden;                    /* keeps gradient clipped to radius */
  position: relative;
}
.cta h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.05;                   /* tighter — avoids the spacey multi-line gap */
  max-width: 18ch; color: var(--bg-1);
}
.cta h2 em { font-style: normal; color: var(--accent-light); } /* muted sage green em text */
.cta p { color: #9aaa98; margin: var(--md) 0 var(--xl); max-width: 44ch; } /* desaturated for contrast on green-tinted bg */
/* CTA button — green fill + glow on hover */
.cta .btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 0 rgba(84,115,78,0);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(84,115,78,.45); /* green glow lifts button */
}

/* Footer */
footer { padding: var(--xxl) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--md); flex-wrap: wrap; }
footer .made { font-size: 13px; color: var(--subtext); }
footer .made b { color: var(--text); font-weight: 600; }
footer .foot-links { display: flex; gap: var(--md); font-size: 13px; color: var(--subtext); }
footer .foot-links a:hover { color: var(--text); }
footer .heart { color: var(--accent); }   /* green heart in the credit line */

/* =====================================================================
   INNER PAGES — page header (Blog / Resources / Status)
   ===================================================================== */
.page-head { padding: var(--xl) 0 var(--lg); border-bottom: 1px solid var(--stroke); }
.page-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
  letter-spacing: -0.025em; margin-bottom: var(--sm);
}
.page-title em { font-style: normal; color: var(--accent); } /* green page title accent */
.page-intro { font-size: clamp(14px, 1.3vw, 17px); color: var(--subtext); max-width: 56ch; }
.page-intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--bg-2);
  border: 1px solid var(--stroke); border-radius: var(--xxs);
  padding: 1px 5px;
}

/* =====================================================================
   LEGAL PAGES — long-form prose for Privacy Policy & Terms
   ===================================================================== */
.legal {
  padding: var(--xl) 0 var(--xxl);          /* breathing room above the footer edge */
  max-width: 70ch;                          /* comfortable reading measure */
  color: var(--text);
}
.legal p,
.legal li { font-size: 15px; line-height: 1.7; color: #333; }
.legal h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.02em;
  margin: var(--xl) 0 var(--xs);
}
.legal h2:first-child { margin-top: 0; }     /* no extra gap under the page header */
.legal p { margin: 0 0 var(--md); }
.legal ul { margin: 0 0 var(--md); padding-left: var(--lg); }
.legal li { margin-bottom: var(--xxs); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--button); }
.legal strong { font-weight: 600; color: var(--text); }
/* "Last updated" line sits quietly under the page intro */
.legal-updated { font-size: 13px; color: var(--subtext); margin-top: var(--xs); }

/* ---- Post / resource cards (vertical list) ---- */
.card-list { display: flex; flex-direction: column; gap: var(--md); padding: var(--xl) 0 var(--xxl); }
.card {
  padding: var(--lg);
  border: 1px solid var(--stroke); border-radius: var(--r-md);
  background: var(--bg-1);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Lift + green border + soft shadow on hover */
.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.07), 0 0 0 1px var(--accent);
}
.card h3 { font-size: clamp(17px, 1.8vw, 21px); margin-bottom: var(--xs); }
.card .meta {
  display: inline-flex; align-items: center; gap: var(--xs);
  font-size: 12.5px; font-weight: 600; color: var(--subtext);
  margin-bottom: var(--sm);
}
.card p { font-size: 14px; color: var(--subtext); line-height: 1.6; }
.card p + p { margin-top: var(--md); }       /* spacing before a button row */

/* =====================================================================
   TOOLS — archive grid + screenshot capture tool + shared motion
   ===================================================================== */

/* ---- Subtle reveal animation (fade + rise), used site-wide ---- */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: fade-rise .7s var(--ease) forwards; }
.reveal.d1 { animation-delay: .06s; }
.reveal.d2 { animation-delay: .12s; }
.reveal.d3 { animation-delay: .18s; }
.reveal.d4 { animation-delay: .24s; }
/* Scroll-revealed elements start hidden, then get .in via IntersectionObserver */
.reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---- Inline ad slot (drop AdSense / network code inside) ---- */
.ad-slot {
  margin: var(--xl) 0; min-height: 100px;
  display: grid; place-items: center;
  border: 1px dashed var(--stroke); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--subtext);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---- Tools archive grid ---- */
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--md); padding: var(--xl) 0 var(--xxl);
}
.tool-card { display: flex; flex-direction: column; gap: var(--sm); }
.tool-card .tool-ico {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--bg-accent); color: var(--accent);
}
.tool-card .tool-ico svg { width: 20px; height: 20px; display: block; overflow: visible; }
.tool-card h3 { font-size: 18px; }
.tool-card p { font-size: 13.5px; color: var(--subtext); line-height: 1.55; flex: 1; }
.tool-card .tool-foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: var(--xs);
}
.tool-card .tool-open { font-weight: 600; font-size: 13.5px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.tool-card .tool-open .arrow { transition: transform .25s var(--ease); }
.tool-card:hover .tool-open .arrow { transform: translateX(3px); }
.tool-card.soon { opacity: .6; }
.tool-card.soon:hover { transform: none; border-color: var(--stroke); box-shadow: none; }
.tag-free {
  font-size: 11px; font-weight: 600; padding: 2px var(--xs);
  border-radius: 999px; background: var(--bg-success); color: var(--success);
}

/* ====================== Screenshot tool (.st-) ======================
   Two-column workspace: compact settings + large live preview.
   Tool-scoped accent gradient keeps the global palette untouched. */

/* Tool reuses the sitewide CTA gradient (single source of truth in :root) */
.main--tool {
  --st-grad: var(--grad);
  /* Darker, green-tinted muted text so secondary copy stays readable on the
     light mesh background (cascades to every var(--subtext) on this page). */
  --subtext: #4d5e47;
}
/* Body copy gets a touch more weight/contrast over the textured background */
.main--tool .page-intro { color: #36422f; }
.main--tool .st-empty p,
.main--tool .st-loader-text { color: #3f4d39; }

/* Let the tool break out of the narrow reading column and use the full panel.
   Wider than the reading column so the captured screenshot (esp. Desktop HD)
   gets the full workspace width to render at a useful size. */
.main--tool { max-width: 1440px; }
/* Keep just the header at a comfortable reading width. The ad slot and SEO
   sections below now span the full tool width so their left/right edges line
   up exactly with the workspace cards above them. */
.main--tool .page-head { max-width: 820px; margin-inline: auto; }

/* ---- Cinematic forest background + frosted glass (tool page only) ----
   Same trees backdrop as the home hero, painted only on the rounded content
   well so it never bleeds into the sidebar gutter. A moody top-to-bottom
   darken keeps the light copy legible; the glass panels blur it behind them. */
.content-wrap:has(.main--tool) {
  background:
    radial-gradient(120% 70% at 50% 0%, transparent 45%, rgba(6,12,8,.55) 100%),
    linear-gradient(180deg, rgba(6,12,8,.62) 0%, rgba(6,12,8,.42) 38%, rgba(6,12,8,.80) 100%),
    url("../images/trees.webp") center / cover no-repeat;
}

/* ---- Legible light typography over the dark forest backdrop ----
   The frosted cards stay white (their inner controls keep dark text), so we
   only lift the copy that sits directly on the image: the page header and the
   SEO sections below the tool. */
.main--tool .page-title { color: #fff; }
.main--tool .page-head--tool .page-title em {               /* override the clipped gradient: solid bright green reads on dark */
  background: none;
  -webkit-text-fill-color: #bcd9a8;
  color: #bcd9a8;
}
.main--tool .page-head--tool .page-intro { color: rgba(255,255,255,.86); }
.main--tool .st-info h2,
.main--tool .st-step h3 { color: #fff; }
.main--tool .st-step p,
.main--tool .st-feature,
.main--tool .st-faq summary,
.main--tool .st-faq p { color: rgba(255,255,255,.84); }
.main--tool .st-feature strong { color: #fff; }
.main--tool .st-faq details { border-bottom-color: rgba(255,255,255,.18); } /* visible divider on dark */
.main--tool .st-step .n {                                   /* number badge → glass instead of pale-green */
  background: rgba(255,255,255,.14);
  color: #cfe8c2;
}

/* The workspace panel goes invisible so the glass cards float on the mesh */
.main--tool .st {
  background: transparent; border: none; box-shadow: none; padding: 0;
}

/* Frosted glass for the three core components.
   The blur lives on a ::before layer (z-index:-1), NOT on the element itself.
   This avoids a Chrome repaint bug where a transformed child (the device
   buttons lifting on hover/click) flashes blank/white inside a
   backdrop-filter parent. */
.main--tool .st-bar,
.main--tool .st-controls,
.main--tool .st-preview {
  position: relative; isolation: isolate;   /* keep the -1 layer inside the card */
  background: transparent;
  /* Bright hairline rim + a top inner highlight = a crisp glass edge that
     reads clearly against the dark forest (kills the muddy, soft-edge look).
     Deeper drop shadow lifts the panel off the dark backdrop. */
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.main--tool .st-bar::before,
.main--tool .st-controls::before,
.main--tool .st-preview::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;                    /* match the card's rounded corners */
  /* Vertical sheen instead of a flat fill — light at the top, a touch deeper
     below — so it reads like real frosted glass while staying opaque enough
     for the dark control text inside to stay legible. */
  background: linear-gradient(160deg,
              rgba(255,255,255,.62) 0%,
              rgba(255,255,255,.48) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
}
/* Keep shadows stable on hover (these are containers, not clickable cards) */
.main--tool .st-controls:hover,
.main--tool .st-preview:hover {
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Preview's soft inner glow sits on its own glass layer */
.main--tool .st-preview::before {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(190,217,168,.16) 0%, transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.46) 100%);
}
/* Accent focus ring on the glass URL bar */
.main--tool .st-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 16px 44px rgba(34,52,30,.13), 0 0 0 3px rgba(84,115,78,.18);
}

/* Sub-elements stay legible against the frosted surface */
.main--tool .st-device { background: rgba(255,255,255,.62); }
/* Only non-active buttons get a light hover fill. Kept translucent (.78) and
   paired with a green border so it reads as a gentle highlight on the glass
   instead of the harsh near-opaque white block it used to flash. */
.main--tool .st-device:not(.active):hover {
  background: rgba(255,255,255,.78);
  border-color: var(--accent-light);
}
/* …the active button keeps its green gradient even while hovered. Without this
   the higher-specificity hover rule above painted the selected card white,
   and since its text/icon are white it looked completely blank. */
.main--tool .st-device.active,
.main--tool .st-device.active:hover { background: var(--grad); color: #fff; }
.main--tool .st input[type="number"] { background: rgba(255,255,255,.6); }
/* Placeholders: the base rule fades them to opacity .6 which is too faint to
   read on the glass. Use a solid muted green that still reads as placeholder
   text but clears the WCAG contrast bar. */
.main--tool .st input::placeholder { color: #5d6d56; opacity: 1; }
/* Header chips pick up a light glass too, for cohesion */
.main--tool .st-chip {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---- Enhanced page header: eyebrow badge + gradient title + trust chips ---- */
.page-head--tool { text-align: center; border-bottom: 0; padding-bottom: var(--md); }
.st-eyebrow {
  display: inline-flex; align-items: center; gap: var(--xs);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  padding: var(--xxs) var(--sm); margin-bottom: var(--md);
  border-radius: 999px; color: var(--accent);
  background: var(--bg-accent); border: 1px solid rgba(84,115,78,.28);
}
.st-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.page-head--tool .page-title { font-size: clamp(30px, 4.4vw, 50px); }
/* Gradient-filled emphasis word in the title */
.page-head--tool .page-title em {
  background: var(--st-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.page-head--tool .page-intro { margin-inline: auto; }

/* Trust chips row under the intro */
.st-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--xs); margin-top: var(--lg); }
.st-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--text);
  padding: 6px var(--sm); border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--stroke);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.st-chip:hover {
  transform: translateY(-2px); border-color: var(--accent-light);
  box-shadow: 0 4px 12px rgba(9,19,21,.06);
}
.st-chip svg { width: 14px; height: 14px; color: var(--accent); }

/* ---- Tool body ---- */
/* The whole tool sits in one subtly tinted, rounded workspace panel so the
   white cards inside read as a cohesive unit (no leftover section divider). */
.st {
  display: grid; gap: var(--md);
  margin-top: var(--lg);
  padding: var(--md);
  background: var(--bg-2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  border-bottom: 1px solid var(--stroke);   /* override the global section divider */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Two-column workspace: settings (left, fixed-ish) + preview (right, flexible).
   align-items:start keeps the two cards aligned at the TOP and lets each take
   its natural height — so the compact settings card hugs its content instead of
   stretching to leave a big empty gap, and the preview's position:sticky works
   correctly (a stretched grid item can't stick). */
.st-grid {
  /* Two columns: a slim fixed settings rail on the left, and a wide preview that
     takes all remaining space so the screenshot renders large. */
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: var(--md); align-items: start;
}

/* Settings + preview are .card panels — give them a soft resting shadow and
   stop them from lifting on hover (they're containers, not clickable cards). */
.st-controls, .st-preview { box-shadow: 0 1px 3px rgba(9,19,21,.05); }
.st-controls:hover, .st-preview:hover {
  transform: none; border-color: var(--stroke);
  box-shadow: 0 1px 3px rgba(9,19,21,.05);
}
/* Both columns are top-aligned via .st-grid's align-items:start (above) */

/* Prominent URL + capture bar — the primary action, full width on top */
.st-bar {
  display: flex; gap: var(--xs); align-items: center;
  padding: var(--xs);
  background: var(--bg-1); border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: border-color .2s, box-shadow .2s;
}
.st-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(84,115,78,.14); }

.st-input-wrap { position: relative; flex: 1; }
.st-input-wrap > svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--subtext); pointer-events: none;
}
.st input[type="url"], .st input[type="number"] {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--text);
  padding: 13px 14px; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--bg-2); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.st input[type="url"] { padding-left: 42px; }
.st input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(84,115,78,.15); }
.st input::placeholder { color: var(--subtext); opacity: .6; }

/* The URL input sits flush inside the bar (the bar owns the border + focus ring) */
.st-bar input[type="url"] {
  border: none; background: transparent; border-radius: var(--radius);
  padding: 15px 14px 15px 46px; font-size: 15px;
}
.st-bar input[type="url"]:focus { box-shadow: none; background: transparent; }
.st-bar .st-input-wrap > svg { left: 18px; }
/* Green gradient capture button so the main action pops */
.st-bar .btn-primary {
  background: var(--st-grad); color: #fff; border: none;
  padding: 15px var(--lg); white-space: nowrap;
  box-shadow: 0 2px 10px rgba(68,96,60,.25);
}
.st-bar .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(68,96,60,.32); }
/* Visible keyboard focus for every action button in the tool (accessibility) */
.st .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Section labels inside the tool panel */
.st-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  color: var(--subtext); margin-bottom: var(--sm);
  display: flex; align-items: center; gap: var(--xs);
}
.st-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Device picker */
.st-device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--xs); margin-bottom: var(--lg); }
.st-device {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 8px; font-family: var(--sans);
  border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--bg-1);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s,
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* Lift + soft shadow + green border on hover */
.st-device:hover {
  border-color: var(--accent-light); transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(9,19,21,.08);
}
/* Clear keyboard-focus ring (these are real <button>s) — accessibility */
.st-device:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Active device: green gradient pill that clearly pops.
   Sits FLAT at rest (no permanent translate) so it doesn't look detached /
   floating next to its grounded neighbours — it only lifts on hover. */
.st-device.active {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(68,96,60,.28);
}
.st-device.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(68,96,60,.40);
}
.st-device .device-icon { width: 20px; height: 20px; color: var(--subtext); transition: color .2s; }
.st-device.active .device-icon { color: #fff; }
.st-device-name { font-size: 13px; font-weight: 500; }
.st-device-dim { font-size: 11px; color: var(--subtext); font-variant-numeric: tabular-nums; }
/* Bumped from .78 → .88 so the dimensions stay legible on the green gradient (contrast) */
.st-device.active .st-device-dim { color: rgba(255,255,255,.88); }

/* Custom dimensions */
.st-custom-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--xs); align-items: end; margin-bottom: var(--lg); max-width: 560px; }
.st-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--subtext); margin-bottom: 6px; }
/* Lock the inputs and the Apply button to one shared height so the button is
   the exact same size as the fields it sits next to (border-box → height is the
   full control height). Without this the ghost button rendered ~6px shorter. */
.st-custom-row input[type="number"],
.st-custom-row .btn { height: 46px; }
.st-custom-row .btn { padding-top: 0; padding-bottom: 0; }

/* Options row */
.st-options { display: flex; flex-wrap: wrap; gap: var(--lg); align-items: center; padding-top: var(--md); border-top: 1px solid var(--stroke); }
.st-toggle { display: flex; align-items: center; gap: var(--xs); cursor: pointer; user-select: none; font-size: 14px; color: var(--text); }
.st-toggle input { display: none; }
.st-track { width: 40px; height: 22px; border-radius: 999px; background: var(--bg-3); position: relative; transition: background-color .2s; flex: none; }
.st-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.st-toggle input:checked + .st-track { background: var(--accent); }
.st-toggle input:checked + .st-track::after { transform: translateX(18px); }
.st-quality { display: flex; align-items: center; gap: var(--sm); flex: 1; min-width: 220px; }
.st-quality > label { font-size: 13px; color: var(--subtext); white-space: nowrap; }
.st input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: var(--bg-3); outline: none; }
.st input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.st input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }
.st-quality-val { font-weight: 600; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }

/* Preview / result — large panel on the right.
   No position:sticky — when it was sticky the preview pinned to the viewport
   while the settings panel scrolled, so the two panel TOPS drifted out of line.
   Static keeps the preview top locked level with the settings panel top. */
.st-preview {
  min-height: 480px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(84,115,78,.05) 0%, transparent 60%),
    var(--bg-1);
}
.st-empty { text-align: center; color: var(--subtext); padding: var(--xl); }
.st-empty svg { width: 52px; height: 52px; opacity: .5; margin-bottom: var(--sm); }
.st-empty p { font-size: 14px; max-width: 420px; margin: 0 auto; line-height: 1.6; }
.st-loader { display: flex; flex-direction: column; align-items: center; gap: var(--md); padding: var(--xl); }
.st-spinner { width: 40px; height: 40px; border: 3px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.st-loader-text { color: var(--subtext); font-size: 14px; text-align: center; }

/* Determinate progress ring — fills based on REAL elapsed time (see startLoader
   in the page script), so it stays in step with how long the capture takes. */
.st-ring { position: relative; width: 64px; height: 64px; }
.st-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); } /* start the arc at 12 o'clock */
.st-ring-track { fill: none; stroke: var(--bg-3); stroke-width: 4; }
.st-ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 163.36;                 /* 2πr, r = 26 */
  stroke-dashoffset: 163.36;                /* starts empty */
  transition: stroke-dashoffset .18s linear;
}
.st-ring-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.st-result { width: 100%; }
.st-result-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sm); margin-bottom: var(--md); }
.st-meta { display: flex; flex-wrap: wrap; gap: var(--sm); font-size: 13px; color: var(--subtext); align-items: center; }
.st-meta strong { color: var(--text); font-weight: 600; }
.st-img-wrap { background: var(--bg-2); border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 10px; max-height: min(82vh, 920px); overflow-y: auto; }
.st-img-wrap img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.st-banner { display: flex; gap: var(--xs); align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-accent); border: 1px solid rgba(84,115,78,.25); color: var(--text); font-size: 13px; line-height: 1.5; margin-bottom: var(--md); }
.st-banner svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* ---- SEO content blocks (how it works / features / FAQ) ---- */
/* Tightened: the child <section>s carry their own padding, so keep the grid
   gap small to avoid doubled-up whitespace. */
.st-info { padding: var(--lg) 0 0; display: grid; gap: 0; }
.st-info > section { padding: var(--xl) 0; }
.st-info h2 { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: var(--md); letter-spacing: -0.02em; }
.st-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md); }
.st-step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-accent); color: var(--accent); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; margin-bottom: var(--sm); }
.st-step h3 { font-size: 16px; margin-bottom: var(--xxs); }
.st-step p { font-size: 13.5px; color: var(--subtext); line-height: 1.55; }
.st-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm) var(--lg); }
.st-feature { display: flex; gap: var(--xs); align-items: flex-start; font-size: 14px; color: var(--text); }
.st-feature svg { flex: none; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.st-faq details { border-bottom: 1px solid var(--stroke); padding: var(--md) 0; }
.st-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--md); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq p { font-size: 14px; color: var(--subtext); line-height: 1.6; margin-top: var(--sm); max-width: 820px; }

/* =====================================================================
   SIDEBAR COLLAPSE — icon-strip mode (desktop only)
   ===================================================================== */

/* Nav icon — always visible; wraps an inline SVG, inherits currentColor */
.nav-icon {
  display: flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--subtext);
  transition: color .2s;
}
/* Active / hovered link brightens the icon */
.nav a:hover .nav-icon,
.nav a.active .nav-icon { color: var(--text); }

/* Nav text — slides+fades out as the sidebar narrows */
.nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;   /* large enough to never clip in expanded state */
  transition: opacity .2s ease, max-width .4s var(--ease);
}

/* --- Collapsed sidebar state --------------------------------------- */
.side.collapsed { padding: var(--lg) var(--xs); gap: var(--lg); }
/* Centre the brand square; gap:0 + collapsed name width prevent the
   invisible wordmark from shoving the GT mark out of the clipped strip */
.side.collapsed .brand { justify-content: center; gap: 0; }
.side.collapsed .brand-name { opacity: 0; max-width: 0; pointer-events: none; }
.side.collapsed .nav-label { opacity: 0; pointer-events: none; }

/* Remove nav text from flex flow so icon centres properly */
.side.collapsed .nav-text {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
/* Hide chip completely — it sits outside nav-text in the HTML */
.side.collapsed .nav .chip { display: none; }

/* Centre the icon-only link — gap:0 removes the phantom space the
   zero-width nav-text would otherwise leave beside the icon */
.side.collapsed .nav a { justify-content: center; padding: var(--xs); gap: 0; }

/* Collapse promo card, legal links, and socials out of the flow */
.side-card, .side-legal, .socials {
  max-height: 300px; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .2s ease;
}
.side.collapsed .side-card,
.side.collapsed .side-legal,
.side.collapsed .socials {
  max-height: 0; opacity: 0; pointer-events: none;
}

/* Sidebar collapse toggle button */
.sidebar-toggle {
  align-self: flex-end; /* right-aligned in the flex column */
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--stroke); border-radius: 50%;
  cursor: pointer; color: var(--subtext); flex-shrink: 0;
  transition: background-color .2s, color .2s, border-color .2s;
}
.sidebar-toggle:hover { background: var(--bg-3); color: var(--text); border-color: transparent; }
.sidebar-toggle .toggle-chevron {
  display: inline-block; font-size: 15px; line-height: 1;
  transition: transform .45s var(--ease);
}
/* Flip chevron and re-centre button in narrow strip */
.side.collapsed .toggle-chevron { transform: rotate(180deg); }
.side.collapsed .sidebar-toggle { align-self: center; }

/* =====================================================================
   RESPONSIVE — sidebar becomes a slide-in drawer under 930px
   ===================================================================== */
@media (max-width: 930px) {
  .layout { grid-template-columns: 1fr; background: var(--bg-1); }

  .side {
    position: fixed; inset: 0;
    height: 100dvh; width: min(86vw, 340px);
    padding: var(--lg) var(--md);
    border-right: 1px solid var(--stroke);
    transform: translateX(-100%);
    transition: transform 1s var(--ease);
    z-index: 6; overflow-y: auto;
  }
  .side.open { transform: translateX(0); }

  .m-nav { display: flex; }

  /* Wrapper becomes a plain full-width column: the top bar sits at the top,
     and the content (.main) floats below it as a rounded panel. The surround
     matches the top bar (bg-1) so the menu reads as part of the same surface. */
  .content-wrap {
    background: var(--bg-1);
    border: 0; border-radius: 0; margin: 0;
    height: auto; overflow: visible;
    display: flex; flex-direction: column;
    min-height: 100dvh;
  }
  /* The two forest pages paint their backdrop on .content-wrap on desktop;
     on mobile we move it to the panel itself, so reset the surround here.
     (These :has selectors outrank the bare .content-wrap rule on specificity,
     so the reset must be stated explicitly.) */
  .content-wrap:has(.main--hero),
  .content-wrap:has(.main--tool) { background: var(--bg-1); }
  .content-wrap.shifted { transform: translateX(min(86vw, 340px)); }

  .scrim.on { opacity: 1; pointer-events: auto; }
  body.locked { overflow: hidden; }

  /* Burger morphs to an X */
  .m-burger.open span { background: transparent; }
  .m-burger.open span::before { transform: translateY(5px) rotate(45deg); }
  .m-burger.open span::after  { transform: translateY(-5px) rotate(-45deg); }

  /* Every page: content floats as a rounded "monitor" panel below the top
     bar, with the menu kept OUTSIDE the frame. Plain pages get a light bg +
     hairline; the forest pages override the bg/border further down. */
  .main {
    flex: 1; min-height: 0;                      /* fill the height under the top bar      */
    margin: var(--xs);                            /* equal gap all round → it floats        */
    max-width: none;                              /* fill the width minus the gap           */
    padding: 0 var(--lg) var(--lg);               /* side + bottom inset (content has its own top pad) */
    background: var(--bg-1);
    border: 1px solid var(--stroke);              /* hairline frame                         */
    border-radius: var(--r-md);                   /* rounded on all four sides              */
  }
  .cards { grid-template-columns: 1fr; }
  .res { grid-template-columns: 28px 1fr auto; }
  .res .res-tag { display: none; }

  /* Collapse toggle is a desktop-only affordance — hide it in the drawer */
  .sidebar-toggle { display: none; }

  /* -----------------------------------------------------------------
     HOME HERO — the floating panel (from the generic .main rule above)
     wears the forest backdrop. The logo + menu bar stays OUTSIDE the frame.
     ----------------------------------------------------------------- */
  .main--hero {
    overflow: hidden;                             /* clip the forest bg to the rounded corners  */
    border-color: rgba(255,255,255,.14);          /* light hairline reads on the dark forest    */
    padding: var(--xl) var(--lg);                 /* breathing room (no card now)               */
    /* Same cinematic forest backdrop the wrapper used on desktop */
    background:
      radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(6,12,8,.55) 100%),
      linear-gradient(180deg, rgba(6,12,8,.55) 0%, rgba(6,12,8,.30) 38%, rgba(6,12,8,.78) 100%),
      url("../images/trees.webp") center / cover no-repeat;
  }
  .main--hero .hero h1 { max-width: 100%; }

  /* Drop the frosted-glass card on mobile — content sits straight on the
     forest backdrop (the darken gradient keeps the text legible). */
  .main--hero .hero {
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .main--hero .hero::before { display: none; }    /* remove the now-unneeded blur layer */

  /* Buttons sit side by side on mobile (no wrapping). flex:1 splits the
     row evenly; smaller padding/label keeps both on one line on narrow phones. */
  .main--hero .hero-actions {
    flex-wrap: nowrap;                            /* force them onto one row     */
    gap: var(--sm);
    width: 100%;
  }
  .main--hero .hero-actions .btn {
    flex: 1;                                      /* equal-width, share the row  */
    justify-content: center;                      /* centre the label in its half */
    padding: 14px 16px;                           /* down from 18px/36px to fit   */
    font-size: 15px;
  }

  /* Screenshot tool: same floating forest panel as the home hero (the forest
     backdrop is moved off .content-wrap and onto the panel here). */
  .main--tool {
    overflow: hidden;                             /* clip the forest bg to the corners */
    border-color: rgba(255,255,255,.14);          /* light hairline on the dark image  */
    background:
      radial-gradient(120% 70% at 50% 0%, transparent 45%, rgba(6,12,8,.55) 100%),
      linear-gradient(180deg, rgba(6,12,8,.62) 0%, rgba(6,12,8,.42) 38%, rgba(6,12,8,.80) 100%),
      url("../images/trees.webp") center / cover no-repeat;
  }

  /* Screenshot tool reflow — stack to a single column on smaller screens */
  .st-grid { grid-template-columns: 1fr; }       /* settings + preview stack */
  .st-bar { flex-direction: column; align-items: stretch; padding: var(--sm); }
  .st-bar .btn-primary { justify-content: center; }
  .st-preview { position: static; min-height: 360px; }  /* drop sticky when stacked */
  .st-custom-row { grid-template-columns: 1fr 1fr; }
  .st-custom-row .btn { grid-column: span 2; }
  .st-options { flex-direction: column; align-items: stretch; gap: var(--md); }
  .st-steps { grid-template-columns: 1fr; }
  .st-feature-list { grid-template-columns: 1fr; }
}