/* ============================================================================
   OpportunityOS — Homepage (#landing)
   Premium light editorial system. Warm ivory paper, deep pine accent,
   Fraunces display + Manrope text + JetBrains Mono for data/labels.
   Everything is scoped under #landing so the app / auth / wizard screens
   are never touched.
   ========================================================================== */

#landing{
  /* paper — warm, bright */
  --paper:#FAF6ED;
  --paper-2:#FFFDF7;
  --paper-3:#F3EDDE;
  /* ink */
  --ink:#1C231E;
  --body:#3C453E;
  --muted:#6E7468;
  --faint:#9A9C8F;
  /* lines */
  --line:#E8E1D1;
  --line-2:#DAD2BE;
  /* accents — vivid + youthful */
  --green:#0FA37C;        /* primary emerald */
  --green-deep:#0B7E60;   /* hover */
  --green-soft:#0C8A68;   /* emerald text / labels */
  --green-tint:#E2F5EC;   /* row + wash */
  --amber:#F2A310;        /* warm energy */
  --amber-tint:#FCEEDA;   /* highlight wash */
  --gold:#F2A310;
  --coral:#FB6F66;        /* pop */
  --sky:#1FB1CE;          /* cool pop */
  --blue:#2563EB;         /* wordmark — matches auth/app screens */
  --blue-deep:#1D4ED8;
  --grad-1:#11B387;
  --grad-2:#1EB4B0;
  --grad-3:#3FC183;
  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* layout */
  --max:1140px;
  --rail:196px;
  --ease:cubic-bezier(.16,1,.3,1);

  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-weight:420;
  line-height:1.62;
  letter-spacing:-0.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

#landing *{box-sizing:border-box;}
#landing ::selection{background:var(--green);color:var(--paper-2);}

#landing h1,#landing h2,#landing h3{
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  font-weight:430;
  letter-spacing:-0.018em;
  line-height:1.08;
}

#landing .oos-shell{
  max-width:var(--max);
  margin:0 auto;
  padding-left:clamp(20px,5vw,52px);
  padding-right:clamp(20px,5vw,52px);
}

/* mono micro-label used across the page */
#landing .oos-kic{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* anchor offset for sticky nav */
#landing [id]{scroll-margin-top:84px;}

/* ============================ BUTTONS ===================================== */
#landing .oos-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:-0.01em;
  line-height:1;
  padding:12px 20px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
#landing .oos-btn svg{transition:transform .3s var(--ease);}
#landing .oos-btn-sm{padding:9px 15px;font-size:13.5px;border-radius:8px;}
#landing .oos-btn-lg{padding:15px 26px;font-size:15.5px;border-radius:10px;}

#landing .oos-btn-primary{
  background:linear-gradient(135deg,#14BA8D 0%,#0B8A68 100%);
  color:#fff;
  box-shadow:0 2px 6px rgba(15,163,124,.26), 0 10px 24px -10px rgba(15,163,124,.5);
}
#landing .oos-btn-primary:hover{
  background:linear-gradient(135deg,#18C898 0%,#0C9A74 100%);
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(15,163,124,.34), 0 18px 38px -12px rgba(15,163,124,.62);
}
#landing .oos-btn-primary:hover svg{transform:translateX(3px);}
#landing .oos-btn-primary:active{transform:translateY(0);}

#landing .oos-btn-line{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-2);
}
#landing .oos-btn-line:hover{
  border-color:var(--ink);
  background:rgba(255,255,255,.5);
  transform:translateY(-1.5px);
}
#landing .oos-btn-quiet{
  background:transparent;color:var(--body);border-color:transparent;
}
#landing .oos-btn-quiet:hover{color:var(--ink);background:rgba(30,36,32,.05);}

/* ============================ NAV ======================================== */
#landing .oos-nav{
  position:sticky;top:0;z-index:60;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
#landing .oos-nav.is-stuck{
  background:rgba(247,243,234,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
#landing .oos-nav-in{
  max-width:var(--max);margin:0 auto;
  padding:15px clamp(20px,5vw,52px);
  display:flex;align-items:center;gap:24px;
}
#landing .oos-word{
  /* Brand wordmark must match .brand-wordmark (auth/wizard/app): Sora 800.
     The landing's serif (Fraunces) stays for headlines — only the wordmark
     is standardized so the brand reads identically on every screen. */
  font-family:'Sora',var(--sans);
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:0;
  user-select:none;
  white-space:nowrap;
}
#landing .oos-word b{
  font-weight:800;
  background:linear-gradient(120deg,var(--blue),var(--blue-deep));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
