/* GanttRight site styles.
   Dark by default, because the app is and the screenshots are. */

:root {
  --bg:       #171717;
  --panel:    #1f1f1f;
  --panel-2:  #262626;
  --line:     #333;
  --ink:      #e8e8e8;
  --ink-dim:  #a3a3a3;
  --ink-faint:#7a7a7a;
  --red:      #bc0010;   /* the logo red */
  --green:    #12893e;   /* the logo green */
  --red-lit:  #e23b4a;   /* lifted for text on dark */
  --green-lit:#3fb76a;
  --critical: #c46a68;   /* the app's pink track, for the legend */
  --float:    #5e9e73;   /* the app's green track, for the legend */
  --accent:   #8b7cc8;   /* the app's link purple */
  --accent-2: #a394d8;
  --bad:      #c0392b;
  --radius:   10px;
  --wrap:     1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0; }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1.1em; }

/* ---- header ---------------------------------------------------------- */

header.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23,23,23,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.brand { display: flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 30px; width: auto; }
.bottom .brand img { height: 26px; }

.top nav { margin-left: auto; display: flex; gap: 22px; align-items: center; align-self: stretch; }
.top nav a { color: var(--ink-dim); font-size: .95rem; }
.top nav a:hover { color: var(--ink); text-decoration: none; }

/* Industries opens on hover or keyboard focus. No script: the parent link
   still goes to the hub, so the menu is an addition, never the only route. */
.nav-drop { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop > a::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .65;
}
.nav-menu {
  position: absolute; top: 100%; left: -14px; min-width: 186px;
  display: none; padding: 8px 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 16px 38px rgba(0,0,0,.45);
}
/* the gap under the trigger is bridged so the pointer never leaves the target */

.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
.nav-menu a { display: block; padding: 7px 16px; font-size: .92rem; white-space: nowrap; }
.nav-menu a:hover { background: var(--panel-2); color: var(--ink); }
.nav-menu a:last-child {
  margin-top: 6px; padding-top: 11px;
  border-top: 1px solid var(--line); color: var(--ink-faint);
}

/* Try Free leads the menu and is the only button in it. */
.top nav a.nav-cta {
  order: -1; background: var(--accent); color: #fff;
  padding: 8px 16px; border-radius: 7px; font-weight: 650;
  margin-right: 4px;
}
.top nav a.nav-cta:hover { background: var(--accent-2); color: #fff; }

/* Section headings carry the logo's red-to-green rule. */
section > .wrap > h2::after, #whatyouget .grid-2 > div > h2::after,
.prose h1::after {
  content: ""; display: block; width: 62px; height: 3px; border-radius: 2px;
  margin: .55em 0 .8em;
  background: linear-gradient(90deg, var(--red) 0%, var(--green) 100%);
}

.tag { color: var(--green-lit) !important; }

/* ---- buttons --------------------------------------------------------- */

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  font-weight: 600; font-size: .98rem; border: 1px solid transparent;
  cursor: pointer; transition: transform .08s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn-ghost:hover { border-color: var(--ink-faint); }

h1 { margin-top: 0; }

.slogan {
  font-weight: 700; font-size: 1.05rem; letter-spacing: .01em;
  margin: -.3em 0 1.2em;
  background: linear-gradient(90deg, var(--red-lit) 0%, var(--green-lit) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-amount .cents { font-size: .5em; vertical-align: super; letter-spacing: -.02em; }

/* ---- hero ------------------------------------------------------------ */

.hero { padding: 40px 0 60px; border-bottom: 1px solid var(--line); }
.hero .lede { font-size: 1.22rem; color: var(--ink-dim); max-width: 46ch; margin-bottom: 1.8em; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .note { color: var(--ink-faint); font-size: .88rem; margin: 1.6em 0 0; }

.shot {
  margin: 44px 0 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  padding: 12px 18px; font-size: .88rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); background: var(--panel-2);
}

/* ---- sections -------------------------------------------------------- */

section { padding: 72px 0; border-bottom: 1px solid var(--line); }
.section-lede { color: var(--ink-dim); max-width: 60ch; font-size: 1.06rem; }

.grid { display: grid; gap: 26px; margin-top: 40px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* A lone final card spans rather than sitting half-empty. */
#how .grid-2 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--ink-dim); margin: 0; font-size: .97rem; }
.card .tag {
  display: inline-block; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; font-weight: 700;
}

/* a small legend that mirrors the app's own color language */
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 28px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--ink-dim); }
.swatch { width: 26px; height: 13px; border-radius: 3px; flex: none; }
.swatch.critical { background: var(--critical); }
.swatch.float    { background: var(--float); }
.swatch.milestone {
  width: 13px; height: 13px; background: var(--accent);
  transform: rotate(45deg); border-radius: 2px;
}

/* ---- steps ----------------------------------------------------------- */

.steps { counter-reset: step; margin-top: 40px; display: grid; gap: 18px; }
.step {
  display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent-2); font-weight: 700; font-size: .95rem;
}
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; color: var(--ink-dim); font-size: .97rem; }

