/* Sitech marketing site - sitechsoftware.com
   Colour + component tokens are lifted from the app itself (index.html: .hdr / .card / .btn-y)
   so the site and the product read as one brand. */
:root{
  --navy:#0D1B2A;       /* app background */
  --panel:#172131;      /* app .card */
  --line:#22333F;       /* app card border */
  --orange:#FF8A00;     /* app .btn-y */
  --orange-ink:#A85400; /* orange that still passes contrast as text on concrete */
  --concrete:#ECEFF1;
  --paper:#FFFFFF;
  --ink:#111A24;
  --muted:#56626E;
  --on-dark:#F2F4F7;
  --on-dark-muted:#9FB0BF;
  --rule:#D5DBE0;
  --display:'Archivo',Arial,Helvetica,sans-serif;
  --body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--concrete);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-stretch:125%;margin:0;text-wrap:balance;line-height:1.08}
p{margin:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* buttons - same shape language as the app's primary button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;
  font-size:1rem;text-decoration:none;border-radius:12px;padding:14px 24px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.btn-primary{background:var(--orange);color:var(--navy)}
.btn-primary:hover{background:#FF9D2B}
.btn-dark{background:var(--navy);color:var(--on-dark)}
.btn-dark:hover{background:#1B2B3C}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:#3A4B5B}
.btn-ghost:hover{border-color:var(--on-dark-muted)}
.btn:active{transform:translateY(1px)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,27,42,.96);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px)}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--on-dark)}
.brand img{width:36px;height:36px;border-radius:9px}
.brand span{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.15rem;letter-spacing:.04em}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--on-dark-muted);text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--on-dark)}
.header-cta{display:flex;align-items:center;gap:18px}
.header-cta .login{color:var(--on-dark);text-decoration:none;font-size:.95rem;font-weight:500}
.header-cta .btn{padding:10px 18px;font-size:.95rem}

/* hero - shop-drawing grid behind the headline */
.hero{background-color:var(--navy);color:var(--on-dark);position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:84px}
.hero .eyebrow{color:var(--orange)}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:800;letter-spacing:-.02em;margin:18px 0 22px}
.hero .lede{font-size:1.14rem;color:var(--on-dark-muted);max-width:56ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .fineprint{margin-top:22px;font-size:.88rem;color:var(--on-dark-muted)}

/* phone mockup - built from the app's own card/button tokens, illustrative data only */
.phone{justify-self:center;width:300px;background:#060D15;border-radius:40px;padding:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px #24313D}
.screen{background:var(--navy);border-radius:30px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--on-dark)}
.screen .bar{display:flex;justify-content:space-between;padding:12px 20px 6px;font-size:.72rem;font-weight:600;color:#C9D3DC}
.screen .top{padding:8px 16px 14px;border-bottom:1px solid var(--line)}
.screen .top small{display:block;font-size:.7rem;color:#9CA3AF}
.screen .top strong{font-size:.98rem}
.screen .body{padding:14px 14px 18px;display:flex;flex-direction:column;gap:10px}
.m-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.m-tag{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:#0F1A27;border:1px solid #2B3B48;color:#C9D3DC}
.m-task{font-size:.95rem;font-weight:700}
.m-sub{font-size:.72rem;color:#9CA3AF;margin-top:2px}
.m-timer{font-family:var(--mono);font-size:2.1rem;font-weight:600;text-align:center;letter-spacing:.02em;padding:6px 0 2px;font-variant-numeric:tabular-nums}
.m-state{text-align:center;font-size:.7rem;color:#7FD4A0;display:flex;align-items:center;justify-content:center;gap:6px}
.m-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#34C27A}
.m-row{display:flex;gap:8px}
.m-btn{flex:1;text-align:center;font-size:.8rem;font-weight:800;border-radius:12px;padding:11px 0}
.m-btn.primary{background:var(--orange);color:var(--navy)}
.m-btn.quiet{background:var(--panel);border:1px solid #374151;color:#C9D3DC;font-weight:600}
.m-mini{display:flex;justify-content:space-between;align-items:center;font-size:.76rem}
.m-mini b{font-family:var(--mono);font-weight:600}

/* trades strip - the whole list of crews the app already has a profession for */
.trades{background:var(--paper);border-bottom:1px solid var(--rule)}
.trades .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;padding-top:26px;padding-bottom:26px}
.trades .eyebrow{color:var(--orange-ink);flex-shrink:0}
.trades ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.trades li{font-size:.9rem;font-weight:500;padding:5px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--concrete)}

/* sections */
section{padding:96px 0}
.section-head{max-width:720px;margin-bottom:52px}
.section-head .eyebrow{color:var(--orange-ink)}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.55rem);font-weight:750;letter-spacing:-.015em;margin-top:12px}
.section-head p{margin-top:16px;color:var(--muted);font-size:1.08rem}

/* patchwork -> replacement */
/* subgrid rows keep the struck-through "before" line, heading and copy on shared baselines across
   all three columns even when one label wraps to two lines */
.swap{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;column-gap:0;border-top:2px solid var(--ink)}
.swap-item{padding:28px 28px 8px 0;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start}
.swap-item + .swap-item{padding-left:28px;border-left:1px solid var(--rule)}
.swap-before{font-family:var(--mono);font-size:.82rem;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(168,84,0,.55);text-decoration-thickness:2px}
.swap-item h3{font-size:1.28rem;font-weight:700}
.swap-item p{color:var(--muted)}

/* features */
.features{background:var(--paper)}
.ai-note{margin-top:28px;color:var(--muted);font-size:.95rem;max-width:720px}
.ai-note a{color:inherit}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:64px}
.feature{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:30px 0;border-top:1px solid var(--rule)}
.feature svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.feature h3{font-size:1.12rem;font-weight:700;font-stretch:112%}
.feature p{color:var(--muted);margin-top:8px}
.feature .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--orange-ink)}