#landing .oos-word .oos-mk{
  width:11px;height:11px;border-radius:3px;
  margin-right:11px;
  background:linear-gradient(135deg,var(--grad-1),var(--sky));
  box-shadow:inset 0 0 0 2.5px var(--paper-2),0 0 0 1px rgba(15,163,124,.5);
  transform:rotate(45deg);
  flex:none;
}
#landing .oos-nav-mid{
  display:none;
  margin-left:8px;
  gap:30px;
  flex:1;
}
#landing .oos-nav-mid a{
  font-size:14px;font-weight:550;color:var(--muted);
  text-decoration:none;letter-spacing:-0.006em;
  position:relative;padding:4px 0;
  transition:color .2s ease;
}
#landing .oos-nav-mid a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--green);transition:right .3s var(--ease);
}
#landing .oos-nav-mid a:hover{color:var(--ink);}
#landing .oos-nav-mid a:hover::after{right:0;}
#landing .oos-nav-r{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* ============================ HERO ======================================= */
#landing .hero{
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 64px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:72px 0 96px;
  overflow:hidden;
}
#landing .hero-in{
  position:relative;z-index:2;
  width:100%;
  display:flex;flex-direction:column;align-items:center;
}

/* atmosphere — living, colourful gradient mesh */
#landing .hero-aura{
  position:absolute;inset:-14% -18% -6% -18%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 40% at 26% 24%, rgba(17,179,135,.34), transparent 70%),
    radial-gradient(32% 42% at 78% 18%, rgba(31,177,206,.28), transparent 72%),
    radial-gradient(40% 46% at 66% 76%, rgba(242,163,16,.24), transparent 72%),
    radial-gradient(34% 42% at 18% 78%, rgba(251,111,102,.20), transparent 72%);
  animation:auraDrift 17s ease-in-out infinite alternate;
}
#landing .hero-aura::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(28% 34% at 60% 36%, rgba(63,193,131,.22), transparent 70%),
    radial-gradient(30% 36% at 38% 64%, rgba(31,177,206,.18), transparent 72%);
  animation:auraDrift2 21s ease-in-out infinite alternate;
}
#landing .hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@keyframes auraDrift{
  from{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  to{transform:translate3d(18px,-16px,0) scale(1.08) rotate(2deg);}
}
@keyframes auraDrift2{
  from{transform:translate3d(0,0,0) scale(1.04);}
  to{transform:translate3d(-22px,12px,0) scale(1);}
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

#landing .hero-h{
  margin:0;
  font-size:clamp(2.55rem,7.4vw,5.3rem);
  line-height:1.0;
  letter-spacing:-0.028em;
  font-weight:430;
  max-width:16ch;
}
#landing .hero-h .hw{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em;
}
#landing .hero-h .hw > span{
  display:inline-block;
  transform:translateY(116%);
  will-change:transform;
  animation:hwRise .95s var(--ease) forwards;
  animation-delay:calc(.24s + var(--i) * .08s);
}
#landing .hero-h .em > span{
  font-style:italic;
  font-weight:430;
  background:linear-gradient(100deg,var(--grad-1) 0%,var(--grad-2) 42%,var(--grad-3) 78%,var(--grad-1) 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:hwRise .95s var(--ease) forwards, gradShift 9s ease-in-out infinite;
  animation-delay:calc(.24s + var(--i) * .08s), 1.4s;
}

#landing .hero-sub{
  margin:30px auto 0;
  max-width:53ch;
  font-size:clamp(16px,1.55vw,18.5px);
  line-height:1.66;
  color:var(--muted);
  font-weight:430;
  opacity:0;
  animation:fadeUp .85s var(--ease) calc(.62s + var(--i) * .09s) forwards;
}
#landing .hero-actions{
  margin-top:38px;
  display:flex;gap:13px;flex-wrap:wrap;justify-content:center;
  opacity:0;
  animation:fadeUp .85s var(--ease) calc(.62s + var(--i) * .09s) forwards;
}
#landing .hero-meta{
  margin-top:30px;
  display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12px;letter-spacing:0.04em;color:var(--faint);
  opacity:0;
  animation:fadeUp .85s var(--ease) calc(.62s + var(--i) * .09s) forwards;
}
#landing .hero-meta b{color:var(--ink);font-weight:600;}
#landing .hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2);}

