/* Palette taken from the app itself, so arriving in the product does not feel like a
     different company. Steel and drape colours rather than SaaS purple. */
  :root{
    --navy:#1b3a5b; --navy-2:#274d75;
    --ink:#12222f; --muted:#53687a; --faint:#526779;
    --paper:#f4f6f8; --card:#fff; --line:#dde4ea;
    --accent:#0e6e68; --accent-ink:#0a504b; --accent-bg:#e7f1f0;
    --warm:#86560c;
    --line-red:#c8102e; /* SurgSoul: the line. Only ever a line. */
    --max:1080px;
  }

  /* "by SurgSoul" endorsement lockup. SurgSoul is the parent company; FirstCase Academy
     is its product. Red is only ever a line — here, the 2px rule before the name. */
  .endorse{display:flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.02em;
           color:inherit; opacity:.72; margin-top:6px;}
  .endorse-line{width:18px; height:2px; background:var(--line-red); flex:none; border-radius:1px;}
  .endorse strong{font-weight:700;}
  .endorse a{color:inherit; text-decoration:none;}
  .endorse a:hover{text-decoration:underline;}
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}
  a{color:var(--accent-ink);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

  /* ---------- header ---------- */
  header{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff;}
  .nav{display:flex; align-items:center; gap:16px; padding:16px 0;}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; font-size:1.05rem;}
  .brand img{width:28px; height:28px;}
  .nav-spacer{flex:1;}
  /* The nav has no room for the endorsement on a phone — it pushes "Sign in" off-screen.
     The footer lockup and the page title still carry it. */
  @media (max-width:640px){ .nav .endorse{display:none;} }
  .nav a{color:#dbe6f0; text-decoration:none; font-size:.92rem;}
  .nav a:hover{color:#fff;}
  .btn{
    display:inline-block; border:0; border-radius:8px; cursor:pointer;
    padding:11px 18px; font-size:.95rem; font-weight:600; text-decoration:none;
    background:var(--accent); color:#fff;
  }
  .btn:hover{background:var(--accent-ink);}
  .btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45);}
  .btn.ghost:hover{background:rgba(255,255,255,.12);}
  .btn.wide{width:100%; text-align:center;}

  .hero{padding:56px 0 68px;}
  .hero h1{
    font-size:clamp(2rem,5vw,3.1rem); line-height:1.08; letter-spacing:-.022em;
    margin:0 0 18px; max-width:17ch; text-wrap:balance;
  }
  .hero p.lede{font-size:clamp(1.02rem,2.2vw,1.2rem); color:#cfdcea; max-width:56ch; margin:0 0 28px;}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
  .hero-demo{margin-top:14px; color:#dbe6f0;}
  .hero-demo a{color:#fff; font-weight:600;}
  .hero-note{margin-top:18px; font-size:.86rem; color:#a9c0d6;}

  /* ---------- sections ---------- */
  section{padding:64px 0;}
  h2{font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance;}
  .sec-lede{color:var(--muted); max-width:62ch; margin:0 0 34px; font-size:1.02rem;}

  .grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
  /* Four cards: two by two, never three and an orphan. */
  .grid.pair{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));}
  .card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px;}
  .card h3{margin:0 0 8px; font-size:1.03rem; letter-spacing:-.008em;}
  .card p{margin:0; color:var(--muted); font-size:.95rem;}
  .card .ico{
    width:36px; height:36px; border-radius:9px; background:var(--accent-bg); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; margin-bottom:12px;
  }

  .split{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .two{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:start;}
  .two ul{margin:12px 0 0; padding-left:20px; color:var(--muted);}
  .two li{margin-bottom:8px;}
  .hospital-points{margin:16px 0 0; padding-left:20px; color:var(--muted); max-width:72ch;}
  .hospital-points li{margin-bottom:8px;}
  .who{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.11em;
       text-transform:uppercase; color:var(--accent-ink); margin:0 0 6px;}
  /* A section's own next step, after its cards. .btn.ghost is drawn for the navy hero (white
     text), so on these light sections it gets a navy outline instead. */
  .sec-cta{display:flex; gap:12px 22px; flex-wrap:wrap; align-items:center; margin-top:28px;}
  .sec-cta .btn.ghost{background:#fff; color:var(--navy); border:1px solid var(--navy);}
  .sec-cta .btn.ghost:hover{background:#e8eef4;}
  .fine{margin:18px 0 0; max-width:72ch; font-size:.86rem; color:var(--faint);}

  /* ---------- product tour and screenshots ---------- */
  .tour{padding-top:56px;}
  .tour-player{border-radius:14px; overflow:hidden; background:#0a1d33;
               box-shadow:0 24px 54px -26px rgba(16,38,63,.55);}
  .tour-player video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0a1d33;}
  .tour .fine{margin-top:12px;}
  .transcript{margin-top:10px; max-width:72ch; font-size:.93rem; color:var(--muted);}
  .transcript summary{cursor:pointer; font-weight:600; color:var(--accent-ink);}
  .transcript ol{list-style:none; padding:0; margin:10px 0 0;}
  .transcript li{margin:0 0 6px;}
  .transcript b{color:var(--ink); font-variant-numeric:tabular-nums; margin-right:6px;}
  /* The shots are transparent PNG/WebP with their own browser frame and shadow. */
  .shots{display:grid; gap:28px 22px; margin-top:44px;
         grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
  .shots.three{margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
  .shot{margin:0;}
  .shot img{display:block; width:100%; height:auto;}
  .shot figcaption{margin:4px 6px 0; color:var(--muted); font-size:.93rem;}
  .shot figcaption b{display:block; color:var(--ink); font-size:1rem; margin-bottom:2px;}

  /* ---------- pricing ---------- */
  .tiers{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); align-items:stretch;}
  .tier{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; display:flex; flex-direction:column;}
  .tier.feature{border-color:var(--accent); box-shadow:0 6px 26px -18px rgba(14,110,104,.6);}
  .tier h3{margin:0 0 4px; font-size:1.05rem;}
  .tier .price{font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin:8px 0 2px;}
  .tier .price small{font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0;}
  .tier .for{color:var(--muted); font-size:.9rem; margin:0 0 14px;}
  /* Tier names and audience lines run to one or two lines depending on column
     width. Without a floor under each, the prices drift out of line across a row. */
  .tier h3{min-height:2.5em;}
  .tier h3 + .for{min-height:3.2em;}
  /* The second billing option. Reserved even on tiers that have none, so the
     feature lists start at the same height. */
  .tier .alt{margin:0 0 14px; font-size:.86rem; font-weight:600; color:var(--accent-ink); min-height:1.35em;}
  /* Group individual offers separately from school offers. */
  .group{margin:38px 0 16px; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
         color:var(--accent-ink); font-family:ui-monospace,Menlo,Consolas,monospace;}
  .group:first-of-type{margin-top:0;}
  .tier ul{list-style:none; margin:0 0 20px; padding:0; font-size:.93rem;}
  .tier li{padding:6px 0 6px 22px; position:relative; color:var(--ink);}
  .tier li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700;}
  /* Not yet built. Visibly different from both a tick and a dash, because "coming" is a
     third thing and dressing it as either would be a lie in one direction or the other. */
  .tier li.soon{color:var(--muted);}
  .tier li.soon::before{content:"◷"; color:var(--warm); font-weight:400;}
  .tier li.soon em{font-style:normal; font-size:.78rem; color:var(--faint); letter-spacing:.02em;}
  .tier li.off{color:var(--faint);}
  .tier li.off::before{content:"–"; color:var(--faint);}
  .tier .foot{margin-top:auto;}
  .tag{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
       background:var(--accent-bg); color:var(--accent-ink); padding:3px 8px; border-radius:999px; margin-left:6px;}

  /* ---------- waitlist ---------- */
  #waitlist{background:var(--card); border-top:1px solid var(--line);}
  form{max-width:520px;}
  label{display:block; font-weight:600; font-size:.88rem; margin:14px 0 5px;}
  input,select,textarea{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
    font:inherit; font-size:.95rem; background:#fff; color:var(--ink);
  }
  textarea{min-height:80px; resize:vertical;}
  input:focus,select:focus,textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-bg);}
  .hint{font-size:.82rem; color:var(--faint); margin-top:5px;}
  #wl-msg{margin-top:14px; font-size:.93rem; min-height:1.2em;}
  #wl-msg.ok{color:var(--accent-ink); font-weight:600;}
  #wl-msg.err{color:#a3271d;}
  .hidden{display:none !important;}

  footer{background:var(--navy); color:#b9cbdd; padding:34px 0; font-size:.88rem;}
  footer a{color:#dbe6f0;}
  .foot-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
  .safety{margin-top:14px; color:#8fa8bf; max-width:70ch; font-size:.84rem;}

/* social:start */
/* Social profile links. Brand glyphs inherit the footer's own colour; the red
   line is not used here -- it is only ever a rule, never an icon fill. */
.social-links { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.foot-row .social-links { margin-top: 0; }
.social-links a { display: inline-flex; color: inherit; opacity: .78; transition: opacity .15s; }
.social-links a:hover, .social-links a:focus-visible { opacity: 1; }
.social-links svg { width: 18px; height: 18px; fill: currentColor; display: block; }
/* social:end */