/* ----------------------------------------------------------------------------
 * LastingERP marketing design system (v3)
 *
 * Extracted from views/landing_v3.php so the homepage, About, Features,
 * Pricing and Contact pages can share one stylesheet.
 *
 * Everything is scoped under .v3 so it cannot affect the shared Bootstrap 3
 * header/footer or any of the ~140 legacy marketing pages. A page opts in by
 * wrapping its content in <div class="v3">.
 *
 * Palette is the existing brand: near-black ink + #e5f538 lime.
 * Include via views/partials/v3_head.php (loads the fonts and this file).
 * -------------------------------------------------------------------------- */

.v3{
  --ink:#0e100b; --ink-2:#171a12; --ink-3:#22261b; --lime:#e5f538; --olive:#566000;
  --paper:#f3f5ee; --card:#ffffff; --steel:#5d6556; --steel-2:#9aa38f; --rule:#dde2d3; --rule-dark:#2c3124;
  --warn:#ff6b2c; --ok:#43c173;
    --radius-btn:30px; --radius-input:26px; --radius-ctl:37px;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-family:var(--body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.v3 *,.v3 *::before,.v3 *::after{box-sizing:border-box}
/* Resets use :where() so they beat Bootstrap 3 / style.css element rules (0,0,1)
   but lose to the .v3-* component classes declared below. */
.v3 :where(section,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote){margin:0;padding:0}
.v3 :where(ul,ol){list-style:none}
.v3 :where(dt){font-weight:400}
.v3 :where(a),.v3 :where(a):hover,.v3 :where(a):focus{color:inherit;text-decoration:none}
.v3 :where(img){max-width:100%;height:auto;display:block}
.v3 a:focus-visible,.v3 button:focus-visible,.v3 summary:focus-visible,.v3 input:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.v3-wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.v3-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.v3-h2{font-family:var(--display);font-weight:800;text-transform:capitalize;font-size:clamp(34px,4.2vw,56px);line-height:.98;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:break-word}
.v3-lead{font-size:clamp(17px,1.5vw,19px);color:var(--steel);max-width:62ch}
.v3-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:16px;padding:15px 24px;border-radius:var(--radius-btn);border:2px solid transparent;transition:transform .15s ease,background .15s ease;cursor:pointer;line-height:1.1;height:auto}
.v3-btn:hover{transform:translateY(-2px);text-decoration:none}
.v3-btn-lime{background:var(--lime);color:var(--ink)!important}
.v3-btn-ghost{border-color:#3b4230;color:#fff!important}
.v3-btn-ghost:hover{border-color:var(--lime)}
.v3-btn-dark{background:var(--ink);color:#fff!important}
.v3-arrow{font-family:var(--mono);font-weight:500}

/* HERO — light.
   Was a dark two-column hero with a production-board mock. Reverted to a light
   ground at the client's request and rebuilt around the previous banner's
   content: headline, sub, business-email capture and the "We solve" rotator. */
.v3-hero{
  background:var(--paper);color:var(--ink);
  position:relative;overflow:hidden;
  padding-block:clamp(44px,5.5vw,84px) 0;
  border-bottom:1px solid var(--rule);
}
/* faint technical grid, the light counterpart of the old dark one */
.v3-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(86,96,0,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(86,96,0,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 62% at 50% 34%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 34%,#000 30%,transparent 78%);
  pointer-events:none;
}

.v3-hero .v3-eyebrow{color:var(--olive);display:inline-flex;align-items:center;gap:10px;justify-content:center}
.v3-hero .v3-eyebrow::before,.v3-hero .v3-eyebrow::after{content:"";width:26px;height:2px;background:var(--lime)}
.v3-hero h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,4.45vw,64px);line-height:.94;letter-spacing:-.005em;
  margin:16px auto 18px;color:var(--ink);text-wrap:balance;max-width:24ch;
  overflow-wrap:break-word;
}


/* business-email capture — the previous banner's primary action */
.v3-trial{
  display:flex;align-items:center;gap:8px;
  margin:32px auto 0;max-width:620px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-ctl);
  padding:8px 8px 8px 4px;
  box-shadow:0 1px 0 rgba(14,16,11,.04),0 14px 34px -22px rgba(14,16,11,.45);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.v3-trial:focus-within{
  border-color:var(--ink);
  box-shadow:0 1px 0 rgba(14,16,11,.04),0 16px 38px -20px rgba(14,16,11,.5);
}
.v3-trial input[type=email]{
  flex:1 1 auto;min-width:0;height:auto;
  font-family:var(--body);font-size:17px;color:var(--ink);
  background:transparent;border:0;border-radius:0;
  padding:14px 16px;box-shadow:none;outline:none;
}
.v3-trial input[type=email]::placeholder{color:var(--steel-2)}
.v3-trial button{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:700;font-size:16px;line-height:1.1;
  background:var(--ink);color:var(--lime);border:0;border-radius:var(--radius-btn);
  padding:0 26px;height:52px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.v3-trial button:hover{background:var(--olive);color:#fff}

.v3-trial-err{max-width:620px;margin:14px auto 0;background:#fdecea;border:1px solid #f0b6ae;color:#8a2313;border-radius:var(--radius-input);padding:10px 14px;font-size:15px}
/* "We solve:" rotator */
.v3-solve{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 14px;
  margin:clamp(30px,4vw,48px) auto 0;
}
.v3-solve .lbl{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.v3-solve .word{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,44px);line-height:1;color:var(--ink);
  background:var(--lime);padding:.06em .16em .1em;border-radius:2px;
  min-height:1em;min-width:2ch;
}
.v3-solve .word::after{content:"";display:inline-block;width:.06em;height:.82em;background:var(--olive);margin-left:.08em;vertical-align:-.06em;animation:v3caret 1s step-end infinite}
@keyframes v3caret{50%{opacity:0}}

/* credentials rail */






@media (max-width:600px){
  .v3-trial{flex-wrap:wrap;gap:8px;padding:8px}
  .v3-trial input[type=email]{flex:1 1 100%;padding:12px 12px;text-align:center}
  .v3-trial button{flex:1 1 100%;justify-content:center}
  
}
@media (prefers-reduced-motion:reduce){
  .v3-solve .word::after{animation:none}
}
/* production board */





@keyframes v3pulse{0%,100%{opacity:1}50%{opacity:.25}}

















.v3-alert{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;background:rgba(255,107,44,.08);color:#ffc3a8;font-size:12px}
.v3-alert b{color:var(--warn);font-weight:500}


/* logos */
.v3-logos{background:var(--card);border-bottom:1px solid var(--rule)}
.v3-logos-row{display:flex;align-items:center;gap:clamp(20px,4vw,56px);padding-block:26px;justify-content:space-between}
.v3-logos-row p{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);max-width:14ch;line-height:1.4;flex:none}
/* a continuous loop rather than a static row of eight. The track is two
   identical copies, so -50% is exactly one copy and the seam never shows;
   the mask fades both ends so logos arrive and leave rather than popping. */
.v3-logos-vp{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.v3-logos-track{display:flex;width:max-content;animation:v3-logos-loop 36s linear infinite}
.v3-logos-vp:hover .v3-logos-track,.v3-logos-track:focus-within{animation-play-state:paused}
/* the gap after the last logo belongs INSIDE the copy, not between the
   two - between them it would be halved by the -50% and the loop would
   jump by half a gap on every cycle */
.v3-logos-row ul{display:flex;align-items:center;gap:clamp(30px,4vw,58px);padding-right:clamp(30px,4vw,58px)}
.v3-logos-row li{display:flex;justify-content:center;flex:none}
@keyframes v3-logos-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.v3-logos-row img{height:auto;max-height:34px;width:auto;max-width:100%;filter:grayscale(1) contrast(1.1);opacity:.75;transition:filter .2s,opacity .2s}
@media (max-width:600px){
  .v3-logos-row{flex-direction:column;align-items:flex-start;gap:14px}
  .v3-logos-vp{width:100%}
}
.v3-logos-row img:hover{filter:none;opacity:1}

/* sections */
.v3-sec{padding-block:clamp(56px,7vw,96px)}
.v3-sec-head{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:20px clamp(32px,4vw,56px);align-items:start;
  margin-bottom:clamp(32px,4vw,48px);
}
.v3-sec-head .v3-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.v3-sec-head .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none}
/* a rule ties the lead to the heading instead of leaving it adrift */
.v3-sec-head .v3-lead{
  border-top:1px solid var(--rule);padding-top:16px;margin-top:8px;
  font-size:clamp(16px,1.25vw,17.5px);line-height:1.6;max-width:44ch;
}
@media (max-width:860px){
  .v3-sec-head{grid-template-columns:1fr}
  .v3-sec-head .v3-lead{margin-top:0}
}

/* industries — a bordered grid rather than a loose row of pills, so the block
   has aligned edges and matches the card grids used elsewhere on the site.
   1px gaps over a rule-coloured ground draw the dividers. */




/* Only the arrow fades in on hover. Scoped with :not(.n) because the name
   is also a <span> — matching both is what blanked the grid. */



/* last cell links on to the full index */





@media (max-width:1020px){}
@media (max-width:760px){}
@media (max-width:420px){}

/* flow */
.v3-flow-sec{
  background:
    radial-gradient(820px 460px at 100% 48%, rgba(229,245,56,.17), transparent 68%),
    radial-gradient(460px 320px at 86% 12%, rgba(229,245,56,.08), transparent 70%),
    radial-gradient(520px 300px at 97% 96%, rgba(229,245,56,.05), transparent 72%),
    var(--ink);
  color:#eef1e6;
}
.v3-flow-sec .v3-lead{color:#aab39d}
/* ink on ink showed nothing on this band */
.v3-flow-sec .v3-sec-head .v3-lead{border-top-color:rgba(255,255,255,.17)}
.v3-flow-sec .v3-eyebrow{color:var(--steel-2)}

/* the rail is 1px and dim: it is a thread the steps hang from, not the
   loudest thing in the band */
.v3-flow{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:clamp(16px,1.9vw,34px);
  position:relative;counter-reset:step;
  border-top:1px solid rgba(229,245,56,.34);
}
/* an arrowhead closes the rail, so six columns read as one direction -
   which is exactly what the heading above claims */
.v3-flow::after{
  content:"";position:absolute;top:-5px;right:0;width:9px;height:9px;
  border-top:1px solid var(--lime);border-right:1px solid var(--lime);
  transform:rotate(45deg);
}
.v3-flow li{padding:22px 0 0;position:relative;counter-increment:step}
.v3-flow li::before{
  content:"0" counter(step);font-family:var(--mono);color:var(--lime);
  font-size:12px;letter-spacing:.12em;display:block;margin-bottom:13px;
}
/* solid nodes, sitting ON the rail rather than hanging below it */
.v3-flow li::after{
  content:"";position:absolute;top:-4.5px;left:0;
  width:9px;height:9px;border-radius:50%;background:var(--lime);
}
/* sized to the column it has to live in - PRODUCTION never fitted at 26px */
.v3-flow h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,1.45vw,23px);line-height:1.04;letter-spacing:-.012em;
  color:#fff;margin-bottom:11px;
}
.v3-flow p{font-size:14px;color:#aab39d;line-height:1.62}
/* the document each step leaves behind, treated the same way every time */
.v3-flow code{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--lime);background:rgba(229,245,56,.1);
  border:1px solid rgba(229,245,56,.22);
  padding:1px 6px;border-radius:3px;white-space:nowrap;
}

/* results */
/* lifted off the paper rather than drawn on it */
.v3-results{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1px solid var(--rule);background:var(--card);
  box-shadow:0 22px 48px -32px rgba(14,16,11,.34);
}
/* rows: figure, rule, label, body (stretches), attribution. The body takes
   the slack so every attribution line sits on the same baseline across
   the four cards. */
.v3-res{
  padding:30px 24px 26px;border-right:1px solid var(--rule);
  display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:0;
}
/* the sector labels the card, so the four are told apart before you read
   a word of them */
.v3-res .sector{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel-2);margin-bottom:18px;
}
.v3-res:last-child{border-right:0}
.v3-res .num{
  font-family:var(--display);font-weight:800;
  font-size:clamp(54px,5.6vw,76px);line-height:.84;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.035em;
}
/* the unit is not part of the quantity: smaller, raised, and set back, so
   the eye lands on the number */
.v3-res .num .u{
  font-size:.46em;vertical-align:.52em;margin-left:.03em;
  font-weight:700;color:var(--steel-2);letter-spacing:0;
}
/* a short rule carries the figure down into its label */
.v3-res .num + .what{margin-top:18px}
.v3-res .what{
  position:relative;font-weight:600;font-size:16px;line-height:1.35;
  padding-top:16px;
}
.v3-res .what::before{
  content:"";position:absolute;top:0;left:0;width:30px;height:2px;background:var(--ink);
}
/* the supporting sentence carries numbers of its own; keeping it light is
   what stops them competing with the figure above */
.v3-res .ctx{font-size:13.5px;color:var(--steel);line-height:1.58;margin-top:9px}
.v3-res .who{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  border-top:1px solid var(--rule);padding-top:13px;margin-top:20px;
}
/* the client is the proof, so it is the part that reads as ink */
.v3-res .who b{color:var(--ink);font-weight:600}
.v3-link{display:inline-flex;gap:8px;margin-top:22px;font-weight:700;border-bottom:2px solid var(--lime);padding-bottom:2px}
.v3-link:hover{text-decoration:none;border-bottom-color:var(--ink)}

/* product tabs */
.v3-product{background:var(--card);border-block:1px solid var(--rule)}








/* ---------- modules ----------
 * Four labelled groups, five modules each. The previous version was one flat
 * 20-cell grid with nothing but names in it - no hierarchy and nothing to read.
 * Each module now carries a one-line descriptor condensed from its real
 * feature list, and the icon colour is the group's, so the four families are
 * legible at a glance without twenty competing colours.
 */
.v3-mods-sec{background:var(--card);border-block:1px solid var(--rule)}
.v3-mods{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;
}
.v3-modgrp{background:var(--paper);padding:26px 24px 24px}
/* the group label is the navigational unit here - it was set lighter than
   the module names under it, so the eye had nothing to land on first */
.v3-modgrp .hd{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
  margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.v3-modgrp .hd .dot{width:9px;height:9px;border-radius:50%;flex:none}
.v3-modgrp ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
/* each module is its own hit area now, so a row lights up as you read down
   the column instead of twenty items sitting in one flat block */
.v3-modgrp li{
  display:flex;align-items:flex-start;gap:12px;
  padding:9px 10px;margin-inline:-10px;border-radius:9px;
  transition:background .16s ease;
}
.v3-modgrp li:hover{background:var(--card)}
.v3-modgrp .ico{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;color:#fff;margin-top:1px;
  transition:transform .16s ease;
}
.v3-modgrp li:hover .ico{transform:translateY(-1px)}
.v3-modgrp .ico svg{width:16px;height:16px}
/* the lime group is a light tile - a white glyph on it measured 1.2:1 */
.v3-modgrp.is-light .ico{color:var(--ink)}
.v3-modgrp .t{display:block;min-width:0}
.v3-modgrp b{
  display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:15px;line-height:1.08;color:var(--ink);letter-spacing:-.01em;
}
.v3-modgrp i{
  display:block;font-style:normal;font-size:12.5px;line-height:1.35;
  color:var(--steel);margin-top:4px;
}

@media (max-width:1100px){
  .v3-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .v3-mods{grid-template-columns:1fr}
  .v3-modgrp{padding:18px 16px 10px}
}

/* ---------- mobile apps ----------
 * Copy on the left; on the right the phone artwork with three floating app
 * cards down each side.
 *
 * Alignment rules that keep it from reading as clutter - the earlier version
 * broke all three:
 *   - nothing is rotated, so every card edge stays parallel to every other
 *   - the two sides share the SAME three rows rather than being interleaved,
 *     so left and right line up as pairs
 *   - all six cards are one width and one height, with equal left/right
 *     margins and an equal 6px overlap onto the artwork
 * The card block is also vertically centred on the artwork, so the two
 * elements start and finish together.
 *
 * The stage is a fixed 640x430 coordinate space: positions are % and sizes are
 * cqw, so the whole thing scales as one piece.
 */
.v3-apps{background:var(--card);border-block:1px solid var(--rule);color:var(--ink)}

.v3-apps-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(24px,2.6vw,40px);align-items:center;
}
.v3-apps-copy{text-align:left}
/* the section head is not used here, so the eyebrow carries its own lime dash */
.v3-apps-copy .v3-eyebrow{
  display:flex;align-items:center;gap:10px;color:var(--steel);margin:0 0 14px;
}
.v3-apps-copy .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none}
.v3-apps-copy .v3-h2{margin:0 0 18px}
.v3-apps-copy .v3-lead{max-width:48ch;margin:0}
.v3-apps .v3-link{margin-top:26px}

/* ---- the stage ---- */
.v3-apps-stage{
  position:relative;width:100%;max-width:760px;aspect-ratio:640/445;
  margin-inline:auto;container-type:inline-size;
}
.v3-apps-glow{
  position:absolute;inset:4% 12%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(229,245,56,.22),rgba(229,245,56,0) 62%);
  filter:blur(8px);
}
.v3-apps-phones{
  position:absolute;left:22%;top:6.1%;width:56%;height:auto;z-index:1;
  filter:drop-shadow(0 16px 32px rgba(14,16,11,.18));
  animation:v3-float 9.4s ease-in-out infinite;animation-delay:-2.1s;--amp:6px;
}

/* ---- the six apps ---- */
.v3-appchips{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.v3-appchip{
  position:absolute;width:20cqw;height:12.6cqw;
  display:flex;align-items:center;gap:1.1cqw;
  padding:0 1.4cqw;
  background:#fff;border:1px solid var(--rule);border-radius:2cqw;
  box-shadow:0 1.9cqw 3.4cqw rgba(14,16,11,.14);z-index:5;
  animation:v3-float var(--dur) ease-in-out infinite;
  animation-delay:var(--delay);
}
.v3-appchip .ico{
  flex:none;width:4.4cqw;height:4.4cqw;border-radius:1.2cqw;
  display:grid;place-items:center;
}
.v3-appchip .ico svg{width:2.5cqw;height:2.5cqw}
.v3-appchip .t{display:block;min-width:0}
.v3-appchip b{
  display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.78cqw;line-height:1.08;color:var(--ink);letter-spacing:-.02em;
}
.v3-appchip i{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:1.55cqw;line-height:1.3;color:var(--steel);margin-top:.4cqw;
}
/* three shared rows; 1-3 sit left, 4-6 sit right on the same rows */
.v3-appchip:nth-child(1),.v3-appchip:nth-child(4){top:11.4%}
.v3-appchip:nth-child(2),.v3-appchip:nth-child(5){top:40.9%}
.v3-appchip:nth-child(3),.v3-appchip:nth-child(6){top:70.5%}
.v3-appchip:nth-child(-n+3){left:0}
.v3-appchip:nth-child(n+4){left:80%}
/* only the timing varies, never the position - the drift stays small enough
   that the three rows still read as rows */
.v3-appchip:nth-child(1){--dur:6.4s;--delay:-0.4s;--amp:9px}
.v3-appchip:nth-child(2){--dur:7.6s;--delay:-2.9s;--amp:7px}
.v3-appchip:nth-child(3){--dur:5.8s;--delay:-1.7s;--amp:10px}
.v3-appchip:nth-child(4){--dur:8.2s;--delay:-4.3s;--amp:8px}
.v3-appchip:nth-child(5){--dur:6.9s;--delay:-0.9s;--amp:10px}
.v3-appchip:nth-child(6){--dur:7.9s;--delay:-3.5s;--amp:7px}

@keyframes v3-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,calc(var(--amp) * -1),0)}
}

