/* ============================================================
   Done-Next — done-next.com
   One stylesheet for the whole site. Generated pages share it, so a change
   here reaches every page at once.

   The palette is the APP's palette, not a marketing one. Someone who clicks
   through to a demo should feel they are still in the same place — a website
   that looks nothing like the software it sells is quietly telling you the
   screenshots were staged.
   ============================================================ */

:root{
  color-scheme: light;
  --page:#f3f5f7; --surface:#ffffff;
  --ink:#1a1d21; --ink2:#4d535b; --muted:#7d838b;
  --grid:#d7dce2; --hair:#e6eaee;
  /* ROYAL BLUE. --navy drives every heading on the site as well as the dark
     bands, so this one value moves the whole thing; the app carries the same
     pair as its bar. */
  --navy:#1b4f96; --navy-2:#2a6ec2; --sky:#8cc6f2;
  --accent:#2a6ec2; --accent-deep:#1b4f96;
  --good:#0ca30c; --good-text:#006300; --warn:#fab219; --crit:#d03b3b;
  --shadow:0 1px 2px rgba(8,24,49,.06), 0 4px 16px rgba(8,24,49,.08);
  --shadow-lg:0 18px 50px rgba(8,24,49,.18);
  --shadow-xl:0 30px 80px rgba(8,24,49,.24);
  --r:12px;
  --wrap:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:86px;}
body{
  background:var(--surface); color:var(--ink);
  font:16px/1.62 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 24px;}

/* ------------------------------------------------- plain prose (privacy) */
/* A page that is read rather than scanned: narrower measure, ordinary type
   sizes, and headings that mark sections instead of shouting. */
.prose h1{font-size:clamp(30px, 4vw, 42px); line-height:1.1; letter-spacing:-1px;}
.prose h2{font-size:clamp(19px, 2.2vw, 22px); line-height:1.3; letter-spacing:-.3px;
  margin:34px 0 10px;}
.prose p{font-size:16px; line-height:1.68; color:var(--ink2); margin:0 0 14px;}
.prose .lede{margin-bottom:6px;}
.prose h2.part{font-size:clamp(23px, 2.8vw, 27px); margin-top:46px;
  padding-top:22px; border-top:2px solid var(--hair);}
.prose ul{margin:0 0 14px; padding-left:22px;}
.prose li{font-size:16px; line-height:1.68; color:var(--ink2); margin:0 0 6px;}
.prose li::marker{color:var(--accent);}
.prose-date{font-size:13.5px; color:var(--muted); margin:0 0 26px !important;}