#landing .hero-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;
  opacity:0;
  animation:fadeUp .85s var(--ease) calc(.62s + var(--i) * .09s) forwards;
  transition:color .25s ease;
}
#landing .hero-cue:hover{color:var(--green);}
#landing .hero-cue svg{animation:cueBob 2.4s ease-in-out 1.6s infinite;}

@keyframes hwRise{to{transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes cueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ============================ THE INDEX ================================== */
#landing .oos-index{
  position:relative;
  padding:14px 0 88px;
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg, var(--paper-2), var(--paper) 120px);
}
#landing .oos-index-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:30px 0 20px;
}
#landing .oos-index-bar .cnt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);
}
#landing .oos-index-bar .cnt #ls-total-stat{color:var(--ink);font-weight:600;}

#landing .oos-tbl{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(42,56,44,.3);
}
#landing .oos-thead,#landing .oos-trow{
  display:grid;
  grid-template-columns:42px 1fr 104px 108px;
  align-items:center;
  gap:14px;
  padding:0 20px;
}
#landing .oos-thead{
  height:42px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);
  border-bottom:1px solid var(--line);
  background:var(--paper-3);
}
#landing .oos-trow{
  position:relative;
  width:100%;
  min-height:70px;padding-top:14px;padding-bottom:14px;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:background .2s ease;
}
#landing .oos-trow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--grad-1),var(--sky));
  transform:scaleY(0);transform-origin:center;
  transition:transform .26s var(--ease);
}
#landing .oos-trow:last-child{border-bottom:0;}
#landing .oos-trow:hover{background:var(--green-tint);}
#landing .oos-trow:hover::before{transform:scaleY(1);}
#landing .oos-tnum{
  font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:500;
}
#landing .oos-trow:hover .oos-tnum{color:var(--green-soft);}
#landing .oos-tmain{min-width:0;}
#landing .oos-tname{
  display:block;
  font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-0.012em;
  line-height:1.32;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#landing .oos-torg{
  display:block;
  font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#landing .oos-ttype{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green-soft);
}
#landing .oos-twhen{
  font-family:var(--mono);font-size:12px;color:var(--body);
}
#landing .oos-stwrap{display:inline-flex;align-items:center;gap:7px;}
#landing .oos-st{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint);}
#landing .oos-st-open{background:#12B886;box-shadow:0 0 0 3px rgba(18,184,134,.20);}
#landing .oos-st-roll{background:var(--amber);box-shadow:0 0 0 3px rgba(242,163,16,.20);}
#landing .oos-st-later{background:var(--sky);box-shadow:0 0 0 3px rgba(31,177,206,.18);}

#landing .oos-index-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;
}
#landing .oos-index-foot .note{font-size:13px;color:var(--muted);}
#landing .oos-tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14px;color:var(--green);text-decoration:none;
}
#landing .oos-tlink svg{transition:transform .3s var(--ease);}
#landing .oos-tlink:hover svg{transform:translateX(3px);}

/* ============================ BANDS (editorial sections) ================= */
#landing .oos-band{
  padding:78px 0;
  border-top:1px solid var(--line);
}
#landing .oos-band:nth-of-type(even){background:var(--paper-2);}

/* "Why this exists" and "What's inside" are highlighted with a tinted band + bigger heading */
#landing #oos-why,
#landing #oos-tracking{
  position:relative;
  padding:96px 0;
}
#landing #oos-why{background:var(--green-tint);}
#landing #oos-tracking{background:var(--amber-tint);}
#landing #oos-why .oos-main h2,
#landing #oos-tracking .oos-main h2{
  font-size:clamp(2.05rem,4.2vw,3.05rem);
}
#landing .oos-row2{display:grid;grid-template-columns:1fr;gap:30px;}
#landing .oos-rail{display:flex;align-items:baseline;gap:14px;}
#landing .oos-rail .ix{
  font-family:var(--mono);font-size:13px;color:var(--green-soft);font-weight:600;
  letter-spacing:.04em;
}
#landing .oos-rail .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
#landing .oos-main h2{
  font-size:clamp(1.85rem,3.6vw,2.7rem);
  letter-spacing:-0.02em;line-height:1.12;
  max-width:20ch;margin:0 0 22px;
}
#landing .oos-main p{
  font-size:16.5px;line-height:1.7;color:var(--body);margin:0 0 16px;max-width:62ch;
}
#landing .oos-main p:last-child{margin-bottom:0;}
#landing .oos-main .lead-lg{
  font-size:18.5px;color:var(--ink);line-height:1.6;font-weight:430;
}