@media (max-width:1200px){
  /* the stage takes 63% of the row, so below this the copy column gets too
     narrow to carry the heading - stack rather than squeeze it */
  .v3-apps-grid{grid-template-columns:1fr}
  .v3-apps-copy .v3-lead{max-width:62ch}
  .v3-apps-stage{max-width:640px;margin-inline:auto}
}
@media (max-width:620px){
  /* Below this the cards scale to unreadable type, and they carry the app
     names, so they unstack into an ordinary list under the artwork. */
  .v3-apps-stage{position:static;aspect-ratio:auto;max-width:420px;container-type:normal}
  .v3-apps-glow{display:none}
  .v3-apps-phones{position:static;width:84%;margin:0 auto 22px;display:block;animation:none}
  .v3-appchips{
    position:static;display:grid;gap:1px;background:var(--rule);
    border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  }
  .v3-appchip{
    position:static;width:auto;height:auto;border:0;border-radius:0;
    box-shadow:none;animation:none;gap:13px;padding:13px 15px;
  }
  .v3-appchip .ico{width:34px;height:34px;border-radius:9px}
  .v3-appchip .ico svg{width:18px;height:18px}
  .v3-appchip b{font-size:15px}
  .v3-appchip i{font-size:11.5px;margin-top:3px}
}