/* Step one forks: the two ways a project opens. Steps two to five are shared,
   so only this step carries the choice. */
.fork { margin-top: 16px; display: grid; gap: 14px;
        grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .fork { grid-template-columns: 1fr; } }
.opt { background: var(--panel-2); border: 1px solid var(--line);
       border-radius: 10px; padding: 16px 18px; }
.opt-tag { display: block; font-size: .71rem; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.opt img { display: block; width: 100%; max-width: 342px; height: auto;
           margin: 0 0 14px; border: 1px solid var(--line); border-radius: 8px; }
.opt b { display: block; color: var(--ink); font-size: .98rem; margin-bottom: .45em; }
.opt p { margin: 0; font-size: .93rem; }

/* ---- templates ------------------------------------------------------- */

.tpl-list { margin-top: 36px; display: grid; gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tpl {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; font-size: .95rem;
}
.tpl .ind { color: var(--accent-2); font-weight: 650; font-size: .78rem;
            text-transform: uppercase; letter-spacing: .05em; flex: none; }
.tpl .prj { color: var(--ink-dim); }

/* ---- forms ----------------------------------------------------------- */

.form { background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 30px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 7px; }
.field .hint { font-size: .82rem; color: var(--ink-faint); margin: 6px 0 0; }
input[type=text], input[type=email], textarea, select {
  width: 100%; padding: 11px 13px; border-radius: 7px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); font: inherit; font-size: .97rem;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,124,200,.22);
}
textarea { min-height: 148px; resize: vertical; }

/* honeypot - hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { margin-top: 16px; padding: 12px 15px; border-radius: 7px;
            font-size: .93rem; display: none; }
.form-msg.ok   { display: block; background: rgba(94,158,115,.14); border: 1px solid var(--float); color: #b6e0c3; }
.form-msg.err  { display: block; background: rgba(192,57,43,.14);  border: 1px solid var(--bad);   color: #f0b3ac; }

/* ---- inline subscribe ------------------------------------------------ */

.subscribe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.subscribe input[type=email] { flex: 1 1 260px; width: auto; }

/* ---- prose (privacy, support) ---------------------------------------- */

.prose { max-width: 70ch; padding: 60px 0; }
.prose h2 { margin-top: 2.2em; padding-top: .4em; }
.prose h2:first-of-type { margin-top: 1.2em; }
.prose ul { padding-left: 1.3em; color: var(--ink-dim); }
.prose li { margin-bottom: .5em; }
.prose .updated { color: var(--ink-faint); font-size: .9rem; }
.prose .callout {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: 18px 22px; border-radius: 0 8px 8px 0; margin: 1.6em 0;
}
.prose .callout p:last-child { margin-bottom: 0; }

/* ---- footer ---------------------------------------------------------- */

footer.bottom { padding: 48px 0 60px; color: var(--ink-faint); font-size: .92rem; }
.bottom .cols { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
/* footer links: two stacked columns, not one wrapping row */
.bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.bottom .foot-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 44px; }
.bottom .foot-nav > div { display: flex; flex-direction: column; gap: 8px; }