#landing .oos-chk{width:15px;height:15px;flex:none;}

/* tracking */
#landing .oos-track{
  margin-top:26px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 18px 44px -30px rgba(42,56,44,.35);
}
#landing .oos-track-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--paper-3);
}
#landing .oos-track-h .t{font-weight:600;color:var(--ink);font-size:14px;}
#landing .oos-track-h .x{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
#landing .oos-tk{
  display:grid;grid-template-columns:58px 1fr 120px;gap:16px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--line);
}
#landing .oos-tk:last-child{border-bottom:0;}
#landing .oos-tk-d{text-align:center;}
#landing .oos-tk-d b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1;}
#landing .oos-tk-d span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
#landing .oos-tk-t{font-weight:600;color:var(--ink);font-size:14.5px;}
#landing .oos-tk-s{font-size:12.5px;color:var(--muted);margin-top:2px;}
#landing .oos-tk-bar{display:block;height:5px;border-radius:99px;background:var(--paper-3);overflow:hidden;}
#landing .oos-tk-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-soft),var(--green));border-radius:99px;}

/* what's inside: split layout (tracker + contest categories) */
#landing .oos-split{margin-top:26px;display:grid;grid-template-columns:1fr;gap:18px;}

/* contest categories — compact list */
#landing .oos-cat-mini{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 18px 44px -30px rgba(42,56,44,.35);
}
#landing .oos-cat-mini-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
#landing .oos-cat-mini-row:last-child{border-bottom:0;}
#landing .oos-cat-mini-row b{font-family:var(--serif);font-size:15.5px;color:var(--ink);font-weight:500;}
#landing .oos-cat-mini-row span{font-size:12.5px;color:var(--muted);text-align:right;}

/* principles — compact cards */
#landing .oos-pr{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px;}
#landing .oos-pr-card{
  padding:20px 22px;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:12px;
  background:var(--paper-2);
}
#landing .oos-pr-card h3{font-family:var(--serif);font-size:16.5px;color:var(--ink);font-weight:500;margin:0 0 6px;}
#landing .oos-pr-card p{font-size:13.5px;color:var(--muted);line-height:1.58;margin:0;}
#landing .oos-pr-card:nth-child(2){border-top-color:var(--sky);}
#landing .oos-pr-card:nth-child(3){border-top-color:var(--amber);}
#landing .oos-pr-card:nth-child(4){border-top-color:var(--coral);}

/* ============================ CTA ======================================= */
#landing .oos-cta{padding:90px 0;border-top:1px solid var(--line);}
#landing .oos-cta-in{
  border:1px solid var(--line-2);border-radius:20px;
  padding:clamp(34px,5vw,60px);
  display:grid;grid-template-columns:1fr;gap:30px;align-items:center;
  background:
    radial-gradient(80% 150% at 94% -10%, rgba(17,179,135,.14), transparent 56%),
    radial-gradient(70% 130% at 2% 110%, rgba(242,163,16,.11), transparent 58%),
    var(--paper-2);
  box-shadow:0 30px 60px -40px rgba(15,163,124,.32);
}
#landing .oos-cta-in h2{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:18ch;margin:0 0 14px;}
#landing .oos-cta-in p{font-size:16.5px;color:var(--muted);line-height:1.66;margin:0;max-width:54ch;}
#landing .oos-cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ============================ FEEDBACK ================================== */
#landing .oos-fb{padding:80px 0;border-top:1px solid var(--line);background:var(--paper-2);}
#landing .oos-fb-in{display:grid;grid-template-columns:1fr;gap:34px;}
#landing .oos-fb-l h3{font-size:clamp(1.7rem,3vw,2.2rem);margin:14px 0 12px;}
#landing .oos-fb-l p{font-size:16px;color:var(--muted);line-height:1.66;max-width:42ch;margin:0;}
#landing .oos-fl{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
#landing .oos-fl span{text-transform:none;letter-spacing:0;color:var(--faint);}
#landing .oos-fa,#landing .oos-fi{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:10px;
  padding:13px 14px;resize:vertical;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#landing .oos-fa::placeholder,#landing .oos-fi::placeholder{color:var(--faint);}