/* pricing + founder */
/* quote (dark) left, video (light) right: the demo form in the next section
   is also dark and right-hand, so keeping both on the right stacked them into
   a dark stripe down that edge of the page */
.v3-duo{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(20px,2.4vw,32px);align-items:start}






/* The quote was set at 40px display type and ran to six lines - heavier than
   some section headings, for what is a supporting quote. It now sits a step
   below the h3 beside it, which is the size relationship it should have had.
   Radius matches the other cards (14px, not 6px). */
.v3-founder{
  background:var(--ink);color:#e8ecdf;border-radius:14px;
  padding:clamp(24px,2.6vw,34px);display:grid;gap:20px;
  position:relative;overflow:hidden;
}
/* a soft lime wash in the corner, so the darkest block on the page is not a
   flat rectangle */
.v3-founder::after{
  content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(229,245,56,.14),transparent);pointer-events:none;
}
.v3-founder > *{position:relative;z-index:1}
.v3-founder blockquote{
  margin:0;padding:0;border:0;font-family:var(--display);font-weight:700;
  text-transform:capitalize;font-size:clamp(21px,1.9vw,27px);line-height:1.18;
  letter-spacing:-.005em;color:#fff;text-wrap:balance;
}
.v3-founder p{font-size:15px;line-height:1.6;color:#aab39d;max-width:52ch}
.v3-founder figcaption{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--rule-dark)}
.v3-founder figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--lime)}
.v3-founder figcaption b{display:block;color:#fff;font-size:16px}
.v3-founder figcaption span{font-size:13.5px;color:#aab39d}

/* faq + form */
.v3-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(28px,4.5vw,60px);align-items:start}
/* The FAQ column's heading is a real .v3-sec-head, so it inherits the same
   staged build every other section head has. The modifier only stacks it -
   .v3-sec-head is a two-column grid by default, which this column is too
   narrow for. */
.v3-head-stack{grid-template-columns:1fr;margin-bottom:clamp(20px,2.4vw,30px)}
.v3-head-stack .v3-h2{font-size:clamp(29px,3.3vw,43px)}

.v3-faq details{border-bottom:1px solid var(--rule)}
.v3-faq details:first-child{border-top:1px solid var(--rule)}
.v3-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:21px 56px 21px 0;font-weight:700;font-size:17.5px;line-height:1.35;
  transition:color .18s ease;
}
.v3-faq summary:hover{color:var(--olive)}
.v3-faq summary::-webkit-details-marker{display:none}
/* The marker is drawn rather than typed, and centred on the row instead of
   pinned 14px from the top - which is what threw it out of line as soon as a
   question wrapped onto a second line. Two gradient bars in a ring: closing
   the vertical one turns + into - as the ring rotates. */
.v3-faq summary::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:center,center;
  background-size:11px 1.6px,1.6px 11px;background-color:transparent;
  transition:background-size .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease;
}
.v3-faq summary:hover::after{border-color:var(--ink)}
.v3-faq details[open] summary::after{
  background-size:11px 1.6px,1.6px 0;
  background-color:var(--lime);border-color:var(--lime);
  transform:translateY(-50%) rotate(180deg);
}
.v3-faq details p{padding:0 56px 22px 0;color:var(--steel);max-width:62ch}
/* <details> swaps display rather than transitioning, so a transition on the
   answer never runs - it gets a one-shot animation on open instead. */
.v3-faq-a{overflow:hidden}
.v3-faq details[open] .v3-faq-a{animation:v3faq .34s cubic-bezier(.22,.61,.36,1)}
@keyframes v3faq{from{opacity:0;transform:translateY(-8px)}}

.v3-form{
  background:var(--ink);color:#eef1e6;padding:clamp(22px,2.3vw,30px);
  border-radius:14px;display:grid;gap:11px;position:sticky;top:20px;
  overflow:hidden;box-shadow:0 22px 50px rgba(14,16,11,.17);
}
/* the same 4px lime rule the closing CTA card carries, so the page's two
   cards read as a pair */