.bottom a { color: var(--ink-dim); }
.bottom .fine { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---- light mode, for anyone who prefers it --------------------------- */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff; --panel: #f7f7f8; --panel-2: #eeeef0; --line: #dcdce0;
    --ink: #1b1b1d; --ink-dim: #55555c; --ink-faint: #85858e;
    --accent: #6a5aa8; --accent-2: #54467f;
    --red-lit: #bc0010; --green-lit: #0f7434;
  }
  header.top { background: rgba(255,255,255,.92); }
  .shot { box-shadow: 0 14px 40px rgba(0,0,0,.12); }
}

@media (max-width: 640px) {
  .hero { padding: 26px 0 40px; }
  section { padding: 54px 0; }
  .top nav { gap: 14px; }
  .top nav a.hide-sm { display: none; }
}

/* ==========================================================================
   Landing page.
   Everything here is HTML and CSS only - the FAQ is <details>, the call to
   action is position:sticky, the comparison is a grid. No script runs on this
   page at all except the forms, which genuinely need it.
   ========================================================================== */

/* ---- offer band: the trial and the guarantee, side by side ------------- */

.offer {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; margin: 44px 0 0;
}
.offer-pair {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.offer-item { display: flex; gap: 18px; align-items: flex-start; }
.offer-item .num {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  background: var(--bg); border: 2px solid var(--accent);
  color: var(--accent-2); font-weight: 800; font-size: 1.35rem;
}
.offer-item .num small { display: block; font-size: .56rem; letter-spacing: .1em;
                         font-weight: 700; margin-top: 3px; color: var(--ink-faint); }
.offer-item h3 { margin-bottom: .3em; }
.offer-item p { margin: 0; color: var(--ink-dim); font-size: .96rem; }
.offer-note {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: 1.02rem;
}
.offer-note strong { color: var(--ink); }

/* ---- price ------------------------------------------------------------- */

.price-card {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 32px; text-align: center;
}
.price-amount { font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 800;
                line-height: 1; letter-spacing: -.02em; }
.price-amount .cur { font-size: .5em; vertical-align: super; font-weight: 700; }
.price-once { color: var(--accent-2); font-weight: 650; margin: .5em 0 0; }
.price-sub { color: var(--ink-faint); font-size: .9rem; margin: .4em 0 1.4em; }
.price-card .btn { width: 100%; }

.stack { list-style: none; margin: 26px 0 0; padding: 0; text-align: left; }
.stack li {
  padding: 11px 0 11px 30px; position: relative;
  border-top: 1px solid var(--line); color: var(--ink-dim); font-size: .96rem;
}
.stack li:first-child { border-top: 0; }
.stack li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 11px; height: 6px; border-left: 2px solid var(--float);
  border-bottom: 2px solid var(--float); transform: rotate(-45deg);
}
.stack li strong { color: var(--ink); font-weight: 650; }

/* ---- comparison -------------------------------------------------------- */