/* live demo invitation */
.demo-band{background:var(--concrete);border-top:1px solid var(--rule)}
.demo-band .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.demo-band .eyebrow{color:var(--orange-ink)}
.demo-band h2{font-size:clamp(1.8rem,3.2vw,2.55rem);font-weight:750;letter-spacing:-.015em;margin:12px 0 16px}
.demo-band p{color:var(--muted);font-size:1.08rem;max-width:56ch}
.demo-band .btn{margin-top:26px}
.demo-roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
/* Each role is a link into the demo as that person (2026-10-03) - the row itself is the target, so
   the layout moved from the <li> onto the <a> and the whole card is clickable, not just the words. */
.demo-roles li{display:block}
.demo-roles a{display:flex;align-items:center;gap:14px;background:var(--navy);color:var(--on-dark-muted);border-radius:14px;padding:16px 18px;font-size:.95rem;
  text-decoration:none;border:1px solid transparent;transition:border-color .15s,background .15s}
.demo-roles a:hover,.demo-roles a:focus-visible{border-color:var(--orange);background:#132233}
.demo-roles a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.demo-roles b{display:block;color:var(--on-dark);font-family:var(--display);font-stretch:112%;font-size:1.02rem;margin-bottom:2px}
.dr-av{width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--navy);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:.82rem;flex-shrink:0}