.v3-form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lime)}
.v3-form h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1;color:#fff;margin:4px 0 0}
.v3-form p{color:#aab39d;font-size:13.5px;line-height:1.5;margin:0}
.v3-form label{display:grid;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel-2)}
.v3-form input[type=text],.v3-form input[type=tel],.v3-form input[type=email]{width:100%;font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;color:#fff;background:var(--ink-3);border:1px solid #3a4130;border-radius:var(--radius-input);padding:9px 14px;height:auto;box-shadow:none}
.v3-form input:focus{border-color:var(--lime);outline:none}
.v3-form .v3-btn{justify-content:center;width:100%;margin-top:4px;font-size:15.5px;padding-block:12px}
.v3-form small{font-size:12px;color:#7f8873;text-align:center}

@media (max-width:1020px){
  .v3-sec-head,.v3-duo,.v3-end{grid-template-columns:1fr}
  /* once the six wrap onto two rows a single top rail only serves the first
     of them, and the nodes on row two would float with nothing to sit on.
     Each cell carries its own rail segment instead, and the arrowhead - which
     only means anything on one unbroken line - comes off. */
  .v3-flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px;border-top:0}
  .v3-flow::after{display:none}
  .v3-flow li{border-top:1px solid rgba(229,245,56,.34);padding-top:22px}
  .v3-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3-res:nth-child(2){border-right:0}
  .v3-res:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  /* not sticky at this width - but it must stay a containing block, or the
     lime ::before rule escapes to the body and paints across the page top */
  .v3-form{position:relative;top:auto}
}
@media (max-width:600px){
  .v3{font-size:16px}
  .v3-flow{grid-template-columns:1fr 1fr}
  .v3-results{grid-template-columns:1fr}
  .v3-res{border-right:0;border-bottom:1px solid var(--rule)}
  .v3-res:last-child{border-bottom:0}
  
  
  
  .v3-logos-row p{max-width:none}
  .v3-hero-cta .v3-btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .v3 *{animation:none!important;transition:none!important}
}

/* ============================================================================
 * INNER PAGES (About, Features, Pricing, Contact)
 * Added when the v3 system was extended beyond the homepage. Same tokens,
 * same 1020px / 600px breakpoints as the sections above.
 * ========================================================================== */

/* compact page header — the inner-page counterpart of .v3-hero */
.v3-pagehead{
  background:
    radial-gradient(820px 540px at 100% 30%, rgba(229,245,56,.34), transparent 66%),
    radial-gradient(460px 320px at 86% 98%, rgba(229,245,56,.18), transparent 70%),
    var(--paper);
  color:var(--ink);position:relative;overflow:hidden;
  padding-block:clamp(44px,6vw,80px);
  border-bottom:1px solid var(--rule);
}
.v3-pagehead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(14,16,11,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(14,16,11,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);pointer-events:none}
.v3-pagehead .v3-wrap{position:relative}
.v3-pagehead .v3-eyebrow{color:var(--steel);display:flex;align-items:center;gap:10px}
.v3-pagehead .v3-eyebrow::before{content:"";width:28px;height:2px;background:var(--olive)}
.v3-pagehead h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.45vw,64px);line-height:.9;margin:16px 0 18px;color:var(--ink);text-wrap:balance;max-width:20ch}
.v3-pagehead h1 mark{background:var(--lime);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.v3-pagehead p{font-size:clamp(16.5px,1.5vw,19px);color:var(--steel);max-width:58ch}
.v3-pagehead .v3-hero-cta{margin-top:26px}

/* stat strip */
.v3-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--rule);background:var(--card);border-radius:14px;overflow:hidden}
.v3-stats div{padding:24px 20px 22px;border-right:1px solid var(--rule)}
.v3-stats div:last-child{border-right:0}
.v3-stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.4vw,46px);line-height:.95;letter-spacing:-.015em;color:var(--olive);font-variant-numeric:tabular-nums}
.v3-stats span{display:block;margin-top:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel)}

/* generic card grid */
.v3-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.v3-card{background:var(--card);padding:26px 22px;display:grid;gap:9px;align-content:start}
.v3-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:19.5px;line-height:1.06;letter-spacing:-.01em}
.v3-card p{font-size:15px;color:var(--steel);line-height:1.55}
.v3-card .n{font-family:var(--mono);font-size:12.5px;color:var(--olive)}

/* timeline */
/* Reads as one rail with stations on it, the same language the homepage flow
   uses, rather than four columns under a stripe. The arrowhead closes it so
   the eye knows the story has reached the present. */
.v3-time{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:clamp(14px,1.8vw,30px);
  border-top:1px solid var(--rule);position:relative;
}
.v3-time::after{
  content:"";position:absolute;top:-5px;right:0;width:9px;height:9px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
  transform:rotate(45deg);
}
.v3-time li{position:relative;padding:26px 0 4px}
.v3-time li::after{
  content:"";position:absolute;top:-4.5px;left:0;
  width:9px;height:9px;border-radius:50%;background:var(--ink);
}
/* the present-day station is the one that should catch the eye */
.v3-time li.is-now::after{background:var(--lime);box-shadow:0 0 0 3px rgba(229,245,56,.3)}
.v3-time b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,2.1vw,30px);line-height:1;margin-bottom:10px;
  letter-spacing:-.015em;
}
.v3-time li.is-now b{color:var(--olive)}
.v3-time p{font-size:14.5px;color:var(--steel);line-height:1.55}

/* pricing plans */
.v3-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);align-items:stretch}
.v3-plan{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:clamp(24px,2.6vw,34px);display:grid;gap:13px;align-content:start;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.v3-plan:hover{border-color:var(--ink);box-shadow:0 16px 38px rgba(14,16,11,.09);transform:translateY(-3px)}
/* the action sits on the card's floor, so the three line up however long the
   bullet lists get */
.v3-plan .v3-btn{margin-top:auto}
.v3-plan h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1}
.v3-plan .seats{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.v3-plan .amt{font-family:var(--display);font-weight:800;font-size:clamp(48px,5vw,68px);line-height:.85;font-variant-numeric:tabular-nums}
.v3-plan .amt small{font-family:var(--body);font-weight:600;font-size:16px;color:var(--steel)}
.v3-plan ul{display:grid;gap:7px;font-size:15px;margin:2px 0 6px}
.v3-plan li::before{content:"✓  ";font-weight:700;color:var(--olive)}
.v3-plan .v3-btn{justify-content:center}
.v3-plan.is-featured{background:var(--lime);border-color:var(--lime)}
.v3-plan.is-featured .seats,.v3-plan.is-featured .amt small{color:#3d4400}
.v3-plan.is-featured li::before{color:var(--ink)}
.v3-plan .flag{position:absolute;top:-11px;left:clamp(24px,2.6vw,34px);background:var(--ink);color:var(--lime);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:40px}

/* contact */
.v3-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:start}
.v3-info{display:grid;gap:26px}
.v3-info dl{display:grid;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.v3-info dl:last-child{border-bottom:0;padding-bottom:0}
.v3-info dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.v3-info dd{margin:0;font-size:17px;font-weight:600;line-height:1.45}
.v3-info dd a:hover{border-bottom:2px solid var(--lime)}

/* shared closing CTA band */
.v3-cta{background:var(--lime);color:var(--ink);padding-block:clamp(30px,6vw,30px)}
.v3-cta .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center}
.v3-cta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.6vw,60px);line-height:.95;text-wrap:balance}
.v3-cta p{margin-top:12px;font-size:17px;max-width:54ch;color:#3d4400}
.v3-cta .v3-hero-cta{margin-top:0}

@media (max-width:1020px){
  .v3-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v3-stats div:nth-child(3n){border-right:0}
  .v3-stats div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .v3-time{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px;border-top:0}
  .v3-time::after{display:none}
  .v3-time li{border-top:1px solid var(--rule);padding-top:22px}
  .v3-plans{grid-template-columns:1fr;max-width:560px}
  .v3-contact{grid-template-columns:1fr}
  .v3-cta .inner{grid-template-columns:1fr}
}
@media (max-width:600px){
  .v3-stats{grid-template-columns:1fr 1fr}
  .v3-stats div:nth-child(odd){border-right:1px solid var(--rule)}
  .v3-stats div:nth-child(even){border-right:0}
  /* odd number of stats: let the last one span the row instead of leaving a gap */
  .v3-stats div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
  .v3-time{grid-template-columns:1fr}
  .v3-cta .v3-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- scroll reveal ----------
 * Guarded behind .v3-anim, which assets/modules/home/js/v3-reveal.js adds
 * (shared by every v3 page via partials/v3_head.php) only when there is JS
 * and the visitor has not asked for reduced motion. Without it nothing is
 * hidden, so the page is fully readable if the script never runs.
 */
.v3-anim .v3-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 70ms);
  will-change:opacity,transform;
}
.v3-anim .v3-reveal.is-in{opacity:1;transform:none;will-change:auto}

/* ---------- heading build ----------
 * The section head stops animating as a block and hands the motion to its
 * three parts, so the heading assembles: rule and eyebrow, then the
 * heading itself, then the lead. The h2 is given the longest travel
 * because it is the line the eye should follow.
 */
.v3-anim .v3-sec-head.v3-reveal{opacity:1;transform:none;transition:none}
.v3-anim .v3-sec-head.v3-reveal > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .66s cubic-bezier(.22,.61,.36,1),transform .66s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.v3-anim .v3-sec-head.v3-reveal > .v3-h2{transform:translateY(26px);transition-delay:100ms}
.v3-anim .v3-sec-head.v3-reveal > .v3-lead{transition-delay:210ms}
.v3-anim .v3-sec-head.v3-reveal.is-in > *{opacity:1;transform:none;will-change:auto}

