/* Injury Docs — shared design tokens + interaction classes.
   Structure, spacing, shadows and motion are CoCounsel HQ's, kept deliberately:
   the two products sell to the same desk and a shared language helps.
   The ACCENT is Injury Docs' own teal. To make the site literally CoCounsel
   blue, change the six --id-accent* / --id-glow values below and nothing else. */
:root{
  /* ground */
  --id-navy-0:#071233;      /* hero core            */
  --id-navy-1:#0f2350;      /* hero highlight       */
  --id-navy-2:#050c22;      /* hero falloff         */
  --id-ink:#0b1220;         /* body text on white   */
  --id-ink-2:#22304d;       /* nav / secondary text */
  --id-muted:#5b6b86;       /* supporting copy      */
  --id-muted-hero:#b9c6e2;  /* supporting on navy   */
  --id-muted-hero-2:#8ea3c9;/* stat labels on navy  */
  --id-line:#eaeef5;        /* hairlines            */
  --id-wash:#f5f9fb;        /* tinted panel         */

  /* accent — Injury Docs teal (CoCounsel equivalents in comments) */
  --id-accent:#0E7490;          /* was #1a49c9 */
  --id-accent-2:#0f8ba8;        /* was #2f80ed */
  --id-accent-3:#7DD3E8;        /* was #39d4ff */
  --id-accent-link:#0b6a84;     /* was #1f5fe0 */
  --id-accent-soft:#e8f6fa;     /* was #eef3ff */
  --id-accent-hero:#9fdcec;     /* was #a9c4ff */
  --id-glow:rgba(14,116,144,.7);
  --id-grad:linear-gradient(135deg,var(--id-accent),var(--id-accent-2));

  /* status */
  --id-ok:#16A34A;
  --id-warn:#B45309;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter Tight',system-ui,sans-serif;color:var(--id-ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:var(--id-accent-link);text-decoration:none}
a:hover{color:var(--id-accent)}
::selection{background:var(--id-accent-3)}

@keyframes idFloat{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-10px);opacity:.5}}
@keyframes idPulse{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes idAurora{0%{transform:translate(-8%,-6%) scale(1)}50%{transform:translate(10%,8%) scale(1.15)}100%{transform:translate(-8%,-6%) scale(1)}}
@keyframes idMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes idShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

.cc-underline{background-image:linear-gradient(var(--id-accent),var(--id-accent));background-position:0 100%;background-repeat:no-repeat;background-size:0% 2px;transition:background-size .4s cubic-bezier(.22,.61,.36,1)}
.cc-underline:hover{background-size:100% 2px}
.cc-navlink{position:relative;transition:color .2s,background .2s;border-radius:9px}
.cc-navlink:hover{background:var(--id-accent-soft);color:var(--id-ink)!important}
.cc-cta{transition:box-shadow .25s,transform .15s,filter .2s}
.cc-cta:hover{box-shadow:0 12px 30px -8px var(--id-glow);transform:translateY(-1px);filter:saturate(1.1)}
.cc-grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* section rhythm */
.id-wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.id-kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.id-kicker b{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;color:var(--id-accent);letter-spacing:.08em}
.id-kicker span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--id-muted)}
.id-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.022em;margin:0 0 16px;text-wrap:balance}
.id-lede{font-size:18px;line-height:1.62;color:var(--id-muted);margin:0;max-width:680px}
.id-card{background:#fff;border:1px solid var(--id-line);border-radius:16px;padding:26px;transition:box-shadow .25s,transform .2s,border-color .2s}
.id-card:hover{box-shadow:0 24px 54px -26px rgba(9,20,50,.28);transform:translateY(-2px);border-color:#d9e6ec}

@media (max-width:900px){
  .id-h2{font-size:31px}
  .id-grid-2,.id-grid-3{grid-template-columns:1fr!important}
  .id-hero-grid{grid-template-columns:1fr!important;gap:38px!important}
  .id-hero-grid h1{font-size:38px!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}