/* ---------------------------------------------------------------- header */
.site-head{
  /* NO BACKDROP BLUR. It was saturate(180%) blur(12px) across the full width of
     the viewport, and a backdrop filter is recomputed every frame the page
     scrolls — on a machine without much graphics headroom that is paid sixty
     times a second for the life of the page. Underneath a background already
     92% opaque almost none of it could be seen, so the bargain was a frame
     budget for an effect nobody could point at. The last 8% goes too: a solid
     bar is what the blur was imitating. */
  position:sticky; top:0; z-index:60; background:var(--surface);
  border-bottom:1px solid var(--hair);
}
.site-head .bar{
  max-width:var(--wrap); margin:0 auto; padding:0 24px; height:66px;
  display:flex; align-items:center; gap:8px;
}
.brand{
  font-weight:800; font-size:20px; letter-spacing:-.5px; color:var(--navy);
  white-space:nowrap; margin-right:18px;
}
.brand:hover{text-decoration:none;}
.brand i{font-style:normal; color:var(--accent);}
.site-nav{display:flex; align-items:center; gap:2px; flex:1; flex-wrap:wrap;}
.site-nav a{
  color:var(--ink2); font-weight:600; font-size:14.5px; padding:8px 12px;
  border-radius:8px; white-space:nowrap;
}
.site-nav a:hover{background:var(--page); color:var(--navy); text-decoration:none;}
.site-nav a.on{background:var(--navy); color:#fff;}
.navtoggle{display:none;}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font:600 15px/1 "Segoe UI", system-ui, sans-serif; padding:13px 22px;
  border-radius:9px; border:1px solid var(--grid); background:var(--surface);
  color:var(--ink); cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn:hover{border-color:var(--accent); color:var(--accent-deep); text-decoration:none;}
.btn.primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 2px 10px rgba(46,111,181,.28);
}
.btn.primary:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.4); color:#fff;}
.btn.ghost:hover{background:rgba(255,255,255,.14); border-color:#fff; color:#fff;}
.btn.big{padding:16px 30px; font-size:16.5px;}
.btn.sm{padding:9px 15px; font-size:14px;}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

/* ---------------------------------------------------------------- sections */
section{padding:82px 0;}
section.tight{padding:56px 0;}
.band-dark{
  background:
    radial-gradient(1200px 520px at 78% -12%, rgba(140,198,242,.34), transparent 62%),
    linear-gradient(160deg, #15407c 0%, var(--navy) 46%, #2a6ec2 100%);
  color:#fff;
}
.band-dark h1, .band-dark h2, .band-dark h3{color:#fff;}
.band-dark p{color:rgba(255,255,255,.86);}
.band-soft{background:var(--page); border-block:1px solid var(--hair);}

/* ---------------------------------------------------------------- type */
h1{font-size:clamp(34px, 5.2vw, 56px); line-height:1.08; letter-spacing:-1.4px;
   font-weight:800; color:var(--navy);}
h2{font-size:clamp(26px, 3.4vw, 38px); line-height:1.16; letter-spacing:-.9px;
   font-weight:800; color:var(--navy);}
h3{font-size:20px; line-height:1.3; letter-spacing:-.35px; font-weight:700; color:var(--navy);}
h4{font-size:16px; font-weight:700; color:var(--navy);}
p{color:var(--ink2);}
p + p{margin-top:15px;}
.lede{font-size:clamp(17px, 2vw, 20.5px); line-height:1.6; color:var(--ink2);}
.band-dark .lede{color:rgba(255,255,255,.9);}
.eyebrow{
  font-size:12.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.band-dark .eyebrow{color:var(--sky);}
.sec-head{max-width:760px; margin-bottom:44px;}
.sec-head.mid{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head h2 + p{margin-top:16px;}

/* ---------------------------------------------------------------- hero */
.hero{padding:76px 0 0; overflow:hidden;}
.hero .lede{max-width:640px;}
.hero .btnrow{margin-top:32px;}
.heroline{
  margin-top:20px; font-size:14px; color:rgba(255,255,255,.66);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.heroline b{color:#fff; font-weight:700;}
.heroshot{margin-top:56px; position:relative;}
.heroshot .shot{margin-bottom:-10px;}
/* ---------------------------------------------------------------- shots */
.shot{
  border-radius:var(--r); overflow:hidden; background:var(--surface);
  border:1px solid var(--grid); box-shadow:var(--shadow-lg);
}
/* height:auto matters the moment an <img> carries width/height attributes: without
   it the attribute acts as a fixed height, the picture is scaled on one axis only
   and comes out stretched down the page. The attributes are worth keeping — they
   reserve the right space before the file arrives — so the stylesheet has to
   release the height. */
.shot img{width:100%; height:auto;}
.shot.raise{box-shadow:var(--shadow-xl);}
.shot-cap{
  font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.5;
}
.band-dark .shot-cap{color:rgba(255,255,255,.6);}
/* The wrapper exists only to tie a caption to its picture; a figure brings
   1em of margin with it by default, which would move every shot on the site. */
.shotfig{margin:0;}
.phone{
  max-width:290px; border-radius:26px; padding:9px; background:#20242a;
  box-shadow:var(--shadow-xl); border:1px solid #333;
}
.phone img{border-radius:19px;}

/* ---------------------------------------------------------------- grid */
.grid{display:grid; gap:26px;}
.g2{grid-template-columns:repeat(2, minmax(0,1fr));}
.g3{grid-template-columns:repeat(3, minmax(0,1fr));}
.g4{grid-template-columns:repeat(4, minmax(0,1fr));}
/* the industry cards: however many there are, they fill the row evenly */
.gauto{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));}
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:52px; align-items:center;
}
.split.flip > :first-child{order:2;}
.split.even{grid-template-columns:repeat(2, minmax(0,1fr));}

/* ---------------------------------------------------------------- cards */
.card{
  background:var(--surface); border:1px solid var(--grid); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:9px;}
.card p{font-size:15px;}
.card.link:hover{border-color:var(--accent); box-shadow:var(--shadow-lg);}
a.card{display:block; color:inherit;}
a.card:hover{text-decoration:none;}
.card .more{
  display:inline-block; margin-top:14px; font-weight:700; font-size:14.5px; color:var(--accent);
}
.icon{
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:rgba(46,111,181,.10); color:var(--accent-deep);
  font-size:20px; font-weight:800; margin-bottom:15px;
}

/* numbered steps */
.steps{counter-reset:s;}
.step{position:relative; padding-left:60px;}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:-2px; width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:17px;
}

/* ---------------------------------------------------------------- lists */
.ticks{list-style:none; display:grid; gap:13px;}
.ticks li{position:relative; padding-left:31px; color:var(--ink2); font-size:15.5px;}
.ticks li::before{
  /* The logo's tick, not the font's. A text "✓" is drawn by whatever font the
     visitor has, so it arrived thin and round on some machines and heavy on
     others — and never matched the mark in the header. This is the same path
     the logo uses, square caps and all. */
  content:""; position:absolute; left:0; top:4px; width:18px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='164.9 -1747.9 1652.7 1439.7'%3E%3Cpath d='M385 -905.2L778.2 -528.4L1597.4 -1527.8' stroke='%230CA30C' stroke-width='311.3' fill='none' stroke-linecap='square' stroke-linejoin='miter' stroke-miterlimit='10'/%3E%3C/svg%3E") left top/contain no-repeat;
}
.band-dark .ticks li{color:rgba(255,255,255,.86);}
.band-dark .ticks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='164.9 -1747.9 1652.7 1439.7'%3E%3Cpath d='M385 -905.2L778.2 -528.4L1597.4 -1527.8' stroke='%236FDC6F' stroke-width='311.3' fill='none' stroke-linecap='square' stroke-linejoin='miter' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
.ticks li b{color:var(--ink);}
.band-dark .ticks li b{color:#fff;}

.crosses{list-style:none; display:grid; gap:11px;}
.crosses li{position:relative; padding-left:31px; color:var(--ink2); font-size:15.5px;}
.crosses li::before{
  content:"✕"; position:absolute; left:0; top:0; color:var(--crit);
  font-weight:800; font-size:13px;
}

/* ---------------------------------------------------------------- chips */
.chips{display:flex; gap:9px; flex-wrap:wrap;}
.chip{
  font-size:13px; font-weight:700; padding:6px 13px; border-radius:99px;
  background:var(--page); border:1px solid var(--grid); color:var(--ink2);
}
.band-dark .chip{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff;}
.chip.on{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---------------------------------------------------------------- callout */
.quote{
  border-left:4px solid var(--accent); padding:6px 0 6px 24px;
  font-size:clamp(19px, 2.4vw, 25px); line-height:1.44; font-weight:600;
  color:var(--navy); letter-spacing:-.4px;
}
.quote span{display:block; font-size:14.5px; font-weight:600; color:var(--muted);
  margin-top:14px; letter-spacing:0;}
.band-dark .quote{border-left-color:var(--sky); color:#fff;}
.band-dark .quote span{color:rgba(255,255,255,.62);}

.note{
  background:var(--page); border:1px solid var(--grid); border-left:4px solid var(--accent);
  border-radius:8px; padding:18px 22px; font-size:15px; color:var(--ink2);
}
.note b{color:var(--ink);}

/* ---------------------------------------------------------------- table */
.tbl{width:100%; border-collapse:collapse; font-size:15px;}
.tbl th, .tbl td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--hair);}
.tbl th{font-size:12.5px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);}
.tbl td:first-child{font-weight:700; color:var(--ink); white-space:nowrap;}
.tblwrap{overflow-x:auto; border:1px solid var(--grid); border-radius:var(--r);}

/* ---------------------------------------------------------------- form */
.form{display:grid; gap:18px;}
.fld{display:grid; gap:7px;}
.fld label{font-size:13.5px; font-weight:700; color:var(--ink);}
.fld label span{font-weight:500; color:var(--muted);}
.fld input, .fld select, .fld textarea{
  font:15px/1.5 "Segoe UI", system-ui, sans-serif; color:var(--ink);
  padding:12px 14px; border:1px solid var(--grid); border-radius:9px;
  background:var(--surface); width:100%;
}
.fld textarea{min-height:130px; resize:vertical;}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,111,181,.15);
}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

/* ---------------------------------------------------------------- CTA */
.cta{
  background:linear-gradient(150deg, #12315c, var(--navy) 58%, #1f5596);
  border-radius:16px; padding:56px 48px; color:#fff; text-align:center;
  box-shadow:var(--shadow-lg);
}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,.86); max-width:560px; margin:16px auto 0;}
.cta .btnrow{justify-content:center; margin-top:30px;}