@media (prefers-reduced-motion:reduce){
  /* no drifting cards, no reveal offset - everything simply sits still */
  .v3-appchip,.v3-apps-phones{animation:none!important}

  .v3-anim .v3-reveal,.v3-anim .v3-sec-head.v3-reveal > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- experts CTA ----------
 * Closing call to action. A full-bleed lime band with a scalloped edge was
 * too loud and made the stock photo look cheap; this is a contained card on
 * the page's own paper ground, matching the card language used by the
 * modules grid, the apps panel and the founder quote. The only lime is a
 * 4px rule across the top.
 */
.v3-experts-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 18px 44px rgba(14,16,11,.06);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,3vw,44px);align-items:end;
  padding:clamp(30px,4vw,54px) clamp(24px,3.4vw,54px) 0;
}
.v3-experts-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lime);
}
.v3-experts-copy{padding-bottom:clamp(30px,4vw,54px)}
.v3-experts .v3-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.v3-experts .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none}
.v3-experts h2{
  font-family:var(--display);font-weight:800;text-transform:capitalize;
  font-size:clamp(27px,3.2vw,42px);line-height:1.04;letter-spacing:-.008em;
  color:var(--ink);margin:0 0 14px;text-wrap:balance;max-width:19ch;
}
.v3-experts-sub{color:var(--steel);font-size:16px;line-height:1.55;max-width:46ch;margin:0 0 clamp(22px,2.8vw,30px)}
.v3-experts-cta{display:flex;gap:12px;flex-wrap:wrap}
.v3-btn-outline{border:2px solid var(--ink);color:var(--ink)!important;background:transparent}
.v3-btn-outline:hover{background:var(--ink);color:#fff!important}
/* the cutout stands on the card's bottom edge */
.v3-experts-img{display:block;width:100%;max-width:420px;height:auto;margin:0 0 0 auto;align-self:end}

@media (max-width:860px){
  .v3-experts-card{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .v3-experts-copy{padding-bottom:clamp(24px,3vw,34px)}
  .v3-experts-img{max-width:320px;margin-inline:auto}
}
@media (max-width:520px){
  .v3-experts-cta .v3-btn{flex:1 1 100%;justify-content:center}
}
/* ---------- watch in action ----------
 * Sits beside the founder quote. Deliberately not the old treatment (centred
 * heading over a full-bleed screenshot with a black play disc in the middle):
 * the copy is left-aligned above the frame and the play control is a lime
 * pill anchored to the frame's lower-left, so it reads as part of the page
 * rather than as a stock video thumbnail.
 */
.v3-watch{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
  box-shadow:0 18px 44px rgba(14,16,11,.05);
}
.v3-watch-h{
  font-family:var(--display);font-weight:800;text-transform:capitalize;
  font-size:clamp(24px,2.5vw,32px);line-height:1.05;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 10px;
}
.v3-watch-sub{color:var(--steel);font-size:15px;line-height:1.5;margin:0 0 20px;max-width:46ch}

/* the poster is a <button>, so it is keyboard reachable without a fake link */
.v3-watch-frame{
  position:relative;display:block;width:100%;margin-top:auto;padding:0;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:var(--paper);cursor:pointer;text-align:left;height:auto;
  transition:border-color .15s ease;
}
.v3-watch-frame:hover{border-color:var(--ink)}
.v3-watch-frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(62% 62% at 14% 86%, rgba(229,245,56,.38), transparent 70%),
    linear-gradient(180deg, rgba(14,16,11,.10), rgba(14,16,11,.30));
  opacity:0;transition:opacity .26s ease;
}
.v3-watch-frame:hover::before,
.v3-watch-frame:focus-visible::before{opacity:1}
.v3-watch-frame:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.v3-watch-frame img{display:block;width:100%;height:auto;aspect-ratio:1468/876;object-fit:cover;transition:filter .3s ease}
.v3-watch-frame:hover img,
.v3-watch-frame:focus-visible img{filter:grayscale(1) brightness(.84) contrast(1.06)}
.v3-watch-frame .play{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:var(--lime);color:var(--ink);
  box-shadow:0 0 0 5px rgba(255,255,255,.92), 0 10px 28px rgba(14,16,11,.34);
  transition:transform .2s ease, box-shadow .2s ease;
}
.v3-watch-frame .play svg{width:25px;height:25px;margin-left:3px;position:relative;z-index:1}
/* the halo: a ring that expands out of the button and fades, so the control
   advertises itself without anything moving on the poster behind it */
.v3-watch-frame .play::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--lime);
  animation:v3play 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes v3play{
  0%   {transform:scale(1);opacity:.7}
  70%  {transform:scale(1.9);opacity:0}
  100% {transform:scale(1.9);opacity:0}
}
.v3-watch-frame:hover .play{
  transform:scale(1.07);
  box-shadow:0 0 0 6px rgba(255,255,255,1), 0 14px 34px rgba(14,16,11,.42);
}
.v3-watch-frame .cap{z-index:2}
.v3-watch-frame .cap{
  position:absolute;left:90px;bottom:25px;
  display:inline-flex;align-items:center;
  padding:7px 13px;border-radius:40px;
  background:var(--ink);color:#e8ecdf;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  box-shadow:0 6px 18px rgba(14,16,11,.28);
}
.v3-watch-frame .cap b{font-weight:700;color:var(--lime)}
.v3-watch-frame .cap em{font-style:normal;margin-left:5px}
/* once played, the button is replaced by the iframe in the same box */
.v3-watch-embed{
  position:relative;width:100%;margin-top:auto;aspect-ratio:16/9;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#000;
}
.v3-watch-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:900px){
  .v3-duo{grid-template-columns:1fr}
}
@media (max-width:520px){
  .v3-watch-frame .play{width:50px;height:50px;left:12px;bottom:12px;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 8px 20px rgba(14,16,11,.34)}
  .v3-watch-frame .play svg{width:20px;height:20px}
  .v3-watch-frame .cap{left:72px;bottom:16px;font-size:9.5px;padding:6px 10px}
  /* the full caption is wider than the frame at this size */
  .v3-watch-frame .cap em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .v3-watch-frame:hover .play{transform:none}
  .v3-watch-frame .play::after{animation:none;opacity:0}
  .v3-watch-frame img{transition:none}
}

/* ============================================================================
 * HOMEPAGE BANNER
 *
 * The wash runs edge to edge: no inset, no border, no radius. The copy is
 * still aligned to the site container via --gut, but the screen carries on
 * past the right edge of the viewport instead of stopping at a panel border,
 * and .v3-hero's own overflow:hidden does the clipping.
 * ========================================================================== */
.v3b5{padding-block:0}
.v3b5-canvas{
  /* the site container is 1240 wide with a 26px gutter; this reproduces its
     left edge without nesting inside .v3-wrap, which is what was boxing the
     whole fold in and leaving dead paper down both sides */
  /* .v3-wrap is max-width:1240px with padding-inline:clamp(16px,4vw,40px);
     this reproduces its left edge exactly, so the copy lines up with the nav
     above it even though the wash runs full-bleed */
  --gut:calc(max(0px,(100% - 1240px) / 2) + clamp(16px,4vw,40px));
  --cgap:clamp(30px,4vw,74px);
  /* 12 columns from the gutter to the viewport edge. --col is one track,
     exported so the floating phone can start on a column line too
     instead of on a percentage of whatever its parent happens to be. */
  --col:calc((100% - var(--gut) - 11 * var(--cgap)) / 12);
  --row:8px;                      /* vertical baseline */
  position:relative;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--cgap);align-items:start;
  padding:calc(var(--row) * 11) 0 calc(var(--row) * 6) var(--gut);
  background:
    radial-gradient(1100px 620px at 4% -6%,rgba(229,245,56,.2),transparent 60%),
    radial-gradient(900px 640px at 86% 108%,rgba(86,96,0,.075),transparent 66%),
    linear-gradient(168deg,#fbfcf6,#f6f8ef 58%,#f0f3e7);
}
/* centred against the screen rather than starting level with its top: the
   screen stretches to the row, so this drops the copy to the middle of it */
.v3b5-copy{grid-column:1 / 6;grid-row:1;align-self:center;position:relative;z-index:3}

.v3b5-kicker{
  display:inline-block;margin:0 0 calc(var(--row) * 3);padding-bottom:9px;
  border-bottom:2px solid var(--lime);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);
}
.v3 .v3b5 h1{
  text-transform:none;font-weight:700;
  font-size:clamp(32px,4.45vw,64px);line-height:1.02;letter-spacing:-.032em;
  margin:0;max-width:14ch;text-align:left;
}
.v3b5-sub{margin:calc(var(--row) * 3) 0 0;font-size:clamp(16.5px,1.35vw,19px);color:var(--steel);max-width:40ch;line-height:1.55}