#landing .oos-fa:focus,#landing .oos-fi:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(15,163,124,.16);
}
#landing .oos-fb-ok{
  display:none;align-items:center;gap:8px;margin-top:14px;
  font-size:14px;color:var(--green-soft);font-weight:550;
}
#landing .oos-fb-ok.show{display:flex;}

/* ============================ FOOTER ==================================== */
#landing .oos-footer{padding:60px 0 40px;border-top:1px solid var(--line);background:var(--paper);}
#landing .oos-foot-grid{display:grid;grid-template-columns:1fr;gap:34px;}
#landing .oos-foot-brand p{font-size:14px;color:var(--muted);line-height:1.66;margin:14px 0 0;max-width:38ch;}
#landing .oos-foot-col h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:500;
}
#landing .oos-foot-col a{
  display:block;font-size:14px;color:var(--body);text-decoration:none;margin-bottom:10px;
  transition:color .2s ease;
}
#landing .oos-foot-col a:hover{color:var(--green);}
#landing .oos-foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);
}
#landing .oos-foot-bottom a{color:var(--muted);text-decoration:none;}
#landing .oos-foot-bottom a:hover{color:var(--green);}

/* ============================ COLOUR ACCENTS ============================ */
/* thin gradient rule across the top of each card */
#landing .oos-tbl,#landing .oos-track,#landing .oos-cat-mini{position:relative;}
#landing .oos-tbl::before,#landing .oos-track::before,#landing .oos-cat-mini::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--grad-1) 0%,var(--sky) 50%,var(--amber) 100%);
}

/* section numbers cycle through the palette for energy */
#landing #oos-why .oos-rail .ix{color:var(--green);}
#landing #oos-tracking .oos-rail .ix{color:var(--amber);}

/* ============================ SCROLL REVEALS ============================ */
#landing.oos-anim .oos-reveal{opacity:0;transform:translateY(16px);}
#landing.oos-anim .oos-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}

/* ============================ RESPONSIVE ================================ */
@media (min-width:640px){
  #landing .oos-nav-mid{display:flex;}
  #landing .oos-foot-grid{grid-template-columns:2fr 1fr 1fr;}
  #landing .oos-fb-in{grid-template-columns:0.9fr 1.1fr;align-items:start;}
  #landing .oos-pr{grid-template-columns:1fr 1fr;}
}
@media (min-width:880px){
  #landing .oos-row2{grid-template-columns:var(--rail) 1fr;gap:48px;}
  #landing .oos-rail{flex-direction:column;gap:8px;position:sticky;top:104px;align-self:start;}
  #landing .oos-split{grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
  #landing .oos-cta-in{grid-template-columns:1.4fr 1fr;}
  #landing .oos-cta-actions{justify-content:flex-end;}
}
@media (max-width:560px){
  #landing .oos-thead,#landing .oos-trow{grid-template-columns:30px 1fr 92px;}
  #landing .oos-thead .h-when,#landing .oos-twhen{display:none;}
  #landing .hero{min-height:auto;padding:54px 0 76px;}
  #landing .hero-cue{display:none;}
  #landing .oos-nav-r .oos-btn-quiet{display:none;}   /* keep only primary in the bar; hero carries Sign in */
  #landing .oos-word{font-size:20px;}
  #landing .oos-tk{grid-template-columns:52px 1fr;}
  #landing .oos-tk-bar{display:none;}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  #landing .hero-aura,#landing .hero-aura::after{animation:none;}
  #landing .hero-cue svg{animation:none;}
  #landing .hero-sub,
  #landing .hero-actions,
  #landing .hero-meta,
  #landing .hero-cue{opacity:1;animation:none;transform:none;}
  #landing .hero-h .hw > span{transform:none;animation:none;}
  #landing.oos-anim .oos-reveal{opacity:1;transform:none;}
  #landing .oos-btn,#landing .oos-btn svg,#landing .oos-tlink svg{transition:none;}
}