:root{--bg:#0b0b0c;--panel:#121214;--text:#e9e9ea;--muted:#b3b3b7;--orange:#a01e00;--blue:#3f80d9;--maxw:1100px}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:var(--maxw);margin:0 auto;padding:24px}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
.nav{position:sticky;top:0;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid #1e1e22;z-index:50}
.nav-inner{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px;min-width:320px} .brand img{height:72px;width:auto;display:block}
.brand-text .name{font-weight:800;font-size:28px;line-height:1} .brand-text .strap{font-size:12px;color:var(--muted)}
.brand-text .strap b{color:var(--orange)}
.menu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.menu a{padding:10px 12px;color:var(--text)}
.menu a[aria-current="page"]{text-decoration:underline;color:var(--blue)}
.cta{display:inline-flex;gap:8px;align-items:center;margin-left:6px;border:1px solid var(--orange);background:var(--orange);
      padding:10px 14px;border-radius:999px;font-weight:700;color:#ffffff !important;text-decoration:none}
.cta:focus,.cta:hover{text-decoration:none;filter:brightness(1.05)}
.cta .icon{color:#ffffff}
.hero{padding:88px 0 46px;border-bottom:3px solid var(--orange);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.badge{display:none}
h1{font-size:42px;line-height:1.12;margin:14px 0 10px} .lead{font-size:18px;color:var(--muted);max-width:920px}
.section{padding:40px 0;border-bottom:1px solid #1c1c20}
.card{background:var(--panel);border:1px solid #1f1f24;border-radius:16px;padding:22px;box-shadow:0 4px 24px rgba(0,0,0,.25)}
.grid{display:grid;gap:18px} @media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr 1fr}}
.icon{display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--orange)} .icon.blue{color:var(--blue)}
.footer{padding:40px 0;color:var(--muted);font-size:14px}
@media (max-width:600px){.brand img{height:56px} .brand-text .name{font-size:22px} .brand-text .strap{font-size:11px} .menu a{padding:8px 10px} h1{font-size:32px}} 
.signup{margin-top:14px} .signup input[type="email"]{padding:10px 12px;border-radius:10px;border:1px solid #2a2a2f;background:#0f0f12;color:var(--text);width:280px;max-width:80%}
.signup button{padding:10px 14px;border-radius:999px;border:1px solid var(--blue);background:transparent;color:var(--blue);margin-left:8px}
h2{font-size:28px;margin:0 0 12px;border-left:6px solid var(--orange);padding-left:12px} .kicker{color:var(--muted);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.list{margin:8px 0 0 18px} .list li{margin:6px 0;line-height:1.5}
.small{font-size:14px;color:var(--muted)}

/* ===== Progress Chart ===== */
:root{--ryg-green:#00a000;--ryg-yellow:#ffcc00;--ryg-red:#d00000}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.table-ryg{table-layout:fixed;width:100%;min-width:1024px;--milestone-col:100px;background:#0e0e10;border:1px solid #232329;border-radius:12px;border-collapse:separate;border-spacing:0}
.table-ryg col.date{width:calc(var(--milestone-col)*1.2)!important}
.table-ryg col.milestone{width:var(--milestone-col)!important}
.table-ryg col.comment{width:calc(var(--milestone-col)*3)!important}
.table-ryg th,.table-ryg td{border-right:1px solid #25252b;border-bottom:1px solid #25252b;padding:8px 10px;vertical-align:middle;white-space:normal;word-break:break-word}
.table-ryg thead th{position:sticky;top:0;background:#101015;z-index:2}
.table-ryg th:first-child,.table-ryg td:first-child{position:sticky;left:0;background:#111114;z-index:1;box-shadow:1px 0 0 #25252b}
/* cell colors */
.table-ryg td.ryg-green{background:var(--ryg-green)!important;color:#000!important}
.table-ryg td.ryg-yellow{background:var(--ryg-yellow)!important;color:#000!important}
.table-ryg td.ryg-red{background:var(--ryg-red)!important;color:#fff!important}
.legend-ryg{list-style:none;margin:10px 0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.legend-ryg .dot{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid #333;margin-right:6px}
.legend-ryg .dot.ryg-green{background:var(--ryg-green)}
.legend-ryg .dot.ryg-yellow{background:var(--ryg-yellow)}
.legend-ryg .dot.ryg-red{background:var(--ryg-red)}

/* ===== Neutral theme table (for Do Differently) ===== */
.table-theme{width:100%;table-layout:auto;border-collapse:separate;border-spacing:0;background:#0e0e10;border:1px solid #232329;border-radius:12px;overflow:hidden}
.table-theme th,.table-theme td{padding:10px 12px;border-bottom:1px solid #25252b;border-right:1px solid #25252b;vertical-align:top;white-space:normal;word-break:break-word}
.table-theme thead th{background:#101015;position:sticky;top:0;z-index:2}
.table-theme tr:nth-child(even) td{background:#0f0f12}
.table-theme th:first-child,.table-theme td:first-child{font-weight:600}
.table-tools-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.step-flow{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.step{background:#121214;border:1px solid #1f1f24;border-radius:999px;padding:8px 12px;font-size:14px}

/* ===== Mobile Nav (hamburger) ===== */
.hamburger {
  display: none;
  position: relative;
  border: 1px solid #2a2a2f;
  background: #0f0f12;
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
}
.hamburger-box { display: inline-block; width: 22px; height: 16px; position: relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  position: absolute; width: 22px; height: 2px; background: var(--text); left: 0; transition: transform .25s ease, opacity .2s ease;
}
.hamburger-inner { top: 7px; }
.hamburger-inner::before { content: ""; top: -7px; }
.hamburger-inner::after  { content: ""; top: 7px; }
.hamburger[aria-expanded="true"] .hamburger-inner { transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-inner::before { transform: rotate(90deg) translateX(-7px); }
.hamburger[aria-expanded="true"] .hamburger-inner::after  { opacity: 0; }

@media (max-width: 900px) {
  .hamburger { display: inline-flex; align-items: center; gap: 10px; }
  .menu {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .menu.is-open { display: flex; }
  .menu .cta { width: 100%; justify-content: center; margin: 6px 0 0; }
}

/* ===== Progress Chart mobile refinements ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
@media (max-width: 768px) {
  .table-wrap::after {
    content: "Scroll →";
    position: absolute;
    right: 8px; bottom: 8px;
    font-size: 12px;
    color: var(--muted);
    background: rgba(0,0,0,.35);
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
  }
  .table-ryg { --milestone-col: 84px; }
}
@media (max-width: 480px) {
  .table-ryg { --milestone-col: 72px; }
  .table-ryg col.comment { width: calc(var(--milestone-col) * 2.4) !important; }
}
.table-ryg th:first-child, .table-ryg td:first-child {
  position: sticky; left: 0; background: #111114; z-index: 1; box-shadow: 1px 0 0 #25252b;
}
.table-ryg th, .table-ryg td { white-space: normal; word-break: break-word; }



/* ===== Mobile Typography & Layout (fluid, content-agnostic) ===== */
:root{
  --fs-body: clamp(15px, 1.9vw, 17px);
  --fs-lead: clamp(16px, 2.4vw + 2px, 18px);
  --fs-h1: clamp(26px, 6vw + 4px, 42px);
  --fs-h2: clamp(18px, 3.4vw + 4px, 28px);
}
html, body { font-size: var(--fs-body); line-height: 1.6; }
.lead { font-size: var(--fs-lead); }
h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); }
.brand-text .name { font-size: clamp(20px, 4.2vw, 28px); }
.brand-text .strap { font-size: clamp(10px, 2.4vw, 12px); }

/* Ensure media and long text scale gracefully */
img, svg, video { max-width: 100%; height: auto; }
.list li { word-break: break-word; }

/* Tighter spacing on small screens */
@media (max-width: 600px){
  .container { padding: 18px; }
  .card { padding: 16px; border-radius: 14px; }
  .grid { gap: 14px; }
  .menu a { padding: 9px 10px; }
}

/* Progress tables: allow narrower min-width on very small screens */
@media (max-width: 480px){
  .table-ryg { min-width: 720px; }
}
@media (max-width: 360px){
  .table-ryg { min-width: 640px; }
}

/* ===== TIGRE: tighten space under header across pages ===== */
.hero { padding-top: 8px !important; padding-bottom: 16px !important; }
.hero h1 { margin-top: 0.1em !important; margin-bottom: 0.35em !important; line-height: 1.05 !important; }
.hero.section, .section.hero { padding-top: 8px !important; padding-bottom: 16px !important; }
header + .section { padding-top: 8px !important; }
header + section h1 { margin-top: 0.1em !important; margin-bottom: 0.35em !important; line-height: 1.05 !important; }
main { margin-top: 0 !important; }

/* ===== TIGRE: Mobile nav fixes ===== */
@media (max-width: 900px) {
  .nav-inner { position: relative; flex-wrap: nowrap !important; }
  .brand { min-width: 0 !important; }
  .hamburger { display: inline-flex !important; margin-left: auto; }
  .menu { display: none; position: absolute; top: calc(100% + 8px); right: 16px;
          background: var(--panel); border: 1px solid #2a2a2f; border-radius: 12px;
          padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  #navToggle[aria-expanded="true"] + .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  }
  .menu a { padding: 10px 12px; }
  .menu .cta { margin-left: 0; justify-content: center; }
}
.hamburger { display: none; }