.v3b5-trial{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:calc(var(--row) * 4) 0 0;max-width:460px;padding:7px 7px 7px 20px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--rule);border-radius:999px;
  box-shadow:0 10px 26px -18px rgba(14,16,11,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.v3b5-trial:focus-within{border-color:var(--ink)}
/* style.css:4484 sets `input, button { height: 35px }` site-wide; both of
   these are taller, so the legacy rule has to be undone per control */
.v3b5-trial input[type=email]{
  flex:1 1 180px;min-width:0;height:auto;
  background:transparent;border:0;outline:0;box-shadow:none;
  font-family:var(--body);font-size:16px;color:var(--ink);padding:9px 0;
}
.v3b5-trial input[type=email]::placeholder{color:var(--steel-2)}
.v3b5-trial button{
  height:auto;flex:none;cursor:pointer;border:0;
  background:var(--ink);color:#fff;
  font-family:var(--body);font-weight:600;font-size:14.5px;line-height:1.1;
  padding:13px 24px;border-radius:999px;
  transition:background .18s ease,transform .18s ease;
}
.v3b5-trial button:hover{background:var(--olive);transform:translateY(-1px)}
/* the rotator, carried over from the old banner and re-aimed at this one */
/* the label sits ABOVE the phrase rather than beside it. Inline, the
   longest of the five ("Customer Relationship Management") needed 562px in
   a 480px column, so the row grew from one line to two as it typed and
   shunted the certifications down on every cycle. Stacked, the phrase gets
   the full column and always fits one line - nothing moves. */
.v3b5-copy .v3-solve{
  flex-direction:column;align-items:flex-start;justify-content:flex-start;
  margin:calc(var(--row) * 4) 0 0;gap:var(--row);
}
.v3b5-copy .v3-solve .lbl{font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--ink)}
.v3b5-copy .v3-solve .word{
  font-size:clamp(17px,1.8vw,22px);
  /* insurance only: if a longer phrase is ever added to the list, the
     highlight wraps as two clean blocks, not one box round both lines */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.v3b5-certs{display:flex;flex-wrap:wrap;gap:8px 22px;margin:calc(var(--row) * 3) 0 0}
.v3b5-certs span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-2);
}

/* --- the screen ---------------------------------------------------------- */
.v3b5-screen{
  grid-column:6 / -1;grid-row:1;align-self:stretch;
  position:relative;z-index:1;perspective:1800px;
  /* the column stops at the canvas edge; this carries the screen past the
     right of the viewport, where .v3-hero's overflow:hidden clips it */
  margin-right:calc(-1 * clamp(60px,9vw,200px));
}
.v3b5-shot{
  width:100%;display:block;border-radius:16px 0 0 16px;
  border:1px solid rgba(14,16,11,.1);border-right:0;
  /* HEIGHT, not scale. A transform grows the picture without growing the
     box, so a scaled screen ran straight over the figures row below it.
     Sizing by height and cropping keeps layout and paint the same shape,
     and keeps the banner the same height at every width. */
  /* the screen fills the row rather than setting its own height. The row is
     as tall as the copy, so the screen bottom and the copy bottom are the
     same line - which is what keeps the phone's overhang constant instead of
     swinging from 5px at 1900 to 185px at 1050. */
  height:100%;min-height:340px;object-fit:cover;object-position:left top;
  transform:rotateY(-13deg) rotateX(2.5deg);
  transform-origin:left center;
  box-shadow:-30px 50px 90px -44px rgba(14,16,11,.55);
}

/* --- floating module pins ------------------------------------------------
   They sit on the grid like everything else (columns 6-9, row 1) and are
   staggered down the left of the screen. pointer-events:none so they
   never swallow a click meant for the page. */
.v3b5-pins{
  grid-column:6 / 9;grid-row:1;align-self:stretch;
  position:relative;z-index:2;pointer-events:none;
  margin:0;padding:0;list-style:none;
}
.v3b5-pins li{
  position:absolute;display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px 11px 15px;white-space:nowrap;
  background:var(--lime);border:0;border-radius:999px;
  box-shadow:0 18px 36px -14px rgba(14,16,11,.55),0 0 0 1px rgba(14,16,11,.07);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);
  animation:v3b5drift 7s ease-in-out infinite;
}
/* ink dot now the lime is the ground */
.v3b5-pins li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ink);flex:none;
}
/* pulled off the screen's left edge onto the wash, by a fraction of the
   column gap so the clearance to the copy holds at every width */
.v3b5-pins li:nth-child(1){top:23%;left:calc(var(--cgap) * -.42)}
.v3b5-pins li:nth-child(2){top:49%;left:calc(var(--cgap) * .78);animation-delay:-2.3s}
.v3b5-pins li:nth-child(3){top:74%;left:calc(var(--cgap) * -.52);animation-delay:-4.6s}

@keyframes v3b5drift{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-10px)}
}

/* --- figures along the foot ---------------------------------------------- */
.v3b5-facts{
  grid-column:1 / -1;position:relative;z-index:3;
  display:flex;flex-wrap:wrap;gap:12px 46px;
  /* 9 rows, not 7: the screen is tilted, and a rotateX paints taller than
     its layout box, so the nominal gap is not the gap you see */
  margin:calc(var(--row) * 9) var(--gut) 0 0;padding-top:calc(var(--row) * 3);
  border-top:1px solid rgba(229,245,56,.34);
}
.v3b5-facts > div{display:flex;align-items:baseline;gap:9px}
.v3b5-facts dt{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.v3b5-facts dd{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

@media (prefers-reduced-motion:reduce){
  .v3b5-pins li{animation:none}
}

@media (max-width:1100px){
  .v3b5-canvas{--col:calc((100% - var(--gut) - 11 * var(--cgap)) / 12)}
  .v3b5-copy{grid-column:1 / 6}
  .v3b5-screen{grid-column:6 / -1}
  .v3b5-shot{transform:rotateY(-11deg) rotateX(2deg)}
}
@media (max-width:980px){
  /* the perspective reads as a mistake once the screen is small: it goes
     flat, drops under the words, and the floats come off */
  /* one column below this: the tracks collapse rather than being redrawn */
  .v3b5-canvas{grid-template-columns:1fr;row-gap:calc(var(--row) * 4);padding-right:var(--gut)}
  /* grid-row:1 is set on the copy, the screen and the pins so they share a
     row on desktop. It has to be released here or the single column stacks
     them all into row 1 and the screen paints straight over the headline. */
  .v3b5-copy,.v3b5-screen,.v3b5-facts{grid-column:1 / -1}
  .v3b5-copy,.v3b5-screen,.v3b5-pins{grid-row:auto}
  .v3b5-copy{max-width:none}
  .v3 .v3b5 h1{max-width:18ch}
  .v3b5-shot{
    transform:none;border-radius:16px;border-right:1px solid rgba(14,16,11,.1);
    box-shadow:0 24px 50px -30px rgba(14,16,11,.42);
    height:auto;object-fit:fill;
  }
  .v3b5-screen{margin-right:0}
  .v3b5-pins{display:none}
  .v3b5-facts{margin-right:0}
}
@media (max-width:620px){
  .v3 .v3b5 h1{font-size:clamp(29px,8.2vw,40px);max-width:none}
  .v3b5-trial{max-width:none;padding:6px 6px 6px 16px}
  .v3b5-trial button{width:100%;justify-content:center}
  .v3b5-facts{gap:10px 26px}
  .v3b5-facts dt{font-size:19px}
  /* at 17px the longest phrase came out 1px wider than a 390px column, so it
     wrapped for that one entry and jogged the layout mid-cycle */
  .v3b5-copy .v3-solve .word{font-size:16px}
  /* the whole 1387px dashboard is unreadable at ~350px wide, so on a phone
     it crops to the top left, where the figures are */
  .v3b5-shot{aspect-ratio:4/3.4;object-fit:cover;object-position:top left}
}


/* ---------- mobile corrections ----------
 * Found auditing the five v3 pages at 390px. Layout was already sound at that
 * width - no overflow, no clipping, no broken images - so these are the
 * touch-and-input problems that measuring the DOM does not surface until you
 * look for them specifically.
 */
@media (max-width:767px){
  /* iOS Safari ZOOMS the whole page when a focused field is under 16px, which
     threw the visitor out of the form on both the demo and the contact form.
     Every field was 15px. 16px is the threshold, not a preference. */
  .v3-form input[type=text],
  .v3-form input[type=tel],
  .v3-form input[type=email],
  .v3-form textarea,
  .v3-form select{font-size:16px}

  /* text links were 30px tall against a 44px touch target. The underline is
     the link's identity, so the padding goes above it, not around it. */
  .v3-link{padding-top:12px;padding-bottom:4px;margin-top:14px}

  /* the contact page's phone, email and WhatsApp are its primary actions and
     were the smallest targets on it at 22px */
  .v3-info dd{font-size:18px}
  .v3-info dd a{display:inline-block;padding-block:11px}
  .v3-info dl{gap:2px}

  /* 10.5px is below what a phone should be asked to carry */
  .v3b5-certs span{font-size:11.5px}
}


/* ---------- legacy <button> overrides ----------
 * style.css carries three GLOBAL element-level rules for <button>:
 *     button        { background-color:#428BCA }   (line ~4552)
 *     button        { background-color:#04AA6D }   (line ~11642)
 *     button:hover  { background-color:#3276B1; border-color:#285E8E }
 *     button:hover  { opacity:.8 }                 (line ~11660)
 * The :hover pair is specificity 0,1,1, which outranks every single-class
 * component rule in this file. That is why the video poster and the demo CTA
 * both turned Bootstrap blue and went translucent on hover - nothing in the
 * v3 design was ever blue.
 *
 * Fixing style.css itself would change ~143 legacy pages, so the reset is
 * scoped to .v3 and each component restates the hover it should have had.
 */
.v3 button:hover{opacity:1}
.v3 button.v3-btn-lime:hover{background-color:var(--lime);border-color:transparent}
.v3 button.v3-btn-dark:hover{background-color:var(--ink-3);border-color:transparent}
.v3 button.v3-btn-ghost:hover{background-color:transparent;border-color:var(--lime)}
.v3 button.v3-btn-outline:hover{background-color:var(--ink);border-color:var(--ink)}
.v3 button.v3-watch-frame:hover{background-color:var(--paper);border-color:var(--ink)}


/* ---------- About: page head ----------
 * The banner ran as one left column, so the right half of it was empty ink
 * for its whole height. It is a two-column composition now, with the
 * company's own registration facts filling that half.
 *
 * Everything here is scoped to .v3-pagehead-grid / -copy / -facts, which
 * exist only on About. The base .v3-pagehead rules are shared with Features,
 * Pricing and Contact and are deliberately left alone.
 */
.v3-pagehead-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.74fr);
  gap:clamp(30px,4.5vw,70px);align-items:end;
}
/* the heading no longer needs its own cap - the column is the constraint */
.v3-pagehead-grid h1{max-width:none;font-size:clamp(32px,4.45vw,64px)}
.v3-pagehead-grid .v3-pagehead-copy > p{max-width:48ch}

