:root{
    --navy:#123B6B;
    --navy-deep:#0C2A50;
    --navy-ink:#0A1F3C;
    --rule:#D9E3F0;
    --card-head:#EDF3FA;
    --paper:#F4F7FB;
    --accent:#2F72C4;
    --accent-soft:#E3EDF9;
    /* FarmFlow360 — sampled from the logo; carries every "done" signal */
    --ff-navy:#00285C;
    --ff-green:#8EC92E;
    --ff-green-mid:#6FA61F;
    --ff-green-ink:#4E7A14;
    --green:#4E7A14;
    --amber:#B4761A;
    --red:#B3261E;
    --text:#1B2A44;
    --muted:#647794;
    --white:#fff;
    --radius:10px;
    --shadow:0 1px 2px rgba(12,42,80,.06), 0 8px 24px rgba(12,42,80,.06);
    --font:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:118px}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none !important; transition:none !important}
  }
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:var(--font); font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Hero ---------- */
  .hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
  .hero__rings{position:absolute; top:-160px; right:-140px; width:620px; height:620px; opacity:.28; pointer-events:none}
  .hero__rings circle{fill:none; stroke:#7FA9DC; stroke-width:1}
  .hero__inner{position:relative; max-width:1080px; margin:0 auto; padding:34px 28px 42px}
  .lockup{display:flex; align-items:center; gap:16px}
  .mark{width:56px; height:56px; border-radius:50%; border:1.5px solid #fff; display:grid; place-items:center; font-weight:700; letter-spacing:.5px; font-size:15px; flex:none}
  .lockup__text{font-size:10.5px; letter-spacing:.22em; line-height:1.7; font-weight:600; text-transform:uppercase; color:#DCE7F5}
  .sector{position:absolute; top:38px; right:28px; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:8px 20px; font-size:10.5px; letter-spacing:.2em; font-weight:600; text-transform:uppercase}
  .brandrow{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
  .brandrow__rule{width:1px; align-self:stretch; min-height:48px; background:rgba(255,255,255,.32)}
  .powered{display:flex; flex-direction:column; gap:7px}
  .powered__label{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#9FBDDF}
  .ff-logo{display:block; background:#fff no-repeat center; background-size:contain;
    background-origin:content-box; border-radius:7px;
    background-image:url("assets/farmflow360-logo.png")}
  .powered__logo{width:112px; height:45px; padding:6px 11px}
  .foot__ff .ff-logo{width:92px; height:37px; padding:5px 9px; border-radius:6px}
  @media (max-width:820px){
    .sector{position:static; display:inline-block; margin-bottom:20px}
    .brandrow__rule{display:none}
    .powered{margin-top:4px}
  }
  .hero__bar{width:62px; height:3px; background:#fff; margin:26px 0 18px; border-radius:2px}
  .hero h1{font-size:clamp(30px,5vw,46px); line-height:1.08; font-weight:700; margin:0 0 14px; letter-spacing:-.02em}
  .hero p{max-width:660px; margin:0; color:#C8D8EC; font-size:14.5px; font-weight:300}
  .hero p strong{color:#fff; font-weight:600}

  /* ---------- Sticky progress ---------- */
  .rail{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
  .rail__inner{max-width:1080px; margin:0 auto; padding:11px 28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
  .rail__label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted); white-space:nowrap}
  .meter{flex:1; min-width:160px; height:6px; background:var(--rule); border-radius:99px; overflow:hidden}
  .meter span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--ff-green)); border-radius:99px; transition:width .35s ease}
  .rail__count{font-size:12.5px; font-weight:600; color:var(--navy); white-space:nowrap; font-variant-numeric:tabular-nums}

  /* ---------- Layout ---------- */
  main{max-width:1080px; margin:0 auto; padding:34px 28px 90px}
  .step{margin:0 0 34px}
  .step__head{display:flex; align-items:center; gap:14px; margin:0 0 6px}
  .step__num{width:30px; height:30px; border-radius:7px; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:600; flex:none}
  .step__head h2{margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--navy-ink)}
  .step__intro{margin:0 0 20px 44px; color:var(--muted); font-size:13.5px; max-width:720px}
  @media (max-width:640px){ .step__intro{margin-left:0} }

  .grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
  @media (max-width:860px){ .grid{grid-template-columns:1fr} }

  .card{background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
  .card__head{background:var(--card-head); padding:12px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--rule)}
  .card__head h3{margin:0; font-size:14px; font-weight:600; color:var(--navy-ink)}
  .card__body{padding:18px}
  .card__note{margin:0 0 14px; font-size:12.5px; color:var(--muted)}

  /* tick square, borrowed from the printed checklist */
  .tick{width:15px; height:15px; border:1.5px solid var(--accent); border-radius:4px; flex:none; position:relative; background:#fff; transition:background .2s ease, border-color .2s ease}
  .tick::after{content:""; position:absolute; inset:0; background:no-repeat center/9px 9px url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity:0; transition:opacity .2s ease}
  .is-done .tick{background:var(--ff-green-mid); border-color:var(--ff-green-mid)}
  .is-done .tick::after{opacity:1}

  /* ---------- Fields ---------- */
  .field{margin:0 0 15px}
  .field:last-child{margin-bottom:0}
  .field > label, .fieldset > legend{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--navy-ink); margin:0 0 6px; padding:0}
  .hint{display:block; font-size:12px; color:var(--muted); font-weight:400; margin:-2px 0 7px 24px; line-height:1.45}
  .req{color:var(--accent); font-weight:600}
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea{
    width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:8px; background:#fff;
    font-family:var(--font); font-size:14px; color:var(--text); transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea{min-height:86px; resize:vertical; line-height:1.5}
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  input:user-invalid, textarea:user-invalid{border-color:var(--red)}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:560px){ .row{grid-template-columns:1fr} }

  /* ---------- File drop ---------- */
  .file{border:1.5px dashed var(--rule); border-radius:9px; padding:13px 14px; background:#FCFDFF; transition:border-color .18s ease, background .18s ease}
  .file + .file{margin-top:11px}
  .file.is-done{border-style:solid; border-color:#CBE5A2; background:#FBFDF6}
  .file.is-over{border-color:var(--accent); background:var(--accent-soft)}
  .file__top{display:flex; align-items:flex-start; gap:9px}
  .file__label{font-size:13.5px; font-weight:500; color:var(--navy-ink); cursor:pointer}
  .file__hint{display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:2px}
  .file__actions{display:flex; align-items:center; gap:10px; margin:10px 0 0 24px; flex-wrap:wrap}
  .file__btn{display:inline-block; padding:6px 14px; border:1px solid var(--navy); border-radius:7px; background:#fff; color:var(--navy); font-size:12.5px; font-weight:500; cursor:pointer; transition:background .15s ease, color .15s ease}
  .file__btn:hover{background:var(--navy); color:#fff}
  .file input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
  .file input[type=file]:focus-visible + .file__btn{outline:2px solid var(--accent); outline-offset:2px}
  .file__name{font-size:12.5px; color:var(--muted); word-break:break-all; flex:1; min-width:120px}
  .file__name.is-set{color:var(--green); font-weight:500}
  .file__name.is-error{color:var(--red); font-weight:500}
  .file__clear{border:none; background:none; color:var(--muted); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:0; font-family:var(--font)}
  .file__clear:hover{color:var(--red)}

  /* ---------- Route selector ---------- */
  .routes{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:760px){ .routes{grid-template-columns:1fr} }
  .route{position:relative; border:1.5px solid var(--rule); border-radius:var(--radius); background:#fff; padding:18px 18px 18px 46px; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease}
  .route:hover{border-color:#AFC9E6}
  .route input{position:absolute; opacity:0; width:1px; height:1px}
  .route__dot{position:absolute; left:18px; top:20px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--accent); background:#fff}
  .route__dot::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .18s ease}
  .route input:checked ~ .route__dot::after{opacity:1}
  .route input:checked ~ .route__body h3{color:var(--navy)}
  .route:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
  .route input:focus-visible ~ .route__dot{outline:2px solid var(--accent); outline-offset:3px}
  .route__body h3{margin:0 0 4px; font-size:14.5px; font-weight:600; color:var(--navy-ink)}
  .route__body p{margin:0; font-size:12.5px; color:var(--muted)}
  .route__tag{display:inline-block; margin-bottom:7px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--accent)}

  /* ---------- Phase banner ---------- */
  .phase{border-left:3px solid var(--navy); background:#fff; border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:0 0 22px; box-shadow:var(--shadow)}
  .phase h2{margin:0 0 3px; font-size:17px; font-weight:600; color:var(--navy-ink)}
  .phase p{margin:0; font-size:13px; color:var(--muted)}
  .phase__tag{font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--accent); display:block; margin-bottom:5px}

  /* ---------- Consent + submit ---------- */
  .consent{background:#fff; border:1px solid var(--rule); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
  .check{display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13.5px; line-height:1.5}
  .check input{margin:2px 0 0; width:16px; height:16px; accent-color:var(--accent); flex:none; cursor:pointer}
  .actions{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap}
  .submit{background:var(--navy); color:#fff; border:none; border-radius:8px; padding:14px 34px; font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer; transition:background .18s ease, transform .12s ease}
  .submit:hover{background:var(--navy-deep)}
  .submit:active{transform:translateY(1px)}
  .submit:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .submit[disabled]{background:#9AAAC2; cursor:not-allowed}
  .actions p{margin:0; font-size:12.5px; color:var(--muted); max-width:420px}

  .alert{display:none; margin:0 0 18px; padding:13px 16px; border-radius:8px; font-size:13px; border:1px solid}
  .alert.is-shown{display:block}
  .alert--error{background:#FDF2F1; border-color:#F0C6C2; color:var(--red)}
  .alert--warn{background:#FDF7EC; border-color:#EEDCB8; color:var(--amber)}

  /* ---------- Footer ---------- */
  footer{background:var(--navy); color:#B9CDE6; padding:26px 28px; font-size:12px}
  .foot__inner{max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .foot__inner strong{color:#fff; font-weight:600}
  .foot__brand{text-align:right; color:#fff; font-weight:600; letter-spacing:.02em}
  .foot__brand span{display:block; font-weight:300; font-size:10px; letter-spacing:.2em; color:#B9CDE6; text-transform:uppercase; margin-top:3px}
  .foot__ff{display:flex; align-items:center; gap:12px; margin-top:16px}
  .foot__ff span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#9FBDDF}
  @media (max-width:600px){ .foot__brand{text-align:left} }

  [hidden]{display:none !important}
  .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

  .lockup__logo{width:148px; height:56px; padding:7px 12px}
  .mark--sm{width:42px; height:42px; font-size:12px}
  .powered__hlb{display:flex; align-items:center; gap:10px}
  .powered__hlb-text{font-size:9.5px; letter-spacing:.18em; line-height:1.55; font-weight:600; text-transform:uppercase; color:#DCE7F5}
  .success{display:none; max-width:560px; margin:60px auto; text-align:center; padding:40px 28px; background:#fff; border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}
  .success.is-shown{display:block}
  .success h2{margin:0 0 10px; color:var(--navy-ink); font-size:24px}
  .success p{margin:0 0 8px; color:var(--muted); font-size:14px}
  .success__ref{display:inline-block; margin:14px 0; padding:10px 16px; background:var(--accent-soft); color:var(--navy); font-weight:600; border-radius:8px; font-variant-numeric:tabular-nums; letter-spacing:.02em}
  .progress-bar{display:none; margin-top:14px; height:6px; background:var(--rule); border-radius:99px; overflow:hidden}
  .progress-bar.is-shown{display:block}
  .progress-bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--ff-green)); transition:width .2s ease}
  .foot__ff .mark{display:grid}