/* built for the site - dark band */
.site-band{background:var(--navy);color:var(--on-dark)}
.site-band .section-head .eyebrow{color:var(--orange)}
.site-band .section-head p{color:var(--on-dark-muted)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.band-cell{background:var(--panel);padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.band-cell .k{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.band-cell h3{font-size:1.1rem;font-weight:700;font-stretch:112%}
.band-cell p{color:var(--on-dark-muted);font-size:.96rem}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.langs span{font-family:var(--mono);font-size:.72rem;padding:3px 8px;border-radius:6px;border:1px solid #2B3B48;color:#C9D3DC}

/* tailored to your team */
.tailored-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;column-gap:28px}
.tailored-item{border-top:2px solid var(--ink);padding-top:20px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:10px;align-content:start}
.tailored-item .k{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.tailored-item h3{font-size:1.14rem;font-weight:700;font-stretch:112%}
.tailored-item p{color:var(--muted);font-size:.98rem}
.tailored-note{margin-top:40px;font-family:var(--mono);font-size:.88rem;display:flex;align-items:center;gap:10px}
.tailored-note::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--orange);flex-shrink:0}

/* free-month offer - the page's one hi-vis band, with a site docket as its receipt */
.offer{background:var(--orange);color:var(--navy)}
.offer .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.offer .eyebrow{color:var(--navy)}
.offer h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;margin:12px 0 18px}
.offer p{font-size:1.1rem;max-width:54ch;color:#1D2733}
.offer .btn{margin-top:28px}
.docket{justify-self:center;width:100%;max-width:340px;background:var(--paper);color:var(--ink);border-radius:6px;
  padding:22px 24px;font-family:var(--mono);box-shadow:0 18px 40px rgba(13,27,42,.25);transform:rotate(-1.5deg)}
.docket-head{display:flex;justify-content:space-between;font-size:.74rem;font-weight:600;letter-spacing:.1em;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.docket dl{margin:14px 0;display:flex;flex-direction:column;gap:10px}
.docket dl div{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;border-bottom:1px dashed #C3CBD2;padding-bottom:9px}
.docket dt{color:var(--muted)}
.docket dd{margin:0;font-weight:600}
.docket-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding-top:12px}
.docket-total span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.docket-total b{font-size:1.6rem;font-variant-numeric:tabular-nums}

/* onboarding steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:step}
.step{border-top:2px solid var(--ink);padding-top:20px;counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--orange-ink)}
.step h3{font-size:1.14rem;font-weight:700;font-stretch:112%;margin-top:10px}
.step p{color:var(--muted);margin-top:8px;font-size:.98rem}

/* demo form */
.demo{background:var(--paper)}
.demo .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.demo-aside .section-head{margin-bottom:28px}
.contact-lines{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule);padding-top:24px}
.contact-lines div{display:grid;grid-template-columns:88px 1fr;gap:12px;font-size:.98rem}
.contact-lines dt,.contact-lines .lbl{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.contact-lines a{color:var(--ink);text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
form.demo-form{background:var(--concrete);border:1px solid var(--rule);border-radius:16px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.9rem;font-weight:600}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid #B9C3CB;
  border-radius:10px;padding:12px 13px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,0,.22)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px}
.form-foot p{font-size:.86rem;color:var(--muted);flex:1;min-width:220px}
.hp{position:absolute;left:-9999px}
.form-alert{grid-column:1/-1;margin:0;background:#FDECEA;border:1px solid #F1B5AE;color:#8A1F14;border-radius:10px;padding:12px 14px;font-size:.95rem}

/* footer */
.site-footer{background:var(--navy);color:var(--on-dark-muted);padding:56px 0 40px;font-size:.93rem}
.site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:40px}
.site-footer .brand{margin-bottom:14px}
.site-footer h4{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--on-dark)}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:8px;font-size:.84rem;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* real app screenshots in a phone frame (captured from the live demo by tools/capture-website-screens.js) */
.shot{width:100%;max-width:300px;background:#060D15;border-radius:36px;padding:10px;box-shadow:0 26px 60px rgba(0,0,0,.35),0 0 0 1px #24313D}
.shot img{border-radius:27px;width:100%;height:auto;aspect-ratio:1/2;object-fit:cover;object-position:top;background:var(--navy)}
.hero .shot{justify-self:center}

.inside{background:var(--paper)}
.inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.inside-card{display:flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none;color:inherit}
.inside-card .shot{max-width:260px;transition:transform .2s ease}
.inside-card:hover .shot{transform:translateY(-4px)}
.inside-card figcaption{text-align:center;max-width:30ch}
.inside-card b{display:block;font-family:var(--display);font-stretch:112%;font-size:1.08rem}
.inside-card span{color:var(--muted);font-size:.95rem}

/* solutions (links to the landing pages) */
.solutions{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.solution{background:var(--paper);padding:26px 26px 24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
.solution:hover{background:#F7F9FA}
.solution .k{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.solution h3{font-size:1.14rem;font-weight:700;font-stretch:112%}
.solution p{color:var(--muted);font-size:.97rem}
.solution .more{margin-top:auto;padding-top:6px;font-weight:600;font-size:.95rem}

/* FAQ */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--rule);max-width:860px}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:1.06rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:6px;top:16px;font-family:var(--mono);font-size:1.4rem;color:var(--orange-ink)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list .answer{padding:0 0 22px;color:var(--muted);max-width:70ch}
.faq-list .answer p+p{margin-top:10px}

/* landing pages */
.lp-hero{background-color:var(--navy);color:var(--on-dark);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px}
.lp-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:60px;padding-bottom:72px}
.crumbs{font-family:var(--mono);font-size:.78rem;color:var(--on-dark-muted);margin-bottom:22px}
.crumbs a{color:var(--on-dark-muted)}
.crumbs a:hover{color:var(--on-dark)}
.lp-hero .eyebrow{color:var(--orange)}
.lp-hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:800;letter-spacing:-.02em;margin:16px 0 20px}
.lp-hero .lede{font-size:1.12rem;color:var(--on-dark-muted);max-width:58ch}
.lp-hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.lp-rows{display:flex;flex-direction:column;gap:88px}
.lp-row{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.lp-row.flip .lp-copy{order:2}
.lp-row .shot{justify-self:center}
.lp-copy h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:750;letter-spacing:-.015em;margin:10px 0 16px}
.lp-copy .eyebrow{color:var(--orange-ink)}
.lp-copy p{color:var(--muted);font-size:1.05rem}
.lp-copy p+p{margin-top:12px}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:1rem}
.ticks li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:2px;background:var(--orange)}
.lp-cta{background:var(--orange);color:var(--navy);text-align:center}
.lp-cta .wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.lp-cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;max-width:24ch}
.lp-cta p{max-width:56ch;font-size:1.08rem;color:#1D2733}
.lp-cta .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.btn-outline-dark{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline-dark:hover{background:rgba(13,27,42,.08)}

/* thank-you page */
.plain{min-height:calc(100vh - 68px);display:flex;align-items:center;padding:80px 0}
.plain h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin:14px 0 18px}
.plain p{color:var(--muted);max-width:56ch;font-size:1.08rem}
.plain .btn{margin-top:30px}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:48px;padding-top:56px;padding-bottom:64px}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .demo .wrap{grid-template-columns:1fr;gap:40px}
  .offer .wrap{grid-template-columns:1fr;gap:44px}
  .demo-band .wrap{grid-template-columns:1fr;gap:36px}
  .lp-hero .wrap{grid-template-columns:1fr;gap:44px}
  .lp-row,.lp-row.flip{grid-template-columns:1fr;gap:36px}
  .lp-row.flip .lp-copy{order:0}
  .inside-grid{grid-template-columns:1fr;gap:48px}
  .docket{justify-self:start}
  .nav{display:none}
  .header-cta{margin-left:auto}
}
@media (max-width:700px){
  body{font-size:16px}
  section{padding:68px 0}
  .swap{grid-template-columns:1fr;grid-template-rows:none}
  .swap-item{display:flex;flex-direction:column;grid-row:auto}
  .swap-item,.swap-item + .swap-item{padding:24px 0 20px;border-left:0}
  .swap-item + .swap-item{border-top:1px solid var(--rule)}
  .feature-grid{grid-template-columns:1fr}
  .solutions{grid-template-columns:1fr}
  .tailored-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:32px}
  .tailored-item{display:flex;flex-direction:column;grid-row:auto}
  .band-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  form.demo-form{grid-template-columns:1fr;padding:22px}
  .site-footer .wrap{grid-template-columns:1fr;gap:28px}
  .header-cta .login{display:none}
  .phone{width:272px}
}
/* Brand band (2026-10-03) - the sign-off before the form. The container is painted the same navy the
   film opens on, so there is no flash while it loads and no poster file to keep in step with it. */
.brand-band{background:var(--navy);color:var(--on-dark);text-align:center}
.brand-band .eyebrow{color:var(--orange)}
.brand-band h2{color:var(--on-dark);margin:0 auto 28px;max-width:18ch;text-wrap:balance}
.brand-film{max-width:560px;margin:0 auto;border-radius:18px;overflow:hidden;background:var(--navy);
  border:1px solid #1E2E3F;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.brand-film video{display:block;width:100%;height:auto}
@media (max-width:720px){ .brand-film{max-width:100%} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}