.v3-pagehead-facts{margin:0;display:grid;align-content:end}
.v3-pagehead-facts > div{padding:13px 0;border-top:1px solid var(--rule)}
.v3-pagehead-facts > div:first-child{border-top:2px solid var(--olive)}
.v3-pagehead-facts dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-2);margin:0 0 5px;
}
.v3-pagehead-facts dd{
  margin:0;font-size:15px;line-height:1.45;color:var(--ink);font-weight:600;
  text-wrap:pretty;
}

@media (max-width:900px){
  .v3-pagehead-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,38px);align-items:start}
  .v3-pagehead-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
}
@media (max-width:560px){
  .v3-pagehead-facts{grid-template-columns:1fr}
}


/* 5 -> 3 -> 2 -> 1, so a row never ends with a single stranded card */
@media (max-width:1180px){ .v3-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){  .v3-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){  .v3-cards{grid-template-columns:1fr} }


/* .v3-btn-outline is drawn for a light page; on the lime band the secondary
   action needs its own treatment or it reads as a second primary */
.v3-cta .v3-btn-outline{border-color:rgba(14,16,11,.55);color:var(--ink)!important;background:transparent}
.v3-cta .v3-btn-outline:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}


/* ---------- Features: the module accordion ----------
 * Lifted out of an inline <style> in features_v3.php, so it is cached with
 * the rest of the system instead of re-sent on every page view.
 *
 * The marker here was the SAME construction the homepage FAQ had - a "+"
 * glyph pinned at top:12px - which slides out of line the moment a module
 * name wraps. Drawn and centred on the row instead, exactly as the FAQ now
 * does it, so the two accordions on this site behave identically.
 */
/* Two INDEPENDENT columns, not a two-column grid of rows. As a grid, the two
   modules sharing a row shared a height, so opening one left 198px of empty
   page under the other with its hairline stranded at the bottom. Each column
   is its own stack now: opening a module pushes only the modules beneath it,
   and the other column never moves. */
