/* ============================================================
   Field 2 Service — marketing site stylesheet (single shared file)
   Brand from the real Field 2 Service logo: navy #0a1733 · blue #3547e8 →
   teal #37e6c3 gradient · light content sections · no CDNs.
   ============================================================ */

:root{
  --navy:#0a1733;
  --navy-2:#0e1d40;
  --navy-3:#13254f;
  --blue:#4f46e5;            /* the app's Velzon indigo — ties site to product */
  --blue-soft:#eef0ff;
  --teal:#087f6b;            /* AA-safe on white; bright teal remains available on dark surfaces */
  --teal-bright:#37e6c3;
  --spark:#fb7a45;           /* Hub spark orange accent */
  --grad:linear-gradient(92deg,#4f46e5 0%,#315fca 46%,#087f6b 100%);
  --ink:#0d1830;
  --ink-2:#33415e;
  --muted:#5c6b87;
  --line:#e3e8f2;
  --soft:#f5f7fc;
  --card:#ffffff;
  --ok:#0ea983;
  --warn:#b45309;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(10,23,51,.05),0 10px 28px -14px rgba(10,23,51,.14);
  --shadow-lg:0 2px 4px rgba(10,23,51,.05),0 30px 60px -20px rgba(21,42,94,.25);
  --maxw:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;color:var(--ink);background:#fff;
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.14;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.7rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.24rem}
p{margin:.35em 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* Gradient text accent */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .grad{background:linear-gradient(92deg,#93a5ff 0%,#75b4ff 46%,#37e6c3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Accessibility */
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus,.skip:focus-visible{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:.98rem;
  border-radius:11px;padding:12px 24px;border:1.5px solid transparent;cursor:pointer;transition:all .16s ease;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--grad);background-origin:border-box;background-repeat:no-repeat;color:#fff;box-shadow:0 6px 18px -6px rgba(53,71,232,.45)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(20,201,168,.5);filter:saturate(1.1)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#b9c4d8;background:var(--soft)}
.btn-dark-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.btn-dark-ghost:hover{background:rgba(255,255,255,.14)}
.btn-lg{font-size:1.07rem;padding:15px 30px;border-radius:13px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#main{scroll-margin-top:80px}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);opacity:.5;pointer-events:none}
.site-head .container{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{color:var(--ink-2);font-weight:600;font-size:.96rem;padding:9px 10px;border-radius:9px}
@media (max-width:1240px) and (min-width:1101px){ .nav a{padding:9px 7px;font-size:.9rem} }
.nav .nav-cta a.btn{padding:12px 24px}
.nav .nav-cta a.btn-primary{color:#fff}
.nav .nav-cta a.btn-primary:hover{color:#fff;background:var(--grad);filter:saturate(1.1)}
.nav .nav-cta a.btn-ghost{color:var(--ink)}
.nav .nav-cta a.btn-ghost:hover{background:var(--soft);border-color:#b9c4d8}
.nav a:hover{background:var(--soft);text-decoration:none;color:var(--ink)}
.nav a.on{color:var(--blue);background:var(--blue-soft)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.head-actions .login{font-weight:700;color:var(--ink-2);padding:8px 10px}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;min-width:44px;min-height:44px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

@media (max-width:1100px){
  /* Keep the trial CTA visible in the header on mobile: [logo] … [CTA] [burger] */
  .site-head .container{gap:12px;min-width:0}
  .menu-btn{display:block;order:3;margin-left:0;flex:none}
  .head-actions{order:2;margin-left:auto;gap:8px;flex:none}
  .head-actions .login{display:none}
  .head-actions .btn{padding:9px 14px;font-size:.88rem;white-space:nowrap}
  .nav{position:fixed;inset:72px 0 auto 0;margin-left:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:12px 18px max(18px,env(safe-area-inset-bottom));gap:2px;
    max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateY(-130%);transition:transform .22s ease;box-shadow:var(--shadow-lg);visibility:hidden;pointer-events:none}
  .nav.open{transform:none;visibility:visible;pointer-events:auto}
  .nav a{padding:12px 10px;font-size:1.02rem}
  .nav .nav-cta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
  .brand{min-width:0}
  .brand img{height:26px}
}
@media (max-width:480px){
  /* 390-class phones cannot fit wordmark + “Start free trial” + burger. Trial stays in the menu. */
  .head-actions{display:none}
  .menu-btn{margin-left:auto;padding:7px 8px}
  .brand img{height:21px}
}
@media (min-width:1101px){ .nav .nav-cta{display:none} }

/* ---------- Hero (dark navy, like the logo) ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.hero::before{content:"";position:absolute;inset:-20% -10%;background:
  radial-gradient(640px 420px at 18% 8%,rgba(53,71,232,.38) 0%,transparent 60%),
  radial-gradient(720px 480px at 88% 72%,rgba(55,230,195,.16) 0%,transparent 62%),
  radial-gradient(500px 320px at 65% -8%,rgba(74,168,255,.20) 0%,transparent 60%);
  pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:
  radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(720px 560px at 30% 30%,#000 0%,transparent 75%);
  mask-image:radial-gradient(720px 560px at 30% 30%,#000 0%,transparent 75%)}
/* Floating glass chips over the hero shot */
.hero .shot-wrap{position:relative}
.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:rgba(14,29,64,.82);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:13px;padding:11px 16px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);font-size:.85rem;font-weight:600;color:#e8eeff;white-space:nowrap;
  animation:chipFloat 5.2s ease-in-out infinite}
.float-chip .dot{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:rgba(55,230,195,.16)}
.float-chip small{display:block;font-weight:500;color:#93a5cc;font-size:.72rem}
.chip-a{top:-20px;right:26px}
.chip-b{bottom:-18px;left:-30px;animation-delay:1.6s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:960px){ .chip-b{left:8px} }
@media (prefers-reduced-motion:reduce){ .float-chip{animation:none} }
.hero .container{position:relative;display:grid;grid-template-columns:1.02fr 1.1fr;gap:60px;align-items:center;padding-top:92px;padding-bottom:104px}
.hero h1{color:#fff}
.hero .sub{font-size:1.2rem;color:#a8b8dc;max-width:33em;margin-bottom:1.5em}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .fine{margin-top:16px;font-size:.92rem;color:#8fa1c7}
.hero .fine .tick{color:var(--teal-bright);font-weight:700}
.hero .eyebrow{background:rgba(55,230,195,.12);color:var(--teal-bright);border:1px solid rgba(55,230,195,.25)}
@media (max-width:960px){
  .hero .container{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:64px}
}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-soft);padding:7px 14px;border-radius:99px;margin-bottom:20px}

/* ---------- Screenshot frame ---------- */
.shot{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.hero .shot{border-color:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(74,168,255,.12),0 30px 80px -18px rgba(0,0,0,.55),0 0 120px -30px rgba(53,71,232,.55)}
.shot .bar{display:flex;align-items:center;gap:6px;background:#eef2f9;border-bottom:1px solid var(--line);padding:10px 13px}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:#d4dae5}
.shot .bar i:nth-child(1){background:#fca5a5}.shot .bar i:nth-child(2){background:#fcd34d}.shot .bar i:nth-child(3){background:#86efac}
.shot .bar .url{margin-left:8px;flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:.78rem;color:#64748b;padding:2px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{width:100%}
.shot-tilt{transform:perspective(1300px) rotateY(-7deg) rotateX(2deg);transition:transform .35s ease}
.shot-tilt:hover{transform:none}
@media (max-width:960px){ .shot-tilt{transform:none} }

/* ---------- Sections ---------- */
.section{padding:88px 0}
.section.soft{background:var(--soft)}
.section-head{max-width:46em;margin:0 auto 52px;text-align:center}
.section-head p{color:var(--muted);font-size:1.08rem}

/* Branded page-top: every page's FIRST section gets a light gradient wash and a
   tighter top, so inner pages open with intent instead of a white gap.
   (index uses .hero; login/thanks/404 use .hero-min — both styled separately.) */
main > .section:first-child{
  padding-top:52px;
  background:
    radial-gradient(720px 340px at 88% -40%,rgba(79,70,229,.12) 0%,transparent 62%),
    radial-gradient(560px 280px at 4% -34%,rgba(20,201,168,.10) 0%,transparent 60%),
    linear-gradient(180deg,#f3f6fe 0%,#ffffff 78%)}
main > .section:first-child .section-head{margin-bottom:30px}
.hero-min{background:
    radial-gradient(720px 340px at 82% -30%,rgba(79,70,229,.12) 0%,transparent 62%),
    radial-gradient(560px 280px at 8% -24%,rgba(20,201,168,.10) 0%,transparent 60%),
    linear-gradient(180deg,#f3f6fe 0%,#ffffff 80%)}
@media (max-width:640px){
  main > .section:first-child{padding-top:26px}
}

/* Pain strip */
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain .p-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 18px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.pain .p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pain .p-card .x{font-size:1.5rem}
.pain .p-card h3{font-size:1.05rem;margin:.55em 0 .3em}
.pain .p-card p{font-size:.93rem;color:var(--muted);margin:0 0 .4em}
@media (max-width:840px){ .pain{grid-template-columns:1fr} }

/* Feature split rows */
.feat-row{display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:center;padding:44px 0}
.feat-row.rev{grid-template-columns:1.08fr 1fr}
.feat-row.rev .feat-copy{order:2}
.feat-row .kicker{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.feat-row h3{font-size:1.62rem}
.feat-row p{color:var(--muted)}
.feat-row ul{margin:16px 0 18px;padding:0;list-style:none}
.feat-row li{padding:5px 0 5px 30px;position:relative;color:var(--ink-2)}
.feat-row li::before{content:"✓";position:absolute;left:2px;top:5px;color:var(--teal);font-weight:800}
@media (max-width:960px){
  .feat-row,.feat-row.rev{grid-template-columns:1fr;gap:28px;padding:30px 0}
  .feat-row.rev .feat-copy{order:0}
}

/* Card grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:840px){ .grid-3{grid-template-columns:1fr} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ico{width:44px;height:44px;border-radius:11px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:15px}
.card h3{font-size:1.06rem}
.card p{font-size:.93rem;color:var(--muted);margin:0}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-17px;left:24px;width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:var(--shadow)}
.step h3{font-size:1.05rem;margin-top:6px}
.step p{font-size:.93rem;color:var(--muted);margin:0}
@media (max-width:840px){ .steps{grid-template-columns:1fr;gap:28px} }

/* Fact strip */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.facts .f{padding:20px 8px}
.facts b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{font-size:.9rem;color:var(--muted)}
@media (max-width:840px){ .facts{grid-template-columns:repeat(2,1fr)} }

/* CTA band — navy glow like the hero */
.cta-band{position:relative;overflow:hidden;background:var(--navy);border-radius:24px;color:#fff;padding:64px 44px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-band::before{content:"";position:absolute;inset:-30%;background:
  radial-gradient(560px 340px at 22% 20%,rgba(53,71,232,.45) 0%,transparent 60%),
  radial-gradient(560px 340px at 80% 85%,rgba(55,230,195,.22) 0%,transparent 62%);pointer-events:none}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#a8b8dc;max-width:37em;margin:0 auto 1.7em}
.cta-band .fine{margin-top:15px;color:#8fa1c7;font-size:.9rem}
.cta-band .fine a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.cta-band a{color:#fff}

/* ---------- Pricing ---------- */
.bill-toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:4px;gap:2px;margin:6px 0 8px}
.bill-toggle button{border:0;background:transparent;font-weight:700;font-size:.95rem;color:var(--muted);padding:10px 24px;border-radius:99px;cursor:pointer}
.bill-toggle button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.save-chip{display:inline-block;background:#dcf9f0;color:#0b7a58;font-size:.8rem;font-weight:700;border-radius:99px;padding:3px 11px;margin-left:8px}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch;margin-top:38px}
@media (max-width:1060px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow);transition:transform .18s ease}
.plan:hover{transform:translateY(-4px)}
.plan.pop{border:2px solid transparent;background:
  linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;box-shadow:var(--shadow-lg)}
.plan .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.74rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:5px 15px;white-space:nowrap}
.plan h3{font-size:1.14rem;margin-bottom:2px}
.plan .for{font-size:.87rem;color:var(--muted);min-height:2.7em;margin:0 0 12px}
.plan .price{font-size:2.3rem;font-weight:800;letter-spacing:-.02em}
.plan .price .cur{font-size:1.15rem;vertical-align:18px;font-weight:700}
.plan .per{font-size:.86rem;color:var(--muted);margin-bottom:2px}
.plan .yr-note{font-size:.8rem;color:var(--ok);font-weight:600;min-height:1.4em;margin-bottom:12px}
.plan ul{list-style:none;margin:14px 0 24px;padding:0;font-size:.9rem;flex:1}
.plan li{padding:4px 0 4px 25px;position:relative;color:var(--ink-2)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.plan li.hdr{padding-left:0;font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.plan li.hdr::before{content:""}

/* Comparison table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
table.cmp{border-collapse:collapse;width:100%;min-width:780px;font-size:.93rem}
.cmp th,.cmp td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;min-width:260px}
.cmp thead th{background:var(--soft);font-size:.86rem;position:sticky;top:0}
.cmp thead th.pop-col{color:var(--blue)}
.cmp .grp td{background:#f0f4fd;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);text-align:left}
.cmp .yes{color:var(--teal);font-weight:800}
.cmp .no{color:#64748b}
.cmp .soon{display:inline-block;background:#fef3c7;color:var(--warn);font-size:.72rem;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap}
.cmp td.val{font-weight:600}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;padding:0 22px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:1.4rem;color:var(--teal);font-weight:600;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 17px}

/* ---------- Forms ---------- */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
label .opt{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;color:var(--ink);background:#fff;transition:border .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,71,232,.13)}
textarea{min-height:130px;resize:vertical}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.form-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:.93rem}
.form-note{font-size:.83rem;color:var(--muted);margin-top:14px}

/* Two-col split */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
@media (max-width:960px){ .split{grid-template-columns:1fr;gap:32px} }
.split .side h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.side ul.ticks{list-style:none;margin:22px 0;padding:0}
.side ul.ticks li{padding:6px 0 6px 32px;position:relative;color:var(--ink-2)}
.side ul.ticks li::before{content:"✓";position:absolute;left:2px;color:var(--teal);font-weight:800}

/* ---------- Legal ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h1{font-size:2.1rem}
.legal h2{font-size:1.22rem;margin-top:2em}
.legal p,.legal li{color:var(--ink-2);font-size:.96rem}
.draft-banner{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:12px 18px;font-weight:600;font-size:.92rem;margin-bottom:30px}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none;pointer-events:none}

/* Long-form legal documents (Terms, Privacy, DPA, Cookies, Sub-processors, AUP, Retention, Law enforcement) */
.legal h3{font-size:1.04rem;margin-top:1.8em;color:var(--ink)}
.legal h4{font-size:.96rem;margin-top:1.5em;color:var(--ink)}
.legal h2,.legal h3,.legal h4{scroll-margin-top:96px}
.legal hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.legal code{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.86em;word-break:break-word}
.legal a{word-break:break-word}
.legal blockquote{margin:1.5em 0;padding:2px 22px;border-left:3px solid var(--teal);background:var(--soft);border-radius:0 10px 10px 0}
.legal blockquote > :first-child{margin-top:1em}
.legal .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin:1.4em 0}
.legal table{border-collapse:collapse;width:100%;min-width:520px;font-size:.87rem}
.legal th,.legal td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-2)}
.legal thead th{background:var(--soft);color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.legal tbody tr:last-child th,.legal tbody tr:last-child td{border-bottom:0}
.legal tbody th[scope=row]{background:#fafbff;color:var(--ink);white-space:nowrap}

/* Contents list */
.legal-toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 24px;margin:26px 0 34px}
.legal-toc h2{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.legal-toc ul{margin:0;padding-left:20px}
.legal-toc li{margin:3px 0;font-size:.92rem}
.legal-toc ul ul{margin:4px 0 8px;padding-left:18px}

/* Owner-supplied facts that are still outstanding — deliberately loud, never shipped filled-in silently */
.legal-notice{background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;border-radius:10px;padding:12px 18px;font-weight:600;font-size:.92rem;margin-bottom:26px}
.legal-date{color:var(--muted);font-size:.92rem;margin-top:-.2em}
mark.owner-fill{background:#7f1d1d;color:#fff;border:1px dashed #fca5a5;border-radius:6px;padding:1px 7px;
  font-weight:700;font-size:.86em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.owner-fill::before{content:"⚠ "}
mark.owner-fill code{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}

/* ---------- Footer (navy, real-logo home) ---------- */
.site-foot{background:var(--navy);color:#94a5c9;margin-top:96px;padding:66px 0 36px;font-size:.94rem;position:relative;overflow:hidden}
.site-foot::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 85% 0%,rgba(53,71,232,.18) 0%,transparent 60%);pointer-events:none}
.site-foot .container{position:relative}
.site-foot a{color:#c3cfe8}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:38px;margin-bottom:46px}
@media (max-width:840px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid .foot-title{color:#fff;font-size:.84rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:15px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:0}
.foot-grid li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
.foot-brand img{height:34px;width:auto;margin-bottom:12px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#7186ad}

/* ---------- Cookie banner ---------- */
body.has-cookiebar{padding-bottom:130px}
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;background:var(--navy);color:#dbe4f5;border-radius:14px;
  padding:16px 20px;display:none;align-items:center;gap:18px;box-shadow:var(--shadow-lg);max-width:680px;margin:0 auto;border:1px solid rgba(255,255,255,.1)}
.cookiebar.show{display:flex}
.cookiebar p{margin:0;font-size:.88rem;flex:1}
.cookiebar a{color:#37e6c3}
.cookiebar button{background:var(--grad);color:#fff;border:0;border-radius:8px;font-weight:700;padding:11px 20px;min-height:44px;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:560px){
  body.has-cookiebar{padding-bottom:calc(210px + env(safe-area-inset-bottom))}
  .cookiebar{flex-direction:column;align-items:stretch;text-align:center}
}

@media (forced-colors:active){
  .grad,.hero .grad,.feat-row .kicker,.facts b,.hero-min .big{
    background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important
  }
  .btn-primary,.plan .ribbon,.step::before,.form-ok .ok-ic,.cookiebar button{
    background:ButtonFace!important;color:ButtonText!important;border-color:ButtonText!important;forced-color-adjust:auto
  }
}

/* ---------- 404 / thanks ---------- */
.hero-min{padding:120px 0 100px;text-align:center}
.hero-min .big{font-size:clamp(3.6rem,9vw,6.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:16px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-min p{color:var(--muted);max-width:36em;margin:0 auto 1.6em}
.hero-min img{margin:0 auto 22px}

/* ---------- Scroll-reveal (elements tagged by site.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
}

/* Soft brand glow behind feature-row screenshots (box-shadow — a ::after would be
   clipped by .shot's overflow:hidden) */
.feat-row .shot{box-shadow:var(--shadow-lg),0 34px 90px -26px rgba(79,70,229,.35),0 18px 60px -20px rgba(20,201,168,.18)}

/* Gradient keyline over section headings */
.section-head::before{content:"";display:block;width:56px;height:4px;border-radius:99px;background:var(--grad);margin:0 auto 22px}

/* Industry detail pages */
.crumb{font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:16px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.crumb a{color:var(--muted)}
.crumb b{color:var(--blue)}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px;margin-top:10px}
.check-grid div{padding:10px 0 10px 32px;position:relative;color:var(--ink-2);font-size:.95rem;border-bottom:1px dashed var(--line)}
.check-grid div::before{content:"✓";position:absolute;left:2px;color:var(--teal);font-weight:800}
@media (max-width:900px){ .check-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .check-grid{grid-template-columns:1fr} }
.card .golink{display:inline-block;margin-top:12px;font-weight:700;font-size:.9rem}

/* ---------- Small-screen comfort (phones) ---------- */
@media (max-width:640px){
  .container{padding:0 18px}
  .section{padding:54px 0}
  .section-head{margin-bottom:34px}
  .cta-band{padding:44px 22px;border-radius:18px}
  .hero-min{padding:72px 0 60px}
  .form-card{padding:24px 20px}
  .site-foot{margin-top:56px;padding:48px 0 30px}
  .feat-row h3{font-size:1.4rem}
  .hero .sub{font-size:1.08rem}
}

/* ---------- Signup form extras ---------- */
.plan-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.plan-pick label{position:relative;border:1.5px solid var(--line);border-radius:11px;padding:12px 8px;cursor:pointer;text-align:center;display:block;transition:border .15s,box-shadow .15s,background .15s}
.plan-pick input{position:absolute;opacity:0;pointer-events:none}
.plan-pick label:hover{border-color:#b9c4d8}
.plan-pick label:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.plan-pick label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.plan-pick .pp-name{display:block;font-weight:700;font-size:.92rem}
.plan-pick .pp-price{display:block;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){ .plan-pick{grid-template-columns:1fr 1fr} }
.pay-row{display:flex;gap:12px;flex-wrap:wrap}
.pay-row .btn{flex:1;min-width:210px}
.check-line{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:.92rem;color:var(--ink-2)}
.check-line input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blue)}
.form-ok{display:none;background:#eafaf4;border:1px solid #b7e6d3;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.form-ok .ok-ic{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:16px}
.form-ok h2{font-size:1.4rem;margin-bottom:8px}
.form-ok .ok-msg{color:var(--ink-2)}

/* ---------- Field App page ---------- */
.app-phone{position:relative;justify-self:center}
.app-phone img{width:300px;max-width:78vw;filter:drop-shadow(0 40px 70px rgba(0,0,0,.55)) drop-shadow(0 0 90px rgba(53,71,232,.4))}
.hero .app-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:9px 16px;color:#dbe4f5;font-weight:600;text-align:left;line-height:1.1}
.store-badge .ic{font-size:1.5rem}
.store-badge small{display:block;font-size:.68rem;color:#93a5cc;font-weight:500}
.store-badge b{font-size:.98rem;font-weight:700}
.store-badge .soon{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#0a1733;background:var(--teal-bright);
  border-radius:99px;padding:2px 7px;margin-left:4px;font-weight:800}
.app-note{margin-top:18px;font-size:.9rem;color:#a8b8dc;max-width:34em}
.app-note b{color:#fff}

/* Utility */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:28px}.mt-4{margin-top:44px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:28px}

/* Mobile tap targets and minimum legible text (audit sweep 2026-09-06). */
@media (max-width:767.98px){
  .feat-copy a{display:inline-flex;align-items:center;min-height:44px}
  a[href^="mailto:"],a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
  small{font-size:.78rem}
  .float-chip small{font-size:.76rem}
  .store-badge small{font-size:.76rem}
  .golink{display:inline-flex;align-items:center;min-height:44px}
  .legal code,.legal mark,code,mark{font-size:.82rem}
  .plan .per,.plan small,.hero-note,.tiny{font-size:.78rem}
  .plan .ribbon,.ribbon,.cmp .soon,td .soon,.soon,.store-badge .soon{font-size:.76rem}
  input[type=file]{min-height:44px;padding:10px 12px}
  .store-badge small,.store-badge .sub{font-size:.75rem}
}