.compare { display: grid; gap: 20px; margin-top: 38px;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.compare > div { border: 1px solid var(--line); border-radius: var(--radius);
                 padding: 26px; background: var(--panel); }
.compare .ours { border-color: var(--accent); }
.compare h3 { margin-bottom: .8em; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 9px 0 9px 26px; position: relative;
              color: var(--ink-dim); font-size: .95rem; }
.compare .ours li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 10px; height: 5px; border-left: 2px solid var(--float);
  border-bottom: 2px solid var(--float); transform: rotate(-45deg);
}
.compare .theirs li::before {
  content: "×"; position: absolute; left: 3px; top: 7px;
  color: var(--bad); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.compare .runs { margin: 16px 0 0; font-size: .88rem; color: var(--ink-faint); }

/* ---- FAQ: <details>, no script ---------------------------------------- */

.faq { margin-top: 36px; max-width: 74ch; }
.faq details {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; padding: 17px 48px 17px 20px; position: relative;
  font-weight: 650; font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 23px;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq summary:hover { color: var(--accent-2); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq .answer { padding: 0 20px 18px; color: var(--ink-dim); font-size: .97rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- sticky call to action -------------------------------------------- */

.sticky-cta {
  position: sticky; bottom: 0; z-index: 15;
  background: rgba(31,31,31,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 14px 0;
}
.sticky-cta .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sticky-cta .line { flex: 1 1 260px; font-size: .95rem; color: var(--ink-dim); }
.sticky-cta .line strong { color: var(--ink); }

/* ---- three steps, side by side ---------------------------------------- */

.row-steps { counter-reset: rstep; display: grid; gap: 20px; margin-top: 38px;
             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row-steps > div { background: var(--panel); border: 1px solid var(--line);
                   border-radius: var(--radius); padding: 24px; }
.row-steps > div::before {
  counter-increment: rstep; content: counter(rstep);
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--accent-2); font-weight: 700; font-size: .88rem; margin-bottom: 14px;
}
.row-steps h3 { margin-bottom: .35em; font-size: 1.05rem; }
.row-steps p { margin: 0; color: var(--ink-dim); font-size: .95rem; }

@media (prefers-color-scheme: light) {
  .sticky-cta { background: rgba(247,247,248,.96); }
}
@media (max-width: 640px) {
  .offer { padding: 24px; }
  .sticky-cta .line { flex-basis: 100%; }
}


/* ---- Microsoft Store button ------------------------------------------ */

.storerow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: #111; border-radius: 8px; padding: 9px 20px 9px 16px;
  font-weight: 600; border: 1px solid #fff;
}
.btn-store:hover { background: #e9e9ec; text-decoration: none; color: #111; }
.btn-store .ms { display: grid; grid-template-columns: 9px 9px; gap: 2px; flex: none; }
.btn-store .ms i { width: 9px; height: 9px; display: block; }
.btn-store .ms i:nth-child(1) { background: #f25022; }
.btn-store .ms i:nth-child(2) { background: #7fba00; }
.btn-store .ms i:nth-child(3) { background: #00a4ef; }
.btn-store .ms i:nth-child(4) { background: #ffb900; }
.btn-store small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #5a5a62; line-height: 1.3; }
.btn-store b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.btn-store.soon { opacity: .55; pointer-events: none; }
.store-note { font-size: .82rem; color: var(--ink-faint); margin: 0; }

/* ---- guarantee badges ------------------------------------------------ */

.badges { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 36px 0 0; }
.badge {
  position: relative; text-align: center; padding: 34px 24px 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
}
.badge::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--red) 0%, var(--green) 100%);
}
/* The seal has to hold a word as long as SUBSCRIPTION without clipping. */
.badge .seal {
  width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-content: center; line-height: 1; padding: 0 8px;
  border: 4px solid var(--green); color: var(--green-lit);
  background: rgba(18,137,62,.09);
  box-shadow: 0 0 0 7px rgba(18,137,62,.07);
}
.badge.alt .seal { box-shadow: 0 0 0 7px rgba(139,124,200,.09); }
.badge.warm .seal { box-shadow: 0 0 0 7px rgba(188,0,16,.08); }
.badge.alt .seal { border-color: var(--accent); color: var(--accent-2); background: rgba(139,124,200,.12); }
.badge.warm .seal { border-color: var(--red); color: var(--red-lit); background: rgba(188,0,16,.10); }
.badge .seal b { display: block; font-size: 2.35rem; font-weight: 800; letter-spacing: -.03em; }
.badge .seal span { display: block; font-size: .62rem; letter-spacing: .05em; font-weight: 700;
  text-transform: uppercase; margin-top: 5px; white-space: nowrap; }
.badge h3 { font-size: 1.12rem; margin-bottom: .4em; }
.badge p { margin: 0; color: var(--ink-dim); font-size: .94rem; }
.badge-note { margin: 18px 0 0; font-size: .86rem; color: var(--ink-faint); }

/* ---- trifecta -------------------------------------------------------- */

.trifecta { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; counter-reset: tri; }
.tri {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; border-top: 3px solid var(--accent);
}
.tri:nth-child(1) { border-top-color: var(--red); }
.tri:nth-child(2) { border-top-color: var(--green); }
.tri .role { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 8px; }
.tri h3 { margin-bottom: .4em; }
.tri p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.tri-note { margin: 22px 0 0; color: var(--ink-dim); }

/* ---- merch ----------------------------------------------------------- */

.merch { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 34px; }
.item {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column;
}
.item .art {
  position: relative; height: 140px; border-radius: 8px; margin-bottom: 16px;
  display: grid; place-content: center; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink-faint); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.item .art::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/mark.png") center/58% no-repeat;
  opacity: .5;
}
.item .art span { position: relative; align-self: end; padding-bottom: 8px; }
/* Each product gets its own wash so twelve cards do not read as one. */
.item:nth-child(3n+1) .art { background: #232024; }
.item:nth-child(3n+2) .art { background: #202426; }
.item:nth-child(3n+3) .art { background: #262322; }
.item h3 { margin-bottom: .35em; font-size: 1.05rem; }
.item p { color: var(--ink-dim); font-size: .93rem; margin: 0 0 1em; }
.item .price { color: var(--accent-2); font-weight: 700; margin: 0 0 14px; font-size: .95rem; }
.item .btn { margin-top: auto; text-align: center; }

/* ---- video tutorials ------------------------------------------------- */

.videos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 34px; }
.vid { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vid .frame { position: relative; aspect-ratio: 16 / 9; background: var(--panel-2); display: grid; place-content: center; }
.vid .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid .frame .soon { color: var(--ink-faint); font-size: .86rem; text-align: center; padding: 0 20px; }
.vid .meta { padding: 16px 18px 18px; }
.vid .meta h3 { font-size: 1.02rem; margin-bottom: .3em; }
.vid .meta p { margin: 0; color: var(--ink-dim); font-size: .92rem; }
.vid .len { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }

@media (max-width: 860px) { .trifecta { grid-template-columns: 1fr; } }


/* ---- video placeholder watermark ------------------------------------- */

.vid .frame::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/mark.png") center/32% no-repeat; opacity: .12;
}
.vid .frame .soon { position: relative; }
.vid .frame:has(iframe)::before { content: none; }

/* ---- the .gtrt document icon ----------------------------------------- */

.filerow { display: flex; gap: 20px; align-items: flex-start; }
.filerow img { width: 72px; height: auto; flex: none; margin-top: 4px; }
.filerow .cap { font-size: .8rem; color: var(--ink-faint); text-align: center;
  margin: 8px 0 0; letter-spacing: .04em; }

/* ---- social links ---------------------------------------------------- */

.social { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.social a {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-content: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ---- 404 ------------------------------------------------------------- */

.notfound { text-align: center; padding: 80px 0 60px; }
.notfound img { width: 130px; height: auto; margin-bottom: 26px; }
.notfound .code { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 10px; }
.notfound .links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 640px) { .filerow { flex-direction: column; } }


/* ---- landing page: the Store call to action, framed ------------------ */

.store-frame {
  position: relative;
  padding: 40px 38px 34px;
  border-radius: 18px;
  border: 2px solid transparent;
  /* Two backgrounds: the panel fill, then the logo gradient as the border. */
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(115deg, var(--red) 0%, var(--accent) 52%, var(--green) 100%) border-box;
  box-shadow: 0 16px 48px rgba(0,0,0,.34);
}
.store-frame > :first-child { margin-top: 0; }
.store-frame .lede { margin-bottom: 1.5em; }
.store-frame .storerow { margin-bottom: 14px; }
.store-frame .store-note { max-width: 52ch; }


/* The button carries more weight inside the frame. */
.store-frame .btn-store { padding: 12px 26px 12px 20px; }
.store-frame .btn-store b { font-size: 1.08rem; }

@media (prefers-color-scheme: light) {
  .store-frame { box-shadow: 0 14px 40px rgba(0,0,0,.12); }
}

@media (max-width: 640px) {
  .store-frame { padding: 34px 22px 26px; }
}


/* ---- screenshot gallery + CSS-only lightbox -------------------------- */

.gallery { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 34px; }
.gallery figure {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); transition: border-color .15s ease, transform .12s ease;
}
.gallery figure:hover { border-color: var(--accent); transform: translateY(-2px); }
.gallery a { display: block; position: relative; }
.gallery img {
  display: block; width: 100%; height: 100%;
  /* One shape for every thumbnail, so the captions below them all start at
     the same height. Sources range from 1.32 to 2.78, so they are filled and
     cropped rather than letterboxed; clicking still opens the whole image. */
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
}
.gallery a::after {
  content: "View larger"; position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.gallery figure:hover a::after { opacity: 1; }
/* Cards in a row share a height, so the caption text is pushed to the
   bottom edge and every card's text lines up, whatever its length. */
.gallery figure { display: flex; flex-direction: column; }
.gallery figcaption {
  padding: 13px 16px 15px; border-top: 1px solid var(--line); background: var(--panel-2);
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end;
}
.gallery figcaption b { display: block; font-size: .96rem; color: var(--ink); margin-bottom: 2px; }
.gallery figcaption span { font-size: .87rem; color: var(--ink-dim); }

/* Each lightbox is a :target panel - no script involved. */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(8,8,9,.94); padding: 30px;
}
.lightbox:target { display: grid; place-content: center; }
.lightbox img { max-width: 94vw; max-height: 84vh; width: auto; height: auto;
  border-radius: 8px; border: 1px solid var(--line); display: block; }
.lightbox .shut {
  position: absolute; inset: 0; display: block;   /* click anywhere to dismiss */
}
.lightbox .x {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: 1.4rem; line-height: 1; font-weight: 600;
}
.lightbox .x:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.lightbox figcaption { position: relative; margin-top: 14px; text-align: center;
  color: var(--ink-dim); font-size: .9rem; }
.lightbox figure { margin: 0; position: relative; z-index: 1; }

/* ---- the mark beside the sticky call to action ----------------------- */

.sticky-cta .wrap { display: flex; align-items: center; gap: 16px; }
.sticky-cta .mark { width: 34px; height: auto; flex: none; display: block; }
.sticky-cta .line { flex: 1; }
@media (max-width: 640px) { .sticky-cta .mark { display: none; } }


/* The line that closes the hero copy and points at the button. */
/* the slogan's red-to-green gradient, at the lede's larger size */
.hero .lede.gradient {
  font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(90deg, var(--red-lit) 0%, var(--green-lit) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede-cta {
  font-size: 1.16rem; font-weight: 700; color: var(--ink);
  margin: -.6em 0 1.5em;
}


/* ---- What You Get: balance the list against the taller price card ---- */

/* The list is now the taller side, so it sets the row height and the price
   card sits centred against it rather than stretching to leave a gap. */
#whatyouget .grid-2 { align-items: stretch; }
#whatyouget .grid-2 > .price-card { align-self: center; }
#whatyouget .grid-2 > div:first-child { display: flex; flex-direction: column; }
#whatyouget .grid-2 > div:first-child > h2 { margin-top: 0; }
/* The heading and lede fill most of the card's height, so the list only has a
   few pixels left to absorb. Distributing them keeps the bottom edges level
   without the wide gaps that stretching the list alone produced. */
#whatyouget .grid-2 > div:first-child .stack {
  margin-top: 4px;
  width: 100%;
  flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: space-between;
}
/* Give the list a little more air so it reads as the same weight as the card. */
#whatyouget .grid-2 > div:first-child .stack li { padding-top: 13px; padding-bottom: 13px; }

@media (max-width: 720px) {
  #whatyouget .grid-2 { align-items: stretch; }
  #whatyouget .grid-2 > div:first-child .stack li { padding-top: 11px; padding-bottom: 11px; }
}


/* ---- hero: copy on the left, the chart on the right ------------------ */

.hero-grid {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
.hero-grid .lede { max-width: none; }
.hero-grid > :first-child > :first-child { margin-top: 0; }

.hero-shot {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot figcaption {
  padding: 11px 16px; font-size: .84rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); background: var(--panel-2);
}


@media (prefers-color-scheme: light) {
  .hero-shot { box-shadow: 0 14px 40px rgba(0,0,0,.12); }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
}


/* ---- landing page: the chart gets the same frame as the Store panel -- */

.hero-shot.framed {
  overflow: visible;                      /* the border is painted, not clipped */
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(115deg, var(--red) 0%, var(--accent) 52%, var(--green) 100%) border-box;
  box-shadow: 0 16px 48px rgba(0,0,0,.34);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-shot.framed img { border-radius: 9px; }
.hero-shot.framed figcaption {
  border-top: 0; background: transparent;
  padding: 12px 6px 2px; text-align: center;
}


@media (prefers-color-scheme: light) {
  .hero-shot.framed { box-shadow: 0 14px 40px rgba(0,0,0,.12); }
}


/* The trifecta carries its own frames and shadows, so the figure adds none. */
.hero-shot.bare {
  border: 0; background: none; box-shadow: none; overflow: visible;
}
.hero-shot.bare img { border-radius: 0; }
.hero-shot.bare figcaption {
  border-top: 0; background: transparent; padding: 14px 2px 0; text-align: center;
}

/* Fine print runs the full width under both columns rather than wrapping. */
.hero-note {
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  text-align: center; line-height: 2;
}
@media (max-width: 720px) { .hero-note { text-align: left; line-height: 1.8; } }


/* ---- industry icon tiles beside the Industries heading --------------- */

/* One illustrative image in place of the four tiles: nothing to click, so it
   never competes with the real links in the cards below. */
.ind-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ind-figure img {
  display: block; width: 100%; max-width: 480px; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ind-figure figcaption {
  margin-top: 10px; font-size: .88rem; color: var(--ink-faint); text-align: center;
}

.ind-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ind-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 24px 22px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .15s ease, transform .12s ease;
}
.ind-tile:hover { border-color: var(--tone, var(--accent)); transform: translateY(-2px); text-decoration: none; }
.ind-tile .ico {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-content: center;
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 52%, transparent);
}
.ind-tile .ico svg { width: 24px; height: 24px; fill: var(--tone); display: block; }
.ind-tile b { font-size: 1.02rem; font-weight: 650; }

@media (max-width: 520px) { .ind-tiles { grid-template-columns: 1fr; } }


/* ---- landing page: one frame around copy and chart together ---------- */

/* the headline spans both columns: one line instead of a wrapped offer,
   and it levels the text column with the hero image beneath it */
.store-frame > .hero-title { margin: 0 0 .5em; }
.store-frame .hero-grid { gap: 40px; align-items: center; margin: 0; }
.store-frame .hero-grid > div > :first-child { margin-top: 0; }
.store-frame .hero-grid .store-note { margin-bottom: 0; }
.store-frame .hero-shot.bare figcaption { padding: 14px 2px 0; }

@media (max-width: 960px) {
  .store-frame .hero-grid { gap: 30px; }
}


/* ---- lightbox: step between images, still no script ------------------ */

.lightbox .nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: 2rem; line-height: 0; font-weight: 600; padding-bottom: 4px;
}
.lightbox .nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.lightbox .nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox .prev { left: 28px; }
.lightbox .next { right: 28px; }

.lightbox .count {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3;
  margin: 0; text-align: center; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-faint);
  pointer-events: none;
}

@media (max-width: 720px) {
  .lightbox .nav { width: 46px; height: 46px; font-size: 1.6rem; }
  .lightbox .prev { left: 10px; }
  .lightbox .next { right: 10px; }
}


/* ---- a legend belongs to the picture beneath it ---------------------- */

/* Pull the two together so they read as one unit rather than two blocks. */
.legend + .shot,
.legend + figure { margin-top: 12px; }
.legend + .badge-note { margin-top: 10px; }
.legend + .badge-note + .shot,
.legend + .badge-note + figure { margin-top: 12px; }


/* The Brief panel stretches to match the cards beside it, so centre the page
   and its caption inside rather than leaving the slack at the bottom. */
#everyone .grid-2 > figure.shot {
  display: flex; flex-direction: column; justify-content: center;
}


/* ---- testimonials ---------------------------------------------------- */

.quotes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quote {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px 22px;
  display: flex; flex-direction: column;
}
.quote::before {
  content: "C"; display: block; font-size: 2.6rem; line-height: .6;
  color: var(--accent); margin-bottom: 12px; font-weight: 700;
}
.quote p { margin: 0 0 1.1em; color: var(--ink); font-size: 1rem; }
.quote cite {
  margin-top: auto; font-style: normal; font-size: .88rem; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: 14px;
}
.quote cite b { display: block; color: var(--ink-dim); font-weight: 650; }

/* Placeholder styling: obvious on the page so it cannot ship unnoticed. */
.quote.placeholder { border-style: dashed; border-color: var(--red); }
.quote.placeholder p { color: var(--ink-dim); font-style: italic; }
.quotes-note {
  margin: 16px 0 0; font-size: .86rem; color: var(--red-lit); font-weight: 650;
}

.hero .quotes { margin-top: 30px; }


/* ---- landing hero: three points between the claim and the buttons ---- */

.hero-points { list-style: none; margin: 0 0 1.4em; padding: 0; }
.hero-points li {
  position: relative; padding: 7px 0 7px 30px;
  color: var(--ink-dim); font-size: 1.05rem; line-height: 1.55;
}
.hero-points li strong { color: var(--ink); font-weight: 650; }
.hero-points li::before {
  content: ""; position: absolute; left: 3px; top: 15px;
  width: 11px; height: 6px; border-left: 2px solid var(--float);
  border-bottom: 2px solid var(--float); transform: rotate(-45deg);
}
.store-frame .lede { margin-bottom: 1.1em; }

/* ---- hero facts: the six one-liners, tucked under the buttons ---- */
.hero-facts {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px;
  font-size: .86rem; color: var(--ink-faint);
}
.hero-facts li { white-space: nowrap; }
.hero-facts li::before { content: "·"; margin-right: .5em; opacity: .7; }
@media (max-width: 760px) {
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li { white-space: normal; }
}

/* the "will not do" card sizes to its text instead of stretching */
#yours .card { align-self: start; }

/* ---- features page: one card per thing you can point at --------------- */
/* .prose caps at 70ch for paragraphs; cards want the standard page width,
   which is the same var every other .wrap on the site uses. */
.features-page { max-width: var(--wrap); }
.features-page > h1, .features-page > h2,
.features-page > .updated, .features-page > .section-lede { max-width: 70ch; }
.feat-grid {
  display: grid; gap: 18px; margin: 26px 0 46px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.feat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px 20px;
}
.feat h3 { margin: 14px 0 .4em; font-size: 1rem; }
.feat p { margin: 0; font-size: .93rem; color: var(--ink-dim); }
/* Deliberately obvious: every one of these is waiting for a cropped
   screenshot. Replace the div with an <img> and the dashes disappear. */
.feat-shot {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-2);
}
.feat-shot span {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.feat-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---- downloads: one row per pack -------------------------------- */
.dl {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; margin: 16px 0;
}
.dl h3 { margin: 0 0 .2em; }
.dl p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.dl .dl-sub { color: var(--accent-2); font-weight: 650; font-size: .92rem; margin-bottom: .6em; }
.dl-get { text-align: center; }
.dl-get .btn { width: 100%; }
.dl-meta { margin-top: 8px !important; font-size: .82rem !important; color: var(--ink-faint) !important; }
@media (max-width: 620px) { .dl { grid-template-columns: 1fr; } }