.v3-modlist{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,3.4vw,56px);
  align-items:start;
}
.v3-modcol{border-top:1px solid var(--rule)}
.v3-mod{border-bottom:1px solid var(--rule)}
.v3-mod summary{
  list-style:none;cursor:pointer;position:relative;
  padding:19px 52px 19px 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,1.9vw,25px);line-height:1.08;letter-spacing:-.01em;
  transition:color .18s ease;
}
.v3-mod summary:hover{color:var(--olive)}
.v3-mod summary::-webkit-details-marker{display:none}
.v3-mod summary::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:center,center;
  background-size:10px 1.6px,1.6px 10px;background-color:transparent;
  transition:background-size .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease;
}
.v3-mod summary:hover::after{border-color:var(--ink)}
.v3-mod[open] summary::after{
  background-size:10px 1.6px,1.6px 0;
  background-color:var(--lime);border-color:var(--lime);
  transform:translateY(-50%) rotate(180deg);
}
/* the count is a quiet chip, not superscript hanging off the baseline */
.v3-mod summary .c{
  display:inline-block;vertical-align:middle;margin-left:9px;
  min-width:22px;padding:2px 7px;border-radius:999px;
  background:var(--paper);border:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.02em;color:var(--steel);text-transform:none;
}
.v3-mod[open] summary .c{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.v3-mod ul{display:grid;gap:8px;padding:0 0 22px;font-size:15px;color:var(--steel);line-height:1.5}
.v3-mod li::before{content:"\2014  ";color:var(--olive)}
/* <details> swaps display rather than transitioning, so this is a one-shot
   animation on open - the same handling the homepage FAQ needed */
.v3-mod-body{overflow:hidden}
.v3-mod[open] .v3-mod-body{animation:v3faq .34s cubic-bezier(.22,.61,.36,1)}

@media (max-width:1020px){
  .v3-modlist{grid-template-columns:1fr;gap:0}
}


/* ---------- About: lighter headings ----------
 * The section headings are 56px of 800-weight near-black; two of them plus
 * the stat strip made the middle of the page read heavy. Dropping the WEIGHT
 * and the size takes the mass out without touching the colour - a grey
 * heading would have cost contrast and weakened the hierarchy, which is not
 * what "lighter" should mean here.
 *
 * Scoped to .v3-about, which only this page carries. .v3-h2 is shared with
 * the homepage and is deliberately untouched there.
 */
.v3-about .v3-h2{
  font-weight:700;
  font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.015em;
  line-height:1.02;
}
.v3-about .v3-cta h2{
  font-weight:700;
  font-size:clamp(30px,3.8vw,48px);
  letter-spacing:-.012em;
}
/* the card titles sit under those, so they come down a notch too */
.v3-about .v3-card h3{font-weight:700}

/* Only one heading wrapped - "Where LastingERP runs today" needed 635px in
   a 591px column, 44px short - and "Why manufacturers pick us" cleared by
   just 8px, so it was one word away from the same break. Widening the
   heading column to 1.3fr gives 669px: every heading sits on one line with
   30px+ of slack, and the lead still has 515px, well past what its 62ch cap
   uses. Scoped to .v3-about; the homepage keeps 1.15fr. */
@media (min-width:1021px){
  .v3-about .v3-sec-head .v3-h2{max-width:9.8em}
}


/* ---------- About: the numbers, on one line ----------
 * All five figures read across in a single row, each number sitting on the
 * same baseline as its own label rather than stacked above it. No card and
 * no boxes - a hairline over and under, thin dividers between, so the band
 * stays light and the figures carry it.
 *
 * The journey section below keeps its rail, so the two still differ: this
 * one is a continuous line, that one is stations with text under them.
 */
@media (min-width:1021px){
  .v3-statsec .v3-stats{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:clamp(14px,1.6vw,28px);
    background:transparent;border:0;border-radius:0;overflow:visible;
    border-block:1px solid var(--rule);padding-block:22px;
  }
  .v3-statsec .v3-stats div{
    display:flex;align-items:baseline;gap:9px;
    flex:0 1 auto;min-width:0;padding:0;border:0;position:relative;
  }
  /* the divider is drawn between items, never before the first */
  .v3-statsec .v3-stats div + div::before{
    content:"";position:absolute;left:calc(clamp(14px,1.6vw,28px) / -2);
    top:.1em;bottom:-.25em;width:1px;background:var(--rule);
  }
  .v3-statsec .v3-stats b{
    font-size:clamp(26px,2.2vw,32px);line-height:1;white-space:nowrap;
  }
  .v3-statsec .v3-stats span{
    margin-top:0;font-size:11px;letter-spacing:.07em;line-height:1.25;
  }
}


/* ---------- About: the numbers band goes dark ----------
 * Requested as black. This is the one hard break in an otherwise light page,
 * so it has to stop cleanly rather than fade: full ink edge to edge, with a
 * single faint lime radial top-right for depth - the same idiom the nav and
 * the closing CTA already use, so the band belongs to the page.
 *
 * Every hairline switches to --rule-dark. --rule is a paper-grey and would
 * disappear on ink, taking the dividers between the five figures with it.
 */
.v3-statsec{
  background:
    radial-gradient(760px 420px at 92% 18%, rgba(229,245,56,.10), transparent 68%),
    var(--ink);
  color:#fff;position:relative;overflow:hidden;
}
.v3-about .v3-statsec .v3-h2{color:#fff}
.v3-about .v3-statsec .v3-eyebrow{color:var(--steel-2)}
.v3-about .v3-statsec .v3-lead{color:var(--steel-2);border-top-color:rgba(255,255,255,.22)}
.v3-about .v3-statsec .v3-stats{background:transparent;border-color:rgba(255,255,255,.22)}
.v3-about .v3-statsec .v3-stats div{border-color:rgba(255,255,255,.22)}
.v3-about .v3-statsec .v3-stats b{color:var(--lime)}
.v3-about .v3-statsec .v3-stats span{color:var(--steel-2)}
@media (min-width:1021px){
  .v3-about .v3-statsec .v3-stats{border-block-color:rgba(255,255,255,.22)}
  .v3-about .v3-statsec .v3-stats div + div::before{background:rgba(255,255,255,.22)}
}


/* ---------- About: why-us cards ----------
 * Three of the five titles run to two lines and two to one, so the body copy
 * started at a different height in every card and the row read ragged. The
 * title reserves two lines, which puts every paragraph on the same baseline.
 *
 * The index becomes the same chip the Features accordion uses for its counts,
 * and inverts on hover, so the two pages share one idiom.
 */
.v3-about .v3-card{position:relative;transition:background .2s ease}
.v3-about .v3-card:hover{background:var(--paper)}
.v3-about .v3-card h3{min-height:2.12em;display:flex;align-items:flex-start}
.v3-about .v3-card .n{
  display:inline-block;align-self:start;
  padding:3px 9px;border-radius:999px;
  background:var(--paper);border:1px solid var(--rule);
  font-size:11px;letter-spacing:.06em;color:var(--steel);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.v3-about .v3-card:hover .n{background:var(--ink);border-color:var(--ink);color:var(--lime)}
/* a lime edge that draws in on hover, so the row has somewhere to look */
.v3-about .v3-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.v3-about .v3-card:hover::after{transform:scaleX(1)}

/* ---------- the closing lime band ----------
 * Flat lime across its whole width read as a slab. The same radial idiom the
 * nav, the flow band and the page head use gives it depth without adding a
 * second colour - these are olive and ink at low alpha over the lime.
 */
.v3-cta{
  background:
    radial-gradient(880px 420px at 88% 18%, rgba(86,96,0,.16), transparent 68%),
    radial-gradient(620px 380px at 4% 92%, rgba(14,16,11,.10), transparent 70%),
    var(--lime);
  position:relative;overflow:hidden;
}
/* the same fine grid the page head carries, masked to the quiet corner */
.v3-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,16,11,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,16,11,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 62% 86% at 92% 26%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 62% 86% at 92% 26%,#000 18%,transparent 76%);
}
.v3-cta .inner{position:relative}


/* ---------- pricing plans ---------- */
/* the featured card should lead without shouting - it keeps the lime but
   gains the lift and the ink edge, and no longer hovers into a different
   border colour than its own fill */
.v3-plan.is-featured{box-shadow:0 18px 44px rgba(14,16,11,.14)}
.v3-plan.is-featured:hover{border-color:var(--ink);box-shadow:0 22px 52px rgba(14,16,11,.2)}
.v3-plan .amt{letter-spacing:-.02em}
/* the per-month note belongs on the figure's baseline, not floating after it */
.v3-plan .amt small{display:inline-block;margin-left:2px;letter-spacing:0}
.v3-plan ul{align-content:start}
.v3-plan li{line-height:1.45}
/* one link under the grid now, instead of the same one repeated in all three */
.v3-plans-foot{margin-top:clamp(22px,2.6vw,32px)}
.v3-plans-foot .v3-link{margin-top:0}


/* ---------- Features: the module index in the page head ----------
 * This was 22 inert chips, aria-hidden, naming the same 22 modules the
 * accordion names one screen below - a wall that restated the page's own
 * content and could not be acted on. The names are now LINKS that jump to
 * the module and open it, which is the one job a list of 22 things in a
 * banner can usefully do. aria-hidden is gone with the duplication: it is
 * navigation now, labelled as such.
 *
 * It reads as a panel rather than loose chips so the eye takes it as one
 * object and the h1 keeps the lead.
 *
 * Scoped to .v3-modtags, which only this page has.
 */
.v3-modtags{
  align-self:center;
  background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(18px,1.6vw,24px);
}
.v3-modtags-h{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);
}
.v3-modtags-h b{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.04em;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:999px;padding:2px 7px;
}
.v3-modtags-h + ul + .v3-modtags-h{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
}
.v3-modtags ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.v3-modtags a{
  display:block;text-decoration:none;
  font-family:var(--body);font-size:12.5px;font-weight:500;line-height:1;
  color:var(--ink);padding:7px 11px;border-radius:999px;
  border:1px solid var(--rule);background:var(--paper);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.v3-modtags a:hover,.v3-modtags a:focus-visible{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
/* the six apps are the shorter list, so they carry the lime */
.v3-modtags ul.is-apps a{
  background:var(--lime);border-color:rgba(14,16,11,.2);font-weight:600;
}
.v3-modtags ul.is-apps a:hover,.v3-modtags ul.is-apps a:focus-visible{
  background:var(--ink);border-color:var(--ink);color:#fff;
}

/* On one column the modules are immediately below the banner, so an index
   pointing at them would be a second copy of the page in the first screen. */
@media (max-width:1020px){
  .v3-modtags{display:none}
}


/* ---------- Contact: the details column ----------
 * It was a plain dt/dd list standing 244px shorter than the dark form beside
 * it, so the row ended lopsided. Each entry is a card now, with the same icon
 * language the homepage's "Reach a person" panel uses, and the column
 * stretches so the last card ends level with the form.
 */
.v3-contact{align-items:stretch}
.v3-info{display:flex;flex-direction:column;gap:12px}
.v3-info dl{
  display:grid;gap:6px;margin:0;padding:18px 20px;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  flex:1 1 auto;align-content:center;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.v3-info dl:last-child{border-bottom:1px solid var(--rule);padding-bottom:18px}
.v3-info dl:hover{border-color:var(--ink);box-shadow:0 10px 26px rgba(14,16,11,.07)}
.v3-info dt{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);
}
.v3-info dt .ic{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:rgba(229,245,56,.4);color:var(--olive);
}
.v3-info dt .ic svg{width:15px;height:15px;display:block}
.v3-info dd{margin:0;font-size:16.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.v3-info dd a{border-bottom:1px solid transparent;transition:border-color .18s ease}
.v3-info dd a:hover{border-bottom-color:var(--lime)}

@media (max-width:1020px){
  .v3-info dl{flex:0 0 auto;align-content:start}
}


/* ---------- page heads are light now ----------
 * .v3-btn-ghost is drawn for a dark surface - border #3b4230 and
 * color:#fff!important. On the light head that is white text on paper, the
 * same failure the closing CTA had when it fell outside .v3. It needs its own
 * treatment here, and the !important has to be matched to win.
 */
.v3-pagehead .v3-btn-ghost{border-color:rgba(14,16,11,.3);color:var(--ink)!important;background:transparent}
.v3-pagehead .v3-btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff!important}
/* the facts panel's label colour was tuned for ink */
.v3-pagehead-facts dt{color:var(--steel)}

/* ---------- Features: the six apps become cards ----------
 * The page was two identical accordions back to back - same section head,
 * same two-column hairline list - so sixteen desktop modules and six phone
 * apps read as one undifferentiated run of 22 rows. Six is a small enough
 * set to show as objects rather than as a list, which gives the lower half
 * of the page a second shape.
 *
 * Still <details>: every feature bullet stays in the HTML for search, and
 * the page still works with JavaScript off. Only the presentation changes.
 */
.v3-product .v3-modlist{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;border-top:0;align-items:start;
}
.v3-product .v3-mod{
  border:1px solid var(--rule);border-radius:14px;background:var(--paper);
  padding:0 18px;transition:border-color .18s ease,background .18s ease;
}
.v3-product .v3-mod:hover{border-color:rgba(14,16,11,.34)}
.v3-product .v3-mod[open]{border-color:var(--ink);background:var(--card)}
/* the name reserves two lines so the six closed cards sit level, and the
   marker centres on the box rather than on the first line */
.v3-product .v3-mod summary{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 9px;
  min-height:84px;padding:16px 42px 16px 0;
  font-size:clamp(17px,1.35vw,20px);
}
.v3-product .v3-mod summary .c{margin-left:0}
.v3-product .v3-mod ul{padding-bottom:18px}

@media (max-width:1020px){
  .v3-product .v3-modlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:700px){
  .v3-product .v3-modlist{grid-template-columns:1fr;gap:12px}
  .v3-product .v3-mod summary{min-height:0}
}

/* A jumped-to module must clear the sticky nav. This belongs in CSS, not in
   the click handler: the browser's own fragment navigation runs after any
   inline script and would undo a scroll position set in JS, but it obeys
   scroll-margin-top. --v3-nav-h is published by v3-header.js; the 95px
   fallback is the uncompacted height, so an early jump lands 8px low rather
   than under the bar. */
.v3-mod{scroll-margin-top:calc(var(--v3-nav-h, 95px) + 20px)}

/* Stacked, the second column's top hairline would double up with the last
   row's bottom hairline from the first. */
@media (max-width:1020px){
  .v3-modcol + .v3-modcol{border-top:0}
}