/* Navy is the SurgSoul ground, shared with the rest of the portfolio. The
     green accent and warm paper are ScheduCall's own, taken from the app, so
     arriving in the product does not feel like a different company. */
  :root{
    --navy:#1b3a5b; --navy-2:#274d75;
    --ink:#2c2c2a; --muted:#6b6a63; --faint:#626159;
    --paper:#f7f6f2; --card:#fff; --line:#e3e1d8;
    --accent:#0f6e56; --accent-ink:#0a5340; --accent-bg:#e6f1ed;
    --warm:#86560c;
    --line-red:#c8102e; /* SurgSoul: the line. Only ever a line. */
    --max:1080px;
  }

  /* "by SurgSoul" endorsement lockup. SurgSoul is the parent company; ScheduCall
     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{font-weight:700; letter-spacing:-.01em; font-size:1.05rem;}
  .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;}
  .btn[disabled]{opacity:.6; cursor:default;}

  .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:18ch; text-wrap:balance;
  }
  .hero p.lede{font-size:clamp(1.02rem,2.2vw,1.2rem); color:#cfdcea; max-width:58ch; margin:0 0 28px;}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
  .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;}
  .tier-notes{margin:26px 0 0; font-size:.92rem;}

  .grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(250px,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;}
  .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;}

  /* ---------- pricing ---------- */
  .tiers{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(232px,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(15,110,86,.6);}
  /* Reserve two lines whether or not the "planned" tag wraps, so the price rows
     line up across all four cards at every column width. */
  .tier h3{margin:0 0 4px; font-size:1.05rem; min-height:2.5em;}
  .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;}
  /* Same reason as the h3 above: the audience line runs to one or two lines
     depending on card width, and without a floor the prices drift apart. */
  .tier h3 + .for{min-height:3.3em;}
  /* The other two billing periods. Shown as a plain list rather than a toggle:
     a manager building a budget case wants all three numbers at once. */
  .alt{list-style:none; margin:0 0 16px; padding:10px 0 0; border-top:1px solid var(--line); font-size:.87rem;}
  .alt li{display:flex; justify-content:space-between; gap:10px; padding:3px 0; color:var(--muted);}
  .alt .save{color:var(--accent-ink); font-weight:600;}
  .tier ul.feat{list-style:none; margin:0 0 20px; padding:0; font-size:.93rem;}
  .tier ul.feat li{padding:6px 0 6px 22px; position:relative; color:var(--ink);}
  .tier ul.feat 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. */
  .tier ul.feat li.soon{color:var(--muted);}
  .tier ul.feat li.soon::before{content:"◷"; color:var(--warm); font-weight:400;}
  .tier ul.feat li.soon em{font-style:normal; font-size:.78rem; color:var(--faint); letter-spacing:.02em;}
  .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;}
  /* Honeypot: off-screen rather than display:none, which some bots skip. */
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  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 */