/* ---------------------------------------------------------------- footer */
/* THE SAME BLUE THE PAGE OPENS ON.
   It was a flat #10294c, left behind when everything else went royal — nearly
   black against a hero that runs #15407c → #2a6ec2, so the page ended in a
   different colour from the one it started in. This runs the hero's own
   gradient, in the same direction, over the dark half of it.
   IT STOPS AT #17468c, which is not an eye for a stop point: the body text is
   white at 62%, and that is the lightest blue it still clears 4.5:1 against
   (4.59). Carrying on to the hero's #1b4f96 looks better and drops the footer
   text to 4.16, which is a footer nobody over forty can read. */
.site-foot{
  background:linear-gradient(160deg, #15407c 0%, #17468c 100%);
  color:rgba(255,255,255,.62); padding:58px 0 32px; font-size:14.5px;
}
.site-foot h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:1.3px;
  margin-bottom:15px;}
.site-foot a{color:rgba(255,255,255,.72); display:block; padding:4px 0;}
.site-foot a:hover{color:#fff;}
/* The bottom line is a sentence, not a column of links — the block display that
   stacks the four footer columns would otherwise put "Privacy policy" on a line
   of its own and leave the separator dangling under it. */
.foot-end a{display:inline; padding:0;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;}
.foot-brand{font-weight:800; font-size:20px; color:#fff; letter-spacing:-.5px;}
.foot-brand i{font-style:normal; color:var(--sky);}
.foot-end{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px;
}

/* ---------------------------------------------------------------- misc */
.spacer{flex:1;}
.mt-s{margin-top:14px;} .mt-m{margin-top:26px;} .mt-l{margin-top:42px;}
.center{text-align:center;}
.hr{height:1px; background:var(--hair); border:0; margin:0;}

/* ---------------------------------------------------------------- responsive */
@media (max-width:960px){
  .split, .split.even{grid-template-columns:minmax(0,1fr); gap:34px;}
  .split.flip > :first-child{order:0;}
  .g4{grid-template-columns:repeat(2, minmax(0,1fr));}
  .g3{grid-template-columns:repeat(2, minmax(0,1fr));}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width:720px){
  /* a long button label must wrap rather than push the page sideways */
  .btn{white-space:normal; text-align:center; line-height:1.3;}
  section{padding:58px 0;}
  .hero{padding:52px 0 0;}
  .g2, .g3, .g4{grid-template-columns:1fr;}
  .f2{grid-template-columns:1fr;}
  .cta{padding:40px 24px;}
  /* the phone header lives in its own block at the end of this file */
  .heroshot{margin-top:38px;}
  .step{padding-left:0; padding-top:52px;}
  .step::before{top:0;}
}


/* ---------------------------------------------------------- phone header --
   Six links will not fit across a 390px screen, so on a phone they collapse
   behind a menu button. This is a sticky header: every pixel it costs is a
   pixel taken from every screen of every page, all the way down. Two wrapped
   rows of links came to 158px, or a fifth of the screen, permanently.

   No JavaScript. The toggle is a checkbox and the panel is a sibling selector,
   which keeps the site exactly as dependency-free as the rest of it and means
   nothing has to be kept in sync across fourteen static pages. */

.navtog{
  /* Visually hidden, NOT display:none — display:none would drop it out of the
     tab order and leave the menu unreachable from a keyboard. */
  position:absolute; width:1px; height:1px; opacity:0; margin:0;
  clip-path:inset(50%); pointer-events:none;
}
.burger{display:none;}

@media (max-width:720px){
  .site-head .bar{
    min-height:56px; height:auto; padding:6px 16px; gap:10px; flex-wrap:wrap;
  }
  .brand{margin-right:auto; font-size:19px;}
  .site-head .btn.sm{padding:9px 14px; font-size:14px; white-space:nowrap;}

  .burger{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:44px; height:44px;          /* a real touch target, not a 24px icon */
    border:1px solid var(--hair); border-radius:10px; background:#fff;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .burger span{position:relative; display:block; width:18px; height:2px;
               border-radius:2px; background:var(--navy);}
  .burger span::before, .burger span::after{
    content:""; position:absolute; left:0; width:18px; height:2px;
    border-radius:2px; background:var(--navy);
  }
  .burger span::before{top:-6px;}
  .burger span::after{top:6px;}

  /* Open: the bars become a cross, so the button says which state it is in. */
  .navtog:checked + .burger span{background:transparent;}
  .navtog:checked + .burger span::before{top:0; transform:rotate(45deg);}
  .navtog:checked + .burger span::after{top:0; transform:rotate(-45deg);}
  .navtog:focus-visible + .burger{outline:2px solid var(--accent); outline-offset:2px;}

  .site-nav{
    display:none; order:3; width:100%; flex-direction:column; align-items:stretch;
    gap:2px; padding:6px 0 8px; border-top:1px solid var(--hair);
  }
  .navtog:checked ~ .site-nav{display:flex;}
  .site-nav a{padding:12px 10px; font-size:16px; border-radius:10px;}
}

@media (max-width:720px) and (prefers-reduced-motion:no-preference){
  .burger span, .burger span::before, .burger span::after{transition:.18s ease;}
}

/* Below about 390px the wordmark, the menu button and a four-word call to
   action will not share one line, and the row wrapping takes the sticky header
   from 57px to 105px — a third of a small screen, on every page. Trimming the
   button and the wordmark is much cheaper than that. The threshold is 389 and
   not 359 because the logo became artwork: the old text wordmark was narrower
   than the image that replaced it. */
@media (max-width:389px){
  .site-head .bar{padding-inline:12px; gap:8px;}
  .brand{font-size:18px;}
  .site-head .btn.sm{padding:8px 10px; font-size:13px;}
  .burger{width:40px; height:40px;}
}


/* ------------------------------------------------------------------ logo --
   The wordmark used to be live text styled with font-weight:800. It is now
   artwork with the letterforms converted to outlines, so it renders the same
   on every machine and needs no font installed — but it also means the size
   has to be set here rather than inherited from a font-size. */

.brand{display:inline-flex; align-items:center; line-height:0;}
.brand img{height:30px; width:auto; display:block;}

/* The footer mark is a way home too.
   line-height:0 on the anchor for the same reason .brand has it above: an
   inline box around a block image still reserves room for a text baseline
   under it, which shows up as a few pixels of dead space the footer did not
   have before the logo became a link. */
/* padding:0 because .site-foot a above gives every link in the footer
   `padding:4px 0` for a comfortable tap target in a column of text links. The
   logo is not in that column, and inheriting it made the anchor 38px tall
   around a 30px image — eight pixels of dead space the footer did not have
   before the mark became a link. */
.foot-brand a{display:inline-block; line-height:0; padding:0;}
.foot-brand img{height:30px; width:auto; display:block;}

@media (max-width:720px){
  /* Smaller on a phone so the wordmark, the menu button and the call to action
     still share one row — the whole point of the 57px header. */
  .brand img{height:26px;}
}
@media (max-width:389px){
  .brand img{height:23px;}
}